/* ==================================================
   SOCABU PREMIUM V2
   RESPONSIVE DESIGN
================================================== */


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


@media (min-width:1400px){


.container{

max-width:1320px;

}



.hero-content h1{

font-size:75px;

}



}





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


@media (max-width:1200px){



.hero-content h1{

font-size:55px;

}



.section-title h2{

font-size:36px;

}



.navbar-nav .nav-link{

margin:0 5px;

}



}





/* ==================================================
   TABLETTE
================================================== */


@media (max-width:992px){



/* NAVBAR */


.socabu-navbar{

background:var(--primary);

}



.logo{

height:50px;

}



.navbar-collapse{

background:var(--primary);

padding:25px;

border-radius:15px;

margin-top:15px;

}



.navbar-nav .nav-link{

padding:12px 0;

}




/* HERO */


.hero,
.hero-item{

height:90vh;

}



.hero-content{

text-align:center;

margin:auto;

}



.hero-content h1{

font-size:45px;

}



.hero-content p{

font-size:18px;

}



.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}




/* TRUST */


.trust-section{

margin-top:0;

}



.trust-box{

margin-bottom:25px;

}





/* WHY */


.why-section{

padding:70px 0;

}



.why-section img{

margin-bottom:40px;

}




/* AGENCIES */


.agency-card{

margin-bottom:20px;

}




/* PROCESS */


.process-card{

margin-bottom:25px;

}




/* CTA */


.cta-section h2{

font-size:38px;

}



}








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


@media (max-width:768px){



body{

overflow-x:hidden;

}





/* TOP BAR */


.top-bar{

display:none;

}





/* NAVBAR */


.logo{

height:45px;

}





/* HERO */


.hero,
.hero-item{

height:85vh;

}



.hero-content h1{

font-size:35px;

line-height:1.2;

}



.hero-content p{

font-size:16px;

}



.hero-buttons .btn{

width:100%;

margin-bottom:15px;

}





/* TITLES */


.section-title h2{

font-size:30px;

}



.section-title p{

font-size:15px;

}





/* TRUST */


.trust-box h3{

font-size:32px;

}





/* PRODUCTS */


.product-card{

padding:30px 20px;

}





.icon-box{

width:65px;

height:65px;

}



.icon-box i{

font-size:28px;

}





/* WHY */


.feature-item{

align-items:flex-start;

}



.feature-item h4{

font-size:18px;

}





/* AGENCIES */


.agency-card img{

height:200px;

}





/* MAP */


#socabu-map{

height:300px;

}





/* PROCESS */


.process-card{

padding:25px;

}





.process-card .number{

font-size:40px;

}





/* CTA */


.cta-section{

padding:60px 20px;

}



.cta-section h2{

font-size:30px;

}




/* NEWS */


.news-card{

margin-bottom:25px;

}





/* FOOTER */


.footer{

text-align:center;

}



.footer .col-lg-2,
.footer .col-lg-3,
.footer .col-lg-4{

margin-bottom:35px;

}





.whatsapp-btn{

width:55px;

height:55px;

right:20px;

bottom:20px;

font-size:25px;

}



}








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


@media (max-width:480px){



.hero-content h1{

font-size:30px;

}



.hero-content p{

font-size:15px;

}



.btn{

padding:12px 20px;

font-size:14px;

}



.section-title h2{

font-size:26px;

}



.trust-box i{

font-size:35px;

}



.process-card h4{

font-size:18px;

}



.footer{

padding-top:50px;

}


}








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


@media (max-width:360px){



.hero-content h1{

font-size:26px;

}



.hero-buttons .btn{

font-size:13px;

}



.logo{

height:40px;

}


}








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


@media(max-height:500px) and (orientation:landscape){


.hero,
.hero-item{

height:650px;

}



.hero-content h1{

font-size:32px;

}


}