/*==================================================
RESPONSIVE STYLESHEET
Best Choice Construction Company, Inc.
==================================================*/

/*==============================
Large Desktop
==============================*/

@media (max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:60px;
}

}

/*==============================
Laptop
==============================*/

@media (max-width:1200px){

.hero h1{
    font-size:54px;
}

.about-grid{
    gap:50px;
}

.contact-wrapper{
    gap:40px;
}

.footer-grid{
    gap:35px;
}

}

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

@media (max-width:992px){

section{
    padding:70px 0;
}

h1{
    font-size:48px;
}

h2{
    font-size:36px;
}

.hero{
    min-height:80vh;
}

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

.hero p{
    font-size:18px;
}

.about-grid{

    grid-template-columns:1fr;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

.projects-grid{

    grid-template-columns:repeat(2,1fr);

}

.service-grid{

    grid-template-columns:repeat(2,1fr);

}

.why-grid{

    grid-template-columns:repeat(2,1fr);

}

}

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

@media (max-width:768px){

.top-bar{

    display:none;

}

header{

    position:fixed;

    width:100%;

}

header .container{

    padding:18px 0;

}

.logo img{

    height:60px;

}

#menu-btn{

    display:block;

    color:#111;

}

nav{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    max-height:0;

    overflow:hidden;

    transition:.35s;

}

nav.active{

    max-height:500px;

}

nav ul{

    flex-direction:column;

    gap:0;

}

nav ul li{

    width:100%;

}

nav ul li a{

    display:block;

    padding:18px 25px;

    border-bottom:1px solid #eee;

}

.hero{

    min-height:100vh;

    text-align:center;

}

.hero-content{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:17px;

}

.about-grid{

    gap:40px;

}

.service-grid{

    grid-template-columns:1fr;

}

.projects-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.btn{

    display:block;

    width:100%;

    text-align:center;

    margin-bottom:15px;

}

.btn-outline{

    margin-left:0;

}

.contact-form{

    padding:30px;

}

.map{

    height:350px;

}

}

/*==============================
Small Phones
==============================*/

@media (max-width:576px){

.container{

    width:94%;

}

section{

    padding:60px 0;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

h2{

    font-size:30px;

}

.section-header{

    margin-bottom:40px;

}

.service-card{

    padding:35px 25px;

}

.project-card img{

    height:230px;

}

.contact-form{

    padding:25px;

}

.contact-item{

    flex-direction:column;

    text-align:center;

}

.contact-item i{

    margin:auto;

}

.footer-grid{

    text-align:center;

}

.social-icons{

    justify-content:center;

}

.back-to-top{

    width:48px;

    height:48px;

    right:20px;

    bottom:20px;

}

}

/*==============================
Extra Small Phones
==============================*/

@media (max-width:400px){

.hero h1{

    font-size:30px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-subtitle{

    font-size:12px;

}

.logo img{

    height:52px;

}

.service-card{

    padding:30px 20px;

}

.project-content{

    padding:20px;

}

.contact-form{

    padding:20px;

}

}