/*==================================================
    LITTLE EXPLORERS LEARNING HUB
    ABOUT PAGE STYLESHEET
==================================================*/

/*==================================================
    CSS VARIABLES
==================================================*/

:root{

    --primary:#4d7c59;
    --primary-dark:#355e3b;
    --primary-light:#eaf5ec;

    --secondary:#d8b56a;
    --secondary-dark:#b8934a;

    --accent:#6f9fb5;

    --text:#2d2d2d;
    --text-light:#5e6470;
    --heading:#1f2933;

    --white:#ffffff;
    --off-white:#fcfcfa;
    --background:#f7f8f6;
    --border:#e6ebe7;

    --shadow-sm:0 8px 20px rgba(0,0,0,.06);
    --shadow-md:0 15px 35px rgba(0,0,0,.10);
    --shadow-lg:0 30px 70px rgba(0,0,0,.14);

    --radius-sm:12px;
    --radius-md:22px;
    --radius-lg:34px;

    --transition:.35s ease;

    --container:1280px;

}

/*==================================================
    RESET
==================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;
    font-size:1rem;
    line-height:1.8;

    color:var(--text);

    background:var(--background);

    overflow-x:hidden;

}

img{

    display:block;
    width:100%;
    height:auto;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    font:inherit;
    cursor:pointer;
    border:none;
    background:none;

}

ul{

    list-style:none;

}

/*==================================================
    TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4{

    font-family:"Nunito",sans-serif;
    color:var(--heading);
    line-height:1.2;

}

h1{

    font-size:clamp(2.8rem,5vw,4.7rem);

}

h2{

    font-size:clamp(2rem,4vw,3.2rem);

}

h3{

    font-size:1.45rem;

}

p{

    color:var(--text-light);

}

.section-heading{

    max-width:760px;
    margin:0 auto 4rem;
    text-align:center;

}

.section-heading span{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:1rem;

}

.section-tag{

    display:inline-flex;

    padding:.55rem 1rem;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary);

    font-weight:700;

    margin-bottom:1.25rem;

}

/*==================================================
    LAYOUT
==================================================*/

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

section{

    position:relative;

    padding:7rem 0;

}

/*==================================================
    BUTTONS
==================================================*/

.btn{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    gap:.6rem;

    padding:1rem 2rem;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-secondary:hover{

    background:var(--primary-light);

    transform:translateY(-4px);

}

/*==================================================
    HEADER
==================================================*/

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border);

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:88px;

    position:relative;

}

/*==================================================
    LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:1rem;

    flex-shrink:0;

}

.logo img{

    width:60px;

}

.logo-text h1{

    font-size:1.3rem;

    margin:0;

}

.logo-text span{

    display:block;

    color:var(--primary);

    font-weight:700;

    font-size:.9rem;

}

/*==================================================
    NAVIGATION
==================================================*/

.main-nav{

    margin-left:auto;

}

.main-nav ul{

    display:flex;

    align-items:center;

    gap:2rem;

}

.main-nav a{

    position:relative;

    font-weight:600;

    transition:var(--transition);

}

.main-nav a:hover,
.main-nav a.active{

    color:var(--primary);

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:3px;

    border-radius:999px;

    background:var(--primary);

    transition:width .3s ease;

}

.main-nav a:hover::after,
.main-nav a.active::after{

    width:100%;

}

/*==================================================
    HEADER ACTIONS
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-left:2rem;

}

.search-toggle{

    width:46px;
    height:46px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    transition:var(--transition);

}

.search-toggle:hover{

    background:var(--primary);

    color:#fff;

}

.mobile-menu{

    display:none;

    width:48px;
    height:48px;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    color:var(--primary);

    font-size:1.45rem;

    transition:var(--transition);

}

.mobile-menu:hover{

    background:var(--primary-light);

}

/*==================================================
    HERO
==================================================*/

.about-hero{

    background:linear-gradient(
        180deg,
        #ffffff,
        #f4f8f4
    );

    overflow:hidden;

}

.about-hero-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    align-items:center;

    gap:5rem;

}

.hero-eyebrow{

    display:inline-flex;

    padding:.55rem 1rem;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary);

    font-weight:700;

    margin-bottom:1.5rem;

}

.hero-content h1{

    margin-bottom:1.5rem;

}

.hero-content p{

    max-width:620px;

    font-size:1.1rem;

    margin-bottom:2rem;

}

.hero-actions{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

    margin-bottom:2.5rem;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:1.5rem;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:.6rem;

    font-weight:600;

}

.hero-features i{

    color:var(--primary);

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}

.floating-card{

    position:absolute;

    width:230px;

    background:#fff;

    border-radius:22px;

    padding:1.5rem;

    box-shadow:var(--shadow-md);

}

.card-one{

    top:8%;

    left:-35px;

}

.card-two{

    right:-35px;

    bottom:8%;

}

.floating-card i{

    color:var(--secondary);

    font-size:1.6rem;

    margin-bottom:.8rem;

}

.floating-card h4{

    margin-bottom:.5rem;

}

/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .mobile-menu{

        display:flex;

    }

    .main-nav{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#fff;

        border-top:1px solid var(--border);

        box-shadow:var(--shadow-md);

        display:none;

    }

    .main-nav.active{

        display:block;

    }

    .main-nav ul{

        flex-direction:column;

        gap:0;

        padding:1rem 0;

    }

    .main-nav li{

        width:100%;

    }

    .main-nav a{

        display:block;

        padding:1rem 2rem;

    }

    .main-nav a::after{

        display:none;

    }

    .about-hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content p{

        margin-inline:auto;

    }

    .hero-actions,
    .hero-features{

        justify-content:center;

    }

    .floating-card{

        display:none;

    }

}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    section{

        padding:5rem 0;

    }

    .header-actions{

        margin-left:1rem;

    }

    .hero-actions{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

}

