/* Base & Reset */
:root {
    --maroon: #8b1538;
    --navy: #0f172a;
    --red: #e11d48;
    --gold: #fbbf24;
    --white: #ffffff;
    --light: #f8f9fa;
    --dark: #1f2937;
    --gray: #6b7280;
    --border: #e5e7eb;
    --font-head: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--dark);
    line-height: 1.6;
    background: var(--white);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
    /* Ensure container takes width */
}

.grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

    .grid.two {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.four {
        grid-template-columns: repeat(4, 1fr);
    }

.flex {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* Allow wrapping global flex */
}

.center {
    text-align: center;
}

.justify {
    text-align: justify;
}

.mb {
    margin-bottom: 2rem;
}

.py {
    padding: 4rem 0;
}

.bg-light {
    background: var(--light);
}

.text {
    color: var(--gray);
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    /* Prevent text overflow */
}

.heading {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.subheading {
    font-size: 1.5rem;
    color: var(--navy);
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
    white-space: nowrap;
    /* Keep buttons one line usually */
}

    .btn:hover {
        transform: translateY(-2px);
    }

    .btn.white {
        background: var(--white);
        color: var(--navy);
    }

    .btn.red {
        background: var(--red);
        color: var(--white);
    }

    .btn.green {
        background: #198754;
        color: var(--white);
    }

    .btn.blue {
        background: #25408f;
        color: var(--white);
    }

    .btn.small {
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
    }

/* Header */
.header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #25408f;
    height: 80px;
    /* Fixed height */
    padding: 0;
    z-index: 999;
    border-bottom: none;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    /* Center content vertically */
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
    height: 100%;
    flex-wrap: nowrap;
    /* Force single row */
}

.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    flex-shrink: 0;
    /* Prevent logo shrinking */
    height: 100%;
}

    .brand .logo {
        height: 79px;
        width: auto;
    }

.brand-text {
    display: flex;
    flex-direction: column;
    color: var(--white);
    display: none;
    /* User removed text */
}

    .brand-text .en {
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .brand-text .hi {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        opacity: 0.8;
    }

.menu {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
    flex-wrap: nowrap;
    /* Force single row */
    /* overflow-x: auto;  REMOVED to allow dropdowns */
    margin-left: auto;
    /* Push to right */
    max-width: 100%;
    /* Prevent taking more than available */
}

    .menu li {
        height: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        /* Don't shrink items */
    }

    .menu a {
        color: var(--white);
        font-weight: 500;
        font-size: 0.95rem;
        padding: 0 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        transition: 0.2s;
        white-space: nowrap;
    }

        .menu a:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .menu a.active {
            background: #ff7f00;
            color: var(--white);
        }

    /* Submenu Styles */
    /* Submenu Styles */
    .menu .has-submenu {
        position: relative;
    }

    .menu .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #1e5a9e;
        /* Blue background matching reference */
        min-width: 250px;
        border-radius: 0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        /* Removed transform for cleaner "snap" behavior requested, or kept minimal */
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 99999;
        padding: 0;
        display: none;
        /* Default hidden */
    }

    /* Show IMMEDIATE submenu on hover */
    .menu .has-submenu:hover > .submenu {
        opacity: 1;
        visibility: visible;
        display: block;
    }

    .menu .submenu li {
        width: 100%;
        height: auto;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        /* Ensure nested submenus position relative to this item */
    }

        .menu .submenu li:last-child {
            border-bottom: none;
        }

    .menu .submenu a {
        width: 100%;
        height: auto;
        padding: 0.9rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 400;
        display: block;
        transition: all 0.2s;
        color: var(--white) !important;
        background: transparent;
    }

        .menu .submenu a:hover {
            background: rgba(255, 255, 255, 0.2);
            padding-left: 1.8rem;
        }

    /* Highlight parent item when nested submenu is hovered */
    .menu .submenu li:hover > a {
        background: #ff7f00;
        /* Orange highlight */
        color: var(--white);
    }

    /* Add Right Arrow to items with nested submenus */
    .menu .submenu li.has-submenu > a {
        position: relative;
        padding-right: 2.5rem;
        /* Make room for arrow */
    }

        .menu .submenu li.has-submenu > a::after {
            content: "\203A";
            /* Right chevron */
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-57%);
            /* Optical center */
            font-weight: bold;
            font-size: 1.2rem;
            line-height: 1;
        }

    /* Nested Submenu (Level 3+) */
    .menu .submenu .submenu {
        top: 0;
        left: 100%;
        /* Fly out to the right */
        margin-top: 0;
        min-width: 250px;
        background: #1e5a9e;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Show nested submenu on hover of its parent li */
    .menu .submenu li:hover > .submenu {
        opacity: 1;
        visibility: visible;
        display: block;
    }

/* Mobile Nested Fixes */
@media (max-width: 768px) {
    .menu .submenu .submenu {
        position: static;
        padding-left: 1rem;
        background: rgba(0, 0, 0, 0.1);
        transform: none;
        margin: 0;
    }
}

.menu a.active {
    background: #ff7f00;
    color: var(--white);
    /*display: block;*/
    /* Ensure it takes up space */
    width: 100%;
    /* Full width */
    border-radius: 0px;
}

.toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    flex-shrink: 0;
}

/* Hero */
.hero {
    min-height: 80vh;
    /* Allow growth */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-top: 0;
    padding: 4rem 0;
    /* Add padding for content overflow safety */
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
}

.hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    max-width: 100%;
    padding-left: 5;
    margin-left: 0;
}

/* yha se change krnahh card padding */

.hero .card {
    background: rgba(13, 64, 123, 0.5) !important;
    /* Stronger Blurry Blue and forced */
    backdrop-filter: blur(40px) !important;
    padding: 3rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
    width: 100%;
}

.hero .title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Improve legibility */
    line-height: 1.2;
}

