/* Global Styles */
* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    margin: 0; /* Remove default margin */
}

/* General styling for the overlay container */
.overlay-container {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space the boxes evenly */
    padding: 20px 15.5%; /* Padding for top and bottom */
    position: relative; /* Set relative positioning for the container */
    margin-top: -75px; /* Negative margin to pull the boxes up */
}

/* Styles for each overlay box */
.overlay-box {
    position: relative; /* Set to relative for original positioning */
    background-color: rgba(255, 255, 255, 0.9); /* White background with slight transparency */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Soft shadow for highlight */
    text-align: center;
    width: 25%; /* Width of the boxes */
    height: auto; /* Set height to auto for responsiveness */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden; /* Ensures the orange bar stays inside the box */
    margin: 0 5px; /* Margin between the boxes */
}

/* Overlay box hover effects */
.overlay-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 15%; /* Initially hidden */
    background-color: #FF8C00; /* Orange color */
    transition: height 0.3s ease; /* Animate height change on hover */
    z-index: -1;
}

.overlay-box:hover::before {
    height: 60px; /* Orange bar appears on hover */
}

.overlay-box:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); /* Increase shadow effect on hover */
    transform: translateY(-10px); /* Slight lift effect */
}

.image-container {
    display: flex;
    justify-content: center; /* Horizontally center the image */
    align-items: center;     /* Vertically center the image */
    height: 150px;           /* Set the height of the container */
    width: 100%;             /* Set the width of the container to 100% */
    max-width: 250px;       /* Limit max width of the image container */
    position: relative;      /* Ensure positioning for image centering */
}

.image-container img {
    max-width: 100%;         /* Make the image scale horizontally within the container */
    max-height: 100%;        /* Make the image scale vertically within the container */
    position: absolute;      /* Position the image absolutely */
    top: 50%;                /* Move the image to the center vertically */
    left: 50%;               /* Move the image to the center horizontally */
    transform: translate(-50%, -50%); /* Offset it by 50% to ensure it's fully centered */
    display: block;          /* Ensure there is no extra inline spacing */
}
    
.overlay-box p {
    margin: 0;
    font-size: 25px; /* Font size for important dates */
    color: #333; /* Default text color */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Change color to white on hover for all paragraphs */
.overlay-box:hover p {
    color: white; /* Change color to white on hover */
}

/* Specific hover effect for "Check Now", "Learn More", and "Read Now" texts */
.hover-effect {
    color: #333; /* Default text color */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Font weight */
    transition: color 0.3s ease; /* Smooth transition */
}

.overlay-box:hover .hover-effect {
    color: #FF8C00; /* Change color to orange on hover */
    cursor: pointer; /* Adds a pointer cursor */
}

/* Styles for bottom text */
.bottom-text {
    text-align: center; /* Center align text */
    margin-top: 10%; /* Space between overlay boxes and text */
}

.bottom-text h1 {
    font-size: 30px; /* Size of the heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 10px; /* Margin below the heading */
}

.bottom-text p {
    font-size: 15px; /* Font size for body text */
    color: #808080; /* Color code for body text */
    margin-top: 0; /* No margin above the paragraph */
}

/* Styles for images section */
.images-section {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between items */
    margin: 20px; /* Margin for the entire section */
    margin-top: 5%;
}

.image-item {
    text-align: center; /* Center align text */
    flex: 1; /* Make items take equal space */
    margin: 0 10px; /* Margin between image items */
}

.course-image {
    width: 100%; /* Set image size to fill the container */
    height: auto; /* Maintain aspect ratio */
    max-width: 250px; /* Set max width */
    transition: transform 0.2s ease; /* Smooth transition for size change */
}

.course-image:hover {
    transform: scale(1.05); /* Slight increase on hover */
}

/* Styles for image text */
.image-item h3 {
    font-size: 18px; /* Heading size */
    color: #333; /* Heading color */
    margin: 5px 0; /* Margin for heading */
}

.image-item p {
    font-size: 15px; /* Font size for body text */
    color: #808080; /* Color code for body text */
    margin: 0; /* No margin */
}