/*==================================================
    SMALL PHONES
==================================================*/

@media (max-width:480px){

    .logo img{

        width:48px;

    }

    .logo-text h1{

        font-size:1rem;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

}

/*==================================================
    OUR STORY
==================================================*/

.our-story{

    background:var(--white);

}

.story-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:5rem;

    align-items:center;

}

.story-image{

    position:relative;

}

.story-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

    transition:transform .4s ease;

}

.story-image:hover img{

    transform:scale(1.02);

}

.story-content h3{

    margin-bottom:1.5rem;

    font-size:2rem;

}

.story-content p{

    margin-bottom:1.5rem;

}

.story-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1.5rem;

    margin-top:2rem;

}

.highlight-box{

    background:#fff;

    padding:2rem;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.highlight-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.highlight-box i{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.highlight-box h4{

    margin-bottom:.75rem;

}

/*==================================================
    MISSION
==================================================*/

.mission-section{

    background:linear-gradient(
        180deg,
        #f7faf8,
        #eef6f0
    );

}

.mission-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.mission-card{

    background:#fff;

    padding:3rem 2.5rem;

    border-radius:var(--radius-lg);

    border:1px solid var(--border);

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.mission-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.mission-icon{

    width:90px;

    height:90px;

    margin:0 auto 1.5rem;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary-light);

    font-size:2.5rem;

}

.mission-card h3{

    margin-bottom:1rem;

}

.values-list{

    margin-top:1.5rem;

    display:grid;

    gap:.75rem;

}

.values-list li{

    font-weight:600;

    color:var(--text-light);

}

/*==================================================
    TIMELINE
==================================================*/

.timeline-section{

    background:var(--white);

}

.timeline{

    position:relative;

    max-width:900px;

    margin:0 auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:30px;

    top:0;

    bottom:0;

    width:4px;

    border-radius:999px;

    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );

}

.timeline-item{

    position:relative;

    display:flex;

    gap:2rem;

    margin-bottom:3rem;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-dot{

    width:64px;

    height:64px;

    border-radius:50%;

    background:#fff;

    border:6px solid var(--primary);

    flex-shrink:0;

    z-index:2;

    box-shadow:var(--shadow-sm);

}

.timeline-content{

    flex:1;

    background:#fff;

    padding:2rem;

    border-radius:var(--radius-md);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.timeline-content:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-md);

}

.timeline-content h3{

    margin-bottom:1rem;

}

/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:992px){

    .story-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .mission-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .story-content{

        text-align:center;

    }

    .story-highlights{

        grid-template-columns:1fr;

    }

    .timeline::before{

        left:20px;

    }

    .timeline-item{

        gap:1rem;

    }

    .timeline-dot{

        width:42px;

        height:42px;

        border-width:4px;

    }

    .timeline-content{

        padding:1.5rem;

    }

}

@media (max-width:480px){

    .highlight-box{

        padding:1.5rem;

    }

    .mission-card{

        padding:2rem;

    }

    .timeline-content{

        padding:1.25rem;

    }

}

/*==================================================
    PURPOSE
==================================================*/

.purpose-section{

    background:linear-gradient(
        180deg,
        #ffffff,
        #f7faf8
    );

}

.purpose-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:4rem;

    align-items:center;

}

.purpose-content h2{

    margin-bottom:1.5rem;

}

.purpose-content p{

    margin-bottom:1.5rem;

}

.purpose-list{

    display:grid;

    gap:1rem;

    margin-top:2rem;

}

.purpose-list li{

    display:flex;

    align-items:flex-start;

    gap:1rem;

}

.purpose-list i{

    color:var(--primary);

    font-size:1.2rem;

    margin-top:.25rem;

}

.purpose-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}

/*==================================================
    TEACHING PHILOSOPHY
==================================================*/

.philosophy-section{

    background:var(--off-white);

}

.philosophy-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.philosophy-card{

    background:#fff;

    padding:2.5rem;

    border-radius:var(--radius-lg);

    border:1px solid var(--border);

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.philosophy-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.philosophy-card i{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 1.5rem;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    font-size:2rem;

}

.philosophy-card h3{

    margin-bottom:1rem;

}

/*==================================================
    MEET THE CREATOR
==================================================*/

.creator-section{

    background:#ffffff;

}

.creator-grid{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:4rem;

    align-items:center;

}

.creator-photo{

    text-align:center;

}

.creator-photo img{

    border-radius:30px;

    box-shadow:var(--shadow-lg);

}

.creator-photo h3{

    margin-top:1.5rem;

}

.creator-photo p{

    color:var(--primary);

    font-weight:700;

}

.creator-content h2{

    margin-bottom:1.5rem;

}

.creator-content p{

    margin-bottom:1.5rem;

}

.creator-credentials{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1.5rem;

    margin-top:2rem;

}

.credential{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    padding:1.75rem;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.credential:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}

.credential h4{

    color:var(--primary);

    margin-bottom:.75rem;

}

.credential i{

    color:var(--secondary);

    font-size:1.5rem;

    margin-bottom:1rem;

}

/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:1100px){

    .purpose-grid{

        grid-template-columns:1fr;

    }

    .creator-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}

@media (max-width:992px){

    .philosophy-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .creator-credentials{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .philosophy-card{

        padding:2rem;

    }

    .credential{

        padding:1.5rem;

    }

}