html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/*body {
  margin-bottom: 60px;
}*/

/* ===== HEADER ===== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff; /* ✅ ALWAYS WHITE */
    z-index: 1000;
    transition: all 0.35s ease;
}

    .main-header.scrolled {
        background: #ffffff;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .brand-text span {
        font-size: 17px;
        font-weight: 700;
        color: #ffffff;
        transition: color 0.35s ease;
        letter-spacing: 0.2px;
    }

.main-header.scrolled .brand-text span {
    color: #1e2d4f;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

    .desktop-nav a {
        text-decoration: none;
        color: #2f3b52;
        font-size: 16px;
        font-weight: 600;
        transition: color 0.35s ease;
    }

.main-header.scrolled .desktop-nav a {
    color: #2f3b52;
}

    .desktop-nav a:hover,
    .main-header.scrolled .desktop-nav a:hover {
        color: #ff6f2f;
    }

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: 999px;
    background: #ff7634;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.3s ease;
}

    .login-btn:hover {
        background: #ea6525;
        color: #fff;
    }

/* The scoped layout stylesheet sets a blue colour on every `a` inside _Layout
   with a higher specificity than .login-btn, so the white text is restored here
   for every interaction state. */
.header-right .login-btn,
.header-right .login-btn:link,
.header-right .login-btn:visited,
.header-right .login-btn:hover,
.header-right .login-btn:focus,
.header-right .login-btn:active {
    color: #fff;
}

/* ===== HAMBURGER ===== */
.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}

    .menu-toggle span {
        display: block;
        width: 26px;
        height: 3px;
        margin: 5px auto;
        border-radius: 20px;
        background: #ff7634;
        transition: 0.3s ease;
    }

.main-header.scrolled .menu-toggle span {
    background: #14356f;
}

/* ===== MOBILE OVERLAY ===== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 1100;
}

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* ===== MOBILE MENU ===== */
.mobile-menu {
    position: fixed;
    top: 16px;
    right: 16px;
    width: min(420px, calc(100% - 32px));
    height: calc(100vh - 32px);
    background: #ff7634;
    border-radius: 16px;
    z-index: 1200;
    transform: translateX(110%);
    transition: transform 0.35s ease;
    padding: 34px 28px 40px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    overflow-y: auto;
}

    .mobile-menu.active {
        transform: translateX(0);
    }

.menu-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 90px;
}

    .mobile-nav a {
        text-decoration: none;
        color: #ffffff !important;
        font-size: 28px;
        font-weight: 500;
        transition: 0.3s ease;
    }

        .mobile-nav a.active,
        .mobile-nav a:hover {
            color: #ffffff;
            font-weight: 700;
        }

/* ===== BODY SPACING FOR FIXED HEADER ===== */
main {
    padding-top: 95px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
    .desktop-nav {
        gap: 22px;
    }

        .desktop-nav a {
            font-size: 15px;
        }

    .brand-text span {
        font-size: 15px;
    }

    .login-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .desktop-nav,
    .login-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .header-container {
        padding: 14px 20px;
    }

    .brand-logo {
        width: 52px;
        height: 52px;
    }

    .brand-text span {
        font-size: 14px;
    }

    main {
        padding-top: 84px;
    }
}

@media (max-width: 576px) {
    .mobile-menu {
        top: 12px;
        right: 12px;
        width: calc(100% - 24px);
        height: calc(100vh - 24px);
        border-radius: 14px;
        padding: 26px 20px 32px;
    }

    .mobile-nav {
        margin-top: 80px;
        gap: 26px;
    }

        .mobile-nav a {
            font-size: 25px;
        }

    .menu-close {
        font-size: 40px;
        top: 14px;
        right: 18px;
    }

    .brand {
        gap: 10px;
    }

    .brand-text span {
        font-size: 13px;
    }
}

/* ===== HERO BASE ===== */
.hero {
    position: relative;
    /*height: 100vh;*/
    min-height: 100vh; /* ✅ FIX */
    height: auto;

    width: 100%;
    overflow: hidden;
}

/* ===== VIDEO FIX (FULL SCREEN) ===== */
.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ===== IMAGE FIX (VERY IMPORTANT) ===== */
.hero-image {
    display: none;
    position: absolute;
    inset: 0;
    background: url('/images/mukundapuram_public_school.jpg') center center no-repeat;
    background-size: contain; /* 🔥 THIS FIXES CROPPING */
    background-color: black; /* fills empty space nicely */
}

