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

/*=========================================================
                1400px
=========================================================*/

@media (max-width:1400px){

    .site-header .container{
        padding:0 24px;
    }

    .nav-menu{
        gap:34px;
    }

    .header-btn{
        min-width:140px;
        padding:0 24px;
    }

}


/*=========================================================
                1200px
=========================================================*/

@media (max-width:1200px){

    .header-logo img{
        width:165px;
    }

    .nav-menu{
        gap:26px;
    }

    .nav-link{
        font-size:15px;
    }

    .header-btn{
        min-width:130px;
        height:46px;
        font-size:14px;
        padding:0 20px;
    }

}


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

@media (max-width:992px){

    .navbar,
    .header-buttons{
        display:none;
    }

    .menu-toggle{

        display:flex;

        width:46px;
        height:46px;

        border:none;
        background:transparent;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:6px;

        cursor:pointer;

        z-index:10002;

    }

    .menu-toggle span{

        width:28px;
        height:3px;

        background:var(--primary);

        border-radius:50px;

        transition:.35s;

    }

    /* Hamburger Animation */

    .menu-toggle.active span:nth-child(1){

        transform:translateY(9px) rotate(45deg);

    }

    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }

    .menu-toggle.active span:nth-child(3){

        transform:translateY(-9px) rotate(-45deg);

    }

    /* Overlay */

    .menu-overlay{

        display:block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.45);

        opacity:0;

        visibility:hidden;

        transition:.35s;

        z-index:9997;

    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;

    }

    /* Sidebar */

    .mobile-menu{

        display:flex;

        position:fixed;

        top:0;
        right:-100%;

        width:330px;
        max-width:100%;

        height:100vh;

        background:#ffffff;

        flex-direction:column;

        padding:90px 30px 35px;

        transition:.40s ease;

        overflow-y:auto;

        z-index:9999;

        box-shadow:-12px 0 40px rgba(0,0,0,.12);

    }

    .mobile-menu.active{

        right:0;

    }

    /* Close Button */

    .close-menu{

        display:flex;

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

        position:absolute;

        top:18px;
        right:18px;

        width:42px;
        height:42px;

        border:none;

        border-radius:50%;

        background:#f5f5f5;

        font-size:30px;

        color:var(--primary);

        cursor:pointer;

    }

    /* Mobile Navigation */

    .mobile-nav{

        list-style:none;

        padding:0;

        margin:0;

    }

    .mobile-nav li{

        margin:0;

    }

    .mobile-nav a{

        display:block;

        padding:16px 0;

        text-decoration:none;

        color:var(--heading);

        font-size:17px;

        font-weight:600;

        border-bottom:1px solid #ececec;

        transition:.3s;

    }

    .mobile-nav a:hover{

        color:var(--primary);

        padding-left:8px;

    }

    /* Mobile Buttons */

    .mobile-buttons{

        display:flex;

        flex-direction:column;

        gap:15px;

        margin-top:35px;

    }

    .mobile-buttons .header-btn{

        width:100%;

    }

}


/*=========================================================
                768px
=========================================================*/

@media (max-width:768px){

    .site-header{

        height:82px;

    }

    .site-header .container{

        padding:0 20px;

    }

    .header-logo img{

        width:150px;

    }

    .mobile-menu{

        width:300px;

        padding:85px 24px 30px;

    }

}


/*=========================================================
                576px
=========================================================*/

@media (max-width:576px){

    .site-header{

        height:76px;

    }

    .site-header .container{

        padding:0 16px;

    }

    .header-logo img{

        width:135px;

    }

    .menu-toggle{

        width:42px;
        height:42px;

    }

    .menu-toggle span{

        width:24px;

    }

    .mobile-menu{

        width:100%;

        padding:75px 22px 28px;

    }

    .mobile-nav a{

        font-size:16px;

    }

}


/*=========================================================
                400px
=========================================================*/

@media (max-width:400px){

    .header-logo img{

        width:125px;

    }

    .site-header .container{

        padding:0 14px;

    }

}


/*=========================================================
                320px
=========================================================*/

@media (max-width:320px){

    .header-logo img{

        width:110px;

    }

    .mobile-menu{

        padding:70px 18px 24px;

    }

}

/*=========================================================
            CTA & FOOTER RESPONSIVE
=========================================================*/

/*=========================================================
            LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .site-footer{
        padding-top:220px;
    }

    .footer-content{
        gap:70px;
    }

}

/*=========================================================
            DESKTOP
=========================================================*/

@media (max-width:1200px){

    .site-footer{
        padding-top:210px;
    }

    .footer-cta{

        padding:55px 45px;
        margin-top:-85px;

    }

    .footer-cta h2{

        font-size:36px;

    }

    .footer-content{

        grid-template-columns:1.2fr .8fr 1fr;
        gap:50px;

    }

    .footer-logo{

        width:170px;

    }

    .footer-links h3,
    .footer-contact h3{

        font-size:22px;

    }

}

/*=========================================================
            SMALL LAPTOP
=========================================================*/

@media (max-width:992px){

    .site-footer{

        padding-top:180px;

    }

    .footer-cta{

        padding:50px 35px;
        margin-top:-75px;
        border-radius:24px;

    }

    .footer-cta h2{

        font-size:32px;

    }

    .footer-cta p{

        font-size:15px;

        max-width:620px;

    }

    .footer-cta-buttons{

        gap:15px;

    }

    .cta-primary-btn,
    .cta-secondary-btn{

        padding:14px 28px;
        font-size:15px;

    }

    /* Footer */

    .footer-content{

        grid-template-columns:1fr 1fr;
        gap:45px;

    }

    .footer-brand{

        grid-column:1 / -1;

        text-align:center;

        align-items:center;

    }

    .footer-tagline{

        max-width:600px;

    }

    .footer-social{

        margin-top:20px;

    }

    .footer-links{

        justify-self:start;

    }

    .footer-contact{

        justify-self:end;

    }

}

/*=========================================================
            TABLET
=========================================================*/

