/*==================================================
    FreeFin Loan
    Responsive Stylesheet
    Version : 1.0
===================================================*/


/*=========================================
Large Desktop
1400px
==========================================*/

@media (max-width:1400px){

.container{

    max-width:1140px;

}

}


/*=========================================
Laptop
1200px
==========================================*/

@media (max-width:1199px){

h1{

    font-size:48px;

}

h2{

    font-size:38px;

}

.hero{

    padding-top:150px;

}

.navbar-nav .nav-link{

    margin:0 8px;

}

}


/*=========================================
Tablet Landscape
992px
==========================================*/

@media (max-width:991px){

.navbar{

    padding:15px 0;

}

.navbar-brand img{

    height:50px;

}

.navbar-collapse{

    background:#fff;

    margin-top:20px;

    padding:20px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-nav{

    text-align:center;

}

.navbar-nav .nav-link{

    padding:12px 0;

}

.header-call{

    display:none;

}

.hero{

    padding-top:130px;

    text-align:center;

}

.hero h1{

    font-size:42px;

}

.hero-buttons{

    justify-content:center;

}

.hero-buttons .btn{

    margin-bottom:15px;

}

.form-box{

    margin-top:40px;

}

section{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

}


/*=========================================
Tablet Portrait
768px
==========================================*/

@media (max-width:767px){

body{

    font-size:15px;

}

h1{

    font-size:36px;

}

h2{

    font-size:30px;

}

h3{

    font-size:24px;

}

.hero{

    padding-top:120px;

}

.hero p{

    font-size:16px;

}

.hero-badge{

    font-size:14px;

    padding:8px 18px;

}

.btn{

    width:100%;

    margin-bottom:15px;

}

.hero-buttons .btn{

    margin-right:0;

}

.card-box{

    padding:25px;

}

.icon-box{

    width:60px;

    height:60px;

    font-size:24px;

}

.form-box{

    padding:25px;

}

footer{

    text-align:center;

}

footer h5{

    margin-top:30px;

}

.copyright{

    text-align:center;

}

}


/*=========================================
Mobile
576px
==========================================*/

@media (max-width:575px){

.container{

    padding-left:18px;

    padding-right:18px;

}

.navbar-brand img{

    height:42px;

}

.navbar-toggler{

    border:none;

    box-shadow:none!important;

}

.hero{

    padding-top:110px;

    padding-bottom:60px;

}

h1{

    font-size:32px;

    line-height:1.3;

}

h2{

    font-size:28px;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

}

.btn{

    padding:14px 20px;

}

.section-title{

    margin-bottom:35px;

}

section{

    padding:60px 0;

}

.card-box{

    margin-bottom:20px;

}

.form-control,

.form-select{

    height:52px;

}

.header-call{

    display:none;

}

#backTop{

    width:45px;

    height:45px;

}

}


/*=========================================
Small Mobile
400px
==========================================*/

@media (max-width:400px){

h1{

    font-size:28px;

}

h2{

    font-size:24px;

}

.hero{

    padding-top:100px;

}

.hero-badge{

    font-size:13px;

}

.navbar-brand img{

    height:38px;

}

.form-box{

    padding:20px;

}

}

/*==============================
Loan Highlights Responsive
==============================*/

@media(max-width:767px){

.highlight-card{

    margin-bottom:20px;

}

}