.hero .subtitle {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    font-weight: 400;
    /* Increase weight slightly */
    opacity: 1;
    /* Full opacity */
    color: #ffffff;
    /* White for better contrast */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /* Safe wrapping */
}

.hero .cta {
    position: absolute;
    bottom: 3rem;
    left: 0;
    width: 100%;
    z-index: 5;
    animation-delay: 0.4s;
}

    .hero .cta .btn svg {
        margin-right: 8px;
    }

    .hero .cta .btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        display: inline-flex;
        align-items: center;
        font-weight: 700;
        box-shadow: 0 4px 15px rgba(103, 99, 100, 0.4);
        transform: scale(1.05);
    }

.badge {
    border: 1px solid var(--red);
    color: var(--red);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* News Strip */
.news {
    background: var(--red);
    color: var(--white);
    padding: 0.8rem 0;
    overflow: hidden;
    border-bottom: 4px solid var(--maroon);
}

    .news .container {
        align-items: stretch;
        flex-wrap: nowrap;
        /* Keep marquee on one line usually */
    }

    .news .label {
        font-weight: 800;
        background: var(--red);
        z-index: 2;
        padding-right: 1rem;
        white-space: nowrap;
    }

    .news .marquee {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

    .news .content {
        display: inline-block;
        animation: scroll 80s linear infinite;
        padding-left: 100%;
    }

    .news .item {
        margin-right: 3rem;
        font-weight: 500;
    }

@keyframes scroll {
    from {
        transform: translateX(0);
    }

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

/* Main Content yha se change kr skte h pg aur ug width */
.main .grid {
    grid-template-columns: 2fr 2fr;
}

/* Programs */
.program {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: 0.3s;
    height: 100%;
    /* Equal height */
    display: flex;
    flex-direction: column;
}

    .program:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: var(--maroon);
    }

    .program .icon {
        width: 4rem;
        height: 4rem;
        margin: 0 auto 1.5rem;
        background: linear-gradient(135deg, var(--maroon), #6d102b);
        border-radius: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        flex-shrink: 0;
    }

        .program .icon.dark {
            background: linear-gradient(135deg, var(--navy), #0a0f1c);
        }

    .program .name {
        font-size: 1.2rem;
        color: var(--navy);
        margin-bottom: 0.5rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .program .desc {
        font-size: 0.9rem;
        color: var(--gray);
        margin-bottom: 1.5rem;
        flex-grow: 1;
        /* Push details down */
    }

    .program .details {
        background: var(--light);
        padding: 1rem;
        border-radius: 0.5rem;
        text-align: left;
        font-size: 0.9rem;
        margin-top: auto;
        /* Push to bottom */
    }

        .program .details .detail-item {
            padding: 0.3rem 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0;
        }

            .program .details .detail-item:last-child {
                border: none;
            }

/* Sidebar Notice */
.sidebar .panel {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    height: 400px;
}

.sidebar .panel-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.sidebar .scroll {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.sidebar .list {
    animation: scrollUp 10s linear infinite;
}

    .sidebar .list li {
        margin-bottom: 1rem;
    }

    .sidebar .list a {
        color: var(--navy);
        text-decoration: underline;
        font-size: 0.9rem;
    }

    .sidebar .list:hover {
        animation-play-state: paused;
    }

@keyframes scrollUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

/* Admissions - Course Cards */
.course {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: 0.3s;
    height: 100%;
}

    .course:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .course .title {
        font-size: 1.1rem;
        color: var(--navy);
        margin-bottom: 0.5rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .course .meta span {
        display: block;
        font-size: 0.85rem;
        color: var(--gray);
        margin-bottom: 0.2rem;
    }




/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

    .section-title h2 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
        color: #444444;
    }

        .section-title h2::after {
            content: "";
            position: absolute;
            display: block;
            width: 50px;
            height: 3px;
            background: #e03a3c;
            bottom: 0;
            left: calc(50% - 25px);
        }

.clients {
    padding: 40px 0;
    background: #fff;
}

    .clients .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .clients .swiper-slide img {
            /* Limit width */
            height: auto;
            opacity: 1;
            /* Full visibility */
            transition: 0.3s;
            filter: none;
            /* Full color */
        }

    .clients .swiper-pagination {
        margin-top: 20px;
        position: relative;
    }

        .clients .swiper-pagination .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background-color: #fff;
            opacity: 1;
            border: 1px solid #ff7800;
        }

        .clients .swiper-pagination .swiper-pagination-bullet-active {
            background-color: #ff7800;
        }




















/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/

.counts {
    padding-top: 80px;
}

    .counts .count-box {
        padding: 30px 30px 25px 30px;
        width: 100%;
        position: relative;
        text-align: center;
        box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        background: #fff;
        /* Default white background */
    }



        /* Custom Blue Color Box */
        .counts .count-box.blueColor {
            background: #25408f;
            /* Brand Blue */
            color: #fff;
        }

            .counts .count-box.blueColor p,
            .counts .count-box.blueColor span {
                color: #fff;
            }

        .counts .count-box i {
            position: absolute;
            width: 54px;
            height: 54px;
            top: -27px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            background: #fff;
            color: #ff7800;
            border-radius: 50px;
            border: 2px solid #fff;
            box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .counts .count-box span {
            font-size: 36px;
            display: block;
            font-weight: 700;
            color: #111111;
        }

        .counts .count-box p {
            padding: 0;
            margin: 0;
            font-family: "Raleway", sans-serif;
            font-size: 14px;
        }















/* Footer */
.footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 4rem 0 1rem;
}

    .footer .footer-logo {
        height: 2.5rem;
        margin-bottom: 1rem;
    }

    .footer .brand-title {
        color: var(--white);
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .footer .address p {
        margin-bottom: 0.3rem;
        font-size: 0.9rem;
    }

    .footer .foot-head {
        color: var(--white);
        font-size: 0.9rem;
        letter-spacing: 1px;
        margin-bottom: 1.2rem;
    }

    .footer .links li {
        margin-bottom: 0.6rem;
    }

    .footer .links a:hover {
        color: var(--gold);
    }

    .footer .social {
        display: flex;
        gap: 1rem;
    }

        .footer .social a {
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: 0.3s;
        }

            .footer .social a:hover {
                background: var(--gold);
                color: var(--navy);
                transform: translateY(-3px);
            }

    .footer .bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 3rem;
        padding-top: 1.5rem;
        text-align: center;
        font-size: 0.85rem;
    }

/* Responsive */
@media (max-width: 992px) {
    .main .grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 0.8rem 1rem;
        flex-wrap: nowrap;
        /* Keep header bar single line on mobile if possible, but allow content scrolling */
        min-height: 60px;
    }

    .nav {
        min-height: 60px;
        padding: 0 1rem;
        flex-wrap: nowrap;
    }

    .brand .logo {
        height: 60px;
    }

    .brand-text {
        display: none;
    }

    /* Hide complicated text on mobile for space */

    .toggle {
        display: block;
    }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #25408f;
        /* Match header */
        flex-direction: column;
        padding: 1rem 0;
        /* Remove horizontal padding */
        border-radius: 0 0 0.5rem 0.5rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        display: none;
        margin-top: 0;
        align-items: flex-start;
        height: auto;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

        .menu.open {
            display: flex;
        }

        .menu a {
            color: var(--white);
            display: block;
            padding: 0.8rem 1.5rem;
            min-height: auto;
            width: 100%;
        }

        .menu li {
            display: block;
            height: auto;
            width: 100%;
        }

        /* Mobile Submenu Styles */
        .menu .submenu {
            position: static;
            display: none;
            /* Hidden by default */
            opacity: 1;
            visibility: visible;
            transform: none;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 0.3rem;
            margin-top: 0.5rem;
            box-shadow: none;
        }

        /* Show submenu when parent li has 'open' class */
        .menu .has-submenu.open > .submenu {
            display: block;
        }

        .menu .submenu a {
            padding-left: 1.5rem;
            font-size: 0.85rem;
        }

    .grid.two,
    .grid.four {
        grid-template-columns: 1fr;
    }

    .hero .title {
        font-size: 2rem;
    }

    .course {
        flex-direction: column;
        align-items: flex-start;
    }

        .course .btn {
            width: 100%;
            text-align: center;
        }
}

/* Page Hero */

/* Bootstrap Integration Fixes & Overrides */
/* Restore Reset */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

/* Restore Links */
a {
    transition: 0.2s;
    text-decoration: none;
    color: inherit;
}

    a:hover {
        text-decoration: none;
        color: inherit;
    }

/* Restore Container */
.container {
    padding: 0 1.5rem;
    max-width: 1200px !important;
    /* Force custom width overrides Bootstrap */
}

/* Restore Buttons */
.btn {
    border-radius: 50px;
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    line-height: normal;
}

@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* Layout Wrapper for Left-Side Cards */
.hero-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 25%;
    min-width: 320px;
    margin-right: auto;
    /* Ensure it aligns left in container */
    margin-left: 0;
}

/* Update Card Styles for Split Layout */
.hero .card {
    background: rgba(255, 255, 255, 0.1);
    /* Lighter Glass effect */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: left;
    max-width: 100%;
    margin-bottom: 0.5rem;
}

    .hero .card:hover {
        transform: translateX(5px);
        /* Slide right slightly on hover */
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.4);
    }

/* Typography Updates */
.hero .title {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--white);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

    .hero .title a:hover {
        color: #ff962c;
        opacity: 1;
    }

.hero .subtitle {
    font-size: 1.1rem;
    color: #f8fafc;
    margin-bottom: 0px;
    opacity: 1;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* CTA Button Updates - Now Standalone */
.hero .cta {
    margin-top: 1rem;
    gap: 1rem;
}

    .hero .cta .btn {
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .hero .cta .badge {
        background: rgba(255, 255, 255, 0.9);
        color: var(--red);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

/* Animation for Cards */
@keyframes bounceInLeft {

    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounce-in {
    animation: bounceInLeft 1s;
}


/* --------------------------------------------------------------------------
   Sticky WhatsApp Button
-------------------------------------------------------------------------- */
.sticky-whatsapp {
    position: fixed;
    bottom: 400px;
    /* Lower position */
    right: 0;
    /* Stuck to edge */
    z-index: 9999;
    width: 80px;
    height: 60px;
    /* Slightly less height */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    background: #25D366;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-right: 5px;
}

.lsbot {
    position: fixed;
    bottom: 40px;
    /* Lower position */
    right: 0;
    /* Stuck to edge */
    z-index: 9999;
    width: 80px;
    height: 60px;
}

.sticky-whatsapp img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.sticky-whatsapp:hover {
    width: 70px;
    /* Expand on hover */
    background: #20BA5A;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.sticky-whatsapp {
    animation: pulse 2s infinite;
}

.page-hero {
    background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('images/hero-background.jpg');
    background-size: cover;
    background-position: center;
    padding: 8rem 0 4rem;
    /* More top padding for fixed header */
    color: var(--white);
    text-align: center;
    margin-top: 0;
}

    .page-hero .title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--white);
        line-height: 1.2;
    }

    .page-hero .desc {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.9);
        max-width: 700px;
        margin: 0 auto;
    }

/* Content Page Typography */
.content h2 {
    font-size: 1.8rem;
    color: var(--navy);
    margin-bottom: 1rem;
    font-weight: 700;
}

.content h3 {
    font-size: 1.4rem;
    color: var(--maroon);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.content p {
    margin-bottom: 1.5rem;
    color: var(--dark);
}

.content ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--dark);
}

.content li {
    margin-bottom: 0.5rem;
}

/* Fix for Button Overflow on Small Screens */
@media (max-width: 470px) {
    .cta .btn {
        white-space: normal;
        max-width: 100%;
        height: auto;
        text-align: center;
        justify-content: center;
        line-height: 1.4;
    }
}

/* --------------------------------------------------------------
# Elite Alumni Section
-------------------------------------------------------------- */
.elite-slider .swiper-slide {
    padding: 10px;
    height: auto;
    display: flex;
    /* Ensures slides stretch to same height */
}

.elite-card {
    background: #25408f;
    padding: 15px;
    border-radius: 40px 0 40px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
    /* Fills the slide height */
    display: flex;
    flex-direction: column;
}

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

.elite-content {
    background: #fff;
    border-radius: 35px 0 35px 0;
    /* Matches outer shape */
    overflow: hidden;
    text-align: center;
    position: relative;
    padding-bottom: 60px;
    /* Space for footer */
    flex: 1;
    /* Fills remaining space */
    display: flex;
    flex-direction: column;
}

.elite-img-wrapper {
    padding: 15px;
    background: #fff;
}

.elite-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    /* Or rounded square per design, stick to circle for now or inspect image closer */
    border: 3px solid #eee;
}

/* Yellow Nameplate */
.elite-nameplate {
    background: #f8c822;
    /* Vibrant Yellow */
    padding: 10px 5px;
    width: 100%;
    margin-top: 10px;
}

    .elite-nameplate .name {
        font-size: 0.95rem;
        font-weight: 800;
        color: #000;
        margin: 0;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .elite-nameplate .role {
        font-size: 0.75rem;
        color: #333;
        margin: 0;
        font-weight: 600;
    }

/* Footer with Logo */
.elite-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.company-logo {
    max-height: 40px;
    max-width: 80%;
    object-fit: contain;
}

/* --------------------------------------------------------------
# FAQ Section
-------------------------------------------------------------- */
.accordion-button:not(.collapsed) {
    color: #25408f;
    background-color: transparent;
    box-shadow: none;
}

.accordion-button::after {
    /* Custom icon if needed, or stick to bootstrap default but colored */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2325408f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    border-color: #25408f;
}

/* --------------------------------------------------------------
# Admission Enquiry Section
-------------------------------------------------------------- */
#admission-enquiry {
    background: var(--light);
}

    #admission-enquiry .card-custom {
        background: var(--white);
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 2rem;
        height: 100%;
        border: 1px solid var(--border);
    }

    #admission-enquiry .form-heading {
        color: var(--navy);
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    #admission-enquiry label {
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--dark);
        margin-bottom: 0.5rem;
        display: block;
    }

        #admission-enquiry label span {
            color: var(--red);
        }

    #admission-enquiry .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        color: var(--dark);
    }

        #admission-enquiry .form-control:focus {
            outline: none;
            border-color: #25408f;
            box-shadow: 0 0 0 3px rgba(37, 64, 143, 0.1);
        }

    #admission-enquiry .btn-otp {
        background: var(--red);
        color: var(--white);
        font-weight: 600;
        padding: 0.8rem 1.6rem;
        border: none;
        border-radius: 50px;
        /* Theme rounded button */
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
    }

        #admission-enquiry .btn-otp:hover {
            background: #be123c;
            transform: translateY(-2px);
        }

    #admission-enquiry .placement-heading {
        text-align: center;
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 1rem;
        color: var(--navy);
        /* Default text color */
    }

        #admission-enquiry .placement-heading span {
            color: var(--maroon);
            /* Make "Placement" Maroon as per theme/logo colors or Red? Image shows Red. Sticking to var(--red) if image implies red. Actually image shows Dark Red/Maroonish. Let's use var(--maroon) for "Placement" to match "Our Placement Speaks" usually being maroon in IIT context? No, wait. Previous was red. Let's use var(--maroon) for a more "theme" look since IIT logo is maroon. */
            color: var(--maroon);
        }

    /* Placement Video/Image Wrapper */
    #admission-enquiry .placement-preview {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 1rem;
        border: 1px solid var(--border);
    }

        #admission-enquiry .placement-preview img {
            width: 100%;
            height: auto;
            display: block;
        }

