/* LARGE DEVICES */

@media (max-width:1200px){

section{

    padding:90px 6%;

}

.hero{

    gap:40px;

}

.hero-left h1{

    font-size:3.4rem;

}

.about-container,
.featured-container,
.contact-wrapper{

    gap:40px;

}

.footer-container{

    gap:35px;

}

}
/* TABLETS */

@media (max-width:992px){

.hero{

    flex-direction:column;

    text-align:center;

}

.hero-left p{

    margin:auto auto 40px;

}

.hero-buttons{

    justify-content:center;

}

.hero-right{

    margin-top:50px;
    transform:none;

}

.about-container,
.featured-container,
.contact-wrapper{

    grid-template-columns:1fr;

}

.statistics{

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

}

.why-grid{

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

}

.gallery-grid{

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

}

.footer-container{

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

}

.page-content{

    text-align:center;

}

}
/* MOBILE MENU */

@media (max-width:768px){

.menu-btn{

    display:block;

}

.nav-links{

    position:fixed;

    top:80px;

    right:-100%;

    width:280px;

    height:calc(100vh - 80px);

    background:var(--dark);

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:40px;

    transition:.4s;

    gap:30px;

}

.nav-links.active{

    right:0;

}

}
/* PHONES */

@media (max-width:768px){

h1{

    font-size:2.8rem;

}

h2{

    font-size:2rem;

}

section{

    padding:80px 5%;

}

.statistics{

    grid-template-columns:1fr;

}

.services-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.services-list ul{

    grid-template-columns:1fr;

}

.gallery-item.large{

    grid-row:auto;

}

.project-features{

    grid-template-columns:1fr;

}

.about-features{

    grid-template-columns:1fr;

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.footer-container{

    grid-template-columns:1fr;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.cta-buttons{

    flex-direction:column;

}

.hero-buttons{

    flex-direction:column;

}

.hero-left h1{

    font-size:2.6rem;

}

.hero-right img{

    max-width:100%;
    width:100%;
    height:auto;

}

}
/* SMALL PHONES */

@media (max-width:480px){

body{

    font-size:15px;

}

h1{

    font-size:2.2rem;

}

h2{

    font-size:1.8rem;

}

.logo h2{

    font-size:1.4rem;

}

.logo span{

    font-size:.72rem;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

.contact-form{

    padding:25px;

}

.contact-information{

    padding:25px;

}

.stat-card{

    padding:25px;

}

.service-card{

    padding:30px 20px;

}

}