@media (max-width:768px){

    .site-footer{

        padding-top:165px;

    }

    .footer-cta{

        padding:45px 28px;

        margin-top:-60px;

    }

    .footer-cta h2{

        font-size:28px;
        line-height:1.3;

    }

    .footer-cta p{

        font-size:15px;
        margin-bottom:28px;

    }

    .footer-cta-buttons{

        flex-direction:column;
        width:100%;
        gap:15px;

    }

    .cta-primary-btn,
    .cta-secondary-btn{

        width:100%;
        max-width:340px;
        margin:auto;

    }

    /* Footer Grid */

    .footer-content{

        grid-template-columns:1fr;
        gap:40px;

        text-align:center;

    }

    .footer-brand,
    .footer-links,
    .footer-contact{

        align-items:center;
        justify-self:center;

    }

    .footer-tagline{

        max-width:500px;

    }

    .footer-links ul{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-contact ul li{

        justify-content:center;

        text-align:left;

        max-width:420px;

    }

    .social-icons{

        justify-content:center;

    }

}

/*=========================================================
                MOBILE
=========================================================*/

@media (max-width:576px){

    .site-footer{

        padding-top:145px;

    }

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

    .footer-cta{

        margin-top:-50px;

        padding:40px 22px;

        border-radius:22px;

    }

    .footer-cta h2{

        font-size:24px;

        line-height:1.35;

        margin-bottom:15px;

    }

    .footer-cta p{

        font-size:15px;

        line-height:1.7;

        margin-bottom:25px;

    }

    .footer-cta-buttons{

        gap:14px;

    }

    .cta-primary-btn,
    .cta-secondary-btn{

        width:100%;

        max-width:100%;

        height:50px;

        padding:0 20px;

        font-size:15px;

    }

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

    .footer-content{

        padding-top:20px;

        gap:35px;

    }

    .footer-logo{

        width:150px;

        margin-bottom:20px;

    }

    .footer-tagline{

        max-width:100%;

        font-size:15px;

        line-height:1.7;

        margin-bottom:28px;

    }

    .footer-links h3,
    .footer-contact h3,
    .footer-social h4{

        font-size:22px;

        margin-bottom:18px;

    }

    .footer-links ul li{

        margin-bottom:14px;

    }

    .footer-links ul li a{

        font-size:15px;

    }

    .footer-contact ul li{

        gap:14px;

        margin-bottom:22px;

    }

    .contact-icon{

        width:44px;

        height:44px;

        font-size:16px;

    }

    .footer-contact strong{

        font-size:15px;

    }

    .footer-contact p{

        font-size:14px;

        line-height:1.6;

    }

    .social-icons{

        gap:12px;

    }

    .social-icons a{

        width:44px;

        height:44px;

        font-size:16px;

    }

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

    .footer-bottom{

        flex-direction:column;

        text-align:center;

        gap:12px;

        padding:22px 0;

    }

    .footer-bottom-left,
    .footer-bottom-right{

        justify-content:center;

        font-size:14px;

        line-height:1.6;

    }

}

/*=========================================================
            SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .site-footer{

        padding-top:130px;

    }

    .footer-cta{

        padding:35px 18px;

        margin-top:-40px;

        border-radius:18px;

    }

    .footer-cta h2{

        font-size:21px;

    }

    .footer-cta p{

        font-size:14px;

    }

    .cta-primary-btn,
    .cta-secondary-btn{

        height:48px;

        font-size:14px;

    }

    .footer-logo{

        width:135px;

    }

    .footer-tagline{

        font-size:14px;

    }

    .footer-links h3,
    .footer-contact h3,
    .footer-social h4{

        font-size:20px;

    }

    .footer-links ul li a{

        font-size:14px;

    }

    .contact-icon{

        width:40px;

        height:40px;

        font-size:15px;

    }

    .footer-contact strong{

        font-size:14px;

    }

    .footer-contact p{

        font-size:13px;

    }

    .social-icons{

        gap:10px;

    }

    .social-icons a{

        width:40px;

        height:40px;

        font-size:15px;

    }

    .footer-bottom{

        padding:18px 0;

    }

    .footer-bottom-left,
    .footer-bottom-right{

        font-size:13px;

    }

}

/*=========================================================
            EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    .footer-cta{

        padding:30px 15px;

    }

    .footer-cta h2{

        font-size:19px;

    }

    .footer-cta p{

        font-size:13px;

    }

    .cta-primary-btn,
    .cta-secondary-btn{

        height:46px;

        font-size:13px;

    }

    .footer-logo{

        width:120px;

    }

    .footer-tagline{

        font-size:13px;

    }

    .footer-links h3,
    .footer-contact h3,
    .footer-social h4{

        font-size:18px;

    }

    .contact-icon{

        width:38px;

        height:38px;

    }

}

/*=========================================================
            HERO SECTION RESPONSIVE
=========================================================*/

/*==============================
        Large Desktop
===============================*/

@media (max-width:1400px){

    .hero-section{
        padding:160px 0 110px;
    }

    .hero-wrapper{
        gap:60px;
    }

    .hero-content h1{
        font-size:56px;
    }

    .hero-main-image{
        max-width:700px;
        transform:scale(1.15);
    }

}

/*==============================
        Desktop
===============================*/

@media (max-width:1200px){

    .hero-section{
        padding:150px 0 100px;
    }

    .hero-wrapper{
        gap:50px;
    }

    .hero-content{
        max-width:560px;
    }

    .hero-content h1{
        font-size:48px;
        line-height:1.2;
    }

    .hero-description,
    .hero-support-text{
        font-size:16px;
    }

    .hero-main-image{
        max-width:620px;
        transform:scale(1.08);
    }

}

/*==============================
        Laptop
===============================*/

@media (max-width:992px){

    .hero-section{
        padding:140px 0 80px;
    }

    .hero-wrapper{

        flex-direction:column;

        text-align:center;

        gap:50px;

    }

    .hero-content{

        max-width:100%;

        order:1;

    }

    .hero-image{

        order:2;

        width:100%;

    }

    .hero-content h1{

        font-size:42px;

        letter-spacing:-1px;

    }

    .hero-description,
    .hero-support-text{

        max-width:700px;

        margin-left:auto;
        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-main-image{

        max-width:560px;

        transform:none;

    }

    .hero-content::before{

        display:none;

    }

}

/*==============================
        Tablet
===============================*/

@media (max-width:768px){

    .hero-section{

        padding:130px 0 70px;

    }

    .hero-wrapper{

        gap:40px;

    }

    .hero-content h1{

        font-size:36px;

        line-height:1.25;

    }

    .hero-description{

        font-size:15px;

    }

    .hero-support-text{

        font-size:15px;

        margin-top:28px;

    }

    .hero-buttons{

        gap:15px;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        min-width:220px;

        height:52px;

    }

    .hero-main-image{

        max-width:480px;

    }

    .hero-blur{

        width:180px;

        height:180px;

    }

}

/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

    .hero-section{

        padding:120px 0 60px;

    }

    .hero-wrapper{

        gap:35px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content h1{

        font-size:32px;

        line-height:1.3;

        letter-spacing:-0.5px;

        margin-bottom:18px;

    }

    .hero-description{

        font-size:15px;

        line-height:1.7;

        margin-bottom:28px;

    }

    .hero-support-text{

        font-size:14px;

        line-height:1.7;

        margin-top:28px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:14px;

        width:100%;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        width:100%;

        max-width:320px;

        min-width:unset;

        height:50px;

        font-size:15px;

    }

    .hero-image{

        width:100%;

    }

    .hero-main-image{

        width:100%;

        max-width:360px;

        transform:none;

    }

    .hero-blur{

        width:140px;

        height:140px;

        right:15px;

        bottom:15px;

        filter:blur(55px);

    }

    .floating-one{

        width:16px;

        height:16px;

        top:30px;

        right:30px;

    }

    .floating-two{

        width:12px;

        height:12px;

        left:20px;

        bottom:70px;

    }

    .floating-three{

        width:14px;

        height:14px;

        right:15px;

        bottom:20px;

    }

}

/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .hero-section{

        padding:110px 0 55px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .hero-description{

        font-size:14px;

    }

    .hero-support-text{

        font-size:13px;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        height:48px;

        font-size:14px;

    }

    .hero-main-image{

        max-width:300px;

    }

    .hero-blur{

        width:110px;

        height:110px;

    }

}

/*=========================================================
            EXTRA SMALL MOBILE
=========================================================*/

@media (max-width:320px){

    .hero-section{

        padding:100px 0 50px;

    }

    .hero-content h1{

        font-size:24px;

        line-height:1.35;

    }

    .hero-description{

        font-size:13px;

    }

    .hero-support-text{

        font-size:12px;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        height:46px;

        font-size:13px;

        padding:0 15px;

    }

    .hero-main-image{

        max-width:260px;

    }

}

/*=========================================================
            REMOVE DECORATION ON MOBILE
=========================================================*/

@media (max-width:768px){

    .hero-bg-pattern::before,
    .hero-bg-pattern::after{

        display:none;

    }

}

/*=========================================================
        INVENTORY + OUR SOLUTION RESPONSIVE
=========================================================*/

/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .inventory-section{
        padding:100px 0;
    }

    .inventory-wrapper{
        gap:60px;
    }

    .inventory-image img{
        max-width:520px;
    }

    .our-solution{
        padding-top:100px;
    }

    .solution-header{
        margin-bottom:70px;
    }

    .solution-body{
        padding:80px 0;
    }

    .solution-wrapper{
        gap:70px;
    }

    .solution-image img{
        max-width:520px;
    }

}

/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    .inventory-section{
        padding:90px 0;
    }

    .inventory-section .section-title{
        margin-bottom:60px;
    }

    .inventory-section .section-title h2{
        font-size:36px;
    }

    .inventory-wrapper{
        gap:45px;
    }

    .inventory-content h3{
        font-size:24px;
    }

    .inventory-list li{
        font-size:16px;
    }

    .inventory-note{
        font-size:16px;
        padding:18px 22px;
    }

    .inventory-image img{
        max-width:470px;
    }

    /*=========================*/

    .our-solution{
        padding-top:90px;
    }

    .solution-header{
        max-width:760px;
        margin-bottom:60px;
    }

    .solution-header h2{
        font-size:36px;
    }

    .solution-body{
        border-radius:70px 70px 0 0;
        padding:75px 0;
    }

    .solution-wrapper{
        gap:50px;
    }

    .solution-content h4{
        font-size:24px;
    }

    .solution-list li{
        font-size:16px;
    }

    .solution-image img{
        max-width:470px;
    }

}