/* How to Apply Section */
.how-to-apply-section {
    background: linear-gradient(135deg, #f0f4fd 0%, #e2eafc 100%);
    overflow-x: hidden;
}

.steps-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    padding: 2rem 0;
    overflow-x: auto;
    /* Allow horizontal scroll on mobile */
    padding-bottom: 3rem;
    /* Space for scrollbar if needed */
}

/* Connecting Line */
.steps-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 50%, #9055ff 100%);
    z-index: 1;
    border-radius: 10px;
    opacity: 0.8;
}

.step-card {
    flex: 1;
    min-width: 160px;
    /* Minimum width for readability */
    max-width: 220px;
    background: #fff;
    border: 2px solid #aebce6;
    /* Light purple-blue border matching image */
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: left;
    position: relative;
    z-index: 2;
    /* Sit on top of line */
    box-shadow: 0 8px 20px rgba(37, 64, 143, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInUp 0.8s ease-out backwards;
}

    .step-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(37, 64, 143, 0.2);
        border-color: #7b5aff;
    }

.step-content {
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}


.step-content {
    text-align: center;
}

.icon-area {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    /* Ensure icon is centered */
}

    .icon-area svg {
        stroke: #333;
        /* Dark icon */
        fill: #e8ecf7;
        /* Light fill */
        padding: 5px;
        border-radius: 8px;
        /* Square'ish look */
    }

