* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #e3f6be;
            color: #20322d;
            scroll-behavior: smooth;
        }

        /* MAIN HEADER (non-sticky, above sticky area) */
        .main-header {
            background: #0b2b26;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 16px 32px;
            border-bottom: 1px solid #2c5448;
            position: relative;
            z-index: 110;
        }

        .header-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .header-logo {
            font-size: 28px;
            font-weight: 800;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, #F9E6A3 0%, #FFD966 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: none;
        }

        .header-logo span {
            background: none;
            color: #FFD966;
            -webkit-background-clip: unset;
            background-clip: unset;
            font-weight: 800;
        }

        .header-tagline {
            font-size: 13px;
            color: #cfe6e0;
            margin-top: 6px;
            font-weight: 400;
        }

        .nav-links {
            text-align: right;
        }

        .nav-links a {
            color: #f5f0e0;
            text-decoration: none;
            margin-left: 28px;
            font-weight: 500;
            font-size: 16px;
            transition: 0.2s;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
        }

        .nav-links a:hover {
            border-bottom-color: #FFD966;
            color: #FFE8A3;
        }

        /* STICKY WRAPPER — Hero + search bar become fixed on scroll */
        /* This is the "stable part" that gets the background image with RIGHT-TO-LEFT transparency */
        .sticky-hero-section {
            position: sticky;
            height: 200px;
            top: 0;
            z-index: 100;
            background: #ffffff;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
            border-bottom: 1px solid #e2ece8;
            /* Background image from the simulation photo */
            background-image: url('mba.png');
            background-size: cover;
            background-position: center 30%;
            background-repeat: no-repeat;
            position: relative;
        }
        
        /* Pseudo-element creates RIGHT-TO-LEFT transparency gradient: 
           right side is fully transparent (image fully visible), 
           left side becomes more opaque white so image fades out from right to left.
           Transparency INCREASES from left to right? Actually gradient goes from opaque left -> transparent right,
           meaning image is most visible on right side, fades toward left.
        */
        .sticky-hero-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Gradient direction: to left means from right to left */
            /* At right edge (0%): fully transparent (image shows clearly) */
            /* At left edge (100%): nearly white/opaque overlay to fade background */
            background: linear-gradient(to left, 
                        rgba(255, 255, 255, 0) 0%,       /* right side: completely transparent -> image vibrant */
                        rgba(255, 255, 240, 0.65) 55%,   
                        rgba(255, 255, 250, 0.92) 100%  /* left side: high opacity, image barely visible */);
            pointer-events: none;
            z-index: 1;
        }
        
        /* Ensure content inside sticky-hero-section sits above the gradient overlay */
        .sticky-hero-section .hero,
        .sticky-hero-section .search-container {
            position: relative;
            z-index: 2;
        }
        
        .hero {
            background: transparent;
            padding: 24px 32px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .hero-box {
            max-width: 1100px;
        }

        .hero-title {
            font-size: 1.9rem;
            font-weight: 800;
            color: #093328;
            line-height: 1.2;
            margin-bottom: 12px;
            letter-spacing: -0.3px;
            text-shadow: 0 1px 3px rgba(255,250,210,0.7);
        }

        .hero-text {
            font-size: 1rem;
            color: #09110f;
            line-height: 1.5;
            max-width: 85%;
            margin-bottom: 14px;
            font-weight: 500;
            background: rgba(255,253,235,0.7);
            display: inline-block;
            padding: 4px 14px;
            border-radius: 40px;
            backdrop-filter: blur(2px);
        }

        .hero-badge {
            background: rgba(238, 244, 241, 0.85);
            padding: 8px 16px;
            border-radius: 60px;
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 500;
            color: #0f5e4c;
            backdrop-filter: blur(2px);
        }
        
        .description {
            box-shadow: 0 0 0 3px rgba(46, 122, 100, 0.2);
            flex: none;
            background-color: rgb(190, 227, 222);
            font-size: 20px;
            border-radius: 15px;
            width: 80%;
            margin-left: 60px;
            margin-top: 20px;
            margin-bottom: 10px;
            padding: 12px 20px;
        }

        .search-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 32px 20px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            background: transparent;
        }

        #searchInput {
            padding: 14px 20px;
            border-radius: 60px;
            border: 1.5px solid #dde6e2;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.9);
            transition: 0.2s;
            font-family: 'Inter', sans-serif;
            width: 800px;
            backdrop-filter: blur(2px);
        }

        #searchInput:focus {
            outline: none;
            border-color: #2e7a64;
            box-shadow: 0 0 0 3px rgba(46, 122, 100, 0.2);
            background: #ffffff;
        }

        #searchBtn {
            background: #1d6e5c;
            border: none;
            padding: 0 32px;
            border-radius: 60px;
            color: white;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: 0.2s;
            font-family: 'Inter', sans-serif;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        #searchBtn:hover {
            background: #0c5243;
            transform: scale(0.97);
        }

        .w-90 {
            max-width: 1400px;
            margin: 48px auto 0;
            padding: 0 32px;
        }

        .section-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 28px;
            color: #1c4e43;
            letter-spacing: -0.3px;
            border-left: 6px solid #f4c542;
            padding-left: 20px;
        }

        .ecosystem-row {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: space-between;
        }

        .ecosystem-card {
            flex: 1;
            min-width: 230px;
            background: white;
            border-radius: 28px;
            padding: 28px 20px;
            transition: all 0.25s ease;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.03);
            border: 1px solid #e0eae5;
            cursor: pointer;
            text-decoration: none;
            display: block;
            
        }

        a.ecosystem-card {
            text-decoration: none;
            color: inherit;
        }

        .ecosystem-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.12);
            border-color: #cfdec8;
        }

        .card-title {
            font-size: 60px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #1d4e43;
        }

        .card-text {
            color: #3e5a52;
            line-height: 1.45;
            font-size: 0.95rem;
        }

        .why-box {
            max-width: 1400px;
            margin: 48px auto 20px;
            padding: 28px 32px;
            background: linear-gradient(115deg, #fef8e7, #ffffff);
            border-radius: 36px;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.02);
            border: 1px solid #f0e5cf;
        }

        .why-title {
            font-size: 26px;
            font-weight: 700;
            color: #0a453a;
        }

        .footer {
            background: #0c2c26;
            margin-top: 56px;
            padding: 32px 32px;
            text-align: center;
            color: #cddfd9;
            font-size: 0.85rem;
            border-top-left-radius: 28px;
            border-top-right-radius: 28px;
        }

        .video-lessons-strip {
            max-width: 1400px;
            margin: 40px auto 20px;
            padding: 0 32px;
        }

        .video-links-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 16px;
            align-items: center;
        }

        .video-link-button {
            background: #f1f6f3;
            padding: 12px 24px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            color: #1a5e4f;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #daebe4;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }

        .video-link-button:hover {
            background: #e7f0ec;
            transform: translateY(-2px);
            border-color: #bdd9cf;
            box-shadow: 0 6px 12px rgba(0,0,0,0.05);
            color: #0a473b;
        }

        .section-sub {
            font-size: 1rem;
            font-weight: 500;
            color: #2e6e5e;
            margin-bottom: 8px;
            display: block;
        }

        @media (max-width: 800px) {
            .hero-title { font-size: 1.6rem; }
            .hero-text { max-width: 100%; }
            .header-container { flex-direction: column; align-items: start; gap: 10px; }
            .nav-links { text-align: left; margin-top: 6px; }
            .nav-links a { margin-left: 0; margin-right: 20px; }
            .section-title { font-size: 24px; }
            .video-links-grid { justify-content: center; }
            #searchInput { width: 100%; }
        }* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f6f9fc;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* dummy page content to show footer at bottom */
        .demo-content {
            flex: 1;
            padding: 60px 40px;
            text-align: center;
            background: linear-gradient(145deg, #ffffff 0%, #f0f4f9 100%);
        }
        .demo-content h1 {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e2b3c, #2c5f4a);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 12px;
        }
        .demo-content p {
            color: #4a5b6e;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.5;
        }

        /* ---------- FOOTER STYLES (fully responsive, modern, based on the content structure) ---------- */
        .alison-footer {
            background: #0c1c28;   /* deep navy-blue/teal base */
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
            padding: 56px 36px 32px 36px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* main grid: 5 columns on desktop */
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 32px 40px;
            margin-bottom: 48px;
        }

        .footer-col h3 {
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #f5c542;   /* warm gold accent */
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        .footer-col h3:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 32px;
            height: 2px;
            background: #f5c542;
            border-radius: 2px;
        }

        .footer-col ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer-col li {
            margin-bottom: 12px;
            font-size: 0.85rem;
            line-height: 1.4;
            transition: transform 0.2s ease;
        }

        .footer-col a {
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.2s;
            display: inline-block;
        }

        .footer-col a:hover {
            color: #f5c542;
            transform: translateX(3px);
        }

        /* special styling for "CERTIFIED COURSES" and categories */
        .certified-badge {
            font-weight: 600;
            color: #e9c46a;
            font-size: 0.8rem;
            display: inline-block;
            margin-bottom: 4px;
        }

        /* bottom bar */
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 28px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            font-size: 0.8rem;
            color: #94a3b8;
        }
        .social-links {
            display: flex;
            gap: 20px;
        }
        .social-links a {
            color: #94a3b8;
            font-size: 1.2rem;
            transition: 0.2s;
        }
        .social-links a:hover {
            color: #f5c542;
            transform: translateY(-2px);
        }
        .copyright {
            font-size: 0.75rem;
        }

        /* responsive adjustments */
        @media (max-width: 768px) {
            .alison-footer {
                padding: 40px 24px 28px;
            }
            .footer-grid {
                gap: 28px;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        /* some inline icons for better visuals */
        .footer-col li i {
            width: 18px;
            font-size: 0.75rem;
            margin-right: 8px;
            color: #f5c542;
            opacity: 0.8;
        }
        
        hr {
            margin: 10px 0;
            border-color: rgba(255,255,255,0.05);
        }
        .libr{
    width: 100%;
    height: 300px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    color: white;
    padding: 20px;
}

/* BACKGROUND IMAGE */
.libr::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("book.png");
    background-size: cover;
    background-position: center;

    opacity: 0.5;   /* only image becomes transparent */

    z-index: 1;
}

/* TEXT CONTENT */
.libr-content{
    position: relative;
    z-index: 2;   /* text stays above image */
}
/* Make the link wrapper behave like a block element */
.ecosystem-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Optional: Add hover effect for better UX */
.ecosystem-card-link:hover {
    transform: translateY(-5px);
}

.ecosystem-card-link:hover .ecosystem-card {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    border-color: #e6b422;
}

/* Ensure the card itself maintains its styling */
.ecosystem-card {
    background: white;
    border-radius: 24px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    height: 100%;
    border: 1px solid #e2ece8;
    /* Your existing card styles */
}

/* Remove any default link underline on child elements */
.ecosystem-card-link .card-title,
.ecosystem-card-link .card-text {
    text-decoration: none;
}
/* Global reset for the specific card links */
a[href="library.html"] {
    text-decoration: none;
    color: inherit;
    display: block;
}