/* ===== OVERLAY ===== */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

/* ===== CONTENT CENTER FIX ===== */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* PERFECT CENTER */
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 900px;
    z-index: 2;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

    /* Hidden after the intro delay. The element is absolutely positioned, so
       removing it cannot shift the surrounding layout. */
    .hero-content.hero-content-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

@media (prefers-reduced-motion: reduce) {
    .hero-content {
        transition: none;
    }
}

    /* TEXT */
    .hero-content h1 {
        font-size: 64px;
        font-weight: 800;
    }

    .hero-content p {
        font-size: 20px;
        color: #ff7634;
        margin: 15px 0 25px;
    }

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

.btn-primary {
    background: #ff7634;
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
}

.btn-secondary {
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    text-decoration: none;
}

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

    .hero-video {
        display: none;
    }

    .hero-image {
        display: block;
    }

    /* TEXT SIZE FIX */
    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }
}


/* ===== ABOUT SECTION ===== */
.about-section {
    background: #f6f6f6;
    padding: 40px 0;
}

.about-wrapper {
    display: flex;
    gap: 60px;
    align-items: center;
}

/* LEFT */
.about-left {
    flex: 1;
}

.about-tag {
    color: #ff7634;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.about-left h2 {
    font-size: 48px;
    font-weight: 800;
    color: #1e2d4f;
    margin: 15px 0 20px;
}

.about-left p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* LEARN MORE */
.learn-more {
    color: #ff7634;
    text-decoration: none;
    font-weight: 600;
}

/* RIGHT */
.about-right {
    flex: 1;
}

/* STATS BOX */
.stats-box {
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* EACH ITEM
   Each statistic gets its own accent colour, set once on .stat-item and reused by
   the icon, the number and the left rule, so a palette change is a one-line edit.
   All four are AA-contrast on white. */
.stat-item {
    --stat-accent: #1e2d4f;
    --stat-tint: rgba(30, 45, 79, 0.08);
    padding-left: 16px;
    border-left: 4px solid var(--stat-accent);
    transition: transform 0.25s ease;
}

/* Two tones per statistic: a deep shade for the number and left rule, and a brighter
   shade for the icon on its soft tint. Every number tone clears AA on white. */
.stat-item--students {
    --stat-accent: #1d4ed8; /* royal blue */
    --stat-icon: #2563eb;
    --stat-tint: #dbeafe;
}

.stat-item--teachers {
    --stat-accent: #047857; /* emerald green */
    --stat-icon: #059669;
    --stat-tint: #d1fae5;
}

.stat-item--office {
    --stat-accent: #c2410c; /* vibrant orange */
    --stat-icon: #ea580c;
    --stat-tint: #ffedd5;
}

.stat-item--batches {
    --stat-accent: #6d28d9; /* elegant purple */
    --stat-icon: #7c3aed;
    --stat-tint: #ede9fe;
}

.stat-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 50%;
    font-size: 20px;
    color: var(--stat-icon, var(--stat-accent));
    background: var(--stat-tint);
}

.stat-item h3 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--stat-accent);
    margin-bottom: 0;
}

.stat-item p {
    margin-top: 5px;
    color: #555;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.stats-box:hover .stat-item {
    transform: translateY(-2px);
}

@media (max-width: 992px) {

    .about-wrapper {
        flex-direction: column;
    }

    .about-left h2 {
        font-size: 34px;
    }

    .stats-box {
        padding: 30px;
        gap: 25px;
    }

    .stat-item h3 {
        font-size: 32px;
    }
}
.stats-box {
    transition: 0.3s;
}

    .stats-box:hover {
        transform: translateY(-5px);
    }


/* ===== TEAM SECTION ===== */
.team-section {
    background: #f6f6f6;
    padding: 40px 0;
    text-align: center;
}

/* TITLE */
.section-title {
    font-size: 42px;
    font-weight: 800;
    color: #1e2d4f;
}

/*.title-line {
    width: 80px;
    height: 4px;
    background: #ff7634;
    margin: 10px auto 40px;
    border-radius: 10px;
}*/

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

/* CARD */
.team-card {
    text-align: center;
}

    /* IMAGE */
    .team-card img {
        width: 100%;
        height: 350px;
        object-fit: cover; /* keeps same size */
        /* These are portrait sources in a landscape box, so cover crops vertically
           only. All three subjects sit high in frame with little headroom, so the
           crop is taken entirely off the bottom to keep every head intact. */
        object-position: center top;
        border-radius: 20px;
    }

    /* NAME */
    .team-card h3 {
        margin-top: 15px;
        font-size: 20px;
        font-weight: 700;
        color: #1e2d4f;
    }

    /* ROLE */
    .team-card p {
        color: #777;
        margin-top: 5px;
    }
