/* CSS Document */
/*====================================================
Responsive CSS
Microbucks Finance
====================================================*/


/*==============================================
Large Laptop
1200px - 1399px
==============================================*/

@media (max-width:1399px){

.hero h1{

font-size:52px;
line-height:65px;

}

.section-title{

font-size:40px;

}

}



/*==============================================
Laptop
992px -1199px
==============================================*/

@media (max-width:1199px){

.logo{

height:60px;

}

.navbar-nav .nav-link{

margin:0 8px;
font-size:15px;

}

.hero{

padding:90px 0;

}

.hero h1{

font-size:46px;
line-height:58px;

}

.hero img{

margin-top:40px;

}

.section-title{

font-size:38px;

}

.about-section h2,
.why-us h2{

font-size:38px;

}

.counter-box h2{

font-size:40px;

}

.cta-box{

padding:50px;

}

.news-content h4{

font-size:22px;

}

}



/*==============================================
Tablet
768px -991px
==============================================*/

@media (max-width:991px){

.top-header{

display:none;

}

.navbar{

padding:15px 0;

}

.navbar-collapse{

background:#fff;
margin-top:15px;
padding:20px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-nav{

text-align:center;

}

.navbar-nav .nav-item{

margin:10px 0;

}

.apply-btn{

display:block;
text-align:center;
margin-top:20px;

}

.hero{

padding:70px 0;
text-align:center;

}

.hero h1{

font-size:42px;
line-height:54px;

}

.hero-buttons{

justify-content:center;

}

.hero-img{

margin-top:50px;

}

.features{

margin-top:0;

}

.section-title{

font-size:34px;

}

.about-section{

text-align:center;

}

.about-section img{

margin-bottom:40px;

}

.why-us{

text-align:center;

}

.why-us img{

margin-bottom:40px;

}

.cta-box{

text-align:center;

padding:45px;

}

.cta-box .btn1{

margin-top:25px;

}

.newsletter{

text-align:center;

}

.newsletter-form{

margin-top:30px;

}

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.contact-list li{

justify-content:center;

}

}



/*==============================================
Mobile
576px -767px
==============================================*/

@media (max-width:767px){

section{

padding:70px 0;

}

.logo{

height:55px;

}

.hero{

padding:60px 0;

}

.hero h1{

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

}

.hero p{

font-size:16px;

line-height:30px;

}

.hero-buttons{

flex-direction:column;

gap:15px;

}

.btn2{

margin-left:0;

}

.section-title{

font-size:30px;

}

.about-section h2,
.why-us h2{

font-size:32px;

}

.service-card,
.loan-card,
.feature-box,
.news-card,
.testimonial-card{

padding:30px;

}

.counter-box{

padding:20px;

}

.counter-box h2{

font-size:34px;

}

.counter-box h5{

font-size:16px;

}

.emi-banner h2{

font-size:30px;

}

.cta-box{

padding:35px;

}

.cta-box h2{

font-size:30px;

}

.newsletter h2{

font-size:30px;

}

.newsletter-form{

flex-direction:column;

border-radius:20px;

}

.newsletter-form input{

width:100%;

}

.newsletter-form button{

width:100%;

}

.footer-logo{

height:60px;

}

}



/*==============================================
Small Mobile
Below 576px
==============================================*/

@media (max-width:575px){

.container{

padding-left:20px;
padding-right:20px;

}

.hero h1{

font-size:30px;
line-height:40px;

}

.hero-tag{

font-size:13px;

}

.section-tag{

font-size:13px;

}

.section-title{

font-size:28px;

}

.about-section h2,
.why-us h2{

font-size:28px;

}

.hero-buttons a{

width:100%;

}

.btn1,
.btn2,
.btn-light-theme,
.btn-outline-theme,
.apply-btn{

width:100%;
text-align:center;

}

.feature-box{

padding:25px;

}

.feature-box .icon{

width:70px;
height:70px;

font-size:28px;

}

.service-icon{

width:75px;
height:75px;

font-size:30px;

}

.loan-icon{

width:75px;
height:75px;

font-size:30px;

}

.client{

flex-direction:column;

text-align:center;

}

.partner-logo{

max-height:45px;
margin-bottom:20px;

}

.footer{

padding-top:60px;

}

}



/*==============================================
Extra Small Devices
320px
==============================================*/

@media (max-width:360px){

.hero h1{

font-size:26px;
line-height:36px;

}

.section-title{

font-size:24px;

}

.about-section h2,
.why-us h2{

font-size:24px;

}

.cta-box h2{

font-size:24px;

}

.news-content h4{

font-size:20px;

}

}