.step-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #5c7cfa;
    /* Bright blue-purple number */
    margin-bottom: 0.5rem;
    line-height: 1;
}

.step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0;
}

.step-desc {
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.4;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.8rem;
    opacity: 0.9;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .steps-wrapper {
        justify-content: flex-start;
        /* Ensure left alignment on scroll */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .steps-line {
        width: 1200px;
        /* Force line width for horizontal scrolling context */
    }
}

@media (max-width: 768px) {
    .steps-wrapper {
        flex-direction: column;
        /* Stack on mobile */
        align-items: center;
        overflow-x: hidden;
    }

    .steps-line {
        width: 6px;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(180deg, #00d2ff 0%, #3a7bd5 50%, #9055ff 100%);
    }

    .step-card {
        width: 100%;
        max-width: 320px;
        margin-bottom: 1rem;
    }

        .step-card:hover {
            transform: scale(1.02);
        }
}

/* Placement Bulletin Section */
.placement-section {
    background: #0f172a;
    /* Dark Background */
    color: #ffffff;
    /* Light text */
    position: relative;
    overflow: hidden;
    border-top: 1px solid #1e293b;
}

    /* Background flourish (optional) */
    .placement-section::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
        /* Subtle light flourish */
        border-radius: 50%;
        z-index: 0;
    }

.section-header .heading {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    /* Navy heading */
}

.text-white-50 {
    color: #64748b;
    /* Slate gray text */
    font-size: 1.1rem;
}

/* Stat Grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    /* backdrop-filter removed */
    padding: 1.5rem;
    border-radius: 16px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

    .stat-card:hover {
        background: #fff;
        transform: translateY(-5px);
        border-color: #cbd5e1;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .stat-card.highlight {
        background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
        border-color: #fcd34d;
    }

.stat-icon {
    margin-bottom: 1rem;
    color: #25408f;
    /* Brand blue icon */
    background: #f1f5f9;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
}

.stat-card.highlight .stat-icon {
    color: #b45309;
    background: #fef3c7;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
    line-height: 1;
    color: #0f172a;
}

.stat-card.highlight .stat-value {
    color: #b45309;
}

.stat-value small {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 5px;
}

.stat-label {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
    font-weight: 500;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    /* Light green bg */
    color: #059669;
    /* Darker green text */
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid #a7f3d0;
}

/* Student Profile Card (Carousel) */
.student-profile-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin: 10px;
    /* Space for shadow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
}

.student-img-box {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    height: 120px;
    position: relative;
}

    .student-img-box img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid #fff;
        object-fit: cover;
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
    }

.student-info {
    padding: 70px 2rem 2rem;
    /* Top padding to clear image */
}

    .student-info h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 0.5rem;
    }

