/* ===========================================
   RESPONSIVE.CSS
   Choice One Finance
=========================================== */

/* Large Devices (≤1200px) */
@media (max-width:1200px){

.container{
    width:95%;
}

.hero-content h1{
    font-size:48px;
}

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

}


/* Tablets (≤992px) */
@media (max-width:992px){

.container{
    width:95%;
}

.hero{
    padding:80px 0;
    text-align:center;
}

.hero-content{
    width:100%;
}

.hero-image{
    width:100%;
    margin-top:40px;
}

.row{
    flex-direction:column;
}

.col-6,
.col-4,
.col-3{
    width:100%;
}

.loan-box,
.service-box,
.card{
    margin-bottom:25px;
}

.section{
    padding:60px 0;
}

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

}


/* Mobile Navigation */
@media (max-width:768px){

.navbar{
    padding:15px 0;
}

.nav-menu{
    display:none;
    width:100%;
    flex-direction:column;
    background:#fff;
    margin-top:15px;
    border-top:1px solid #eee;
}

.nav-menu.active{
    display:flex;
}

.nav-menu li{
    width:100%;
}

.nav-menu li a{
    display:block;
    padding:15px;
}

.mobile-menu{
    display:block;
    cursor:pointer;
}

.hero{
    padding:60px 0;
}

.hero-content h1{
    font-size:34px;
    line-height:1.3;
}

.hero-content p{
    font-size:16px;
}

.btn{
    width:100%;
    margin-bottom:15px;
}

.loan-grid,
.service-grid,
.blog-grid,
.footer-grid{
    grid-template-columns:1fr;
}

.contact-grid{
    grid-template-columns:1fr;
}

.calculator-box{
    padding:20px;
}

table{
    display:block;
    overflow-x:auto;
}

img{
    max-width:100%;
    height:auto;
}

}


/* Small Mobiles */
@media (max-width:576px){

body{
    font-size:15px;
}

.hero-content h1{
    font-size:28px;
}

.section{
    padding:50px 0;
}

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

.loan-box,
.service-box,
.card,
.testimonial{
    padding:20px;
}

.footer{
    text-align:center;
}

.footer-grid{
    gap:30px;
}

.form-control{
    font-size:16px;
}

input,
select,
textarea,
button{
    width:100%;
}

}


/* Extra Small Devices */
@media (max-width:400px){

.hero-content h1{
    font-size:24px;
}

.logo img{
    max-width:160px;
}

.btn{
    padding:12px 20px;
    font-size:15px;
}

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

}