/*==================================================
RESPONSIVE.CSS
CCF EXPRESS V2
==================================================*/


/*==================================================
1400px
Large Desktop
==================================================*/

@media screen and (max-width:1400px){

.container{

    max-width:1200px;

}

.hero-left h1{

    font-size:56px;

}

.hero-image-wrapper{

    max-width:560px;

}

}


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

@media screen and (max-width:1200px){

.container{

    max-width:1100px;

    padding:0 25px;

}

/*-----------------
Header
-----------------*/

.menu{

    gap:28px;

}

/*-----------------
Hero
-----------------*/

.hero-container{

    gap:50px;

}

.hero-left h1{

    font-size:50px;

}

.hero-left p{

    font-size:17px;

}

.hero-image-wrapper{

    max-width:500px;

}

/*-----------------
About
-----------------*/

.about-wrapper{

    gap:50px;

}

.about-content h2{

    font-size:40px;

}

/*-----------------
Cards
-----------------*/

.services-wrapper,

.why-wrapper,

.countries-wrapper,

.testimonial-wrapper{

    gap:25px;

}

/*-----------------
CTA
-----------------*/

.cta-wrapper{

    padding:50px;

}

.cta-content h2{

    font-size:38px;

}

}

/*==================================================
992px
Tablet Landscape
==================================================*/