/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    .inventory-section{
        padding:80px 0;
    }

    .inventory-wrapper{

        flex-direction:column;

        text-align:center;

        gap:45px;

    }

    .inventory-image{

        order:1;

    }

    .inventory-content{

        order:2;

        max-width:100%;

    }

    .inventory-section .section-title{

        margin-bottom:50px;

    }

    .inventory-section .section-title h2{

        font-size:34px;

    }

    .inventory-content h3{

        font-size:24px;

    }

    .inventory-list{

        display:inline-block;

        text-align:left;

    }

    .inventory-note{

        max-width:650px;

        margin:30px auto 0;

    }

    .inventory-image img{

        max-width:520px;

    }

    /*=========================*/

    .our-solution{

        padding-top:80px;

    }

    .solution-header{

        margin-bottom:50px;

    }

    .solution-header h2{

        font-size:34px;

    }

    .solution-body{

        border-radius:60px 60px 0 0;

        padding:70px 0;

    }

    .solution-wrapper{

        flex-direction:column-reverse;

        text-align:center;

        gap:45px;

    }

    .solution-content{

        max-width:100%;

    }

    .solution-content h4{

        font-size:24px;

    }

    .solution-list{

        display:inline-block;

        text-align:left;

    }

    .solution-image img{

        max-width:520px;

    }

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    .inventory-section{

        padding:70px 0;

    }

    .inventory-section .section-title{

        margin-bottom:40px;

    }

    .inventory-section .section-title h2{

        font-size:30px;

        line-height:1.3;

    }

    .inventory-content h3{

        font-size:22px;

    }

    .inventory-list li{

        font-size:15px;

        margin-bottom:16px;

    }

    .inventory-note{

        font-size:15px;

        line-height:1.7;

    }

    .inventory-image img{

        max-width:430px;

    }

    .inventory-section::before,
    .inventory-section::after{

        display:none;

    }

    /*=========================*/

    .our-solution{

        padding-top:70px;

    }

    .solution-header{

        margin-bottom:40px;

    }

    .solution-header h2{

        font-size:30px;

        line-height:1.3;

    }

    .solution-header p{

        font-size:15px;

    }

    .solution-body{

        border-radius:45px 45px 0 0;

        padding:60px 0;

    }

    .solution-content h4{

        font-size:22px;

    }

    .solution-list li{

        font-size:15px;

        margin-bottom:18px;

    }

    .solution-image img{

        max-width:430px;

    }

    .solution-body::before,
    .solution-body::after{

        display:none;

    }

}


/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

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

    .inventory-section{

        padding:60px 0;

    }

    .inventory-section .section-title{

        margin-bottom:35px;

    }

    .inventory-section .section-title h2{

        font-size:26px;

        line-height:1.35;

    }

    .inventory-wrapper{

        gap:35px;

    }

    .inventory-image img{

        max-width:100%;

        border-radius:18px;

    }

    .inventory-content{

        text-align:center;

    }

    .inventory-content h3{

        font-size:20px;

        margin-bottom:22px;

    }

    .inventory-list{

        display:block;

        text-align:left;

    }

    .inventory-list li{

        gap:12px;

        font-size:15px;

        line-height:1.7;

        margin-bottom:14px;

    }

    .inventory-list li::before{

        width:8px;

        height:8px;

        margin-top:9px;

    }

    .inventory-note{

        margin-top:25px;

        padding:16px 18px;

        font-size:15px;

        line-height:1.7;

        border-radius:12px;

    }

    /*==============================
        OUR SOLUTION
    ==============================*/

    .our-solution{

        padding-top:60px;

    }

    .section-badge{

        padding:10px 22px;

        font-size:13px;

        margin-bottom:18px;

    }

    .solution-header{

        margin-bottom:35px;

    }

    .solution-header h2{

        font-size:26px;

        line-height:1.35;

    }

    .solution-header p{

        font-size:15px;

        line-height:1.7;

    }

    .solution-body{

        padding:50px 0;

        border-radius:35px 35px 0 0;

    }

    .solution-wrapper{

        gap:35px;

    }

    .solution-image img{

        max-width:100%;

        border-radius:18px;

    }

    .solution-content{

        text-align:center;

    }

    .solution-content h4{

        font-size:20px;

        margin-bottom:22px;

    }

    .solution-list{

        display:block;

        text-align:left;

    }

    .solution-list li{

        font-size:15px;

        line-height:1.7;

        margin-bottom:16px;

        padding-left:34px;

    }

    .solution-list li::before{

        width:22px;

        height:22px;

        font-size:12px;

    }

}

/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .inventory-section{

        padding:50px 0;

    }

    .inventory-section .section-title h2{

        font-size:23px;

    }

    .inventory-content h3{

        font-size:18px;

    }

    .inventory-list li{

        font-size:14px;

    }

    .inventory-note{

        font-size:14px;

        padding:14px 16px;

    }

    /*==============================*/

    .our-solution{

        padding-top:50px;

    }

    .solution-header h2{

        font-size:23px;

    }

    .solution-header p{

        font-size:14px;

    }

    .solution-content h4{

        font-size:18px;

    }

    .solution-list li{

        font-size:14px;

    }

    .solution-body{

        padding:45px 0;

        border-radius:28px 28px 0 0;

    }

}

