/*==================================================
Large Devices (1200px)
==================================================*/

@media (max-width:1200px){

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

.hero-content h2{
    font-size:56px;
}

.quote-box{
    width:390px;
}

.navbar-nav{
    gap:18px;
}

}


/*==================================================
Laptop (992px)
==================================================*/

@media (max-width:992px){

.main-header{
    position:relative;
}

.navbar{
    padding:15px 0;
}

.navbar-toggler{
    border:none;
    box-shadow:none !important;
}

.navbar-collapse{
    background:#fff;
    margin-top:15px;
    border-radius:12px;
    padding:20px;
}

.navbar-nav{
    gap:12px;
}

.header-right{

    flex-direction:column;
    align-items:flex-start;
    margin-top:20px;

}

.hero{

    padding-top:70px;
    padding-bottom:60px;

}

.hero-wrapper{

    flex-direction:column;
    gap:50px;

}

.hero-content{

    width:100%;
    text-align:center;

}

.hero-content p{

    max-width:100%;
}

.hero-list{

    justify-content:center;
}

.hero-btns{

    justify-content:center;
}

.quote-box{

    width:100%;
    max-width:550px;
    margin:auto;

}

.hero-features{

    margin-top:40px;
}

.feature-box{

    border-right:none;
    border-bottom:1px solid #eee;
    padding:25px 0;

}

.hero-features .col-lg-3:last-child .feature-box{

    border-bottom:none;

}

}


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

@media (max-width:768px){

.navbar-brand img{

    height:55px;

}

.phone{

    font-size:16px;

}

.quote-btn{

    width:100%;
    text-align:center;

}

.hero{

    padding-top:50px;
}

.hero-content h1{

    font-size:44px;

}

.hero-content h2{

    font-size:50px;

}

.hero-tag{

    font-size:14px;

}

.hero-content p{

    font-size:16px;
    line-height:28px;

}

.hero-list{

    grid-template-columns:1fr;

    gap:15px;

}

.hero-btns{

    flex-direction:column;

}

.btn-call,
.btn-service{

    width:100%;
    text-align:center;

}

.quote-box{

    padding:28px;

}

.quote-box h3{

    font-size:34px;

}

.feature-box{

    text-align:center;
    flex-direction:column;
    align-items:center;

}

.feature-box i{

    margin-bottom:10px;

}

}


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

@media (max-width:576px){

.container{

    padding-left:18px;
    padding-right:18px;

}

.hero{

    padding-top:40px;
    padding-bottom:40px;

}

.hero-content h1{

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

}

.hero-content h2{

    font-size:42px;

}

.hero-content p{

    font-size:15px;

}

.hero-list div{

    font-size:15px;

}

.hero-list i{

    font-size:20px;

}

.btn-call,
.btn-service{

    padding:16px;

    font-size:15px;

}

.quote-box{

    padding:22px;
    border-radius:18px;

}

.quote-box h3{

    font-size:28px;

}

.quote-box span{

    font-size:14px;

}

.quote-box input,
.quote-box select{

    height:54px;
    font-size:15px;

}

.quote-box button{

    height:56px;
    font-size:16px;

}

.quote-bottom{

    flex-direction:column;
    align-items:flex-start;
    gap:10px;

}

.hero-features .container{

    padding:25px;

}

.feature-box{

    padding:18px 0;

}

.feature-box h5{

    font-size:18px;

}

.feature-box p{

    font-size:14px;

}

}


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

@media (max-width:380px){

.hero-content h1{

    font-size:30px;

}

.hero-content h2{

    font-size:36px;

}

.quote-box h3{

    font-size:24px;

}

.quote-box{

    padding:18px;

}

}