/*==========================================================
  TutorChrome Production Stylesheet
  Version : 1.0
  Author  : ChatGPT
==========================================================*/


/*==========================================================
  01. CSS VARIABLES
==========================================================*/

:root{

    /* Brand Colors */

    --primary:#0B63CE;
    --primary-dark:#084EA5;
    --secondary:#F7941D;
    --secondary-dark:#DD7D0A;

    /* Neutral Colors */

    --white:#ffffff;
    --black:#111827;

    --text:#374151;
    --text-light:#6B7280;

    --bg:#F8FAFC;
    --bg-light:#ffffff;

    --border:#E5E7EB;

    /* Status */

    --success:#16A34A;
    --danger:#DC2626;

    /* Shadows */

    --shadow-sm:0 2px 10px rgba(0,0,0,.05);

    --shadow:

        0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:

        0 20px 60px rgba(0,0,0,.12);

    /* Radius */

    --radius-sm:8px;

    --radius:14px;

    --radius-lg:22px;

    /* Layout */

    --container:1280px;

    --section-space:110px;

    /* Animation */

    --transition:.30s ease;

}


/*==========================================================
  02. RESET
==========================================================*/

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

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    font-size:16px;

}


body{

    font-family:

    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

    color:var(--text);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}


img{

    display:block;

    max-width:100%;

    height:auto;

}


picture{

    display:block;

}


svg{

    display:block;

}


a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


input,
textarea,
select{

    font:inherit;

}


ul{

    list-style:none;

}


section{

    position:relative;

}


::selection{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
  03. TYPOGRAPHY
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--black);

    line-height:1.2;

    font-weight:700;

}


h1{

    font-size:clamp(2.6rem,5vw,4.2rem);

}


h2{

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

}


h3{

    font-size:1.35rem;

}


p{

    color:var(--text);

    margin-bottom:1rem;

}


strong{

    color:var(--black);

}


/*==========================================================
  04. GLOBAL LAYOUT
==========================================================*/

.container{

    width:min(100% - 40px,var(--container));

    margin-inline:auto;

}


section{

    padding:

    var(--section-space)

    0;

}


.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}


.section-header h2{

    margin-bottom:18px;

}


.section-header p{

    color:var(--text-light);

    font-size:1.06rem;

}


.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#EAF3FF;

    color:var(--primary);

    padding:10px 18px;

    border-radius:100px;

    font-size:.85rem;

    letter-spacing:.08em;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

}


/*==========================================================
  05. GLOBAL BUTTONS
==========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border-radius:100px;

    font-weight:700;

    transition:var(--transition);

    white-space:nowrap;

}


.btn-primary{

    background:var(--primary);

    color:#fff;

}


.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}


.btn-secondary{

    background:var(--secondary);

    color:#fff;

}


.btn-secondary:hover{

    background:var(--secondary-dark);

    transform:translateY(-3px);

}


.btn-outline{

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

    color:var(--primary);

    background:#fff;

}


.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


.btn-text{

    color:var(--primary);

    font-weight:700;

    padding:0;

}


.btn-large{

    padding:18px 38px;

}


/*==========================================================
  END OF PART 1
==========================================================*/

/*==========================================================
  06. HEADER
==========================================================*/

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(0,0,0,.06);

    transition:var(--transition);

}


.header-container{

    width:min(100% - 40px,var(--container));

    margin:auto;

    min-height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}


.logo img {
    height: 65px;
    width: 240;
}


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

.main-nav{

    margin-left:auto;

}


.main-nav ul{

    display:flex;

    align-items:center;

    gap:34px;

}


.main-nav li{

    position:relative;

}


.main-nav a{

    display:block;

    font-size:.97rem;

    font-weight:600;

    color:var(--black);

    padding:10px 0;

    transition:var(--transition);

}


.main-nav a:hover{

    color:var(--primary);

}

.main-nav a.active{

    color:var(--primary);

}

.main-nav a.active::after{

    width:100%;

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}


.main-nav a:hover::after{

    width:100%;

}


