/*==================================================
RESPONSIVE CSS
BISON SYSTEMS
==================================================*/

/*==================================================
LARGE DESKTOP
1400px+
==================================================*/

@media (min-width:1400px){

.container{

max-width:1350px;

}

.hero-title{

font-size:72px;

}

.section-heading{

font-size:56px;

}

.hero-image{

max-width:650px;

}

}

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

@media (max-width:1200px){

.hero-title{

font-size:56px;

}

.section-heading{

font-size:42px;

}

.hero-image{

max-width:520px;

}

.hero-stats{

gap:20px;

}

.stat-box{

min-width:135px;

}

}

/*==================================================
TABLET LANDSCAPE
992px
==================================================*/

@media (max-width:992px){

section{

padding:90px 0;

}

.custom-navbar{

background:#08192f;

}

.navbar-collapse{

margin-top:20px;

padding:20px;

background:#08192f;

border-radius:20px;

}

.navbar-nav{

gap:0;

}

.nav-link{

padding:14px 0 !important;

}

.hero-section{

text-align:center;

padding-top:120px;

}

.hero-title{

font-size:48px;

}

.hero-description{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

margin-bottom:60px;

}

.hero-image{

max-width:480px;

margin:auto;

}

.about-content{

padding-left:0;

margin-top:50px;

}

.experience-box{

position:relative;

right:auto;

bottom:auto;

margin-top:30px;

display:inline-block;

}

.process-line{

display:none;

}

.process-item{

margin-bottom:40px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}

/*==================================================
TABLET PORTRAIT
768px
==================================================*/

@media (max-width:768px){

section{

padding:80px 0;

}

.section-heading{

font-size:36px;

}

.section-description{

font-size:16px;

}

.hero-title{

font-size:42px;

line-height:1.25;

}

.hero-description{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:100%;

max-width:320px;

}

.hero-stats{

gap:15px;

}

.stat-box{

width:45%;

min-width:140px;

padding:18px;

}

.hero-image{

max-width:400px;

}

.floating-card{

display:none;

}

.about-image img{

border-radius:20px;

}

.about-feature{

flex-direction:column;

text-align:center;

}

.about-feature .icon{

margin:auto;

}

.service-card{

margin-bottom:30px;

}

.service-content{

padding:30px;

}

.service-card img{

height:220px;

}

.industry-card{

height:300px;

}

.case-card img{

height:300px;

}

.stats-card,

.why-card,

.award-card,

.office-card{

padding:30px 25px;

}

.footer{

padding:70px 0 30px;

}

.footer .col-lg-4,

.footer .col-lg-3,

.footer .col-lg-2{

margin-bottom:35px;

}

}

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

@media (max-width:576px){

.container{

padding-left:20px;

padding-right:20px;

}

.hero-section{

padding-top:110px;

min-height:auto;

}

.hero-title{

font-size:34px;

}

.section-heading{

font-size:30px;

}

.hero-description{

font-size:15px;

}

.hero-badge{

font-size:13px;

padding:8px 18px;

}

.hero-stats{

flex-direction:column;

align-items:center;

}

.stat-box{

width:100%;

max-width:250px;

}

.btn{

padding:14px 26px;

font-size:15px;

}

.service-content{

padding:25px;

}

.service-icon{

width:70px;

height:70px;

font-size:28px;

}

.service-content h4{

font-size:22px;

}

.stats-card h2{

font-size:40px;

}

.why-icon{

width:75px;

height:75px;

font-size:30px;

}

.process-number{

width:60px;

height:60px;

font-size:22px;

}

.premium-cta h2{

font-size:34px;

}

.footer{

text-align:center;

}

.footer-logo{

justify-content:center;

}

.social-links{

justify-content:center;

}

#scrollTop{

width:48px;

height:48px;

right:20px;

bottom:20px;

}

}

/*==================================================
EXTRA SMALL DEVICES
400px
==================================================*/

@media (max-width:400px){

.hero-title{

font-size:30px;

}

.section-heading{

font-size:28px;

}

.hero-image{

max-width:100%;

}

.logo-img{

width:45px;

height:45px;

}

.brand-text h4{

font-size:18px;

}

.brand-text span{

font-size:11px;

}

.nav-btn{

width:100%;

text-align:center;

margin-top:15px;

}

.stat-box h2{

font-size:30px;

}

.service-card img{

height:200px;

}

.industry-card{

height:260px;

}

.case-card img{

height:250px;

}

.testimonial-card{

padding:30px 22px;

}

.client-info{

flex-direction:column;

text-align:center;

}

.client-info img{

margin-bottom:10px;

}

}

/*==================================================
LANDSCAPE PHONES
==================================================*/

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

.hero-section{

min-height:auto;

padding:140px 0 80px;

}

.hero-image{

margin-top:40px;

}

}

/*==================================================
END OF RESPONSIVE CSS
==================================================*/