/*=========================================================
            EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    .inventory-section{

        padding:45px 0;

    }

    .inventory-section .section-title h2{

        font-size:20px;

    }

    .inventory-content h3{

        font-size:17px;

    }

    .inventory-list li{

        font-size:13px;

    }

    .inventory-note{

        font-size:13px;

        line-height:1.6;

    }

    /*==============================*/

    .our-solution{

        padding-top:45px;

    }

    .section-badge{

        padding:8px 18px;

        font-size:12px;

    }

    .solution-header h2{

        font-size:20px;

    }

    .solution-header p{

        font-size:13px;

    }

    .solution-content h4{

        font-size:17px;

    }

    .solution-list li{

        font-size:13px;

        padding-left:30px;

    }

    .solution-list li::before{

        width:20px;

        height:20px;

        font-size:11px;

    }

}

/*=========================================================
        HOW CLR STK WORKS RESPONSIVE
=========================================================*/

/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .works-section{

        padding:100px 0;

    }

    .works-wrapper{

        gap:70px;

        grid-template-columns:380px 1fr;

    }

    .works-left h2{

        font-size:44px;

    }

}

/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    .works-section{

        padding:90px 0;

    }

    .works-wrapper{

        grid-template-columns:330px 1fr;

        gap:50px;

    }

    .works-left{

        top:120px;

    }

    .works-left h2{

        font-size:40px;

    }

    .works-left p{

        font-size:15px;

    }

    .works-right{

        gap:55px;

    }

    .work-item{

        max-width:430px;

    }

    .work-item:nth-child(odd){

        margin-left:70px;

    }

    .work-number{

        font-size:76px;

    }

    .work-item h3{

        font-size:22px;

    }

    .work-item p{

        font-size:15px;

    }

}

/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    .works-section{

        padding:80px 0;

    }

    .works-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .works-left{

        position:static;

        text-align:center;

    }

    .works-left-content{

        max-width:700px;

        margin:0 auto;

    }

    .works-left h2{

        font-size:38px;

        line-height:1.2;

    }

    .works-right{

        align-items:center;

        gap:45px;

    }

    .work-item{

        width:100%;

        max-width:650px;

        margin-left:0 !important;

        padding-left:45px;

    }

    .work-number{

        font-size:72px;

        top:-25px;

    }

    .work-item h3{

        font-size:22px;

    }

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    .works-section{

        padding:70px 0;

    }

    .works-wrapper{

        gap:45px;

    }

    .works-left h2{

        font-size:34px;

    }

    .works-left p{

        font-size:15px;

    }

    .works-right{

        gap:40px;

    }

    .work-item{

        max-width:100%;

        padding-left:38px;

    }

    .work-number{

        font-size:62px;

        top:-20px;

    }

    .work-item h3{

        font-size:20px;

        margin-bottom:14px;

    }

    .work-item p{

        font-size:15px;

        line-height:1.7;

    }

    .work-line{

        width:70px;

    }

    /* Remove Decorative Shapes */

    .works-section::before,
    .works-section::after{

        display:none;

    }

}

/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

    .works-section{

        padding:60px 0;

    }

    .works-wrapper{

        gap:35px;

    }

    /*==============================
            LEFT CONTENT
    ==============================*/

    .works-left{

        text-align:center;

    }

    .works-left-content{

        max-width:100%;

    }

    .works-left h2{

        font-size:28px;

        line-height:1.3;

        margin-bottom:18px;

    }

    .works-left p{

        font-size:15px;

        line-height:1.7;

    }

    /*==============================
            RIGHT CONTENT
    ==============================*/

    .works-right{

        gap:35px;

    }

    .work-item{

        max-width:100%;

        padding-left:28px;

        margin-left:0 !important;

    }

    .work-number{

        font-size:52px;

        top:-12px;

        left:0;

    }

    .work-item h3{

        font-size:18px;

        line-height:1.4;

        margin-bottom:12px;

    }

    .work-item p{

        font-size:14px;

        line-height:1.7;

        margin-bottom:18px;

    }

    .work-line{

        width:60px;

        height:3px;

    }

}

/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .works-section{

        padding:50px 0;

    }

    .works-left h2{

        font-size:24px;

    }

    .works-left p{

        font-size:14px;

    }

    .works-right{

        gap:30px;

    }

    .work-item{

        padding-left:22px;

    }

    .work-number{

        font-size:42px;

        top:-8px;

    }

    .work-item h3{

        font-size:17px;

    }

    .work-item p{

        font-size:13px;

    }

    .work-line{

        width:50px;

    }

}

/*=========================================================
            EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    .works-section{

        padding:45px 0;

    }

    .works-left h2{

        font-size:21px;

        line-height:1.35;

    }

    .works-left p{

        font-size:13px;

    }

    .work-item{

        padding-left:18px;

    }

    .work-number{

        font-size:36px;

        top:-5px;

    }

    .work-item h3{

        font-size:16px;

        margin-bottom:10px;

    }

    .work-item p{

        font-size:12px;

        line-height:1.6;

    }

    .work-line{

        width:45px;

        height:3px;

    }

}

/*=========================================================
        INDUSTRIES + WHY CHOOSE RESPONSIVE
=========================================================*/

/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    /*=========================
        INDUSTRIES
    =========================*/

    .industries-section{
        padding:100px 0;
    }

    .industries-header{
        margin-bottom:60px;
    }

    .industries-header h2{
        font-size:38px;
    }

    .industries-grid{
        gap:28px;
    }

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

    .industry-card h3{
        font-size:23px;
    }

    /*=========================
        WHY CHOOSE
    =========================*/

    .why-choose-section{
        padding:100px 0;
    }

    .why-header{
        margin-bottom:60px;
    }

    .why-header h2{
        font-size:38px;
    }

    .why-row{
        gap:24px;
    }

}

/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    /*=========================
        INDUSTRIES
    =========================*/

    .industries-section{
        padding:90px 0;
    }

    .industries-header h2{
        font-size:36px;
    }

    .industries-grid{
        gap:22px;
    }

    .industry-card{
        padding:22px;
    }

    .industry-image img{
        max-width:340px;
    }

    .industry-card h3{
        font-size:22px;
    }

    .industry-card p{
        font-size:15px;
    }

    /*=========================
        WHY CHOOSE
    =========================*/

    .why-choose-section{
        padding:90px 0;
    }

    .why-header h2{
        font-size:36px;
    }

    .why-row{
        gap:20px;
    }

    .why-item i{
        width:66px;
        height:66px;
        font-size:26px;
    }

    .why-item h4{
        font-size:18px;
    }

}