/*==========================================================
  HEADER ACTION BUTTONS
==========================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}


/*==========================================================
  MOBILE MENU BUTTON
==========================================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

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

    background:#fff;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    transition:var(--transition);

}


.menu-toggle:hover{

    border-color:var(--primary);

}


.menu-toggle span{

    width:22px;

    height:2px;

    background:var(--black);

    border-radius:10px;

    transition:var(--transition);

}


/*==========================================================
  MOBILE MENU OPEN STATE
==========================================================*/

.menu-toggle.active span:nth-child(1){

    transform:

    translateY(8px)

    rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:

    translateY(-8px)

    rotate(-45deg);

}


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

@media (max-width:992px){

.header-container{

    min-height:74px;

}

.logo img{

    height:46px;

}

.main-nav ul{

    gap:22px;

}

.header-actions .btn{

    padding:12px 22px;

}

}


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

@media (max-width:768px){

.menu-toggle{

    display:flex;

}

.header-actions{

    display:none;

}

.main-nav{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

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

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

    display:none;

}

.main-nav.active{

    display:block;

}

.main-nav ul{

    flex-direction:column;

    align-items:flex-start;

    gap:0;

    padding:20px;

}

.main-nav li{

    width:100%;

}

.main-nav a{

    width:100%;

    padding:16px 10px;

    border-bottom:1px solid #f2f2f2;

}

.main-nav a::after{

    display:none;

}

}


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

@media (max-width:480px){

.header-container{

    width:min(100% - 24px,var(--container));

}

.logo img{

    height:42px;

}

}

/*==========================================================
  07. HERO SECTION
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(135deg,#F8FBFF 0%,#EEF5FF 45%,#FFFFFF 100%);

    padding:90px 0 0;

}


.hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:rgba(11,99,206,.06);

    z-index:0;

}


.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(247,148,29,.08);

    z-index:0;

}


.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}


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

.hero-content{

    max-width:640px;

}


.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#EAF3FF;

    color:var(--primary);

    padding:10px 18px;

    border-radius:100px;

    font-weight:700;

    font-size:.88rem;

    margin-bottom:26px;

}


.hero-content h1{

    margin-bottom:28px;

    color:var(--black);

}


.hero-description{

    font-size:1.12rem;

    color:var(--text-light);

    margin-bottom:34px;

}


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

.hero-highlights{

    display:grid;

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

    gap:18px;

    margin-bottom:38px;

}


.highlight-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

}


.highlight-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.9rem;

}


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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:36px;

}


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

.hero-rating{

    display:flex;

    align-items:flex-start;

    gap:18px;

}


.rating-stars{

    color:#FDBA12;

    font-size:1.3rem;

    letter-spacing:2px;

    flex-shrink:0;

}


.hero-rating p{

    margin:0;

    color:var(--text-light);

}


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

.hero-image{

    position:relative;

    width:100%;

    max-width:760px;

    margin-left:auto;

}

.hero-image-wrapper{

    position:relative;

    width:100%;

    overflow:visible;

}

.hero-image img{

    display:block;

    width:100%;

    height:auto;

    border-radius:28px;

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

}

/*==========================================================
  FLOATING CARDS
==========================================================*/

.floating-card{

    position:absolute;

    width:240px;

    background:#fff;

    border-radius:18px;

    padding:20px 24px;

    box-shadow:var(--shadow);

    z-index:5;

    animation:floatCard 5s ease-in-out infinite;

}

.floating-card h4{

    margin-bottom:8px;

    font-size:1rem;

}

.floating-card p{

    margin:0;

    font-size:.92rem;

    color:var(--text-light);

    line-height:1.6;

}

.floating-card-one{

    top:35px;

    left:-55px;

}

.floating-card-two{

    top:205px;

    left:-55px;

    animation-delay:1.2s;

}

.floating-card-three{

    right:-40px;

    bottom:40px;

    animation-delay:2.4s;

}

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

.hero-stats{

    margin-top:90px;

    background:#fff;

    border-top:1px solid rgba(0,0,0,.05);

}


.stats-grid{

    display:grid;

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

    gap:28px;

    padding:55px 0;

}


