:root{
            --primary:#df6c01;
            --primary-dark:#034068;
            --primary-light:#3f4241;

            --secondary:#a1a1a1;
            --secondary-dark:#d98b00;

            --navy:#071b3a;
            --navy-2:#0d2b55;

            --white:#ffffff;
            --light:#f5f7fa;
            --dark:#101828;
            --muted:#667085;

            --line:#e5e7eb;

            --success:#020136;
            --danger:#b42318;

            --shadow:0 18px 45px rgba(16,24,40,.10);
            --shadow-sm:0 8px 24px rgba(16,24,40,.08);

            --radius:18px;
            --radius-sm:12px;

            --container:1180px;
        }


        /* =========================================================
           RESET
        ========================================================== */

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

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:"Inter",sans-serif;
            background:var(--white);
            color:var(--dark);
            line-height:1.7;
            overflow-x:hidden;
        }

        body.menu-open{
            overflow:hidden;
        }

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

        a{
            color:inherit;
            text-decoration:none;
        }
        a img{
            display: block;
            height: 30px;
            width: 30px;
        }

        button,
        input,
        textarea,
        select{
            font:inherit;
        }

        button{
            cursor:pointer;
        }

        ul{
            list-style:none;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6{
            font-family:"Poppins",sans-serif;
            line-height:1.25;
        }


        /* =========================================================
           CONTAINER
        ========================================================== */

        .container{
            width:min(100% - 40px,var(--container));
            margin-inline:auto;
        }


        /* =========================================================
           PRELOADER
        ========================================================== */

        #preloader{
            position:fixed;
            inset:0;
            z-index:99999;
            background:var(--white);
            display:flex;
            align-items:center;
            justify-content:center;
            transition:opacity .5s ease,visibility .5s ease;
        }

        #preloader.hidden{
            opacity:0;
            visibility:hidden;
        }

        .loader{
            position:relative;
            width:90px;
            height:90px;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .loader-circle{
            position:absolute;
            width:90px;
            height:90px;
            border:4px solid var(--primary-light);
            border-top-color:var(--primary);
            border-right-color:var(--secondary);
            border-radius:50%;
            animation:loaderSpin 1s linear infinite;
        }

        .loader span{
            font-family:"Poppins",sans-serif;
            font-size:20px;
            font-weight:800;
            color:var(--primary);
        }

        @keyframes loaderSpin{
            to{
                transform:rotate(360deg);
            }
        }


        /* =========================================================
           TOP BAR
        ========================================================== */

        .top-bar{
            background:var(--navy);
            color:var(--white);
            font-size:13px;
        }

        .top-bar-inner{
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }

        .top-contact{
            display:flex;
            align-items:center;
            gap:22px;
            flex-wrap:wrap;
        }

        .top-contact a,
        .top-contact span{
            display:inline-flex;
            align-items:center;
            gap:7px;
            color:rgba(255,255,255,.9);
        }

        .top-contact i{
            color:var(--secondary);
        }

        .top-social{
            display:flex;
            align-items:center;
            gap:13px;
        }

        .top-social a{
            color:rgba(255,255,255,.85);
            transition:.25s ease;
        }

        .top-social a:hover{
            color:var(--secondary);
            transform:translateY(-2px);
        }


        /* =========================================================
           HEADER
        ========================================================== */

        #siteHeader{
            position:sticky;
            top:0;
            z-index:9990;
            background:rgba(255,255,255,.97);
            border-bottom:1px solid var(--line);
            transition:.3s ease;
        }

        #siteHeader.scrolled{
            box-shadow:var(--shadow-sm);
        }

        .header-inner{
            min-height:78px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
        }


        /* LOGO */

        .logo{
            display:flex;
            align-items:center;
            gap:12px;
            flex-shrink:0;
        }

        .logo-mark{
            width:48px;
            height:48px;
            border-radius:13px;
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:var(--white);
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:"Poppins",sans-serif;
            font-size:17px;
            font-weight:800;
            box-shadow:0 8px 18px rgba(11, 107, 69, 0.363);
        }

        .logo-text{
            display:flex;
            flex-direction:column;
            line-height:1.15;
        }

        .logo-text strong{
            font-family:"Poppins",sans-serif;
            font-size:17px;
            color:var(--navy);
        }

        .logo-text span{
            color:var(--primary);
            font-size:11px;
            font-weight:700;
            letter-spacing:.7px;
            text-transform:uppercase;
        }


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

        .main-navigation > ul{
            display:flex;
            align-items:center;
            gap:5px;
        }

        .main-navigation li{
            position:relative;
        }

        .main-navigation > ul > li > a{
            min-height:78px;
            padding:0 13px;
            display:flex;
            align-items:center;
            gap:6px;
            color:#344054;
            font-size:14px;
            font-weight:600;
            transition:.25s ease;
        }

        .main-navigation > ul > li > a:hover,
        .main-navigation > ul > li > a.active{
            color:var(--primary);
        }

        .main-navigation > ul > li > a.active{
            position:relative;
        }

        .main-navigation > ul > li > a.active::after{
            content:"";
            position:absolute;
            left:13px;
            right:13px;
            bottom:0;
            height:3px;
            background:var(--primary);
            border-radius:3px 3px 0 0;
        }

        .dropdown > a i{
            font-size:10px;
        }

        .dropdown-menu{
            position:absolute;
            top:calc(100% - 1px);
            left:0;
            min-width:225px;
            padding:10px;
            background:var(--white);
            border:1px solid var(--line);
            border-radius:0 0 12px 12px;
            box-shadow:var(--shadow);
            opacity:0;
            visibility:hidden;
            transform:translateY(10px);
            transition:.25s ease;
        }

        .dropdown:hover .dropdown-menu{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }

        .dropdown-menu a{
            display:block;
            padding:10px 13px;
            border-radius:8px;
            color:#344054;
            font-size:13px;
            font-weight:600;
        }

        .dropdown-menu a:hover{
            background:var(--primary-light);
            color:var(--primary);
        }


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

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            padding:12px 20px;
            border-radius:10px;
            border:1px solid transparent;
            font-size:14px;
            font-weight:700;
            transition:.25s ease;
        }

        .btn-primary{
            background:var(--primary);
            color:var(--white);
            box-shadow:0 8px 20px rgba(11, 107, 69, 0.24);
        }

        .btn-primary:hover{
            background:var(--primary-dark);
            transform:translateY(-2px);
        }

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

        .btn-secondary:hover{
            background:var(--secondary-dark);
            transform:translateY(-2px);
        }

        .btn-outline{
            border-color:var(--primary);
            color:var(--primary);
            background:transparent;
        }

        .btn-outline:hover{
            background:var(--primary);
            color:var(--white);
        }


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

        .header-action{
            flex-shrink:0;
        }


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

        #mobileMenuToggle{
            display:none;
            width:44px;
            height:44px;
            border:1px solid var(--line);
            background:var(--white);
            border-radius:10px;
            color:var(--navy);
            font-size:19px;
        }

        #mobileMenuToggle.active{
            color:var(--primary);
        }


        /* =========================================================
           PAGE HERO
        ========================================================== */

        .page-hero{
            position:relative;
            min-height:390px;
            display:flex;
            align-items:center;
            background:
                linear-gradient(
                    90deg,
                    rgba(19, 0, 54, 0.808),
                    rgba(15, 0, 56, 0.63),
                    rgba(15, 1, 56, 0.63)
                ),
                url("images/oval\ logo.jfif") center/cover no-repeat;
            color:var(--white);
        }

        .page-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(
                135deg,
                rgba(16, 1, 59, 0.2),
                transparent
            );
        }

        .page-hero-content{
            position:relative;
            z-index:1;
            max-width:780px;
            padding:70px 0;
        }

        .hero-label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:15px;
            padding:7px 12px;
            border:2px solid rgba(250, 81, 2, 0.966);
            border-radius:30px;
            background:rgba(255, 255, 255, 0.274);
            font-size:12px;
            font-weight:700;
            letter-spacing:.5px;
            text-transform:uppercase;
        }

        .hero-label i{
            color:var(--secondary);
        }

        .page-hero h1{
            font-size:clamp(35px,5vw,58px);
            margin-bottom:20px;
        }

        .page-hero p{
            max-width:700px;
            color:rgba(255,255,255,.88);
            font-size:17px;
        }

        .breadcrumb{
            margin-top:25px;
            display:flex;
            align-items:center;
            gap:9px;
            flex-wrap:wrap;
            color:rgba(255, 255, 255, 0.945);
            font-size:13px;
        }

        .breadcrumb a:hover{
            color:var(--secondary);
        }

        .breadcrumb i{
            font-size:9px;
        }


        /* =========================================================
           SECTION
        ========================================================== */

        .section{
            padding:85px 0;
        }

        .section-alt{
            background:var(--light);
        }

        .section-heading{
            max-width:760px;
            margin:0 auto 45px;
            text-align:center;
        }

        .section-label{
            display:inline-block;
            margin-bottom:10px;
            color:var(--primary);
            font-size:13px;
            font-weight:800;
            letter-spacing:1px;
            text-transform:uppercase;
        }

        .section-heading h2{
            margin-bottom:15px;
            color:var(--navy);
            font-size:clamp(28px,4vw,42px);
        }

        .section-heading p{
            color:var(--muted);
            font-size:15px;
        }


        /* =========================================================
           COURSES INTRO
        ========================================================== */

        .courses-intro{
            padding:80px 0 40px;
        }

        .courses-intro-content{
            max-width:850px;
            margin:auto;
            text-align:center;
        }

        .courses-intro-content h2{
            margin-bottom:15px;
            color:var(--navy);
            font-size:clamp(29px,4vw,40px);
        }

        .courses-intro-content p{
            color:var(--muted);
            margin-bottom:30px;
        }


        /* =========================================================
           FILTER BUTTONS
        ========================================================== */

        .course-filters{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            flex-wrap:wrap;
        }

        .filter-btn{
            border:1px solid var(--line);
            background:var(--white);
            color:#344054;
            padding:10px 17px;
            border-radius:30px;
            font-size:13px;
            font-weight:700;
            transition:.25s ease;
        }

        .filter-btn:hover{
            border-color:var(--primary);
            color:var(--primary);
        }

        .filter-btn.active{
            background:var(--primary);
            border-color:var(--primary);
            color:var(--white);
        }


        /* =========================================================
           COURSE CATEGORY
        ========================================================== */

        .course-category-section{
            padding:55px 0 85px;
        }

        .course-category-section.alt{
            background:var(--light);
        }

        .category-header{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:25px;
            margin-bottom:30px;
        }

        .category-title{
            display:flex;
            align-items:center;
            gap:14px;
        }

        .category-icon{
            width:50px;
            height:50px;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:var(--primary-light);
            color:var(--primary);
            font-size:20px;
        }

        .category-title h2{
            color:var(--navy);
            font-size:28px;
        }

        .category-title p{
            color:var(--muted);
            font-size:13px;
        }


        /* =========================================================
           COURSE GRID
        ========================================================== */

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


        /* =========================================================
           COURSE CARD
        ========================================================== */

        .course-card{
            background:var(--white);
            border:1px solid var(--line);
            border-radius:var(--radius);
            overflow:hidden;
            box-shadow:var(--shadow-sm);
            transition:.3s ease;
        }

        .course-card:hover{
            transform:translateY(-7px);
            box-shadow:var(--shadow);
        }

        .course-card.hidden{
            display:none;
        }

        .course-card.filter-show{
            animation:courseShow .4s ease;
        }

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

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

        .course-image{
            position:relative;
            height:215px;
            overflow:hidden;
            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--navy)
                );
        }

        .course-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:.5s ease;
        }

        .course-card:hover .course-image img{
            transform:scale(1.06);
        }

        .course-badge{
            position:absolute;
            top:15px;
            left:15px;
            z-index:2;
            padding:6px 10px;
            border-radius:20px;
            background:var(--secondary);
            color:var(--navy);
            font-size:11px;
            font-weight:800;
        }

        .course-card-body{
            padding:23px;
        }

        .course-card-body h3{
            color:var(--navy);
            font-size:20px;
            margin-bottom:10px;
        }

        .course-card-body p{
            color:var(--muted);
            font-size:13px;
            margin-bottom:18px;
        }

        .course-meta{
            display:flex;
            align-items:center;
            gap:15px;
            flex-wrap:wrap;
            padding-bottom:17px;
            margin-bottom:17px;
            border-bottom:1px solid var(--line);
        }

        .course-meta span{
            display:flex;
            align-items:center;
            gap:6px;
            color:#475467;
            font-size:12px;
            font-weight:600;
        }

        .course-meta i{
            color:var(--primary);
        }

        .course-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--primary);
            font-size:13px;
            font-weight:800;
        }

        .course-link i{
            transition:.25s ease;
        }

        .course-link:hover i{
            transform:translateX(5px);
        }


        /* =========================================================
           FEATURES
        ========================================================== */

        .features-section{
            padding:80px 0;
            background:var(--navy);
            color:var(--white);
        }

        .features-section .section-heading h2{
            color:var(--white);
        }

        .features-section .section-heading p{
            color:rgba(255,255,255,.7);
        }

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

        .feature-card{
            padding:30px 22px;
            text-align:center;
            border:1px solid rgba(255,255,255,.1);
            border-radius:var(--radius);
            background:rgba(255,255,255,.05);
            transition:.3s ease;
        }

        .feature-card:hover{
            transform:translateY(-5px);
            background:rgba(255,255,255,.08);
        }

        .feature-icon{
            width:58px;
            height:58px;
            margin:0 auto 18px;
            border-radius:15px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(244,165,28,.14);
            color:var(--secondary);
            font-size:22px;
        }

        .feature-card h3{
            margin-bottom:8px;
            font-size:17px;
        }

        .feature-card p{
            color:rgba(255,255,255,.68);
            font-size:13px;
        }


        /* =========================================================
           INTERNATIONAL CTA
        ========================================================== */

        .international-preview{
            position:relative;
            overflow:hidden;
            padding:90px 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(4, 1, 36, 0.94),
                    rgba(81, 81, 82, 0.88)
                ),
                url("assets/images/international.jpg") center/cover no-repeat;
            color:var(--white);
        }

        .international-content{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.3fr .7fr;
            gap:50px;
            align-items:center;
        }

        .international-text h2{
            font-size:clamp(30px,4vw,45px);
            margin-bottom:15px;
        }

        .international-text p{
            color:rgba(255,255,255,.82);
            max-width:700px;
            margin-bottom:25px;
        }

        .international-card{
            padding:30px;
            border-radius:var(--radius);
            border:1px solid rgba(255,255,255,.18);
            background:rgba(255,255,255,.1);
            backdrop-filter:blur(10px);
        }

        .international-card i{
            color:var(--secondary);
            font-size:35px;
            margin-bottom:15px;
        }

        .international-card h3{
            margin-bottom:8px;
        }

        .international-card p{
            color:rgba(255,255,255,.72);
            font-size:13px;
            margin-bottom:18px;
        }


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

        .faq-section{
            padding:85px 0;
        }

        .faq-wrapper{
            max-width:850px;
            margin:auto;
        }

        .faq-item{
            border:1px solid var(--line);
            border-radius:13px;
            margin-bottom:12px;
            overflow:hidden;
            background:var(--white);
        }

        .faq-question{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding:19px 20px;
            border:0;
            background:var(--white);
            color:var(--navy);
            text-align:left;
            font-weight:700;
            font-size:14px;
        }

        .faq-question i{
            color:var(--primary);
            transition:.25s ease;
        }

        .faq-answer{
            max-height:0;
            overflow:hidden;
            transition:max-height .35s ease;
        }

        .faq-answer p{
            padding:0 20px 20px;
            color:var(--muted);
            font-size:13px;
        }

        .faq-item.active .faq-question i{
            transform:rotate(180deg);
        }

        .faq-item.active .faq-answer{
            max-height:250px;
        }


        /* =========================================================
           APPLICATION CTA
        ========================================================== */

        .application-cta{
            padding:70px 0;
            background:var(--primary-light);
        }

        .application-box{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
            padding:45px;
            border-radius:var(--radius);
            background:var(--white);
            border:1px solid #dceee5;
            box-shadow:var(--shadow-sm);
        }

        .application-box h2{
            color:var(--navy);
            font-size:30px;
            margin-bottom:8px;
        }

        .application-box p{
            color:var(--muted);
            font-size:14px;
        }

        .application-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            flex-shrink:0;
        }


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

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

        .footer-main{
            padding:70px 0 50px;
        }

        .footer-grid{
            display:grid;
            grid-template-columns:1.5fr 1fr 1fr 1.2fr;
            gap:45px;
        }

        .footer-logo{
            margin-bottom:18px;
        }

        .footer-description{
            color:rgba(255,255,255,.67);
            font-size:13px;
            max-width:360px;
            margin-bottom:20px;
        }

        .footer-title{
            font-size:16px;
            margin-bottom:18px;
        }

        .footer-links{
            display:flex;
            flex-direction:column;
            gap:10px;
        }

        .footer-links a{
            color:rgba(255,255,255,.68);
            font-size:13px;
            transition:.2s ease;
        }

        .footer-links a:hover{
            color:var(--secondary);
            transform:translateX(3px);
        }

        .footer-contact{
            display:flex;
            flex-direction:column;
            gap:13px;
        }

        .footer-contact li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:rgba(255,255,255,.68);
            font-size:13px;
        }

        .footer-contact i{
            color:var(--secondary);
            width:17px;
            margin-top:4px;
        }

        .footer-bottom{
            border-top:1px solid rgba(255,255,255,.1);
            padding:20px 0;
        }

        .footer-bottom-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }

        .footer-bottom p{
            color:rgba(255,255,255,.55);
            font-size:12px;
        }

        .footer-legal{
            display:flex;
            gap:18px;
        }

        .footer-legal a{
            color:rgba(255,255,255,.55);
            font-size:12px;
        }

        .footer-legal a:hover{
            color:var(--secondary);
        }


        /* =========================================================
           WHATSAPP
        ========================================================== */

        .whatsapp-float{
            position:fixed;
            right:22px;
            bottom:22px;
            z-index:9000;
            width:55px;
            height:55px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#25D366;
            color:var(--white);
            font-size:25px;
            box-shadow:0 10px 25px rgba(0,0,0,.2);
            transition:.3s ease;
        }

        .whatsapp-float:hover{
            transform:translateY(-4px) scale(1.05);
        }


        /* =========================================================
           BACK TO TOP
        ========================================================== */

        #backToTop{
            position:fixed;
            right:22px;
            bottom:90px;
            z-index:8999;
            width:44px;
            height:44px;
            border:0;
            border-radius:10px;
            background:var(--primary);
            color:var(--white);
            display:flex;
            align-items:center;
            justify-content:center;
            opacity:0;
            visibility:hidden;
            transform:translateY(10px);
            transition:.3s ease;
            box-shadow:var(--shadow-sm);
        }

        #backToTop.show{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }

        #backToTop:hover{
            background:var(--primary-dark);
        }


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

        @media(max-width:1100px){

            .main-navigation > ul > li > a{
                padding-left:9px;
                padding-right:9px;
            }

            .header-action{
                display:none;
            }

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

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

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


        @media(max-width:900px){

            .top-bar-inner{
                justify-content:center;
            }

            .top-social{
                display:none;
            }

            #mobileMenuToggle{
                display:flex;
                align-items:center;
                justify-content:center;
            }

            .main-navigation{
                position:absolute;
                left:0;
                right:0;
                top:100%;
                background:var(--white);
                border-top:1px solid var(--line);
                box-shadow:var(--shadow);
                max-height:0;
                overflow:hidden;
                opacity:0;
                visibility:hidden;
                transition:.3s ease;
            }

            .main-navigation.mobile-open{
                max-height:calc(100vh - 120px);
                overflow-y:auto;
                opacity:1;
                visibility:visible;
            }

            .main-navigation > ul{
                display:block;
                padding:15px 20px 25px;
            }

            .main-navigation > ul > li > a{
                min-height:auto;
                padding:13px 10px;
                border-radius:8px;
            }

            .main-navigation > ul > li > a.active::after{
                display:none;
            }

            .main-navigation > ul > li > a:hover,
            .main-navigation > ul > li > a.active{
                background:var(--primary-light);
            }

            .dropdown-menu{
                position:static;
                min-width:0;
                box-shadow:none;
                border:0;
                border-radius:0;
                padding:0 0 0 15px;
                display:none;
                opacity:1;
                visibility:visible;
                transform:none;
            }

            .dropdown:hover .dropdown-menu{
                display:none;
            }

            .dropdown.open .dropdown-menu{
                display:block;
            }

            .dropdown-menu a{
                padding:10px;
            }

            .international-content{
                grid-template-columns:1fr;
            }

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


        @media(max-width:768px){

            .container{
                width:min(100% - 30px,var(--container));
            }

            .top-contact{
                justify-content:center;
                gap:8px 15px;
            }

            .top-contact span:last-child{
                display:none;
            }

            .header-inner{
                min-height:70px;
            }

            .logo-mark{
                width:43px;
                height:43px;
            }

            .logo-text strong{
                font-size:15px;
            }

            .page-hero{
                min-height:350px;
            }

            .page-hero-content{
                padding:60px 0;
            }

            .page-hero p{
                font-size:15px;
            }

            .section,
            .faq-section{
                padding:65px 0;
            }

            .courses-intro{
                padding:60px 0 30px;
            }

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

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

            .application-box{
                flex-direction:column;
                align-items:flex-start;
                padding:30px;
            }

            .footer-grid{
                grid-template-columns:1fr;
                gap:35px;
            }

            .footer-bottom-inner{
                flex-direction:column;
                align-items:flex-start;
            }
        }


        @media(max-width:560px){

            .top-bar{
                display:none;
            }

            .page-hero{
                min-height:320px;
            }

            .page-hero h1{
                font-size:34px;
            }

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

            .course-image{
                height:205px;
            }

            .category-title h2{
                font-size:23px;
            }

            .application-box h2{
                font-size:25px;
            }

            .application-actions{
                width:100%;
                flex-direction:column;
            }

            .application-actions .btn{
                width:100%;
            }

            .whatsapp-float{
                width:50px;
                height:50px;
                right:16px;
                bottom:16px;
            }

            #backToTop{
                right:16px;
                bottom:78px;
            }
        }


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

        @media(prefers-reduced-motion:reduce){

            *,
            *::before,
            *::after{
                animation-duration:.01ms !important;
                animation-iteration-count:1 !important;
                scroll-behavior:auto !important;
                transition-duration:.01ms !important;
            }
        }