@media screen and (max-width:992px){

/*==================================
Header
==================================*/

.topbar{

    display:none;

}

.nav-wrapper{

    min-height:75px;

}

.logo img{

    height:48px;

}

.menu-toggle{

    display:flex;

}

.menu{

    position:fixed;

    top:75px;

    left:-100%;

    width:100%;

    height:calc(100vh - 75px);

    background:#ffffff;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:40px 30px;

    gap:25px;

    overflow-y:auto;

    transition:.35s;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.menu.active{

    left:0;

}

.menu li{

    width:100%;

}

.menu li a{

    display:block;

    width:100%;

    font-size:17px;

    padding:12px 0;

}

.header-space{

    height:75px;

}

/*==================================
Hero
==================================*/

.hero{

    padding:80px 0;

}

.hero-container{

    flex-direction:column;

    text-align:center;

    gap:50px;

}

.hero-left{

    max-width:100%;

}

.hero-left h1{

    font-size:44px;

}

.hero-left p{

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-features{

    justify-content:center;

}

.hero-right{

    width:100%;

}

.hero-image-wrapper{

    max-width:500px;

    margin:auto;

}

/*==================================
Hero Floating Cards
==================================*/

.card-one{

    left:0;

    top:20px;

}

.card-two{

    right:0;

    top:140px;

}

.card-three{

    left:20px;

    bottom:0;

}

/*==================================
About
==================================*/

.about-wrapper{

    flex-direction:column;

    text-align:center;

}

.about-content{

    width:100%;

}

.about-features{

    justify-content:center;

}

.about-feature{

    width:auto;

}

.experience-card{

    position:relative;

    right:auto;

    bottom:auto;

    margin:30px auto 0;

}

/*==================================
Cards
==================================*/

.services-wrapper,

.why-wrapper,

.countries-wrapper,

.testimonial-wrapper{

    justify-content:center;

}

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

.cta-wrapper{

    flex-direction:column;

    text-align:center;

    padding:45px 35px;

}

.cta-buttons{

    justify-content:center;

}

/*==================================
Footer
==================================*/

.footer-wrapper{

    justify-content:center;

    text-align:center;

}

.footer-column{

    flex:1 1 100%;

}

.footer-social{

    justify-content:center;

}

}

/*==================================================
768px
Tablet Portrait
==================================================*/

@media screen and (max-width:768px){

/*==================================
Common
==================================*/
.hero-card{

    display:none;

}

section{

    padding:80px 0;

}

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    font-size:16px;

}

/*==================================
Hero
==================================*/

.hero{

    padding:70px 0;

}

.hero-left h1{

    font-size:38px;

    line-height:1.25;

}

.hero-left p{

    font-size:16px;

}

.hero-badge{

    font-size:13px;

    padding:10px 18px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.hero-buttons .btn{

    width:240px;

}

.hero-features{

    justify-content:center;

    gap:12px;

}

.feature-item{

    width:100%;

    justify-content:center;

}

/*==================================
Hero Image
==================================*/

.hero-image-wrapper{

    max-width:420px;

}

/*==================================
Floating Cards
==================================*/

.hero-card{

    width:210px;

    padding:15px;

}

.hero-card h4{

    font-size:16px;

}

.hero-card p{

    font-size:13px;

}

.card-one{

    left:0;

    top:0;

}

.card-two{

    right:0;

    top:120px;

}

.card-three{

    left:10px;

    bottom:-10px;

}

/*==================================
About
==================================*/

.about-wrapper{

    gap:40px;

}

.about-content h2{

    font-size:34px;

}

.about-feature{

    width:100%;

    justify-content:center;

}

.experience-card{

    width:240px;

}

/*==================================
Services
==================================*/

.service-card{

    max-width:100%;

}

/*==================================
Why Choose
==================================*/

.why-card{

    max-width:100%;

}

/*==================================
Countries
==================================*/

.country-card{

    max-width:45%;

}

/*==================================
Testimonials
==================================*/

.testimonial-card{

    max-width:100%;

}

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

.faq-question{

    padding:20px;

    font-size:16px;

}

.faq-answer p{

    padding:0 20px 20px;

}

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

.cta-wrapper{

    padding:40px 25px;

}

.cta-content h2{

    font-size:34px;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.cta-buttons .btn{

    width:240px;

}

/*==================================
Footer
==================================*/

.footer{

    padding-top:60px;

}

.footer-column{

    text-align:center;

}

.footer-logo{

    margin:0 auto 25px;

}

}

/*==================================================
576px
Large Mobile
==================================================*/

@media screen and (max-width:576px){

/*==============================
Common
==============================*/

.container{

    padding:0 18px;

}

section{

    padding:70px 0;

}

.section-title{

    margin-bottom:40px;

}

.section-title span{

    font-size:13px;

}

.section-title h2{

    font-size:30px;

    line-height:1.3;

}

.section-title p{

    font-size:15px;

}

/*==============================
Header
==============================*/

.logo img{

    height:42px;

}

.nav-wrapper{

    min-height:70px;

}

.header-space{

    height:70px;

}

.menu{

    top:70px;

    height:calc(100vh - 70px);

}

/*==============================
Hero
==============================*/

.hero{

    padding:60px 0;

}

.hero-left h1{

    font-size:32px;

    line-height:1.3;

}

.hero-left p{

    font-size:15px;

}

.hero-buttons{

    width:100%;

}

.hero-buttons .btn{

    width:100%;

}

.hero-image-wrapper{

    max-width:320px;

}

/*==============================
Hero Floating Cards
==============================*/

.hero-card{

    width:145px;

    padding:10px;

}

.hero-card h4{

    font-size:13px;

}

.hero-card p{

    font-size:11px;

}

.card-one{

    top:10px;

    left:0;

}

.card-two{

    top:90px;

    right:0;

}

.card-three{

    left:0;

    bottom:0;

}

/*==============================
About
==============================*/

.about-content h2{

    font-size:30px;

}

.about-content p{

    font-size:15px;

}

.about-feature{

    width:100%;

    justify-content:flex-start;

}

/*==============================
Cards
==============================*/

.service-card,

.why-card,

.country-card,

.testimonial-card{

    max-width:100%;

    flex:1 1 100%;

}

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

.faq-question{

    font-size:15px;

    padding:18px;

}

.faq-answer p{

    font-size:14px;

}

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

.cta{

    padding:70px 0;

}

.cta-wrapper{

    padding:30px 20px;

}

.cta-content h2{

    font-size:28px;

}

.cta-content p{

    font-size:15px;

}

.cta-buttons{

    width:100%;

}

.cta-buttons .btn{

    width:100%;

}

/*==============================
Footer
==============================*/

.footer{

    padding-top:50px;

}

.footer-column{

    margin-bottom:25px;

}

.footer-column h3{

    font-size:20px;

}

.footer-bottom{

    margin-top:25px;

}

}


/*==================================================
480px
Mobile
==================================================*/

@media screen and (max-width:480px){

.container{

    padding:0 15px;

}

.hero-left h1{

    font-size:28px;

}

.hero-left p{

    font-size:14px;

}

.section-title h2{

    font-size:26px;

}

/*==============================
Hero Image
==============================*/

.hero-image-wrapper{

    max-width:280px;

}

/*==============================
Floating Cards
==============================*/

.hero-card{

    width:125px;

    padding:8px;

}

.hero-card i{

    font-size:16px;

}

.hero-card h4{

    font-size:11px;

}

.hero-card p{

    display:none;

}

.card-one{

    top:0;

    left:0;

}

.card-two{

    top:70px;

    right:0;

}

.card-three{

    left:0;

    bottom:0;

}

/*==============================
About
==============================*/

.about-content h2{

    font-size:26px;

}

.about-content p{

    font-size:14px;

}

/*==============================
Experience Card
==============================*/

.experience-card{

    width:200px;

    padding:15px;

}

.experience-content h3{

    font-size:24px;

}

.experience-content p{

    font-size:12px;

}

/*==============================
Footer
==============================*/

.footer-logo{

    width:150px;

}

.footer-column p,

.footer-column li{

    font-size:14px;

}

}

/*==================================================
375px
Small Mobile
==================================================*/

@media screen and (max-width:375px){

/*==============================
Common
==============================*/

.container{

    padding:0 15px;

}

section{

    padding:60px 0;

}

/*==============================
Typography
==============================*/

.section-title h2{

    font-size:24px;

}

.section-title p{

    font-size:14px;

}

/*==============================
Hero
==============================*/

.hero-left h1{

    font-size:26px;

    line-height:1.4;

}

.hero-left p{

    font-size:14px;

}

.hero-image-wrapper{

    max-width:240px;

}

/*==============================
Buttons
==============================*/

.btn{

    width:100%;

    justify-content:center;

    padding:14px 20px;

    font-size:15px;

}

/*==============================
Floating Cards
==============================*/

.hero-card{

    width:110px;

    padding:8px;

}

.hero-card i{

    font-size:15px;

}

.hero-card h4{

    font-size:10px;

}

.hero-card p{

    display:none;

}

.card-one{

    top:0;

    left:0;

}

.card-two{

    top:60px;

    right:0;

}

.card-three{

    bottom:0;

    left:0;

}

/*==============================
About
==============================*/

.about-content h2{

    font-size:24px;

}

.about-feature{

    font-size:14px;

}

.experience-card{

    width:180px;

    padding:14px;

}

.experience-icon{

    width:50px;

    height:50px;

}

.experience-content h3{

    font-size:22px;

}

/*==============================
Cards
==============================*/

.service-content{

    padding:20px;

}

.service-content h3{

    font-size:20px;

}

.country-card{

    padding:25px 18px;

}

.country-card img{

    width:70px;

    height:70px;

}

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

.faq-question{

    padding:16px;

    font-size:14px;

}

.faq-answer p{

    font-size:14px;

}

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

.cta-content h2{

    font-size:24px;

}

.cta-content p{

    font-size:14px;

}

.cta-wrapper{

    padding:25px 18px;

}

}


/*==================================================
320px
Extra Small Mobile
==================================================*/

@media screen and (max-width:320px){

.container{

    padding:0 12px;

}

.hero-left h1{

    font-size:22px;

}

.hero-left p{

    font-size:13px;

}

.section-title h2{

    font-size:22px;

}

/*==============================
Hero Image
==============================*/

.hero-image-wrapper{

    max-width:210px;

}

/*==============================
Floating Cards
==============================*/

.hero-card{

    width:95px;

    padding:6px;

}

.hero-card h4{

    font-size:9px;

}

.hero-card i{

    font-size:13px;

}

/*==============================
About
==============================*/

.about-content h2{

    font-size:22px;

}

.about-content p{

    font-size:13px;

}

/*==============================
Experience Card
==============================*/

.experience-card{

    width:160px;

    padding:12px;

}

.experience-content h3{

    font-size:20px;

}

.experience-content p{

    font-size:11px;

}

/*==============================
Footer
==============================*/

.footer-logo{

    width:130px;

}

.footer-column h3{

    font-size:18px;

}

.footer-column p,

.footer-column li{

    font-size:13px;

}

.footer-bottom p{

    font-size:12px;

}

}

/*=============================
About page responsive
===============================*/

@media(max-width:991px){

.story-wrapper{

    flex-direction:column;

}

.story-content{

    order:2;

}

.story-image{

    order:1;

}

.story-content h2{

    font-size:34px;

}

}

@media(max-width:768px){

    .mission-wrapper{

        flex-direction:column;

    }

    .mission-card{

        width:100%;

    }

}

@media(max-width:991px){

    .why-card{

        flex:1 1 calc(50% - 30px);

    }

}

@media(max-width:768px){

    .why-card{

        flex:1 1 100%;

    }

}

@media(max-width:991px){

    .stat-card{

        flex:1 1 calc(50% - 30px);

    }

}

@media(max-width:768px){

    .stat-card{

        flex:1 1 100%;

    }

}

@media(max-width:991px){

    .process-card{

        flex:1 1 calc(50% - 30px);

    }

}

@media(max-width:768px){

    .process-card{

        flex:1 1 100%;

    }

}

@media(max-width:768px){

.about-cta h2{

    font-size:34px;

}

.about-cta p{

    font-size:16px;

}

}

/*=============================
Contact page responsive
===============================*/
@media(max-width:768px){

.contact-hero{

    min-height:420px;

}

.contact-hero h1{

    font-size:38px;

}

.contact-hero p{

    font-size:16px;

}

}

@media(max-width:991px){

    .contact-wrapper{

        flex-direction:column;

    }

    .contact-form{

        padding:30px;

    }

}

@media(max-width:991px){

.map-hours-wrapper{

    flex-direction:column;

}

.hours-box{

    width:100%;

}

}


/* contact page response issue */
@media (max-width:768px){

.contact-wrapper{
    flex-direction:column;
    gap:30px;
}

.contact-info,
.contact-form{
    min-width:100%;
    width:100%;
}

}

@media (max-width:768px){

.map-hours-wrapper{

    flex-direction:column;

}

.map-box,
.hours-box{

    width:100%;
    min-width:100%;

}

}

@media(max-width:768px){

.contact-hero{

    min-height:380px;

}

.contact-hero h1{

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

}

.contact-hero p{

    font-size:16px;

}

}