.stat-card{

    background:#fff;

    text-align:center;

    padding:34px 22px;

    border-radius:18px;

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

    transition:var(--transition);

}


.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


.stat-card h2{

    color:var(--primary);

    font-size:2.4rem;

    margin-bottom:10px;

}


.stat-card p{

    margin:0;

    color:var(--text-light);

}


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

@media (max-width:1100px){

.hero-grid{

    gap:50px;

}

.floating-card{

    max-width:190px;

}

}


@media (max-width:992px){

.hero{

    padding-top:70px;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero-highlights{

    justify-content:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-rating{

    justify-content:center;

}

.hero-image{

    max-width:700px;

    margin:auto;

}

.floating-card-one{

    left:20px;

}

.floating-card-two{

    left:20px;

}

.floating-card-three{

    right:20px;

}

.stats-grid{

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

}

}


@media (max-width:768px){

.hero{

    padding-top:55px;

}

.hero-highlights{

    grid-template-columns:1fr;

    text-align:left;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-rating{

    flex-direction:column;

    align-items:center;

}

.floating-card{

    position:static;

    max-width:100%;

    margin-top:20px;

}

.stats-grid{

    grid-template-columns:1fr;

}

}


@media (max-width:480px){

.hero{

    padding-top:40px;

}

.hero-content h1{

    font-size:2.25rem;

}

.hero-description{

    font-size:1rem;

}

.hero-badge{

    font-size:.8rem;

}

}


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

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/*==========================================================
  08. TRUST SECTION
==========================================================*/

.trust-section{

    background:#EEF5FF;

}


.trust-grid{

    display:grid;

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

    gap:30px;

}


.trust-card{

    background:#fff;

    padding:40px 30px;

    border-radius:var(--radius);

    text-align:center;

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

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

    transition:var(--transition);

}


.trust-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.trust-icon{

    width:80px;

    height:80px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    background:#EAF3FF;

}


.trust-card h3{

    margin-bottom:15px;

}


.trust-card p{

    margin:0;

    color:var(--text-light);

}

/*==========================================================
  09. PROGRAMS SECTION
==========================================================*/

.programs-section{

    background:#FFFFFF;

    padding:90px 0;

}

.program-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.program-card{

    background:#fff;

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

    border-radius:22px;

    overflow:hidden;

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

    transition:var(--transition);

}

.program-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.program-card img{

    display:block;

    width:100%;

    height:220px;

    object-fit:cover;

}

.program-content{

    padding:28px;

}

.program-content h3{

    margin-bottom:16px;

    color:var(--black);

}

.program-content p{

    color:var(--text-light);

    margin-bottom:22px;

    min-height:84px;

}

.program-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

.program-content a:hover{

    gap:14px;

}

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

@media (max-width:1200px){

.program-grid{

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

}

}


@media (max-width:992px){

.program-grid{

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

}

.program-card img{

    height:210px;

}

}


@media (max-width:768px){

.programs-section{

    padding:70px 0;

}

.program-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.program-card{

    max-width:520px;

    margin:auto;

}

.program-card img{

    height:240px;

}

.program-content{

    padding:24px;

}

.program-content p{

    min-height:auto;

}

}


@media (max-width:480px){

.program-card img{

    height:220px;

}

.program-content{

    padding:22px;

}

.program-content h3{

    font-size:1.25rem;

}

}

/*==========================================================
  09. SUBJECTS SECTION
==========================================================*/

.subjects-section{

    background:#F8FAFC;

}


.subjects-grid{

    display:grid;

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

    gap:32px;

}


.subject-card{

    background:#fff;

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

    border-radius:20px;

    padding:35px;

    transition:var(--transition);

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

    display:flex;

    flex-direction:column;

}


.subject-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.featured-subject{

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

}


.subject-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF5FF;

    font-size:2rem;

    margin-bottom:24px;

}


.subject-card h3{

    margin-bottom:16px;

}


.subject-card p{

    color:var(--text-light);

    margin-bottom:20px;

}


.subject-card ul{

    margin-bottom:28px;

}


.subject-card li{

    position:relative;

    padding-left:22px;

    margin-bottom:10px;

    color:var(--text);

}


.subject-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--success);

    font-weight:700;

}