/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    /*=========================
        INDUSTRIES
    =========================*/

    .industries-section{
        padding:80px 0;
    }

    .industries-header{
        margin-bottom:50px;
    }

    .industries-header h2{
        font-size:34px;
    }

    .industries-grid{

        grid-template-columns:repeat(2,1fr);

        gap:25px;

    }

    .industry-card{

        padding:24px;

    }

    .industry-image img{

        max-width:280px;

    }

    .industry-card h3{

        font-size:21px;

    }

    .industry-card p{

        font-size:15px;

    }

    .industries-section::before,
    .industries-section::after{

        display:none;

    }

    /*=========================
        WHY CHOOSE
    =========================*/

    .why-choose-section{

        padding:80px 0;

    }

    .why-header{

        margin-bottom:50px;

    }

    .why-header h2{

        font-size:34px;

    }

    .why-row{

        grid-template-columns:repeat(2,1fr);

        gap:25px;

        margin-bottom:25px;

    }

    .second-row{

        grid-template-columns:repeat(2,1fr);

        max-width:100%;

    }

    .why-item{

        padding:20px;

    }

    .why-item h4{

        font-size:18px;

    }

    .why-item i{

        width:64px;

        height:64px;

        font-size:24px;

        margin-bottom:18px;

    }

    .why-choose-section::before,
    .why-choose-section::after{

        display:none;

    }

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    /*=========================
        INDUSTRIES
    =========================*/

    .industries-section{

        padding:70px 0;

    }

    .industries-header{

        margin-bottom:40px;

    }

    .industries-header h2{

        font-size:30px;

        line-height:1.3;

    }

    .industries-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .industry-card{

        max-width:500px;

        margin:auto;

    }

    .industry-image img{

        max-width:260px;

    }

    .industry-card h3{

        font-size:20px;

    }

    .industry-card p{

        font-size:15px;

    }

    /*=========================
        WHY CHOOSE
    =========================*/

    .why-choose-section{

        padding:70px 0;

    }

    .why-header{

        margin-bottom:40px;

    }

    .why-header h2{

        font-size:30px;

        line-height:1.3;

    }

    .why-row{

        grid-template-columns:1fr;

        gap:20px;

        margin-bottom:20px;

    }

    .second-row{

        grid-template-columns:1fr;

    }

    .why-item{

        max-width:500px;

        margin:auto;

        padding:18px;

    }

    .why-item i{

        width:60px;

        height:60px;

        font-size:22px;

    }

    .why-item h4{

        font-size:18px;

    }

}

/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

    /*==================================
            INDUSTRIES
    ==================================*/

    .industries-section{

        padding:60px 0;

    }

    .industries-header{

        margin-bottom:35px;

    }

    .industries-header h2{

        font-size:26px;

        line-height:1.35;

    }

    .industries-grid{

        gap:20px;

    }

    .industry-card{

        padding:20px 18px;

        border-radius:18px;

    }

    .industry-image{

        margin-bottom:12px;

    }

    .industry-image img{

        width:100%;

        max-width:220px;

    }

    .industry-card h3{

        font-size:18px;

        margin-bottom:10px;

    }

    .industry-card p{

        font-size:14px;

        line-height:1.7;

    }

    /*==================================
            WHY CHOOSE
    ==================================*/

    .why-choose-section{

        padding:60px 0;

    }

    .why-header{

        margin-bottom:35px;

    }

    .why-header h2{

        font-size:26px;

        line-height:1.35;

    }

    .why-row{

        gap:18px;

        margin-bottom:18px;

    }

    .why-item{

        padding:16px;

    }

    .why-item i{

        width:56px;

        height:56px;

        font-size:20px;

        margin-bottom:16px;

    }

    .why-item h4{

        font-size:17px;

        line-height:1.6;

    }

}

/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    /*==================================
            INDUSTRIES
    ==================================*/

    .industries-section{

        padding:50px 0;

    }

    .industries-header h2{

        font-size:23px;

    }

    .industry-card{

        padding:18px 16px;

    }

    .industry-image img{

        max-width:190px;

    }

    .industry-card h3{

        font-size:17px;

    }

    .industry-card p{

        font-size:13px;

    }

    /*==================================
            WHY CHOOSE
    ==================================*/

    .why-choose-section{

        padding:50px 0;

    }

    .why-header h2{

        font-size:23px;

    }

    .why-item{

        padding:14px;

    }

    .why-item i{

        width:52px;

        height:52px;

        font-size:18px;

    }

    .why-item h4{

        font-size:16px;

    }

}

/*=========================================================
            EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    /*==================================
            INDUSTRIES
    ==================================*/

    .industries-section{

        padding:45px 0;

    }

    .industries-header h2{

        font-size:20px;

        line-height:1.4;

    }

    .industry-card{

        padding:16px 14px;

        border-radius:16px;

    }

    .industry-image img{

        max-width:170px;

    }

    .industry-card h3{

        font-size:16px;

    }

    .industry-card p{

        font-size:12px;

        line-height:1.6;

    }

    /*==================================
            WHY CHOOSE
    ==================================*/

    .why-choose-section{

        padding:45px 0;

    }

    .why-header h2{

        font-size:20px;

        line-height:1.4;

    }

    .why-item{

        padding:12px;

    }

    .why-item i{

        width:48px;

        height:48px;

        font-size:17px;

        margin-bottom:14px;

    }

    .why-item h4{

        font-size:15px;

        line-height:1.5;

    }

}

/*=========================================================
        HELPING SECTION + ECOSYSTEM SECTION RESPONSIVE
=========================================================*/


/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .helping-section{

        padding:100px 0 0;

    }

    .helping-content{

        padding:55px 0;

    }

    .helping-wrapper{

        gap:30px;

    }

    .helping-item h3{

        font-size:22px;

    }

    .ecosystem-section{

        padding:100px 0;

    }

    .ecosystem-content h2{

        font-size:38px;

    }

}


/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    .helping-section{

        padding:90px 0 0;

    }

    .helping-content{

        border-radius:32px;

        padding:50px 0;

    }

    .helping-wrapper{

        gap:25px;

    }

    .helping-icon{

        width:78px;

        height:78px;

        min-width:78px;

    }

    .helping-icon i{

        font-size:28px;

    }

    .helping-item h3{

        font-size:20px;

    }

    .ecosystem-section{

        padding:90px 0;

    }

    .ecosystem-content{

        max-width:760px;

    }

    .ecosystem-content h2{

        font-size:36px;

    }

    .ecosystem-content h4{

        font-size:18px;

    }

}


/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    .helping-section{

        padding:80px 0 0;

    }

    .helping-content{

        padding:45px;

    }

    .helping-wrapper{

        grid-template-columns:1fr;

        gap:30px;

    }

    .helping-item{

        justify-content:center;

        text-align:center;

        flex-direction:column;

    }

    .helping-item h3{

        font-size:22px;

    }

    .ecosystem-section{

        padding:80px 0;

    }

    .ecosystem-content h2{

        font-size:34px;

    }

    .ecosystem-content h4{

        font-size:18px;

    }

    .ecosystem-circle,

    .ecosystem-wave{

        display:none;

    }

    .ecosystem-section::before,

    .ecosystem-section::after{

        display:none;

    }

}


/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    .helping-section{

        padding:70px 0 0;

    }

    .helping-content{

        border-radius:24px;

        padding:40px 30px;

    }

    .helping-wrapper{

        gap:28px;

    }

    .helping-icon{

        width:72px;

        height:72px;

        min-width:72px;

    }

    .helping-icon i{

        font-size:26px;

    }

    .helping-item h3{

        font-size:20px;

        line-height:1.5;

    }

    .ecosystem-section{

        padding:70px 0;

    }

    .ecosystem-content h2{

        font-size:30px;

        line-height:1.3;

    }

    .ecosystem-content h4{

        font-size:17px;

        line-height:1.7;

    }

}


