/*======================================================
            RESPONSIVE
======================================================*/

/*==========================
        1200px
==========================*/

@media (max-width:1200px){

.container{

    width:92%;

}

.hero-text h1{

    font-size:58px;
    line-height:72px;

}

.section-title h2{

    font-size:42px;

}

}

/*==========================
        1024px
==========================*/

@media (max-width:1024px){

.hero-container{

    gap:50px;

}

.hero-text h1{

    font-size:50px;
    line-height:64px;

}

.about-container{

    gap:50px;

}

.service-grid{

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

}

.portfolio-grid{

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

}

.footer-container{

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

}

.counter-container{

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

}

}

/*==========================
        TABLET
==========================*/

@media (max-width:768px){

section{

    padding:80px 0;

}

/*-------------------------
        NAVBAR
--------------------------*/

.menu-btn{

    display:block;
    z-index:9999;

}

nav{

    position:fixed;

    top:0;
    right:-100%;

    width:280px;
    height:100vh;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.4s;

    box-shadow:-5px 0 20px rgba(0,0,0,.08);

}

nav.active{

    right:0;

}

nav ul{

    flex-direction:column;

    gap:35px;

}

nav ul li a{

    font-size:20px;

}

/*-------------------------
        HERO
--------------------------*/

.hero{

    padding-top:150px;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-text{

    order:2;

}

.hero-image{

    order:1;

}

.hero-button{

    justify-content:center;

}

.hero-text h1{

    font-size:48px;

    line-height:60px;

}

.hero-text p{

    width:100%;

}

/*-------------------------
        ABOUT
--------------------------*/

.about-container{

    grid-template-columns:1fr;

}

.about-content{

    text-align:center;

}

/*-------------------------
        SERVICES
--------------------------*/

.service-grid{

    grid-template-columns:1fr;

}

/*-------------------------
        PORTFOLIO
--------------------------*/

.portfolio-grid{

    grid-template-columns:1fr;

}

/*-------------------------
        CONTACT
--------------------------*/

.contact-container{

    flex-direction:column;

    text-align:center;

}

.contact h2{

    font-size:36px;

    line-height:48px;

}

/*-------------------------
        FOOTER
--------------------------*/

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-social{

    justify-content:center;

}

}

/*==========================
        MOBILE
==========================*/

@media (max-width:576px){

.logo a{

    font-size:30px;

}

.hero{

    min-height:auto;

}

.hero-text h1{

    font-size:38px;

    line-height:50px;

}

.hero-text p{

    font-size:15px;

    line-height:28px;

}

.subtitle{

    font-size:14px;

}

.hero-button{

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

.counter{

    padding:70px 0;

}

.counter-container{

    grid-template-columns:1fr;

    gap:40px;

}

.counter-box h2{

    font-size:50px;

}

.section-title h2{

    font-size:34px;

    line-height:44px;

}

.about-content h2{

    font-size:34px;

    line-height:45px;

}

.service-card{

    padding:35px 25px;

}

.portfolio-item img{

    height:250px;

}

.contact h2{

    font-size:30px;

    line-height:42px;

}

footer{

    padding-top:70px;

}

#topBtn{

    width:48px;

    height:48px;

    font-size:18px;

    right:15px;

    bottom:15px;

}

}

/*==========================
      EXTRA SMALL
==========================*/

@media(max-width:400px){

.hero-text h1{

    font-size:32px;
    line-height:42px;

}

.section-title h2{

    font-size:28px;

}

.about-content h2{

    font-size:28px;

}

.counter-box h2{

    font-size:42px;

}

}