.learn-more{

    margin-top:auto;

    font-weight:700;

    color:var(--primary);

}


.learn-more:hover{

    color:var(--primary-dark);

}


/*==========================================================
  10. EXAM PREPARATION
==========================================================*/

.exam-preparation{

    background:#EEF5FF;

}


.exam-grid{

    display:grid;

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

    gap:32px;

}


.exam-card{

    background:#fff;

    padding:40px 34px;

    border-radius:20px;

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

    transition:var(--transition);

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

    position:relative;

}


.exam-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.exam-card.featured{

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

}


.exam-badge{

    position:absolute;

    top:-14px;

    left:28px;

    background:var(--secondary);

    color:#fff;

    padding:8px 16px;

    border-radius:100px;

    font-size:.78rem;

    font-weight:700;

}


.exam-icon{

    width:75px;

    height:75px;

    background:#EEF5FF;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:24px;

}


.exam-card h3{

    margin-bottom:16px;

}


.exam-card p{

    color:var(--text-light);

    margin-bottom:20px;

}


.exam-card ul{

    margin-bottom:28px;

}


.exam-card li{

    position:relative;

    padding-left:22px;

    margin-bottom:10px;

}


.exam-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--success);

}


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

@media (max-width:1100px){

.trust-grid{

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

}

.subjects-grid{

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

}

.exam-grid{

    grid-template-columns:1fr;

}

}


@media (max-width:768px){

.trust-grid,

.subjects-grid{

    grid-template-columns:1fr;

}

.trust-card,

.subject-card,

.exam-card{

    padding:30px;

}

}

/*==========================================================
  11. WHY TUTORCHROME
==========================================================*/

.why-tutorchrome{

    background:#F5F9FF;

}