/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

    .helping-section{

        padding:60px 0 0;

    }

    .helping-content{

        padding:35px 20px;

        border-radius:20px;

    }

    .helping-wrapper{

        gap:24px;

    }

    .helping-icon{

        width:65px;

        height:65px;

        min-width:65px;

    }

    .helping-icon i{

        font-size:22px;

    }

    .helping-item h3{

        font-size:18px;

    }

    .ecosystem-section{

        padding:60px 0;

    }

    .ecosystem-content h2{

        font-size:26px;

    }

    .ecosystem-content h4{

        font-size:15px;

        line-height:1.7;

    }

}


/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .helping-section{

        padding:50px 0 0;

    }

    .helping-content{

        padding:30px 18px;

    }

    .helping-icon{

        width:58px;

        height:58px;

        min-width:58px;

    }

    .helping-icon i{

        font-size:20px;

    }

    .helping-item h3{

        font-size:17px;

    }

    .ecosystem-section{

        padding:50px 0;

    }

    .ecosystem-content h2{

        font-size:23px;

    }

    .ecosystem-content h4{

        font-size:14px;

    }

}


/*=========================================================
            EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    .helping-section{

        padding:45px 0 0;

    }

    .helping-content{

        padding:25px 15px;

    }

    .helping-icon{

        width:52px;

        height:52px;

        min-width:52px;

    }

    .helping-icon i{

        font-size:18px;

    }

    .helping-item h3{

        font-size:15px;

        line-height:1.5;

    }

    .ecosystem-section{

        padding:45px 0;

    }

    .ecosystem-content h2{

        font-size:20px;

        line-height:1.4;

    }

    .ecosystem-content h4{

        font-size:13px;

        line-height:1.6;

    }

}

/*=========================================================
        CONTACT PAGE RESPONSIVE
=========================================================*/

/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .contact-hero{
        padding:120px 0 65px;
    }

    .contact-hero h1{
        font-size:38px;
    }

    .contact-wrapper{
        grid-template-columns:300px 1fr 390px;
    }

    .contact-info{
        padding:60px 35px;
        gap:40px;
    }

    .contact-form{
        padding:50px 35px;
    }

    .contact-form h2{
        font-size:36px;
    }

}


/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    .contact-hero{
        padding:120px 0 60px;
    }

    .contact-hero h1{
        font-size:36px;
    }

    .contact-wrapper{

        grid-template-columns:280px 1fr 360px;

    }

    .contact-info{

        padding:50px 25px;

        gap:35px;

    }

    .icon{

        width:55px;
        height:55px;

        font-size:20px;

    }

    .info-item h4{

        font-size:18px;

    }

    .contact-form{

        padding:45px 30px;

    }

    .contact-form h2{

        font-size:34px;

        margin-bottom:30px;

    }

}


/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    .contact-hero{

        padding:120px 0 55px;

    }

    .contact-hero h1{

        font-size:34px;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .contact-info{

        flex-direction:row;

        justify-content:space-between;

        flex-wrap:wrap;

        gap:30px;

        padding:40px;

    }

    .info-item{

        width:calc(50% - 15px);

    }

    .contact-image{

        height:420px;

        background:#ffffff;

        padding:12px;

    }

    .contact-image img{

        width:100%;

        height:100%;

        object-fit:contain;

        object-position:center;

    }

    .contact-form{

        padding:45px 40px;

    }

    .contact-form h2{

        text-align:center;

        font-size:34px;

    }

}


/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    .contact-hero{

        padding:120px 0 50px;

    }

    .contact-hero h1{

        font-size:30px;

        line-height:1.3;

    }

    .contact-hero p{

        font-size:15px;

    }

    .contact-wrapper{

        border-radius:18px;

    }

    .contact-info{

        flex-direction:column;

        gap:25px;

        padding:35px 30px;

    }

    .info-item{

        width:100%;

    }

    .icon{

        width:52px;

        height:52px;

        font-size:18px;

    }

    .info-item h4{

        font-size:18px;

    }

    .contact-image{

        height:350px;

        background:#ffffff;

        padding:16px 12px;

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .contact-form{

        padding:40px 30px;

    }

    .contact-form h2{

        font-size:30px;

    }

    .input-box{

        margin-bottom:24px;

    }

}

/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

    .contact-hero{

        padding:120px 0 45px;

    }

    .contact-hero .section-tag{

        padding:7px 16px;

        font-size:13px;

        margin-bottom:15px;

    }

    .contact-hero h1{

        font-size:26px;

        line-height:1.35;

        margin-bottom:15px;

    }

    .contact-hero p{

        font-size:14px;

        line-height:1.7;

    }

    .contact-wrapper{

        border-radius:16px;

    }

    .contact-info{

        padding:30px 20px;

        gap:20px;

    }

    .info-item{

        gap:15px;

    }

    .icon{

        width:48px;

        height:48px;

        font-size:17px;

        flex-shrink:0;

    }

    .info-item span{

        font-size:14px;

    }

    .info-item h4{

        font-size:16px;

        line-height:1.5;

    }

    .contact-image{

        height:280px;

        background:#ffffff;

        padding:16px 12px;

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .contact-form{

        padding:30px 20px;

    }

    .contact-form h2{

        font-size:26px;

        margin-bottom:25px;

    }

    .input-box{

        margin-bottom:20px;

    }

    .input-box input,

    .input-box textarea{

        padding:15px;

        font-size:15px;

    }

    .input-box textarea{

        height:130px;

    }

    .input-box label{

        left:15px;

        top:15px;

        font-size:14px;

    }

    .contact-form .primary-btn{

        width:100%;

        height:52px;

        padding:0;

        font-size:15px;

    }

}


/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .contact-hero{

        padding:120px 0 40px;

    }

    .contact-hero h1{

        font-size:23px;

    }

    .contact-hero p{

        font-size:13px;

    }

    .contact-info{

        padding:25px 18px;

    }

    .icon{

        width:44px;

        height:44px;

        font-size:16px;

    }

    .info-item span{

        font-size:13px;

    }

    .info-item h4{

        font-size:15px;

    }

    .contact-image{

        height:230px;

        background:#ffffff;

        padding:16px 12px;

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .contact-form{

        padding:25px 18px;

    }

    .contact-form h2{

        font-size:23px;

    }

    .input-box input,

    .input-box textarea{

        padding:14px;

        font-size:14px;

    }

    .contact-form .primary-btn{

        height:50px;

        font-size:14px;

    }

}


/*=========================================================
                EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    .contact-hero{

        padding:120px 0 35px;

    }

    .contact-hero .section-tag{

        padding:6px 14px;

        font-size:12px;

    }

    .contact-hero h1{

        font-size:20px;

        line-height:1.4;

    }

    .contact-hero p{

        font-size:12px;

        line-height:1.6;

    }

    .contact-wrapper{

        border-radius:14px;

    }

    .contact-info{

        padding:20px 15px;

        gap:18px;

    }

    .icon{

        width:40px;

        height:40px;

        font-size:15px;

    }

    .info-item span{

        font-size:12px;

    }

    .info-item h4{

        font-size:14px;

    }

    .contact-image{

        height:200px;

        background:#ffffff;

        padding:16px 12px;

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .contact-form{

        padding:20px 15px;

    }

    .contact-form h2{

        font-size:20px;

        margin-bottom:20px;

    }

    .input-box{

        margin-bottom:18px;

    }

    .input-box input,

    .input-box textarea{

        padding:13px;

        font-size:13px;

    }

    .input-box textarea{

        height:110px;

    }

    .input-box label{

        left:13px;

        top:13px;

        font-size:12px;

    }

    .contact-form .primary-btn{

        height:48px;

        font-size:13px;

    }

}

/*=========================================================
        VISION & MISSION RESPONSIVE
=========================================================*/