/* ===== TABLET ===== */
@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== MOBILE ===== */
@media (max-width: 576px) {

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-card img {
        height: auto; /* 🔥 FULL IMAGE (no crop issue) */
    }

    .section-title {
        font-size: 28px;
    }
}
.team-card img {
    transition: 0.3s;
}

.team-card:hover img {
    transform: scale(1.05);
}


/* ===== SECTION ===== */
.advisory-section {
    background: #f6f6f6;
    padding: 40px 0;
    text-align: center;
}

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

/* CARD */
.advisory-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: block;
    text-decoration: none;
    color: inherit;
}

    .advisory-card:focus-visible {
        outline: 3px solid #ff6a2f;
        outline-offset: 3px;
    }

    /* IMAGE */
    .advisory-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
    }

/* GRADIENT OVERLAY */
.overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

    /* NAME */
    .overlay p {
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        margin: 0;
    }

/* ===== TABLET ===== */
@media (max-width: 992px) {
    .advisory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== MOBILE ===== */
@media (max-width: 576px) {

    .advisory-grid {
        grid-template-columns: 1fr;
    }

    .advisory-card img {
        height: auto; /* full image visible */
    }
}

.advisory-card img {
    transition: 0.4s;
}

.advisory-card:hover img,
.advisory-card:focus-visible img {
    transform: scale(1.05);
}

.advisory-card .overlay {
    transition: 0.4s;
}

.advisory-card:hover .overlay,
.advisory-card:focus-visible .overlay {
    background: linear-gradient(to top, rgba(255,106,47,0.85), transparent);
}

/* ===== ACHIEVEMENT SECTION ===== */
.achievement-section {
    background: #f6f6f6;
    padding: 60px 0;
    text-align: center;
    overflow: hidden;
}

.achievement-subtitle {
    max-width: 640px;
    margin: 0 auto 40px;
    color: #5b6882;
    font-size: 17px;
}

/* SLIDER - every photo from the featured albums, scrolling continuously */
.achievement-slider {
    position: relative;
    overflow: hidden;
}

/* TRACK - holds the photo strip twice, so -50% returns to an identical frame */
.achievement-track {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    width: max-content;
    animation: scrollSlider 60s linear infinite;
}

/* Pause while the visitor is looking at or tabbing through a photo. */
.achievement-slider:hover .achievement-track,
.achievement-slider:focus-within .achievement-track {
    animation-play-state: paused;
}

/* CARD */
.achievement-card {
    position: relative;
    flex: 0 0 auto;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 45, 79, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .achievement-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgba(30, 45, 79, 0.18);
    }

    .achievement-card:focus-visible {
        outline: 3px solid #ff6b35;
        outline-offset: 3px;
    }

    /* A fixed height with automatic width keeps every poster at its own natural
       shape - nothing is cropped, stretched or letterboxed. */
    .achievement-card img {
        display: block;
        height: 320px;
        width: auto;
        max-width: none;
    }

/* CAPTION */
.achievement-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background: linear-gradient(to top, rgba(14, 22, 40, 0.88), rgba(14, 22, 40, 0));
}

/* AUTO SCROLL ANIMATION */
@keyframes scrollSlider {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .achievement-card img {
        height: 240px;
    }

    .achievement-subtitle {
        font-size: 15px;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .achievement-card img {
        height: 200px;
    }
}

/* Without animation the strip becomes a normal horizontal scroller. */
@media (prefers-reduced-motion: reduce) {
    .achievement-slider {
        overflow-x: auto;
    }

    .achievement-track {
        animation: none;
    }

    .achievement-card {
        transition: none;
    }
}

/* ===== AFFILIATED SECTION ===== */
.affiliated-section {
    background: #243a5e; /* dark blue */
    padding: 70px 0;
}

/* TITLE */
.affiliated-title {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 50px;
}

/* LOGO WRAPPER */
.affiliated-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* CARD */
.affiliated-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* shadow like screenshot */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.25);
    transition: 0.3s;
}

    /* IMAGE */
    .affiliated-card img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* HOVER EFFECT */
    .affiliated-card:hover {
        transform: translateY(-8px);
    }

    /* Cards that link to a certificate are anchors; keep them identical to the
       plain cards and give keyboard users a visible focus ring. */
    a.affiliated-card {
        text-decoration: none;
        color: inherit;
    }

        a.affiliated-card:focus-visible {
            outline: 3px solid #ff6a3c;
            outline-offset: 4px;
        }