.features-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#fff;

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

    border-radius:20px;

    padding:38px 32px;

    transition:var(--transition);

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

    text-align:center;

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.feature-icon{

    width:78px;

    height:78px;

    margin:0 auto 24px;

    border-radius:18px;

    background:#EEF5FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}

.feature-card h3{

    margin-bottom:16px;

}

.feature-card p{

    margin:0;

    color:var(--text-light);

}


/*==========================================================
  12. HOW IT WORKS
==========================================================*/

.how-it-works{

    background:var(--bg);

}

.timeline{

    position:relative;

    max-width:900px;

    margin:0 auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:30px;

    top:0;

    bottom:0;

    width:3px;

    background:#D8E6F8;

}

.timeline-item{

    position:relative;

    display:flex;

    gap:28px;

    margin-bottom:50px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-number{

    width:62px;

    height:62px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

    font-weight:700;

    flex-shrink:0;

    position:relative;

    z-index:2;

    box-shadow:0 8px 24px rgba(11,99,206,.25);

}

.timeline-content{

    flex:1;

    background:#fff;

    padding:30px;

    border-radius:20px;

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

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

    transition:var(--transition);

}

.timeline-content:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.timeline-content h3{

    margin-bottom:14px;

}

.timeline-content p{

    margin:0;

    color:var(--text-light);

}


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

@media (max-width:992px){

.features-grid{

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

}

}

@media (max-width:768px){

.features-grid{

    grid-template-columns:1fr;

}

.timeline::before{

    left:22px;

}

.timeline-item{

    gap:18px;

}

.timeline-number{

    width:46px;

    height:46px;

    font-size:1rem;

}

.timeline-content{

    padding:22px;

}

}

@media (max-width:480px){

.timeline::before{

    display:none;

}

.timeline-item{

    flex-direction:column;

}

.timeline-number{

    margin-bottom:12px;

}

}

/*==========================================================
  13. INTERACTIVE CLASSROOM
==========================================================*/

.interactive-classroom{

    background:#fff;

}

.classroom-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.classroom-content h2{

    margin:18px 0 24px;

}

.classroom-content>p{

    color:var(--text-light);

    margin-bottom:38px;

}

.classroom-features{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.classroom-feature{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#fff;

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

    border-radius:18px;

    padding:22px;

    transition:var(--transition);

}

.classroom-feature:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.feature-check{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--success);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

}

.classroom-feature h4{

    margin-bottom:8px;

}

.classroom-feature p{

    margin:0;

    color:var(--text-light);

}

.classroom-image img{

    width:100%;

    border-radius:24px;

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

}


/*==========================================================
  14. STUDENT SUCCESS
==========================================================*/

.student-success{

    background:var(--bg);

}

.success-grid{

    display:grid;

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

    gap:28px;

}

.success-card{

    background:#fff;

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

    border-radius:20px;

    padding:35px 28px;

    text-align:center;

    transition:var(--transition);

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

}

.success-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.success-icon{

    width:76px;

    height:76px;

    border-radius:18px;

    background:#EEF5FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin:0 auto 22px;

}

.success-card h3{

    margin-bottom:14px;

}

.success-card p{

    margin:0;

    color:var(--text-light);

}


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

@media (max-width:1100px){

.classroom-grid{

    gap:50px;

}

.success-grid{

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

}

}

@media (max-width:768px){

.classroom-grid{

    grid-template-columns:1fr;

}

.classroom-image{

    order:-1;

}

.classroom-feature{

    padding:18px;

}

.success-grid{

    grid-template-columns:1fr;

}

}

/*==========================================================
  15. TESTIMONIALS
==========================================================*/

.testimonials{

    background:#F5F9FF;

}

.testimonial-slider{

    overflow:hidden;

    position:relative;

    width:100%;

}

.testimonial-track{

    display:flex;

    gap:32px;

    transition:transform .7s ease;

    will-change:transform;

}

.testimonial-card{

    min-width:100%;

    flex:0 0 100%;

    background:#fff;

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

    border-radius:20px;

    padding:35px;

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

    transition:var(--transition);

    box-sizing:border-box;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.testimonial-rating{

    color:#F5B301;

    font-size:1.2rem;

    margin-bottom:18px;

    letter-spacing:2px;

}

.testimonial-card p{

    font-style:italic;

    color:var(--text-light);

    margin-bottom:28px;

}

.testimonial-author{

    display:flex;

    align-items:center;

    gap:16px;

}

.testimonial-author img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-author h4{

    margin-bottom:4px;

}

.testimonial-author span{

    color:var(--text-light);

    font-size:.92rem;

}

/*==========================================================
  16. LEARNING RESOURCES
==========================================================*/

.resources-section{

    background:#FFFFFF;

}

.resources-grid{

    display:grid;

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

    gap:32px;

}

.resource-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

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

    transition:var(--transition);

}

.resource-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.resource-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.resource-content{

    padding:28px;

}

.resource-category{

    display:inline-block;

    background:#EEF5FF;

    color:var(--primary);

    padding:6px 14px;

    border-radius:100px;

    font-size:.78rem;

    font-weight:700;

    margin-bottom:16px;

}

.resource-content h3{

    margin-bottom:16px;

}

.resource-content p{

    color:var(--text-light);

    margin-bottom:24px;

}

.resource-link{

    font-weight:700;

    color:var(--primary);

}

.resource-link:hover{

    color:var(--primary-dark);

}


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

@media (max-width:1100px){

.testimonial-track{

    grid-template-columns:1fr;

}

.resources-grid{

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

}

}

@media (max-width:768px){

.resources-grid{

    grid-template-columns:1fr;

}

.testimonial-card{

    padding:28px;

}

.resource-content{

    padding:24px;

}

.resource-card img{

    height:220px;

}

}

/*==========================================================
  17. FAQ SECTION
==========================================================*/

.faq-section{

    background:#F8FAFC;

}

.faq-wrapper{

    max-width:900px;

    margin:0 auto;

}

.faq-item{

    background:#fff;

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

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

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

}

.faq-item summary{

    list-style:none;

    cursor:pointer;

    padding:24px 30px;

    font-size:1.08rem;

    font-weight:600;

    position:relative;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    font-size:1.6rem;

    color:var(--primary);

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-item p{

    padding:0 30px 26px;

    margin:0;

    color:var(--text-light);

}

/*==========================================================
  FAQ ENHANCEMENT
==========================================================*/

.faq-item{

    transition:var(--transition);

}

.faq-item summary{

    cursor:pointer;

    list-style:none;

    position:relative;

    padding-right:40px;
    
    font-weight:600;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    font-size:24px;

    color:var(--primary);

    transition:var(--transition);

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-active{

    border-color:var(--primary);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/*==========================================================
  18. CALL TO ACTION
==========================================================*/

.cta-section{

    background:linear-gradient(135deg,#0B63CE,#084B9A);

    color:#fff;

}

.cta-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:65px;

    border-radius:30px;

}

.cta-content h2{

    color:#fff;

    margin:16px 0 22px;

}

.cta-content p{

    color:rgba(255,255,255,.92);

    margin:0;

}

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


/*==========================================================
  19. GRADE PROGRAMS
==========================================================*/

.grade-programs{

    background:var(--bg);

}

.grade-grid{

    display:grid;

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

    gap:30px;

}

.grade-card{

    background:#fff;

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

    border-radius:24px;

    padding:36px;

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

    transition:var(--transition);

}

.grade-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.grade-card.featured{

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

}

.grade-icon{

    font-size:2.4rem;

    margin-bottom:22px;

}

.grade-card h4{

    color:var(--primary);

    margin:8px 0 18px;

}

.grade-card ul{

    margin-top:22px;

    padding-left:18px;

}

.grade-card li{

    margin-bottom:10px;

}

/*==========================================================
  PAGE LOADER
==========================================================*/

.page-loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    transition:opacity .5s ease;

}

.page-loader.loaded{

    opacity:0;

    pointer-events:none;

}

.loader-spinner{

    width:58px;

    height:58px;

    border:5px solid #eee;

    border-top-color:var(--primary);

    border-radius:50%;

    animation:loaderSpin .8s linear infinite;

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}


/*==========================================================
  SCROLL PROGRESS BAR
==========================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--primary);

    z-index:10000;

    transition:width .1s linear;

}


/*==========================================================
  HEADER ON SCROLL
==========================================================*/

.site-header.header-scrolled{

    box-shadow:0 10px 30px rgba(0,0,0,.08);

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

}

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

@media (max-width:1100px){

.cta-box{

    flex-direction:column;

    text-align:center;

}

.grade-grid{

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

}

.exam-program-grid{

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

}

}

@media (max-width:768px){

.cta-box{

    padding:40px 28px;

}

.cta-buttons{

    width:100%;

    justify-content:center;

}

.grade-grid,

.exam-program-grid{

    grid-template-columns:1fr;

}

.faq-item summary{

    padding:20px;

}

.faq-item p{

    padding:0 20px 22px;

}

}

/*==========================================================
  21. WHY PARENTS TRUST US
==========================================================*/

.parents-section{

    background:#F5F9FF;

}

.parents-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.parents-image img{

    width:100%;

    display:block;

    border-radius:24px;

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

}

.parents-content h2{

    margin:18px 0 24px;

}

.parents-content>p{

    color:var(--text-light);

    margin-bottom:32px;

}

.check-list{

    display:grid;

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

    gap:18px;

}

.check-item{

    background:#fff;

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

    border-radius:14px;

    padding:16px 18px;

    font-weight:600;

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

    transition:var(--transition);

}

.check-item:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}


/*==========================================================
  22. LEARNING METHODOLOGY
==========================================================*/

.learning-methodology{

    background:#fff;

}

.method-grid{

    display:grid;

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

    gap:30px;

}

.method-grid article{

    background:#fff;

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

    border-radius:22px;

    padding:34px 28px;

    text-align:center;

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

    transition:var(--transition);

}

.method-grid article:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.method-grid span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:22px;

}

.method-grid h3{

    margin-bottom:14px;

}

.method-grid p{

    margin:0;

    color:var(--text-light);

}


/*==========================================================
  23. FEATURED PROGRAMS
==========================================================*/

.featured-programs{

    background:var(--bg);

}

.programs-grid{

    display:grid;

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

    gap:32px;

}

.program-box{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

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

    transition:var(--transition);

}

.program-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.program-box img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.program-content{

    padding:28px;

}

.program-content h3{

    margin-bottom:16px;

}

.program-content p{

    color:var(--text-light);

    margin-bottom:24px;

}

.btn-text{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:700;

}

.btn-text:hover{

    color:var(--primary-dark);

}


/*==========================================================
  24. LEARNING ADVANTAGE
==========================================================*/

.learning-advantage{

    background:#f2f6fc;

}

.advantage-grid{

    display:grid;

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

    gap:30px;

}

.advantage-grid article{

    background:#fff;

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

    border-radius:20px;

    padding:34px 28px;

    text-align:center;

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

    transition:var(--transition);

}

.advantage-grid article:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.advantage-icon{

    width:72px;

    height:72px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#EEF5FF;

    font-size:2rem;

}

.advantage-grid h3{

    margin-bottom:14px;

}

.advantage-grid p{

    margin:0;

    color:var(--text-light);

}


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

@media (max-width:1100px){

.parents-grid{

    grid-template-columns:1fr;

}

.method-grid{

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

}

.programs-grid{

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

}

.advantage-grid{

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

}

}

@media (max-width:768px){

.check-list{

    grid-template-columns:1fr;

}

.method-grid,

.programs-grid,

.advantage-grid{

    grid-template-columns:1fr;

}

.program-box img{

    height:220px;

}

}

/*==========================================================
  26. COVERAGE SECTION
==========================================================*/

.coverage-section{

    background:#fff;

}

.coverage-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.coverage-grid img{

    width:100%;

    border-radius:24px;

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

}

.coverage-list{

    margin-top:28px;

    display:grid;

    gap:14px;

    padding-left:0;

    list-style:none;

}

.coverage-list li{

    background:#F7F9FC;

    padding:15px 18px;

    border-radius:12px;

}


/*==========================================================
  27. BLOG PREVIEW
==========================================================*/

.blog-preview{

    background:var(--bg);

}

.blog-grid{

    display:grid;

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

    gap:30px;

}

.blog-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    transition:var(--transition);

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

}

.blog-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.blog-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.blog-content{

    padding:28px;

}

.blog-category{

    color:var(--primary);

    font-weight:700;

    font-size:.85rem;

    text-transform:uppercase;

}

.blog-content h3{

    margin:15px 0;

}

.blog-content p{

    color:var(--text-light);

}

.blog-content a{

    display:inline-block;

    margin-top:18px;

    font-weight:700;

}


/*==========================================================
  28. SUCCESS METRICS
==========================================================*/

.success-metrics{

    background:#fff;

}

.metrics-grid{

    display:grid;

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

    gap:28px;

}

.metric-card{

    background:#fff;

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

    border-radius:22px;

    padding:36px;

    text-align:center;

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

}

.metric-number{

    display:block;

    font-size:2.4rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:10px;

}


/*==========================================================
  29. USA CURRICULUM
==========================================================*/

.usa-curriculum{

    background:#EEF5FF;

}

.states-grid{

    display:grid;

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

    gap:18px;

}

.states-grid a{

    background:#fff;

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

    padding:18px;

    border-radius:12px;

    text-align:center;

    transition:var(--transition);

    font-weight:600;

}

.states-grid a:hover{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
  30. FINAL CTA
==========================================================*/

.final-cta{

    background:linear-gradient(135deg,#0B63CE,#084B9A);

    color:#fff;

}

.cta-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    padding:65px;

    border-radius:28px;

}

.cta-text h2{

    color:#fff;

    margin:16px 0 20px;

}

.cta-text p{

    color:rgba(255,255,255,.92);

}

.cta-wrapper .btn-secondary{

    background:#fff;

    color:var(--primary);

}


/*==========================================================
  31. FOOTER
==========================================================*/

.site-footer{

    background:#081B33;

    color:#fff;

    padding:90px 0 30px;

}

/*==========================================================
  FOOTER GRID
==========================================================*/

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;

    gap:40px;

    margin-bottom:60px;

    align-items:start;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h3{

    color:#fff;

    margin-bottom:22px;

    min-height:32px;

    display:flex;

    align-items:center;

}

/*==========================================================
  FOOTER LINKS
==========================================================*/

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:14px;

    line-height:1.5;

}

.footer-column a{

    color:rgba(255,255,255,.75);

    transition:var(--transition);

}

.footer-column a:hover{

    color:#fff;

}

/*==========================================================
  ABOUT
==========================================================*/

.footer-about p{

    color:rgba(255,255,255,.75);

    margin:24px 0;

}

.footer-social{

    display:flex;

    gap:14px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--primary);

}