/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:110px 0;
    }

    .section-title{
        margin-bottom:60px;
    }

    .section-title h2{
        font-size:38px;
    }

    .vision-wrapper,
    .mission-wrapper{
        padding:80px 0;
    }

    .vision-grid,
    .mission-grid{
        gap:60px;
    }

}

/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:100px 0;
    }

    .section-title{
        margin-bottom:55px;
    }

    .section-title h2{
        font-size:36px;
    }

    .vision-wrapper,
    .mission-wrapper{
        padding:70px 0;
    }

    .vision-grid,
    .mission-grid{
        gap:50px;
    }

    .vision-image img,
    .mission-image img{
        max-width:430px;
    }

    .vision-content p,
    .mission-content p{
        font-size:15px;
    }

    .vision-list li,
    .mission-list li{
        font-size:16px;
    }

}

/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:90px 0;
    }

    .section-title{
        margin-bottom:50px;
    }

    .section-title h2{
        font-size:34px;
        line-height:1.3;
    }

    .vision-grid,
    .mission-grid{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .mission-grid{

        display:flex;

        flex-direction:column-reverse;

    }

    .vision-image,
    .mission-image{

        order:1;

    }

    .vision-content,
    .mission-content{

        order:2;

    }

    .vision-image img,
    .mission-image img{

        max-width:420px;

        margin:auto;

    }

    .vision-list,
    .mission-list{

        display:inline-block;

        text-align:left;

        margin-top:30px;

    }

    .mission-wrapper{

        border-radius:35px;

    }

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:80px 0;
    }

    .section-title{
        margin-bottom:45px;
    }

    .section-title span{
        font-size:13px;
        letter-spacing:1.5px;
    }

    .section-title h2{

        font-size:30px;

        line-height:1.35;

    }

    .vision-wrapper,
    .mission-wrapper{

        padding:55px 30px;

    }

    .vision-grid,
    .mission-grid{

        gap:35px;

    }

    .vision-image img,
    .mission-image img{

        max-width:360px;

    }

    .vision-content p,
    .mission-content p{

        font-size:15px;

        line-height:1.8;

    }

    .vision-list li,
    .mission-list li{

        font-size:16px;

        margin-bottom:16px;

    }

    .mission-wrapper{

        border-radius:28px;

    }

}

/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:576px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:70px 0;
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title span{
        font-size:12px;
        letter-spacing:1px;
        margin-bottom:12px;
    }

    .section-title h2{
        font-size:26px;
        line-height:1.35;
    }

    .vision-wrapper,
    .mission-wrapper{
        padding:45px 20px;
    }

    .mission-wrapper{
        border-radius:22px;
    }

    .vision-grid,
    .mission-grid{
        gap:30px;
    }

    .vision-image img,
    .mission-image img{
        max-width:300px;
        width:100%;
    }

    .vision-content p,
    .mission-content p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:18px;
        text-align:center;
    }

    .vision-list,
    .mission-list{
        margin-top:25px;
        width:100%;
    }

    .vision-list li,
    .mission-list li{
        gap:12px;
        font-size:15px;
        line-height:1.6;
        margin-bottom:15px;
    }

    .vision-list li i,
    .mission-list li i{
        width:30px;
        height:30px;
        font-size:12px;
        flex-shrink:0;
    }

}

/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:60px 0;
    }

    .section-title{
        margin-bottom:30px;
    }

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

    .vision-wrapper,
    .mission-wrapper{
        padding:35px 18px;
    }

    .mission-wrapper{
        border-radius:18px;
    }

    .vision-grid,
    .mission-grid{
        gap:25px;
    }

    .vision-image img,
    .mission-image img{
        max-width:250px;
    }

    .vision-content p,
    .mission-content p{
        font-size:13px;
    }

    .vision-list li,
    .mission-list li{
        font-size:14px;
        gap:10px;
    }

    .vision-list li i,
    .mission-list li i{
        width:28px;
        height:28px;
        font-size:11px;
    }

}

/*=========================================================
            EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:320px){

    .vision-section{
        padding:120px 0 0;
    }

    .mission-section{
        padding:50px 0;
    }

    .section-title{
        margin-bottom:25px;
    }

    .section-title span{
        font-size:11px;
        letter-spacing:.8px;
    }

    .section-title h2{
        font-size:20px;
        line-height:1.4;
    }

    .vision-wrapper,
    .mission-wrapper{
        padding:30px 15px;
    }

    .mission-wrapper{
        border-radius:15px;
    }

    .vision-image img,
    .mission-image img{
        max-width:210px;
    }

    .vision-content p,
    .mission-content p{
        font-size:12px;
        line-height:1.7;
    }

    .vision-list,
    .mission-list{
        margin-top:20px;
    }

    .vision-list li,
    .mission-list li{
        font-size:13px;
        gap:8px;
        margin-bottom:12px;
    }

    .vision-list li i,
    .mission-list li i{
        width:24px;
        height:24px;
        font-size:10px;
    }

}

/*=========================================================
        VALUES & ACCREDITATION SECTION RESPONSIVE
=========================================================*/

/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

    .values-section{
        padding:110px 0;
    }

    .accreditation-section{
        padding:110px 0;
    }

    .values-grid{
        gap:60px;
        margin-top:60px;
    }

    .accreditation-badges{
        gap:40px;
        margin-top:60px;
    }

}

/*=========================================================
                    DESKTOP
=========================================================*/

@media (max-width:1200px){

    .values-section{
        padding:80px 0;
    }

    .accreditation-section{
        padding:80px 0;
    }

    .values-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px 28px;

        margin-top:40px;

    }

    .founder-section{
        padding:70px 0;
    }

    .value-icon{

        width:60px;

        height:60px;

        font-size:22px;

    }

    .value-item h3{

        font-size:23px;

    }

    .value-item p{

        font-size:15px;

    }

    .accreditation-section .section-title{

        margin-bottom:60px;

    }

    .accreditation-section .section-title h2{

        font-size:36px;

    }

    .accreditation-badges{

        gap:30px;

        margin-top:55px;

    }

    .badge-item img{

        width:150px;

    }

}

