/* Basic Reset & Body Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        
        /* Styling humburger menu */

        /* Header & Navigation (MODIFIED) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Needed for absolute positioning of mobile menu */
}

.nav-links {
    list-style: none;
    display: flex; /* Default for desktop */
    margin: 0; /* Override default list margin */
    padding: 0; /* Override default list padding */
    transition: max-height 0.3s ease-out; /* Smooth transition for mobile menu */
}

.nav-links li {
    margin-left: 25px;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: color 0.3s ease;
    padding: 5px 0; /* Add padding for click area */
    display: block; /* Make links fill their space */
}

/* Hamburger Menu Icon (NEW) */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above other elements */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Hamburger X-State (NEW) */
.hamburger-menu.is-active .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.hamburger-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Responsive Adjustments (MODIFIED - for mobile navigation) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: row; /* Keep logo and hamburger on same row */
        justify-content: space-between; /* Push them to ends */
    }

    .logo {
        margin-bottom: 0; /* Reset margin */
    }

    .hamburger-menu {
        display: flex; /* Show hamburger icon on mobile */
    }

    .nav-links {
        /* Hidden by default on mobile */
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 100%; /* Position below the header */
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: #2c3e50; /* Same as header background */
        box-shadow: 0 5px 5px rgba(0,0,0,0.2);
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    /* When menu is active (NEW) */
    .nav-links.active {
        max-height: 300px; /* Adjust based on number of items; ensures it's tall enough to show all */
        transition: max-height 0.5s ease-in-out; /* Smooth transition when opening */
    }

    .nav-links li {
        margin: 0; /* Reset desktop margin */
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Subtle separator */
    }

    .nav-links li:last-child {
        border-bottom: none; /* No border on last item */
    }

    .nav-links a {
        padding: 15px 20px; /* More padding for touch targets */
        text-align: center;
    }
}



        /* Styling for the new Offerings Grid Section */
.offerings-grid {
    display: grid;
    /* This creates a responsive grid: 
       columns will be at least 300px wide, 
       and it will fit as many as possible per row */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Space between the blocks */
    margin-top: 50px; /* Space below the section heading */
}

.course-block {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: hidden; /* Ensures image and overlay stay within rounded corners */
    position: relative; /* Needed for absolute positioning of overlay/title */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center; /* Center the content inside the block */
    display: flex; /* Use flexbox for content arrangement */
    flex-direction: column;
}

/* Image and Overlay styles (no changes needed here from last version) */
.course-block img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block; /* Removes extra space below image */
    transition: transform 0.3s ease; /* Smooth zoom on hover */
}

/* Overlay for text readability on image (no changes needed here from last version) */
.block-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Same height as image */
    background: rgba(0,0,0,0.3); /* Initial subtle overlay */
    z-index: 2; /* Place overlay above image */
    transition: background 0.3s ease; /* Smooth background change on hover */
}

/* Content (text) within the block - MODIFIED */
.course-block .block-content {
    padding: 20px;
    position: absolute; /* Position content over image area */
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%); /* Keep content centered vertically */
    z-index: 3; /* Place content above overlay */
    color: #fff; /* White text for visibility */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    /* No opacity/visibility here anymore, as the name is always visible */
}

/* Styling for the big name (h3) - NEW/MODIFIED */
.course-block .block-content h3 {
    font-family: 'Merriweather', serif;
    font-size: 2.2rem; /* Big name shown on the top */
    margin-bottom: 10px;
    color: #fff; /* Ensure heading color is white */
    /* Always visible, so no initial hidden state */
}

/* Styling for the description paragraph (p) - NEW/MODIFIED */
.course-block .block-content p {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 90%; /* Limit paragraph width */
    margin: 0 auto;
    color: #f0f0f0; /* Slightly off-white for description */

    /* --- NEW/MODIFIED: Initially hidden with transition --- */
    opacity: 0;
    visibility: hidden; /* Hide element for screen readers when not visible */
    transform: translateY(10px); /* Start slightly below its final position */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}


/* Hover effects for the course-block */
.course-block:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

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

.course-block:hover .block-overlay {
    background: rgba(0,0,0,0.7); /* Darken overlay significantly on hover */
}

/* --- NEW/MODIFIED: Show only the paragraph on hover --- */
.course-block:hover .block-content p {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Slide up to its final position */
}


/* Responsive adjustments for the grid (Keep these as they were) */
@media (max-width: 600px) {
    .offerings-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .course-block .block-content h3 {
        font-size: 1.8rem;
    }
    .course-block img,
    .block-overlay {
        height: 180px;
    }
    /* On mobile, if you want description always visible, you'd add:
       .course-block .block-content p {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
       }
    */
}



        body {
            font-family: 'Open Sans', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
            scroll-behavior: smooth; /* Smooth scrolling for anchor links */
        }

        /* Container for content width */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header & Navigation */
        .header {
            background: #2c3e50; /* Dark blue/grey */
            color: #fff;
            padding: 1rem 0;
            position: sticky; /* Makes header stick to top */
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Merriweather', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: #ecf0f1; /* Light grey */
            text-decoration: none;
        }

        .nav-links {
            list-style: none;
            display: flex;
        }

        .nav-links li {
            margin-left: 25px;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.05rem;
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: #3498db; /* Bright blue */
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1500x800/2980b9/ffffff?text=Alhikma+Academy+Banner') no-repeat center center/cover; /* Placeholder background image */
            color: #fff;
            text-align: center;
            padding: 100px 20px;
            min-height: 70vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .hero h1 {
            font-family: 'Merriweather', serif;
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        }

        .hero p {
            font-size: 1.5rem;
            max-width: 800px;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }

        /* General Section Styling */
        section {
            padding: 80px 0;
            text-align: center;
        }

        section:nth-of-type(even) {
            background-color: #ecf0f1; /* Light grey for alternating sections */
        }

        section h2 {
            font-family: 'Merriweather', serif;
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 40px;
            position: relative;
            display: inline-block; /* To center the pseudo-element underline */
        }

        section h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background-color: #3498db;
            margin: 10px auto 0;
            border-radius: 2px;
        }

        .section-content {
            font-size: 1.1rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
        }

        /* Contact Section Specifics */
        .contact-info p {
            margin-bottom: 15px;
            font-size: 1.1rem;
        }

        .contact-info a {
            color: #3498db;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .contact-info a:hover {
            color: #2980b9;
        }

        /* Footer */
        .footer {
            background: #34495e; /* Slightly lighter dark blue */
            color: #fff;
            text-align: center;
            padding: 30px 0;
            font-size: 0.9rem;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .logo {
                margin-bottom: 15px;
            }

            .nav-links {
                flex-direction: column;
                width: 100%;
                text-align: center;
            }

            .nav-links li {
                margin: 0 0 10px 0;
                width: 100%;
            }

            .nav-links a {
                display: block; /* Make links full width */
                padding: 10px 0;
                background-color: rgba(255,255,255,0.1);
                border-radius: 5px;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero p {
                font-size: 1.2rem;
            }

            section {
                padding: 60px 0;
            }

            section h2 {
                font-size: 2rem;
            }

            .section-content {
                padding: 0 15px; /* Add horizontal padding for small screens */
            }
        }

        @media (max-width: 480px) {
            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }
        }