/*==========================================================
  CONTACT COLUMN
==========================================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact li{

    margin:0;

}

.footer-contact strong{

    display:block;

    color:#fff;

    font-size:.92rem;

    margin-bottom:6px;

    font-weight:700;

}

.footer-contact a{

    display:inline-block;

    line-height:1.6;

    word-break:break-word;

}

/*==========================================================
  NEWSLETTER
==========================================================*/

.newsletter-box{

    margin:70px 0;

    padding:40px;

    border-radius:24px;

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

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.newsletter-box h2,
.newsletter-box h3,
.newsletter-box p,
.newsletter-box span,
.newsletter-box a{

    color:#fff;

}

.newsletter-box p{

    color:rgba(255,255,255,.85);

}

.newsletter-form{

    display:flex;

    gap:12px;

}

.newsletter-form input{

    min-width:280px;

    padding:15px 18px;

    border:none;

    border-radius:12px;

}

/*==========================================================
  FOOTER BOTTOM
==========================================================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding-top:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    color:#fff;

}

.footer-bottom p{

    margin:0;

    color:#fff;

}

.footer-bottom a{

    color:#fff;

    text-decoration:none;

}

.footer-bottom a:hover{

    color:#c74646;

}

.footer-links{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}

/*==========================================================
  32. BACK TO TOP
==========================================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;
    
    transform:translateY(20px);

    transition:var(--transition);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;
    
    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-5px);

}

/*==========================================================
  IMAGE FADE-IN
==========================================================*/

.fade-image{

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.fade-image.img-loaded{

    opacity:1;

    transform:none;

}

/*==========================================================
  SCROLL REVEAL ANIMATION
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
  FORM VALIDATION
==========================================================*/

.input-error{

    border:2px solid #e53935 !important;

    background:#fff5f5;

}

/*==========================================================
  REDUCED MOTION
==========================================================*/

.reduced-motion *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

/*==========================================================
  SMART FOCUS
==========================================================*/

body.using-mouse *:focus{

    outline:none;

}

*:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}


/*==========================================================
  BUTTON IMPROVEMENTS
==========================================================*/

.btn{

    user-select:none;

    -webkit-user-select:none;

    touch-action:manipulation;

}


/*==========================================================
  IMAGE RENDERING
==========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


/*==========================================================
  SMOOTH CARD HOVER
==========================================================*/

.subject-card,
.exam-card,
.feature-card,
.success-card,
.metric-card,
.program-card,
.program-box,
.blog-card,
.resource-card,
.grade-card,
.category-card,
.trust-card{

    transform:translateZ(0);

    backface-visibility:hidden;

}


/*==========================================================
  BETTER SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#f5f5f5;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

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

@media (max-width:1100px){

.blog-grid{

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

}

.coverage-grid,

.cta-wrapper{

    grid-template-columns:1fr;

    display:grid;

}

.metrics-grid{

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

}

.states-grid{

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

}

.footer-grid{

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

}

.newsletter-box{

    flex-direction:column;

    align-items:flex-start;

}

}

@media (max-width:768px){

.blog-grid,

.metrics-grid,

.states-grid,

.footer-grid{

    grid-template-columns:1fr;

}

.newsletter-form{

    flex-direction:column;

    width:100%;

}

.newsletter-form input,

.newsletter-form button{

    width:100%;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.coverage-grid,

.cta-wrapper{

    gap:35px;

}

}