/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:992px){

    .values-section{
        padding:90px 0;
    }

    .accreditation-section{
        padding:90px 0;
    }

    .values-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

        margin-top:50px;

    }

    .value-item{

        text-align:center;

        align-items:center;

    }

    .value-item p{

        max-width:100%;

    }

    .accreditation-section .section-title h2{

        font-size:34px;

    }

    .accreditation-badges{

        grid-template-columns:repeat(2,1fr);

        gap:35px;

        margin-top:50px;

    }

    .badge-item img{

        width:140px;

    }

    .badges-wrapper img{
        width:100px;
    }

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:768px){

    .values-section{
        padding:80px 0;
    }

    .accreditation-section{
        padding:80px 0;
    }

    .values-grid{

        grid-template-columns:1fr;

        gap:35px;

        margin-top:40px;

    }

    .value-item{

        max-width:500px;

        margin:auto;

    }

    .value-icon{

        width:58px;

        height:58px;

        font-size:20px;

        margin-bottom:18px;

    }

    .value-item h3{

        font-size:22px;

        margin-bottom:12px;

    }

    .value-item p{

        font-size:15px;

        line-height:1.7;

    }

    .accreditation-section .section-title{

        margin-bottom:45px;

    }

    .accreditation-section .section-title h2{

        font-size:30px;

        line-height:1.3;

    }

    .accreditation-section .section-title p{

        font-size:15px;

    }

    .accreditation-badges{

        grid-template-columns:repeat(2,1fr);

        gap:25px;

        margin-top:40px;

    }

    .badge-item img{

        width:130px;

    }

}

/*=========================================================
                    MOBILE LARGE
=========================================================*/

@media (max-width:576px){

    .values-section{
        padding:70px 0;
    }

    .accreditation-section{
        padding:70px 0;
    }

    .values-grid{
        gap:30px;
        margin-top:35px;
    }

    .value-item{
        text-align:center;
        align-items:center;
    }

    .value-icon{
        width:54px;
        height:54px;
        font-size:18px;
        margin-bottom:16px;
    }

    .value-item h3{
        font-size:20px;
        margin-bottom:10px;
    }

    .value-item p{
        font-size:14px;
        line-height:1.7;
    }

    .accreditation-section .section-title{
        margin-bottom:35px;
    }

    .accreditation-section .section-title h2{
        font-size:28px;
        line-height:1.3;
    }

    .accreditation-section .section-title p{
        font-size:14px;
        line-height:1.7;
    }

    .accreditation-badges{

        grid-template-columns:1fr 1fr;

        gap:20px;

        margin-top:35px;

    }

    .badge-item img{
        width:110px;
    }

    .badges-wrapper{
        gap:15px;
    }

    .badges-wrapper img{
        width:85px;
    }
}

/*=========================================================
                    MOBILE
=========================================================*/

@media (max-width:480px){

    .values-section{
        padding:60px 0;
    }

    .accreditation-section{
        padding:60px 0;
    }

    .values-grid{
        gap:28px;
    }

    .value-icon{
        width:50px;
        height:50px;
        font-size:17px;
    }

    .value-item h3{
        font-size:19px;
    }

    .value-item p{
        font-size:14px;
    }

    .accreditation-section .section-title h2{
        font-size:25px;
    }

    .accreditation-badges{

        grid-template-columns:1fr;

        gap:25px;

    }

    .badge-item img{
        width:120px;
    }

}

/*=========================================================
                EXTRA SMALL MOBILE
=========================================================*/

@media (max-width:400px){

    .values-section{
        padding:55px 0;
    }

    .accreditation-section{
        padding:55px 0;
    }

    .value-icon{
        width:46px;
        height:46px;
        font-size:16px;
    }

    .value-item h3{
        font-size:18px;
    }

    .value-item p{
        font-size:13px;
        line-height:1.7;
    }

    .accreditation-section .section-title h2{
        font-size:22px;
    }

    .accreditation-section .section-title p{
        font-size:13px;
    }

    .badge-item img{
        width:100px;
    }

}

/*=========================================================
                    320PX DEVICES
=========================================================*/

@media (max-width:320px){

    .values-section,
    .accreditation-section{
        padding:50px 0;
    }

    .value-icon{
        width:42px;
        height:42px;
        font-size:15px;
    }

    .value-item h3{
        font-size:17px;
    }

    .value-item p{
        font-size:12px;
    }

    .accreditation-section .section-title h2{
        font-size:20px;
    }

    .accreditation-section .section-title p{
        font-size:12px;
    }

    .badge-item img{
        width:90px;
    }

}

/*=========================================================
   CERTIFICATES + FOUNDER + FOOTER WRAP + PAGE SECTIONS
   (keeps desktop unchanged; only max-width breakpoints)
=========================================================*/

@media (max-width: 1100px) {
    .accreditation-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .cert-image {
        min-height: 180px;
        padding: 12px;
    }
    .cert-image img {
        max-height: 200px;
    }
    .cert-info h3 {
        font-size: 16px;
    }
    .cert-info p {
        font-size: 12px;
    }
    .founder-section {
        padding: 60px 0;
    }
    .video-overview-header h2 {
        font-size: 32px;
    }
}

@media (max-width: 900px) {
    .accreditation-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
        gap: 22px;
    }
    .cert-image {
        min-height: 220px;
    }
    .cert-image img {
        max-height: 280px;
    }
    .founder-content {
        max-width: 100%;
        padding: 0 8px;
    }
    .founder-lead {
        font-size: 16px;
    }
    .founder-content p {
        font-size: 15px;
    }
    .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    .video-player-wrap {
        max-width: 100%;
    }
    .video-feature-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    /* Footer contact alignment on tablet */
    .footer-contact ul li {
        align-items: flex-start;
    }
    .footer-contact ul li > div {
        min-width: 0;
        flex: 1 1 auto;
    }
    .footer-contact p {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.55;
    }
    .footer-contact strong {
        line-height: 1.3;
    }
}

@media (max-width: 768px) {
    .accreditation-section {
        padding: 60px 0;
    }
    .accreditation-section .section-title {
        margin-bottom: 32px;
    }
    .accreditation-section .section-title h2 {
        font-size: 28px;
    }
    .founder-section {
        padding: 50px 0;
    }
    .founder-section .section-title h2 {
        font-size: 26px;
    }
    .faq-header h1 {
        font-size: 28px;
    }
    .faq-item {
        padding: 0;
    }
    .pricing-section {
        padding-left: 0;
        padding-right: 0;
    }
    .video-overview-section {
        padding: 60px 0;
    }
    .video-overview-header h2 {
        font-size: 26px;
    }
    .video-overview-header p {
        font-size: 14px;
    }
    .footer-content {
        gap: 40px;
    }
    .footer-contact ul li {
        gap: 12px;
        margin-bottom: 20px;
    }
    .contact-icon {
        flex-shrink: 0;
    }
}

@media (max-width: 576px) {
    .accreditation-grid {
        max-width: 100%;
    }
    .cert-card {
        border-radius: 14px;
    }
    .cert-info {
        padding: 14px 16px 18px;
    }
    .cert-info h3 {
        font-size: 15px;
    }
    .founder-lead {
        font-size: 15px;
    }
    .founder-content p {
        font-size: 14px;
        line-height: 1.65;
    }
    .video-play-btn {
        width: 56px;
        height: 56px;
    }
    .video-feature-badge {
        font-size: 12px;
        padding: 6px 10px;
    }
    .footer-contact p {
        font-size: 13px;
        line-height: 1.55;
    }
    .footer-contact strong {
        font-size: 14px;
    }
    .footer-bottom-left {
        font-size: 12px;
        line-height: 1.6;
    }
    .footer-legal {
        display: inline;
    }
}

@media (max-width: 400px) {
    .cert-image {
        min-height: 180px;
        padding: 10px;
    }
    .cert-image img {
        max-height: 220px;
    }
    .founder-section .section-title h2 {
        font-size: 22px;
    }
}