html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: Arial;
    background: #f5f7fa;
    font-family: 'Poppins', sans-serif;
}

header {
    background: red;
    color: white;
    padding: 15px;
    text-align: center;
}

/* HERO SECTION */
/* HERO CLEAN DESIGN */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;

    background: linear-gradient(to right, #f8fbff, #e3f2fd);
    padding: 100px 5% 50px;
    position: relative;
    overflow: hidden;
}

/* container */
.hero-container {
    max-width: 1200px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

/* LEFT */

/* Experience Badge */
.experience-badge {
    display: inline-block;
    background: rgba(25,118,210,0.1);
    color: #1976d2;
    padding: 6px 14px;
    border-radius: 20px;

    font-size: 14px;
    font-weight: 500;
box-shadow: 0 4px 12px rgba(25,118,210,0.2);
    margin-bottom: 15px;
    
}
.hero-left {
    flex: 1;
}

.hero-left h1 {
    font-size: 48px;
    line-height: 1.2;
    color: #0d47a1;
}

.hero-left span {
    color: #1976d2;
}

.hero-left p {
    font-size: 18px;
    color: #555;
    margin: 20px 0;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-primary {
     background: linear-gradient(45deg, #1976d2, #42a5f5);
    transition: 0.3s;
    color: white;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(25,118,210,0.4);
}

.btn-secondary {
    border: 2px solid #1976d2;
    color: #1976d2;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
}
.btn-secondary:hover {
    background: #1976d2;
    color: white;
    transform: translateY(3px);
    box-shadow: 0 10px 25px rgba(25,118,210,0.4);
}

/* RIGHT */
.hero-right {
    flex: 1;
    text-align: center;
}

.hero-right img {
    max-width: 400px;
    width: 100%;
}
/* Floating Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

.hero-right img {
    max-width: 400px;
    width: 100%;
    animation: float 4s ease-in-out infinite;
}

/* Decorative Circle */
.hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(25,118,210,0.1);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}
@media (max-width: 768px) {

    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-left h1 {
        font-size: 32px;
    }

    .hero-buttons {
        justify-content: center;
    }
}
section {
    padding: 40px;
    text-align: center;
     scroll-margin-top: 80px;
}
/* Navbar */
/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 20px;
    height: 70px;
box-sizing: border-box;
    position: fixed;
    top: 0;
    width: 100%;
background: linear-gradient(to right, rgba(10, 25, 80, 0.9), rgba(0, 123, 255, 0.3));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 1000;
}

/* Logo Container */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Logo Image */
.logo-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* Logo Text */
.logo-text h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: white;
}

.logo-text p {
    margin: 0;
    font-size: 11px;
    color: #cfd8dc;
}

/* Menu */
nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
    opacity: 0.9;
}
nav ul li a.active {
    color: #ffffff;
    position: relative;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(255,255,255,0.4);
}

nav ul li a.active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #00c6ff, #0072ff); /* 🔥 premium blue */
    border-radius: 5px;

    box-shadow: 0 0 8px rgba(0, 114, 255, 0.6); /* glow effect */
}

/* Hide toggle on desktop */
.menu-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

/* MOBILE STYLE */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    nav {
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        background: rgba(0,0,0,0.9);

        display: none;
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }

    nav.active {
        display: flex;
    }
}
/* WhatsApp Floating Button */
.wa-icon {
    width: 20px;
    height: 20px;
}
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;

    background: #25D366;
    color: white;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px;
    border-radius: 30px;

    text-decoration: none;
    font-weight: 500;

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

    z-index: 1000;
    transition: 0.3s;
}

.whatsapp-btn:hover {
    transform: scale(1.05);
}

.whatsapp-btn .icon {
    font-size: 18px;
}
.mobile-cta {
    display: none;
}

@media (max-width: 768px) {
    .whatsapp-btn {
        display: none;
    }
    .mobile-cta {
        display: block;
        position: fixed;
        bottom: 0;
        width: 100%;

        background: #1976d2;
        text-align: center;
        padding: 12px;

        z-index: 1000;
    }

    .mobile-cta a {
        color: white;
        text-decoration: none;
        font-weight: 600;
    }
}

/*whatsapp lead form section*/
.contact {
    padding: 80px 5%;
    text-align: center;
}