@media (max-width: 768px) {

    .affiliated-title {
        font-size: 26px;
    }

    .affiliated-logos {
        gap: 25px;
    }

    .affiliated-card {
        width: 120px;
        height: 120px;
        padding: 15px;
    }
}

@media (max-width: 480px) {

    .affiliated-logos {
        gap: 15px;
    }

    .affiliated-card {
        width: 100px;
        height: 100px;
    }
}


/* ===== SECTION ===== */
.testimonial-section {
    background: #e9e9f2;
    padding: 60px 0;
}

/* ===== WRAPPER ===== */
.testimonial-wrapper {
    display: flex;
    gap: 40px;
    align-items: stretch; /* 🔥 KEY FIX */
}

/* ===== TITLE ===== */
.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1f2f4f;
}

/* ===== LEFT & RIGHT ===== */
.testimonial-left,
.testimonial-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===== CARD ===== */
.testimonial-card {
    display: flex;
    gap: 20px;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    flex: 1; /* 🔥 MATCH HEIGHT */
}

    /* IMAGE */
    .testimonial-card img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #ffe5dc;
    }

/* CONTENT */
.testimonial-content {
    flex: 1;
}

.stars {
    color: #ff5a2c;
    font-size: 18px;
    margin-bottom: 10px;
}

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

.testimonial-content h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2f4f;
}

.testimonial-content span {
    font-size: 13px;
    color: #777;
}

/* ===== DOTS ===== */
.testimonial-dots {
    text-align: center;
    margin-top: 15px;
}

    .testimonial-dots span {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
    }

    .testimonial-dots .active {
        background: #ff5a2c;
        width: 20px;
        border-radius: 10px;
    }

