:root {
            --blue: #0057a8;
            --dark: #08224a;
            --deep: #001d3d;
            --green: #3d940d;
            --yellow: #ff7e02;
            --light: #f5f8fd;
            --text: #172033;
            --muted: #667085;
            --white: #fff;
            --shadow: 0 18px 45px rgba(7, 30, 68, .14);
            --radius: 22px
        }

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

        body {
            font-family: Poppins, Arial, sans-serif;
            color: var(--text);
            background: #fff;
            line-height: 1.5;
            overflow-x: hidden
        }

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

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

        .container {
            width: min(1180px, 92%);
            margin: auto
        }

        .section {
            padding: 76px 0
        }

        .title {
            text-align: center;
            margin-bottom: 42px
        }

        .title span {
            color: var(--green);
            font-weight: 800
        }

        .title h2 {
            font-size: clamp(28px, 4vw, 44px);
            line-height: 1.15;
            font-weight: 900;
            color: var(--deep);
            text-transform: uppercase
        }

        .title p {
            color: var(--muted);
            max-width: 760px;
            margin: 12px auto 0
        }

        .underline {
            width: 90px;
            height: 4px;
            background: var(--green);
            margin: 14px auto 0;
            border-radius: 20px
        }

        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, .94);
            backdrop-filter: blur(16px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .08)
        }

        .nav {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 900;
            color: var(--blue)
        }
        
        .logo-badge img{
            width: 100px;
        }

        .logo-badge {
            /* width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--blue), var(--green));
            display: grid;
            place-items: center;
            color: white;
            font-weight: 900;
            box-shadow: var(--shadow) */
        }

        .logo small {
            display: block;
            font-size: 11px;
            letter-spacing: 1.5px;
            color: var(--green);
            line-height: 1
        }

        .menu {
            display: flex;
            align-items: center;
            gap: 24px;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            color: #1b2d4d
        }

        .menu a:hover {
            color: var(--green)
        }

        .nav-btn {
            background: var(--blue);
            color: white;
            padding: 13px 24px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 900;
            box-shadow: 0 12px 25px rgba(0, 87, 168, .25);
            cursor: pointer
        }

        .hamburger {
            display: none;
            font-size: 25px;
            color: var(--blue)
        }

        .hero {
            min-height: 800px;
            padding-top: 120px;
            background: linear-gradient(90deg, rgba(0, 29, 61, .94), rgba(0, 87, 168, .64)), url('https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
            position: relative;
            color: white;
            display: flex;
            align-items: center
        }

        .hero:after {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            height: 12px;
            background: linear-gradient(transparent, #fff)
        }

        .hero-wrap {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.1fr .78fr;
            gap: 42px;
            align-items: center
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 196, 0, .16);
            border: 1px solid rgba(255, 196, 0, .45);
            color: var(--yellow);
            padding: 10px 16px;
            border-radius: 40px;
            font-weight: 900;
            margin-bottom: 18px
        }

        .hero h1 {
            font-size: clamp(42px, 6vw, 48px);
            line-height: 1.02;
            font-weight: 900;
            text-transform: uppercase;
            max-width: 790px
        }

        .hero h1 span {
            color: var(--yellow)
        }

        .hero p {
            font-size: 17px;
            color: #dce9ff;
            max-width: 720px;
            margin: 22px 0 28px
        }

        .hero-points {
            display: grid;
            gap: 14px;
            margin: 22px 0 34px
        }

        .hero-point {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            font-weight: 600;
            color: #f7fbff
        }

        .hero-point i {
            color: var(--yellow);
            font-size: 22px;
            margin-top: 2px
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap
        }

        .btn {
            border: 0;
            cursor: pointer;
            padding: 15px 28px;
            border-radius: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .2px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: .25s
        }

        .btn-primary {
            background: var(--yellow);
            color: #0a2348;
            box-shadow: 0 18px 35px rgba(255, 196, 0, .28)
        }

        .btn-primary:hover {
            transform: translateY(-3px)
        }

        .btn-outline {
            border: 1px solid rgba(255, 255, 255, .45);
            color: #fff;
            background: rgba(255, 255, 255, .08)
        }

        .admission-card {
            background: rgba(255, 255, 255, .97);
            color: var(--text);
            border-radius: var(--radius);
            padding: 28px;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, .5)
        }

        .admission-card h3 {
            text-align: center;
            color: var(--blue);
            font-size: 24px;
            margin-bottom: 8px;
            text-transform: uppercase
        }

        .admission-card p {
            text-align: center;
            color: var(--muted);
            margin: 0 0 18px;
            font-size: 13px
        }

        .form-grid {
            display: grid;
            gap: 12px
        }

        .form-grid input,
        .form-grid select {
            width: 100%;
            height: 48px;
            border: 1px solid #d9e2ef;
            border-radius: 8px;
            padding: 0 14px;
            font-family: inherit;
            outline: none;
            background: white
        }

        .form-row {
            display: grid;
            grid-template-columns: .35fr 1fr;
            gap: 10px
        }

        .captcha {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            align-items: center
        }

        .cap-box {
            height: 48px;
            background: #f2f6fb;
            border: 1px dashed #aab8ce;
            border-radius: 8px;
            display: grid;
            place-items: center;
            font-weight: 900;
            color: #7a2cff;
            letter-spacing: 2px
        }

        .submit {
            height: 52px;
            background: var(--yellow);
            border: 0;
            border-radius: 9px;
            font-weight: 900;
            color: #08224a;
            cursor: pointer;
            margin-top: 5px
        }

        .stats {
            margin-top: 35px;
            position: relative;
            z-index: 3
        }

        .stats-card {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 26px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
        }

        .stat {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px;
            border-right: 1px solid #d8e2f0
        }

        .stat:last-child {
            border-right: 0
        }

        .stat i {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 2px solid var(--blue);
            color: var(--blue);
            font-size: 24px
        }

        .stat h3 {
            font-size: 28px;
            color: var(--blue);
            font-weight: 900
        }

        .stat p {
            font-size: 13px;
            color: var(--muted);
            font-weight: 600
        }

        .marquee {
            overflow: hidden;
            background: linear-gradient(135deg, var(--blue), #003b86);
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: var(--shadow)
        }

        .marquee h3 {
            text-align: center;
            color: white;
            margin-bottom: 22px;
            text-transform: uppercase
        }

        .logo-track {
            display: flex;
            gap: 16px;
            animation: scroll 24s linear infinite;
            width: max-content
        }

        .company {
            width: 160px;
            height: 82px;
            background: white;
            border-radius: 13px;
            display: grid;
            place-items: center;
            font-size: 24px;
            font-weight: 900;
            color: var(--blue);
            box-shadow: 0 10px 20px rgba(0, 0, 0, .12)
        }

        @keyframes scroll {
            to {
                transform: translateX(-50%)
            }
        }

        .course-strip {
            background: #f7fbff;
            border: 1px solid #dce7f3;
            border-radius: var(--radius);
            padding: 26px;
            display: grid;
            grid-template-columns: .7fr 1fr;
            gap: 22px;
            align-items: center;
            margin-top: 30px
        }

        .course-strip h3 {
            font-size: 32px;
            color: var(--blue);
            text-transform: uppercase;
            line-height: 1.1
        }

        .course-select {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 14px
        }

        .course-select select,
        .course-select input {
            height: 54px;
            border: 1px solid #ced8e6;
            border-radius: 10px;
            padding: 0 16px;
            font-family: inherit
        }

        .course-select button {
            height: 54px;
            border: 0;
            border-radius: 10px;
            background: var(--green);
            color: white;
            font-weight: 900;
            padding: 0 24px;
            cursor: pointer
        }

        .rankings {
            background: linear-gradient(135deg, #003b86, #0a6a42)
        }

        .rankings .title h2,
        .rankings .title p {
            color: white
        }

        .rank-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
        }

        .rank-card {
            background: white;
            border-radius: 18px;
            padding: 26px;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden
        }

        .rank-card h3 {
            font-size: 25px;
            color: var(--blue);
            margin-bottom: 8px
        }

        .rank-card p {
            font-size: 13px;
            color: var(--muted);
            font-weight: 600
        }

        .recognition {
            background: var(--light)
        }

        .badge-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px
        }

        .rec-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .08)
        }

        .rec-card i {
            font-size: 38px;
            color: var(--green);
            margin-bottom: 13px
        }

        .rec-card h4 {
            color: var(--deep);
            font-size: 15px;
            text-transform: uppercase
        }

        .rating {
            margin-top: 34px;
            background: white;
            border-radius: var(--radius);
            padding: 28px;
            display: grid;
            grid-template-columns: .8fr 1.4fr;
            gap: 25px;
            align-items: center;
            box-shadow: var(--shadow)
        }

        .rating h3 {
            font-size: 28px;
            color: var(--blue)
        }

        .rating-badges {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px
        }

        .rating-badge {
            background: #142e76;
            color: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            font-weight: 900;
            border-bottom: 6px solid var(--yellow)
        }

        .rating-badge span {
            display: block;
            color: var(--yellow);
            font-size: 14px
        }

        .why-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 28px;
            align-items: stretch
        }

        .why-blue {
            background: linear-gradient(135deg, var(--blue), var(--deep));
            color: white;
            border-radius: var(--radius);
            padding: 36px;
            box-shadow: var(--shadow)
        }

        .why-blue h3 {
            font-size: 30px;
            margin-bottom: 12px
        }

        .why-blue p {
            color: #dbe9ff;
            margin-bottom: 22px
        }

        .award-grid {
            background: white;
            border-radius: var(--radius);
            padding: 26px;
            box-shadow: var(--shadow);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

        .award {
            text-align: center;
            font-size: 13px;
            font-weight: 700;
            color: #344054
        }

        .award i {
            display: block;
            color: var(--green);
            font-size: 34px;
            margin-bottom: 10px
        }

        .scholarship {
            padding: 50px 0;
            background: linear-gradient(90deg, var(--green), #3d940d);
            overflow: hidden
        }

        .sch-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            color: #06315e
        }

        .sch-wrap h2 {
            font-size: clamp(45px, 7vw, 86px);
            line-height: 1;
            font-weight: 900;
            color: var(--blue)
        }

        .sch-wrap p {
            font-size: 22px;
            font-weight: 900;
            text-transform: uppercase
        }

        .adv-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
        }

        .adv-card {
            background: white;
            border: 2px solid var(--blue);
            border-radius: 28px;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            box-shadow: 0 10px 22px rgba(0, 87, 168, .1)
        }

        .adv-card .num {
            width: 58px;
            height: 58px;
            background: var(--green);
            color: white;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: -58px auto 20px;
            border: 8px solid white;
            font-weight: 900;
            font-size: 20px;
            box-shadow: 0 0 0 4px var(--blue)
        }

        .adv-card h4 {
            font-size: 14px;
            color: var(--deep)
        }

        .collab {
            background: linear-gradient(135deg, var(--blue), #003b86);
            color: white
        }

        .collab .title h2,
        .collab .title p {
            color: white
        }

        .partner-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px
        }

        .partner {
            background: white;
            color: var(--deep);
            border-radius: 15px;
            padding: 24px;
            text-align: center;
            min-height: 135px;
            display: grid;
            place-items: center;
            font-size: 13px;
            font-weight: 700
        }

        .partner i {
            font-size: 34px;
            color: var(--green);
            margin-bottom: 8px
        }

        .life {
            background: #8bc83f;
            color: white
        }

        .life .title h2 {
            color: white;
            text-transform: none
        }

        .life-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

        .life-card {
            height: 220px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
            position: relative
        }

        .life-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .4s
        }

        .life-card:hover img {
            transform: scale(1.08)
        }

        .life-card span {
            position: absolute;
            left: 16px;
            bottom: 16px;
            background: rgba(0, 29, 61, .78);
            padding: 8px 14px;
            border-radius: 30px;
            font-weight: 800;
            font-size: 13px
        }

        .testimonials {
            background: #f4f4f4;
            overflow: hidden
        }

        .testimonial-slider {
            position: relative;
            overflow: hidden
        }

        .test-track {
            display: flex;
            transition: transform .5s ease
        }

        .test-slide {
            min-width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 35px
        }

        .testimonial {
            background: white;
            border-radius: var(--radius);
            padding: 34px;
            box-shadow: var(--shadow);
            position: relative
        }

        .quote {
            font-size: 58px;
            color: var(--blue);
            line-height: 1
        }

        .testimonial p {
            font-size: 16px;
            color: #25324a;
            margin-bottom: 24px
        }

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

        .student img {
            width: 86px;
            height: 86px;
            border-radius: 50%;
            object-fit: cover;
            border: 6px solid #ffbd2b
        }

        .student h4 {
            font-size: 20px;
            color: var(--deep)
        }

        .student span {
            font-size: 14px;
            color: var(--muted)
        }

        .slide-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 28px
        }

        .slide-dot {
            width: 34px;
            height: 8px;
            border-radius: 20px;
            border: 0;
            background: #1e293b;
            opacity: .35;
            cursor: pointer
        }

        .slide-dot.active {
            background: var(--green);
            opacity: 1
        }

        .slide-arrow {
            position: absolute;
            top: 45%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 0;
            background: var(--blue);
            color: #fff;
            cursor: pointer;
            z-index: 4
        }

        .prev-slide {
            left: 5px
        }

        .next-slide {
            right: 5px
        }

        .final-cta {
            background: linear-gradient(135deg, var(--deep), var(--blue));
            color: white;
            text-align: center;
            padding: 80px 0
        }

        .final-cta h2 {
            font-size: clamp(32px, 5vw, 56px);
            font-weight: 900;
            margin-bottom: 14px
        }

        .final-cta p {
            color: #dbe9ff;
            max-width: 760px;
            margin: 0 auto 26px
        }

        footer {
            background: #000;
            color: white;
            text-align: center;
            padding: 26px;
            font-size: 13px;
            font-weight: 700
        }

        .fixed-contact {
            position: fixed;
            bottom: 10%;
            transform: translateY(-50%);
            z-index: 1002;
            display: grid;
            gap: 12px
        }

        .fixed-contact.left {
            left: 18px
        }

        .fixed-contact.right {
            right: 25px
        }

        .contact-float {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
            cursor: pointer
        }

        .call-float {
            background: #0057a8
        }

        .whatsapp-float {
            background: #25D366
        }

        .float-btn {
            position: fixed;
            right: 24px;
            bottom: 24px;
            width: 58px;
            height: 58px;
            background: var(--green);
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: white;
            font-size: 22px;
            z-index: 1001;
            box-shadow: 0 15px 35px rgba(0, 0, 0, .25)
        }

        .mobile-bar {
            display: none
        }

        .popup {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .62);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px
        }

        .popup.active {
            display: flex
        }

        .popup-box {
            width: min(520px, 96vw);
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
            padding: 28px;
            position: relative
        }

        .close-popup {
            position: absolute;
            right: 18px;
            top: 16px;
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 50%;
            background: #eef3f8;
            color: var(--deep);
            font-size: 20px;
            cursor: pointer
        }

        .popup-box .admission-card {
            box-shadow: none;
            border: 0;
            padding: 0
        }

        .popup-box .admission-card h3 {
            font-size: 25px
        }

        @media(max-width:992px) {

            .menu,
            .nav-btn {
                display: none
                
            }

            .hamburger {
                display: block
            }

            .hero-wrap,
            .why-grid,
            .rating,
            .course-strip {
                grid-template-columns: 1fr
            }

            .stats-card,
            .rank-grid,
            .badge-grid,
            .adv-grid,
            .partner-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .stat {
                border-right: 0;
                border-bottom: 1px solid #d8e2f0
            }

            .life-grid {
                grid-template-columns: 1fr 1fr
            }

            .test-slide {
                grid-template-columns: 1fr
            }

            .hero {
                padding-bottom: 70px
            }

            .fixed-contact {
                top: auto;
                bottom: 90px
            }

            .fixed-contact.left {
                left: 14px
            }

            .fixed-contact.right {
                right: 14px
            }
        }

        @media(max-width:640px) {
            .section {
                padding: 54px 0
            }

            .nav {
                height: 100px
            }

            .hero {
                padding-top: 115px
            }

            .stats-card,
            .rank-grid,
            .badge-grid,
            .adv-grid,
            .partner-grid,
            .life-grid,
            .award-grid,
            .rating-badges {
                grid-template-columns: 1fr
            }

            .course-select {
                grid-template-columns: 1fr
            }

            .sch-wrap {
                display: block;
                text-align: center
            }

            .sch-wrap .btn {
                margin-top: 20px
            }

            .hero-actions .btn {
                width: 100%;
                justify-content: center
            }

            .form-row,
            .captcha {
                grid-template-columns: 1fr
            }

            .float-btn {
                bottom: 82px
            }

            .mobile-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                background: white;
                box-shadow: 0 -8px 25px rgba(0, 0, 0, .14);
                z-index: 1000
            }

            .mobile-bar a {
                text-align: center;
                padding: 10px 4px;
                font-size: 11px;
                font-weight: 800;
                color: var(--blue)
            }

            .mobile-bar i {
                display: block;
                font-size: 18px;
                margin-bottom: 3px;
                color: var(--green)
            }

            .contact-float {
                width: 50px;
                height: 50px
            }

            .slide-arrow {
                display: none
            }
        }