.contact-form {
    max-width: 400px;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.contact-form button {
    padding: 12px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 6px;
}

/*Limited Seats available Message*/
.batch-banner {
    text-align: center;
    padding: 60px 20px;

    background: linear-gradient(90deg, #ff6a00, #3f51b5, #00bcd4);

    color: white;
}

.batch-banner h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.batch-banner p {
    font-size: 18px;
    margin-bottom: 25px;
}

.banner-btn {
    background: white;
    color: #1976d2;

    padding: 12px 25px;
    border-radius: 8px;

    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.banner-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(25,118,210,0.4);
}

/* TUTOR SECTION */
.tutor {
     position: relative;   /* 🔥 जरूरी */
    padding: 80px 5%;
    background: linear-gradient(to right, #f8fbff, #e3f2fd);
    overflow: hidden;
}

/* Pattern Background */
.tutor::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: 
        linear-gradient(rgba(248,251,255,0.5), rgba(227,242,253,0.5)),
        url("https://mathwithmanish.in/images/pattern.png");
background-size: cover, 260px;
    background-repeat: no-repeat, repeat;
z-index: 0;
}

.tutor-container {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;  /* 2 column */
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* IMAGE */
.tutor-image {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;  /* 🔥 IMPORTANT */
    position: sticky;
    top: 120px;
}

.tutor-image img {
    width: 100%;
    max-width: 420px;

    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
display: block;
    margin: auto;
    transition: 0.3s;
}

.tutor-image img:hover {
    transform: scale(1.03);
}

/* CONTENT */
.tutor-content {
    max-width: 520px;
    flex: 1;
}

.tutor-content h2 {
    font-size: 36px;
    color: #0d47a1;
}

.tutor-content h3 {
    color: #1976d2;
    margin-bottom: 15px;
}

.tutor-content p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* CARDS */
.tutor-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tutor-card {
    background: white;
    padding: 18px;
    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.tutor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(25,118,210,0.2);
}

.tutor-card h4 {
    color: #1976d2;
    margin-bottom: 5px;
}

.tutor-card p {
    font-size: 14px;
}
/* TABLET FIX */
@media (max-width: 1024px) {

    .tutor-container {
        grid-template-columns: 1fr;  /* 🔥 2 column → 1 column */
        text-align: center;
    }

    .tutor-content {
        margin: auto;              /* 🔥 center align */
        max-width: 600px;          /* readable width */
    }

    .tutor-image {
        position: static;          /* sticky remove */
    }

    .tutor-image img {
        max-width: 320px;          /* balanced size */
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .tutor-container {
        grid-template-columns: 1fr; /* single column */
        text-align: center;
    }
     .tutor-image {
        position: static;  /* 🔥 sticky हटाओ mobile में */
    }

    .tutor-image img {
        max-width: 280px;
    }
}

/*Tutor Name  Below Image*/
.tutor-name {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;

    color: #0d47a1;
    letter-spacing: 0.5px;

    position: relative;
    display: inline-block;
}

/* Underline effect (premium look) */
.tutor-name::after {
    content: "";
    display: block;
    width: 40%;
    height: 3px;
    margin: 6px auto 0;

    background: linear-gradient(45deg, #1976d2, #42a5f5);
    border-radius: 5px;
}

/* Optional subtle glow */
.tutor-name:hover {
    color: #1976d2;
    transform: scale(1.05);
    transition: 0.3s;
}

/* WHY CHOOSE US */
/* WHY SECTION */
.why {
    padding: 70px 5%;
    background: linear-gradient(to right, #f8fbff, #e3f2fd); /* 🔥 SAME AS HERO */
    text-align: center;
     position: relative;   /* 🔥 ADD */
    overflow: hidden;     /* 🔥 ADD */
}
/* 🔥 MATH SHAPES BACKGROUND */
.why::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: 
        url("images/triangle.svg"),
        url("images/circle.svg"),
        url("images/rectangle.svg"),
        url("images/rhombus.svg"),
        url("images/trapezium.svg"),
        url("images/circle.svg"),
        url("images/triangle.svg"),
        url("images/rhombus.svg");

    background-repeat: no-repeat;

    background-position:
        2% 20%,     /* left top */
        95% 10%,    /* right top */
        5% 85%,     /* left bottom */
        95% 80%,    /* right bottom */
        50% 25%,    /* center top (light) */
        85% 50%,    /* right mid */
        10% 55%,    /* left mid */
        50% 75%;    /* center bottom (light) */

    background-size:
        80px,
        100px,
        90px,
        85px,
        60px,   /* center smaller */
        70px,
        70px,
        55px;   /* center small */

    opacity: 0.10;
    z-index: 0;

    animation: floatShapes 18s ease-in-out infinite;
}
@keyframes floatShapes {
    0% {
        transform: translateY(0px) rotate(-5deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
    100% {
        transform: translateY(0px) rotate(-5deg);
    }
}
.why::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* LEFT SIDE */
.why::after {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='40' font-size='40' fill='rgba(25,118,210,0.12)'>π</text></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='40' font-size='40' fill='rgba(25,118,210,0.12)'>E=mc²</text></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='40' font-size='35' fill='rgba(25,118,210,0.12)'>π</text></svg>");

    background-repeat: no-repeat;

    background-position:
        5% 25%,
        90% 15%,
        10% 80%;
    background-size:
        60px,
        120px,
        50px;

    animation: floatMath 18s ease-in-out infinite;
}
@keyframes floatMath {
    0% {
        transform: translateY(0px) rotate(-5deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
    100% {
        transform: translateY(0px) rotate(-5deg);
    }
}

.why-container {
    max-width: 1200px;
    margin: auto;
    position: relative;  /* 🔥 ADD THIS */
    z-index: 1;
}

/* HEADING */
.why h2 {
    font-size: 42px;
    color: #111827;
    font-weight: 700;
}

.why-sub {
    font-size: 18px;
    color: #6b7280;
    margin: 15px 0 60px;
}

/* GRID */
.why-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD BASE */
.why-card {
    text-align: left;
    padding: 35px;
    border-radius: 20px;
    transition: 0.3s;
    background: rgba(255,255,255,0.9);  /* 🔥 thoda transparent */
    backdrop-filter: blur(5px);
}

/* CARD COLORS (🔥 EXACT FEEL) */
.why-card.blue {
    background: #eaf2ff;
    border: 1px solid #c7d7fe;
}

.why-card.orange {
    background: #fff1e6;
    border: 1px solid #ffd8b5;
}

.why-card.green {
    background: #e6f7f2;
    border: 1px solid #b5ead7;
}

/* ICON */
.icon-box {
    width: 55px;
    height: 55px;
    border-radius: 12px;

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

    font-size: 24px;
    color: white;
    margin-bottom: 20px;
}

/* ICON COLORS */
.blue .icon-box {
    background: #2563eb;
}

.orange .icon-box {
    background: #f97316;
}

.green .icon-box {
    background: #10b981;
}

/* TEXT */
.why-card h3 {
    font-size: 22px;
    color: #111827;
    margin-bottom: 10px;
}

.why-card p {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
}

/* HOVER */
.why-card:hover {
    transform: translateY(-6px);
}

/* MOBILE */
@media (max-width: 768px) {
    .why-cards {
        grid-template-columns: 1fr;
    }

    .why h2 {
        font-size: 30px;
    }
}

/* USP HIGHLIGHT BOX */
.why-highlight-box {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 30px;
    margin: 40px auto 60px;

    background: white;
    padding: 25px 40px;
    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #e3eaf5;

    max-width: 800px;
}

/* ITEM */
.highlight-item {
    text-align: center;
    flex: 1;
}

.highlight-item h3 {
    font-size: 20px;
    color: #0d47a1;
    margin-bottom: 5px;
}

.highlight-item p {
    font-size: 14px;
    color: #555;
}

/* DIVIDER */
.highlight-divider {
    width: 1px;
    height: 50px;
    background: #ddd;
}

/* MOBILE */
@media (max-width: 768px) {
    .why-highlight-box {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .highlight-divider {
        display: none;
    }
}

/* ONLINE SECTION */
.online {
    padding: 80px 5%;
    text-align: center;

    background: 
        linear-gradient(rgba(30,58,138,0.85), rgba(14,165,233,0.85)),
        url("images/laptop.jpg");

    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
    overflow: hidden;
}

/* subtle overlay */
.online::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("images/pattern.png");
    opacity: 0.05;

    z-index: 0;
}

.online-container {
    max-width: 1100px;
    margin: auto;
    position: relative;
    z-index: 1;
}

/* HEADER */
.online-header .icon {
    position: relative;
    font-size: 30px;
    margin-bottom: 10px;
    display: inline-block;
}
.online-header .icon img{
    width: 60px;
    height: auto;
    display: block;
    margin: 0 auto;
}
/*video blinking effect*/
.live-badge {
    position: absolute;
    top: -8px;
    right: -20px;
    background: #ff0000;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(255,0,0,0.6);
    animation: blinkPulse 1.2s infinite;
}


/*blink animation code*/
@keyframes blinkPulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}


.online-header h2 {
    font-size: 34px;
    margin-bottom: 10px;
}

.online-header p {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* CARDS GRID */
.online-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.online-card {
    background: rgba(255,255,255,0.9);
    color: #111;

    padding: 20px;
    border-radius: 14px;

    text-align: left;

    transition: 0.3s;
}

.online-card:hover {
    transform: translateY(-5px);
}

/* ICON */
.card-icon {
    font-size: 22px;
    margin-bottom: 10px;
}

/* TEXT */
.online-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.online-card p {
    font-size: 13px;
    color: #555;
}

/* BUTTON */
.online-btn {
    display: inline-block;
    margin-top: 30px;

    background: white;
    color: #2563eb;

    padding: 12px 25px;
    border-radius: 30px;

    text-decoration: none;
    font-weight: 600;

    transition: 0.3s;
}

.online-btn:hover {
    transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 768px) {
    .online-cards {
        grid-template-columns: 1fr;
    }
}

/* COURSES SECTION */
.courses {
    padding: 70px 5%;
    background: linear-gradient(to right, #f8fbff, #e3f2fd);
    text-align: center;
    position: relative;   /* 🔥 add karo */
    overflow: hidden;     /* 🔥 add karo */
}

.courses::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: 
        url("images/dna.png"),
        url("images/atom.png"),
        url("images/lab.png");

    background-repeat: no-repeat;
    
    background-position:
        left 10% top 20%,
        left 5% bottom 0,
        right 3% bottom 0;

    background-size:
        120px,
        100px,
        140px;

    opacity: 0.10;   /* 🔥 VERY LIGHT */
    z-index: 0;
}
.courses::after {
    content: "";
    position: absolute;

    right: 3%;
    top: 0;

    width: 240px;
    height: 240px;

    background: url("images/dinosaur.jpg") no-repeat center;
    background-size: contain;

    opacity: 0.20;

    /* 🔥 BLUE EFFECT */
    filter: 
        grayscale(100%) 
        sepia(100%) 
        hue-rotate(200deg) 
        saturate(400%);

    mix-blend-mode: multiply;

    animation: dinoFloat 8s ease-in-out infinite;

    z-index: 0;
}
@keyframes dinoFloat {
    0%   { transform: translateY(0) rotate(-6deg); }
    50%  { transform: translateY(-15px) rotate(4deg); }
    100% { transform: translateY(0) rotate(-6deg); }
}
.courses-container {
    max-width: 1200px;
    margin: auto;
       position: relative;
    z-index: 1;
}

.courses h2 {
    font-size: 40px;
    color: #111827;
    font-weight: 700;
}

.courses-sub {
    font-size: 18px;
    color: #6b7280;
    margin: 15px 0 50px;
}

/* GRID */
.courses-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* CARD */
.course-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    text-align: left;
    position: relative;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(25,118,210,0.2);
}

/* FEATURED */
.featured {
    border: 2px solid #1976d2;
}

/* BADGE */
.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff6a00;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
}

/* ICON */
.icon-box {
    width: 50px;
    height: 50px;
    background: #1976d2;
    color: white;
    font-size: 22px;

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

    border-radius: 12px;
    margin-bottom: 15px;
}

/* TAG */
.tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 10px;
}

/* TEXT */
.course-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.course-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.highlight-line {
    font-size: 14px;
    color: #1976d2;
    font-weight: 500;
    margin-bottom: 15px;
}

/* BUTTON */
.course-btn {
    display: inline-block;
    margin-top: 10px;
    color: #1976d2;
    text-decoration: none;
    font-weight: 600;
}

/* MOBILE */
@media (max-width: 1024px) {
    .courses-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .courses-cards {
        grid-template-columns: 1fr;
    }

    .courses h2 {
        font-size: 28px;
    }
}

/* Get Started Section - matches Online section's layered style */
.get-started {
    padding: 80px 5%;
    background: 
        linear-gradient(rgba(30,58,138,0.9), rgba(14,165,233,0.85)),
        url("images/chalkboard-texture.jpg");  /* or any subtle pattern */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    color: white;
}

/* subtle overlay pattern (like online section) */
.get-started::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("images/pattern.png");
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.get-started-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.get-started-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.get-started-left h2 {
    font-size: 42px;
    margin-bottom: 15px;
    color: white;
     text-align: left;
    /* keep white text, no gradient */
}

.get-started-left .subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: left;
}

/* Stats */
.stats {
    display: flex;
    gap: 40px;
    justify-content: flex-start;
    margin-top: 10px;
}

.stat-item {
    text-align: left;
}

.stat-number {
     font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff, #a0c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.stat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

/* Form Card - semi-transparent like online cards */
.get-started-right {
    flex: 1;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.lead-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: 0.2s;
    color: #111;
}

.form-group input:focus,
.form-group select:focus {
    background: white;
    box-shadow: 0 0 0 3px rgba(255,170,51,0.3);
}

.form-submit {
    background: linear-gradient(90deg, #ff6a00, #ee0979);
    color: white;
    padding: 14px;
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.form-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .get-started-container {
        flex-direction: column;
        text-align: center;
    }
    .get-started-left h2,
    .get-started-left .subtitle {
        text-align: center;
    }
    .stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
    }
    .stat-item {
        text-align: center;
    }
    .get-started-right {
        width: 100%;
    }
}

/* RESULTS SECTION */
/* RESULTS SECTION */
.results {
    padding: 80px 5%;
    text-align: center;

   background: 
    linear-gradient(rgba(25,118,210,0.65), rgba(66,165,245,0.65)),
    url("images/cheer students.jpg");
    background-size: cover;
    background-position: center;
    color: white;

    position: relative;
    overflow: hidden;
}

/* container */
.results-container {
    max-width: 1100px;
    margin: auto;
    position: relative;
    z-index: 1;
}

/* heading */
.results h2 {
    font-size: 38px;
    margin-bottom: 10px;

    color: #ffffff;
    font-weight: 700;

    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.results-sub {
    font-size: 16px;

    color: rgba(255,255,255,0.95);

    text-shadow: 0 2px 8px rgba(0,0,0,0.3);

    margin-bottom: 40px;
}

/* GRID (IMPORTANT FIX) */
.results-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARD */
.result-card {
    background: rgba(255,255,255,0.92);  /* 🔥 almost white */

    backdrop-filter: blur(10px);

    padding: 30px;
    border-radius: 20px;

    border: none;

    box-shadow: 0 15px 40px rgba(0,0,0,0.15);

    transition: 0.3s;
}

/* TEXT */
.result-card h3 {
    font-size: 32px;
    color: #1976d2;
}

.result-card p {
    font-size: 14px;
    color: #444;
}

/* HIGHLIGHT */
.result-card.highlight {
    border: 2px solid #1976d2;
    transform: scale(1.08);
    background: white;
}
/* HOVER */
.result-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 50px rgba(25,118,210,0.3);
}
/* TABLET */
@media (max-width: 1024px) {
    .results-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .results-cards {
        grid-template-columns: 1fr;
    }

    .results h2 {
        font-size: 28px;
    }
}
/* TESTIMONIALS */
/* TESTIMONIALS SECTION */
.testimonials {
    padding: 80px 5%;
    background: linear-gradient(to right, #f8fbff, #e3f2fd);
    text-align: center;
}

.testimonials-container {
    max-width: 1100px;
    margin: auto;
}

.testimonials h2 {
    font-size: 36px;
    color: #0d47a1;
}

.testimonials-sub {
    color: #6b7280;
    margin-bottom: 50px;
}

/* GRID */
.testimonial-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARD */
.testimonial-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    text-align: left;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(25,118,210,0.2);
}

/* HEADER */
.review-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* IMAGE */
.user-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1976d2;
}

/* NAME */
.review-header h4 {
    margin: 0;
    font-size: 16px;
}

.review-header span {
    font-size: 12px;
    color: #777;
}

/* GOOGLE ICON */
.google-icon {
    width: 20px;
    margin-left: auto;
}

/* STARS */
.stars {
    display: flex;
    gap: 2px;
    margin: 10px 0;
    font-size: 18px;
}

.stars .full {
    color: #fbbc05;
}

.stars .empty {
    color: #ddd;
}

.stars .half {
    background: linear-gradient(90deg, #fbbc05 50%, #ddd 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TEXT */
.testimonial-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* MOBILE */
@media (max-width: 768px) {
    .testimonial-cards {
        grid-template-columns: 1fr;
    }
}
.g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}