/* ===== ARROWS ===== */
.testimonial-arrows {
    text-align: center;
    margin-top: 15px;
}

    .testimonial-arrows button {
        width: 40px;
        height: 40px;
        border: none;
        background: #fff;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

/* ===== VIDEO ===== */
.video-box {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    flex: 1;
    display: flex;
}

    /* 🔥 PERFECT HEIGHT MATCH */
    .video-box iframe {
        width: 100%;
        height: 70%;
        min-height: 100%;
        border: none;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {

    .testimonial-wrapper {
        flex-direction: column; /* 🔥 STACK */
        gap: 25px;
    }

    .video-box iframe {
        height: 200px; /* 🔥 MOBILE HEIGHT */
    }
}

@media (max-width: 576px) {

    .testimonial-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

        .testimonial-card img {
            width: 70px;
            height: 70px;
        }

    .section-title {
        text-align: center;
    }
}



/* ===== CTA SECTION ===== */
.cta-section {
    background: #f3f3f3;
    padding: 60px 20px;
}

/* BOX */
.cta-box {
    max-width: 1100px;
    margin: auto;
    background: #1f3556;
    border-radius: 30px;
    padding: 70px 20px;
    text-align: center;
    color: #fff;
}

    /* TOP TEXT */
    .cta-box h2 {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    /* MAIN TITLE */
    .cta-box h1 {
        font-size: 52px;
        font-weight: 800;
        color: #ff6b35;
        margin-bottom: 15px;
        line-height: 1.2;
    }

/* SUB TEXT */
.sub-text {
    font-size: 18px;
    margin-bottom: 10px;
    opacity: 0.9;
}

/* DESCRIPTION */
.desc {
    font-size: 20px;
    margin-bottom: 35px;
}

/* BUTTON */
.cta-btn {
    display: inline-block;
    background: #ff6b35;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

    .cta-btn:hover {
        background: #ff4e1f;
    }

@media (max-width: 768px) {

    .cta-box {
        padding: 50px 15px;
    }

        .cta-box h1 {
            font-size: 34px;
        }

        .cta-box h2 {
            font-size: 22px;
        }

    .desc {
        font-size: 16px;
    }

    .cta-btn {
        padding: 12px 30px;
    }
}


.cta-section,
.qr-section {
    position: relative;
    z-index: 1;
}


/* ===== QR SECTION ===== */
.qr-section {
    background: #f2f2f2;
    padding: 60px 20px;
}

/* CONTAINER */
.qr-container {
    max-width: 900px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 120px; /* space between QR */
    align-items: center;
}

/* CARD */
.qr-card {
    text-align: center;
}

    /* IMAGE */
    .qr-card img {
        width: 180px;
        height: 180px;
        object-fit: contain;
        background: #fff;
        padding: 10px;
        border-radius: 10px;
    }

    /* TEXT */
    .qr-card p {
        margin-top: 15px;
        font-size: 18px;
        color: #1f2f4f;
        font-weight: 500;
    }
@media (max-width: 768px) {

    .qr-container {
        flex-direction: column;
        gap: 40px;
    }

    .qr-card img {
        width: 150px;
        height: 150px;
    }

    .qr-card p {
        font-size: 16px;
    }
}


.navbar-nav .nav-link {
    color: #1e2d4f; /* current */
}

/*a[b-wlh4dxq0gp] {
    color: #f3f7ff !important;
}*/


/* REMOVE BULLETS */
.mobile-nav,
.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* CENTER ALIGN MENU */
.mobile-nav {
    text-align: center;
}

    .mobile-nav a,
    .mobile-dropdown-title {
        display: block;
        padding: 12px 0;
        font-size: 26px;
        color: #0f2d5c;
        text-decoration: none;
    }

/* SUBMENU STYLE */
.mobile-submenu {
    padding-left: 0;
}

.mobile-submenu {
    display: none;
}

    .mobile-submenu.open {
        display: block;
    }

.submenu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Remove default list dot */
.nav-item {
    list-style: none;
}


/* =========================
   SECTION TITLE STYLE
========================= */
.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2f4f;
    text-align: center;
    position: relative;
    display: inline-block;
}

    .section-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 4px;
        background: #ff5a2c;
        margin: 10px auto 0;
        border-radius: 10px;
    }



/* =========================
   FOOTER FINAL DESIGN
========================= */

.main-footer {
    background: #1f3557; /* dark blue like 2nd */
    color: #fff;
    padding: 60px 40px 20px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    
}

/* HEADINGS */
.footer-col h3 {
    color: #ff6b35;
    margin-bottom: 20px;
    font-size: 18px;
}

/* LOGOS */
.footer-logo {
    width: 80px;
    margin-bottom: 15px;
}

.managed-logo {
    width: 200px;
    margin-bottom: 15px;
}

/* TEXT */
.footer-col p {
    color: #d6dbe5;
    line-height: 1.8;
}

/* The scoped layout stylesheet colours every anchor inside _Layout blue, so the
   contact email is kept in the footer's own text colour. */
.footer-col .footer-email {
    color: #d6dbe5;
    text-decoration: none;
}

    .footer-col .footer-email:hover,
    .footer-col .footer-email:focus {
        color: #ff6b35;
        text-decoration: underline;
    }

/* LINKS */
.footer-links {
    list-style: none;
    padding: 0;
}

    .footer-links li {
        margin-bottom: 10px;
        position: relative;
        padding-left: 18px;
    }

        .footer-links li::before {
            content: "›";
            position: absolute;
            left: 0;
            color: #ff6b35;
        }

    .footer-links a {
        color: #d6dbe5;
        text-decoration: none;
    }

        .footer-links a:hover {
            color: #ff6b35;
        }

/* SOCIAL (VERTICAL LIKE 1st IMAGE) */
.social-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .social-vertical a {
        width: 45px;
        height: 45px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
    }

/* COLORS */
.fb {
    background: #3b5998;
}

.insta {
    background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.x {
    background: #000;
}

.yt {
    background: #ff0000;
}

.call {
    background: #25d366;
}

/* BOTTOM */
.footer-bottom {
    border-top: 1px solid #3b4e6d;
    margin-top: 40px;
    padding-top: 15px;
    text-align: center;
    color: #c5cbd8;
    font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-vertical {
        flex-direction: row;
        justify-content: center;
    }
}

/*a[b-wlh4dxq0gp] {
    color: #fdfeff !important;
}*/
footer .footer-links a,
footer .footer-links a:visited,
footer .footer-links a:hover {
    color: #ffffff !important;
}



@media (max-width:768px) {

    .hero {
        min-height: auto !important;
        height: 320px !important; /* adjust if needed */
    }

    .hero-image {
        background-size: cover !important;
        background-position: center top;
        background-color: transparent !important;
    }

    .hero-overlay {
        height: 100%;
    }
}