/* ======================================================
   RESPONSIVE.CSS
   Funnel Ok Responsive Styles
====================================================== */

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

@media (max-width:1200px){

.hero-title{
font-size:58px;
}

.section-title{
font-size:42px;
}

}

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

@media (max-width:991px){

.navbar{
padding:15px 0;
background:#fff;
}

.navbar-collapse{
background:#fff;
padding:20px;
margin-top:15px;
border-radius:15px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.hero-section{
padding:90px 0 60px;
text-align:center;
}

.hero-title{
font-size:46px;
}

.hero-description{
margin:auto;
}

.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}

.hero-users{
justify-content:center;
margin-bottom:40px;
}

.dashboard-preview,
.dashboard-wrapper{
margin-top:40px;
}

.floating-card,
.dashboard-box{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
margin:15px auto;
max-width:320px;
}

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

.solution-image{
margin-top:40px;
}

.logo-slider{
gap:25px;
}

.logo-slider img{
height:30px;
}

.pricing-card{
margin-bottom:30px;
}

.active-plan{
transform:none;
}

.footer-area{
text-align:center;
}

.social-links{
justify-content:center;
}

}

/* ===========================
   Mobile
=========================== */

@media (max-width:767px){

.hero-title{
font-size:36px;
line-height:1.2;
}

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

.btn-primary-custom,
.btn-outline-custom{
width:100%;
justify-content:center;
margin-bottom:12px;
}

.hero-buttons{
flex-direction:column;
}

.stats-card,
.problem-card,
.feature-card,
.pricing-card,
.testimonial-card{
padding:25px;
}

.section-title{
font-size:30px;
}

.section-subtitle{
font-size:16px;
}

.cta-box{
padding:40px 25px;
}

.cta-box h2{
font-size:34px;
}

.cta-box p{
font-size:16px;
}

.footer-area .row>div{
margin-bottom:30px;
}

.copyright .text-end{
text-align:center !important;
margin-top:10px;
}

}

/* ===========================
   Small Mobile
=========================== */

@media (max-width:480px){

.hero-title{
font-size:30px;
}

.section-title{
font-size:26px;
}

.hero-badge{
font-size:13px;
padding:8px 14px;
}

.logo-slider{
gap:15px;
}

.logo-slider img{
height:24px;
}

}