.placed-at {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.view-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e11d48;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

    .view-profile-btn:hover {
        gap: 12px;
    }

/* Responsive */
@media (max-width: 768px) {
    .stat-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

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

    .badge-pill {
        width: 100%;
        justify-content: center;
    }
}





/* --------------------------------------------------------------
# Premium Admission Enquiry Section
-------------------------------------------------------------- */
#admission-enquiry {
    background: var(--light);
}

.admission-wrapper {
    display: flex;
    background: var(--white);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Premium shadow */
    min-height: 500px;
}

@media (max-width: 992px) {
    .admission-wrapper {
        flex-direction: column;
    }
}

/* Left Branding Panel */
.branding-panel {
    flex: 1;
    background: linear-gradient(135deg, rgba(8, 20, 60, 0.95) 0%, rgba(30, 58, 138, 0.9) 100%), url('https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80');
    /* Campus/College generic image */
    background-size: cover;
    background-position: center;
    padding: 3rem;
    color: var(--white);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.brand-heading {
    font-family: var(--font-head);
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

    .brand-heading span {
        color: var(--gold);
    }

.brand-subtext {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
    max-width: 90%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

.stat-item {
    border-left: 3px solid var(--gold);
    padding-left: 1rem;
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Decorative Circles */
.branding-panel .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.branding-panel .c1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
}

.branding-panel .c2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
}

/* Right Form Panel */
.form-panel {
    flex: 1;
    /* Split 50/50 roughly */
    padding: 3rem;
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /*margin-bottom: 2.5rem;*/
}

.form-title {
    font-size: 1.5rem;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.form-subtitle {
    color: var(--gray);
    font-size: 0.9rem;
}

/* Step Indicator */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .step-indicator .step {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #e5e7eb;
        color: var(--gray);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
        transition: 0.3s;
    }

        .step-indicator .step.active {
            background: var(--navy);
            color: var(--white);
        }

    .step-indicator .line {
        width: 20px;
        height: 2px;
        background: #e5e7eb;
    }

/* Form Steps */
.form-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

    .form-step.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group label {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.form-control {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: 0.2s;
}

    .form-control:focus {
        border-color: var(--navy);
        box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1);
    }

/* Buttons */
.btn-next,
.btn-submit {
    background: var(--red);
    color: var(--white);
    border: none;
    padding: 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-next:hover,
    .btn-submit:hover {
        background: #be123c;
        transform: translateY(-2px);
    }

.btn-back {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--gray);
    padding: 0.9rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-back:hover {
        background: #f3f4f6;
        color: var(--dark);
    }

/* Course Selection Cards */
.course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.course-card {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .course-card:hover {
        border-color: var(--navy);
        background: #f8fafc;
    }

    .course-card.selected {
        border-color: var(--maroon);
        background: #fff1f2;
        /* Light red/maroon tint */
    }

    .course-card .icon {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .course-card h4 {
        font-size: 1rem;
        color: var(--navy);
        font-weight: 700;
        margin-bottom: 0.2rem;
    }

    .course-card p {
        font-size: 0.8rem;
        color: var(--gray);
        line-height: 1.3;
        margin: 0;
    }

    .course-card .check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        background: var(--maroon);
        color: var(--white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.8);
        transition: 0.2s;
    }

    .course-card.selected .check {
        opacity: 1;
    }

/* Placement Carousel Left */
.placement-card-left {
    /* Standardized Layout */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 3rem;
    text-align: left;
    color: var(--white);
    margin: 0;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

    .placement-card-left .profile-img {
        flex-shrink: 0;
    }

        .placement-card-left .profile-img img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            object-fit: cover;
            display: block;
            /* Remove inline-block gap */
        }

    .placement-card-left .quote-content p {
        font-weight: 500;
        font-size: 1.25rem;
        line-height: 1.5;
        margin-bottom: 2rem;
        color: var(--white);
    }

    .placement-card-left .profile-info h5 {
        font-weight: 700;
        font-size: 1.1rem;
        margin-bottom: 0.1rem;
        color: var(--white);
    }

    .placement-card-left .profile-info p {
        font-size: 0.85rem;
        opacity: 0.8;
        margin-bottom: 0.4rem;
        color: #e2e8f0;
    }

    .placement-card-left .company-badge img {
        height: 40px;
        background: white;
        padding: 4px 10px;
        border-radius: 6px;
        margin-top: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.placement-slider-left .swiper-pagination-bullet {
    background: var(--white);
    opacity: 0.3;
    width: 8px;
    height: 8px;
    transition: 0.3s;
}

/* --------------------------------------------------------------
# New Merged Footer
-------------------------------------------------------------- */

/* Top CTA Section */
/* Integrated CTA Styles */
.footer-cta-integrated {
    margin-top: 10px;
}

.footer-cta h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: var(--font-head);
}

.footer-cta p {
    color: #cbd5e1;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.contact-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    /* Real glass effect */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    /* Premium shadow */
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    text-align: center;
}

    .contact-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.2);
        border-color: #ff7f00;
    }

    .contact-card .icon {
        font-size: 2.5rem;
        /* Placeholder size if using font icon */
        margin-bottom: 10px;
        color: #ffffff;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .contact-card .icon svg {
            width: 28px;
            height: 28px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .contact-card h4 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 5px;
        color: #fff;
    }

    .contact-card p,
    .contact-card a {
        color: #e2e8f0;
        font-size: 1rem;
        font-weight: 500;
    }



/* Main Footer Section */
.footer-main {
    background: linear-gradient(180deg, #25408f 0%, #172554 100%);
    /* Royal Blue to Darker Navy */
    color: #f1f5f9;
    /* Slate-100 for text */
    padding: 60px 0 20px;
    font-size: 0.95rem;
}

    .footer-main .row {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: space-between;
    }

.footer-col {
    flex: 1;
    min-width: 200px;
}

    .footer-col.brand-col {
        flex: 1.5;
        /* Slightly wider */
    }

/* Brand styling */
.footer-brand h3 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

    .footer-brand h3 span {
        color: #ffffff;
        /* Restored White .......................................*/
    }

.footer-brand p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-brand .contact-info p {
    margin-bottom: 5px;
    color: #e2e8f0;
}

.footer-brand .contact-info span {
    color: #ffffff;
    font-weight: 600;
}

/* Links */
.footer-col h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

    .footer-col h4::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px;
        height: 2px;
        background: #ffffff;
    }

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #94a3b8;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .footer-links a:hover {
        color: #ff7f00;
        padding-left: 5px;
    }

    .footer-links a::before {
        content: '›';
        font-size: 1.2rem;
        color: #ffffff;
        line-height: 1;
    }

/* Footer Bottom */
.footer-bottom {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright {
    color: #e2e8f0;
    /* Lighter text for blue background */
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    gap: 15px;
}

    .footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        transition: 0.3s;
    }

        .footer-social a:hover {
            background: #ff7f00;
            color: #0f172a;
            border-color: #fbbf24;
            transform: translateY(-3px);
        }



@media (max-width: 768px) {
    .footer-main .row {
        flex-direction: column;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Hero Section Modifications (Carousel Background + Split Cards)
-------------------------------------------------------------------------- */

.hero {
    /* Removed static background image from here */
    position: relative;
    /* Ensure z-index context */
    overflow: hidden;
    padding: 6rem 0;
    /* Increased top/bottom padding */
    display: flex;
    align-items: center;
    /* Vertically center content */
    margin-top: 0;
}

/* Background Slider */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .hero-slider .swiper-slide {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

/* --------------------------------------------------------------------------
   OTP Modal Styles
-------------------------------------------------------------------------- */
.otp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    /* Dark overlay */
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.otp-toggle:checked ~ .otp-modal-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    .otp-toggle:checked ~ .otp-modal-overlay .otp-modal-content {
        transform: translateY(0);
    }

/* CSS Timer Logic */
/*.otp-toggle:checked~.otp-modal-overlay .css-timer .countdown::after {
    content: "30";
    animation: countdown 30s linear forwards;
}

@keyframes countdown {
    0% {
        content: "30";
    }

    3.33% {
        content: "29";
    }

    6.66% {
        content: "28";
    }

    10% {
        content: "27";
    }

    13.33% {
        content: "26";
    }

    16.66% {
        content: "25";
    }

    20% {
        content: "24";
    }

    23.33% {
        content: "23";
    }

    26.66% {
        content: "22";
    }

    30% {
        content: "21";
    }

    33.33% {
        content: "20";
    }

    36.66% {
        content: "19";
    }

    40% {
        content: "18";
    }

    43.33% {
        content: "17";
    }

    46.66% {
        content: "16";
    }

    50% {
        content: "15";
    }

    53.33% {
        content: "14";
    }

    56.66% {
        content: "13";
    }

    60% {
        content: "12";
    }

    63.33% {
        content: "11";
    }

    66.66% {
        content: "10";
    }

    70% {
        content: "09";
    }

    73.33% {
        content: "08";
    }

    76.66% {
        content: "07";
    }

    80% {
        content: "06";
    }

    83.33% {
        content: "05";
    }

    86.66% {
        content: "04";
    }

    90% {
        content: "03";
    }

    93.33% {
        content: "02";
    }

    96.66% {
        content: "01";
    }

    100% {
        content: "00";
    }
}*/

.otp-modal-content {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.otp-modal-overlay.active .otp-modal-content {
    transform: scale(1);
}

.otp-modal-content .close-otp {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

.otp-modal-content .icon-circle {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    color: #25408f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.otp-modal-content .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.otp-modal-content .modal-desc {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 2rem;
}

.otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .otp-inputs .otp-digit {
        width: 50px;
        height: 60px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f172a;
        transition: all 0.2s;
    }

        .otp-inputs .otp-digit:focus {
            border-color: #25408f;
            outline: none;
            box-shadow: 0 0 0 4px rgba(37, 64, 143, 0.1);
        }

.otp-modal-content .timer {
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    z-index: 5;
}

    .otp-modal-content .timer a {
        cursor: pointer;
        text-decoration: none;
        position: relative;
        z-index: 10;
    }

/* --------------------------------------------------------------------------
   Brochure Download Button & Actions
-------------------------------------------------------------------------- */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn.outline {
    background: transparent;
    border: 2px solid var(--green);
    color: var(--green);
    font-weight: 600;
}

    .btn.outline:hover {
        background: var(--green);
        color: #ff7f00;
    }

/* Ensure buttons in cards size comfortably */
.course .btn {
    flex: 1;
    white-space: nowrap;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

/* Mobile Hero Adjustment */
@media (max-width: 768px) {
    .hero {
        max-height: 60vh;
        padding: 6rem 0;
        flex-direction: column;
    }

        .hero .title {
            font-size: 1.8rem;
        }

        .hero .cta {
            position: relative;
            bottom: auto;
            left: auto;
            margin-top: 2rem;
            padding: 1rem;
        }

        .hero .card {
            padding: 1.5rem;
            /* Reduce padding */
            border-radius: 0.8rem;
        }

        .hero .subtitle {
            font-size: 0.8rem;
            margin-bottom: 1rem;
        }
}

/* Ultra Small Mobile (< 500px) */
@media (max-width: 500px) {
    .hero .card {
        max-width: 200px;
        width: 100%;
    }

    .hero .title {
        font-size: 1.2rem;
        /* Much smaller title */
        margin-bottom: 0.3rem;
    }

    .hero .subtitle {
        font-size: 0.7rem;
        margin-bottom: 0;
    }

    .hero-content-wrapper {
        gap: 0.5rem;
        width: 100%;
        max-width: 100%;
    }

    .hero .cta {
        margin-top: 1rem;
        padding: 0.5rem;
    }

        .hero .cta .btn {
            padding: 0.6rem 1.2rem;
            font-size: 0.9rem;
        }
}

/* --------------------------------------------------------------------------
   New OTP Styles (Single Input Method)
-------------------------------------------------------------------------- */
.otp-inputs-wrapper {
    position: relative;
    width: 260px;
    /* Adjust based on gap and box size */
    margin: 0 auto 1.5rem;
    height: 60px;
}

.otp-combined-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Make invisible but clickable */
    z-index: 2;
    /* Sit on top */
    cursor: default;
    /* Or text, but default keeps mobile keyboard generic */
    letter-spacing: normal;
    font-size: 1px;
    /* collapse cursor */
    caret-color: transparent;
    /* Hide caret */
}

.otp-visuals {
    display: flex;
    gap: 12px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.otp-box {
    width: 50px;
    height: 60px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    transition: all 0.2s;
}

    /* Filled State */
    .otp-box.filled {
        border-color: #25408f;
        background: #eff6ff;
    }

/* Focus State (When input is focused, highlight the next empty box or all if selected?) 
   Simpler approach: Highlight the parent wrapper's children when input has focus */
.otp-combined-input:focus + .otp-visuals .otp-box {
    border-color: #94a3b8;
    /* Default focused color as hint */
}

#otp-toggle:checked ~ .otp-modal-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.otp-digit-input {
    width: 50px;
    height: 60px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    transition: all 0.2s;
}

    .otp-digit-input:focus {
        border-color: #25408f;
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 64, 143, 0.1);
        background: #eff6ff;
    }


/* Active Box (Current Cursor Position) */
.otp-box.active {
    border-color: #25408f !important;
    box-shadow: 0 0 0 4px rgba(37, 64, 143, 0.1);
}

/* --------------------------------------------------------------------------
   Brochure Modal Toggle (CSS Only)
-------------------------------------------------------------------------- */
/* Brochure Modal Toggle (Phone Input) */
#brochure-toggle:checked ~ #phoneModal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    #brochure-toggle:checked ~ #phoneModal .otp-modal-content {
        transform: translateY(0);
    }

/* Brochure OTP Toggle Rules (OTP Input) */
#brochure-otp-toggle:checked ~ #brochureOtpModal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    #brochure-otp-toggle:checked ~ #brochureOtpModal .otp-modal-content {
        transform: translateY(0);
    }


.course .info {
    flex: 1;
    /* Takes available space */
}

.course .action-buttons {
    flex-shrink: 0;
    /* Prevents shrinking */
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 576px) {
    .branding-panel {
        padding: 1.5rem;
    }

    .brand-heading {
        font-size: 1.8rem;
    }

    .brand-subtext {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .form-panel {
        padding: 1rem;
    }

    .form-title {
        font-size: 1.3rem;
    }

    .admission-wrapper {
        border-radius: 1rem;
        min-height: auto;
        /* Allow height to shrink */
    }

    .placement-card-left {
        padding: 1.5rem;
    }

        .placement-card-left .quote-content p {
            font-size: 1rem;
        }

    /* Compact Form Style for Mobile */
    .form-group {
        margin-top: 0%;
        margin-bottom: 0.8rem !important;
        /* Force smaller gap */
    }

    .form-control {
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
        height: auto;
        /* Override any fixed height */
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }

    .btn-next,
    .btn-submit {
        padding: 0.7rem;
        font-size: 0.95rem;
    }

    .announcement-text {
        display: none;
    }

    .news {
        margin: 0px;
        padding-right: 0px;
    }


    /* Compact How-To-Apply Steps */
    .step-card {
        padding: 1rem;
        /* Reduced padding */
        max-width: 280px;
        /* Smaller max-width */
        margin-bottom: 0rem;
        margin-top: 0rem;
    }

    .step-num {
        font-size: 1.2rem;
        /* Smaller number */
    }

    .step-title {
        font-size: .8rem;
        /* Smaller title */
    }

    .step-desc {
        font-size: 0.75rem;
        /* Smaller description */
        padding-top: 0.5rem;
    }

    .icon-area svg {
        width: 32px;
        height: 32px;
    }

    /* Footer Contact Cards Compact */
    .cta-grid {
        gap: 10px;
        /* Reduced gap */
    }

    .contact-card {
        padding: 0.5rem;
        min-height: auto;
        width: 100%;
        /* Remove any forced min-height */
    }

        .contact-card .icon svg {
            width: 16px;
            height: 16px;
        }

        .contact-card h4 {
            white-space: nowrap;
            font-size: 0.7rem;
            margin-bottom: 2px;
        }

        .contact-card p,
        .contact-card a {
            white-space: nowrap;
            font-size: 0.5rem;
        }

    .hero-image-wrapper {
        max-width: 200px !important;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Page Header
-------------------------------------------------------------------------- */
.page-header {
    background: var(--light);
    border-bottom: 1px solid var(--border);
}

    .page-header .heading {
        margin-bottom: 0.5rem;
    }

/* --------------------------------------------------------------------------
   Contact Page
-------------------------------------------------------------------------- */
.contact-section {
    position: relative;
    padding-bottom: 5rem;
    /* Ensure space before footer */
    background: #ffffff;
    z-index: 1;
    /* Ensure it stays above if footer has negative margin issues */
}

    .contact-section .contact-card {
        background: #ffffff;
        border: 1px solid #f1f5f9;
        border-radius: 16px;
        /* Smooth rounded corners */
        padding: 2.5rem 2rem;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        /* height: 100%;  REMOVED to prevent overflow in stacked context */
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }

        /* Hover Effect */
        .contact-section .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: #ff7f00;
        }

        .contact-section .contact-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #ff7f00, #facc15);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .contact-section .contact-card:hover::before {
            opacity: 1;
        }

        .contact-section .contact-card.large {
            text-align: center;
            background: linear-gradient(to bottom, #ffffff, #fafafa);
        }

        .contact-section .contact-card.small {
            text-align: center;
            padding: 2rem;
        }

    .contact-section .icon-wrapper {
        width: 72px;
        height: 72px;
        background: rgba(255, 127, 0, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        transition: transform 0.3s;
    }

    .contact-section .contact-card:hover .icon-wrapper {
        transform: scale(1.1) rotate(5deg);
        background: rgba(255, 127, 0, 0.15);
    }

    .contact-section .card-title {
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 1.25rem;
        color: var(--navy);
        margin-bottom: 0.75rem;
    }

    .contact-section .card-text {
        color: var(--gray);
        font-size: 0.95rem;
        line-height: 1.6;
    }

/* Form Styling */
.contact-form-wrapper {
    background: #ffffff;
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

    .contact-form-wrapper .form-control {
        background-color: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        padding: 1rem 1.2rem;
        font-size: 1rem;
        color: var(--navy);
        transition: all 0.3s ease;
    }

        .contact-form-wrapper .form-control:focus {
            background-color: #fff;
            border-color: #ff7f00;
            box-shadow: 0 0 0 4px rgba(255, 127, 0, 0.1);
            outline: none;
        }

    .contact-form-wrapper ::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

    .contact-form-wrapper textarea {
        resize: none;
    }

    .contact-form-wrapper .btn-submit {
        background: linear-gradient(135deg, #25408f 0%, #1e3a8a 100%);
        color: white;
        font-weight: 600;
        padding: 1rem 2.5rem;
        border-radius: 50px;
        border: none;
        font-size: 1.1rem;
        width: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 6px -1px rgba(37, 64, 143, 0.2);
    }

        .contact-form-wrapper .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(37, 64, 143, 0.3);
        }

/* --------------------------------------------------------------------------
   Placement Page
-------------------------------------------------------------------------- */
.placement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.student-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .student-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #ff7f00;
    }

.student-img-wrapper {
    width: 100%;
    height: 300px;
    /* Fixed height for consistency */
    overflow: hidden;
    background: #f1f5f9;
}

    .student-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        /* Focus on faces */
        transition: transform 0.3s ease;
    }

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

.student-card .student-info {
    padding: 1.5rem;
    text-align: center;
}

.student-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.student-course {
    display: block;
    font-size: 0.9rem;
    color: var(--gray);
    margin-bottom: 1rem;
}

.company-badge-placed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

    .company-badge-placed span {
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .company-badge-placed img {
        height: 30px;
        width: 100px;
        object-fit: cover;
    }

    .company-badge-placed strong {
        color: var(--navy);
        font-weight: 700;
    }
/* JavaScript-controlled Modal (using .active class) */
#phoneModal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    #phoneModal.active .otp-modal-content {
        transform: translateY(0);
    }
/* JavaScript-controlled Brochure OTP Modal */
#brochureOtpModal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    #brochureOtpModal.active .otp-modal-content {
        transform: translateY(0);
    }
/* Resend OTP Lidfghjkljhgdsasdfghjkl;nk Styling */
.otp-modal-content .css-timer {
    margin-bottom: 1rem;
    color: #64748b;
}

    .otp-modal-content .css-timer .countdown {
        font-weight: 600;
        color: #25408f;
    }

.otp-modal-content .resend-link {
    color: #25408f;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    display: block;
    margin: 0 auto;
    text-align: center;
}

    .otp-modal-content .resend-link:hover {
        color: #be123c;
        text-decoration: underline;
    }


/*//////*/
/*.otp-modal-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 9999 !important;
}

    .otp-modal-overlay.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
*/