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

@media(max-width:1100px){

    .nav-links{
        gap:22px;
    }

    .nav-links a{
        font-size:13px;
    }

    .logo img{
        width:120px;
    }

}


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

@media(max-width:991px){

    .header{
        padding:18px 0;
    }

    .menu-btn{
        display:flex;
    }

    .nav-links{

        position:fixed;

        top:0;

        right:-100%;

        width:300px;

        height:100vh;

        background:#fff;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.4s;

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

        z-index:9999;

    }

    .nav-links.active{

        right:0;

    }

    .nav-links a{

        font-size:16px;

    }

    .hero{

        height:80vh;

        background-size:cover;

        background-position:center;

        margin-top:70px;

    }

}


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

@media(max-width:576px){

    .container{
        width:92%;
    }

    .logo img{
        width:120px;
    }

    .hero{
        height:65vh;
    }

    .scroll-indicator{
        display:none;
    }

}


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

/* Laptop */

@media (max-width:1200px){

    .about{
        height:95vh;
    }

    .about-content{
        width:450px;
        padding-top:100px;
    }

    .about-title{
        font-size:44px;
    }

    .about-description{
        font-size:14px;
        line-height:1.9;
    }

}


/* Tablet */

@media (max-width:991px){

    .about{

        height:75vh;

        background-position:center;

        background-size:cover;

    }

    .about .container{

        align-items:flex-start;

    }

    .about-content{

        width:420px;

        padding-top:80px;

    }

    .about-tag{

        font-size:12px;

        letter-spacing:3px;

    }

    .about-title{

        font-size:38px;

        margin-bottom:18px;

    }

    .about-description{

        font-size:13px;

        line-height:1.8;

    }

    .about-btn{

        width:160px;

        height:50px;

        font-size:14px;

    }

}


/* Mobile */

@media (max-width:767px){

    .about{

        height:auto;

        min-height:650px;

        background-position:center;

        background-size:cover;

    }

    .about .container{

        justify-content:center;

        align-items:flex-start;

    }

    .about-content{

        width:100%;

        max-width:420px;

        padding-top:70px;

        text-align:center;

    }

    .about-tag{

        font-size:11px;

        letter-spacing:2px;

    }

    .about-title{

        font-size:32px;

    }

    .about-description{

        font-size:10px;

        line-height:1.8;

    }

    .about-btn{

        width:150px;

        height:48px;

        font-size:14px;

        margin:auto;

    }

}


/* Small Mobile */

@media (max-width:480px){

    .about{

        min-height:560px;

    }

    .about-content{

        padding-top:50px;

    }

    .about-title{

        font-size:28px;

    }

    .about-description{

        font-size:9px;

        line-height:1.7;

    }

    .about-btn{

        width:140px;

        height:46px;

        font-size:13px;

    }

}


@media (max-width:1200px){

    .footer-container{
        width:90%;
    }

    .footer-right{
        gap:45px;
    }

}


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

    footer{
        margin-top:140px;
        padding-top:90px;
    }

    .footer-badge{
        width:150px;
        height:150px;
        top:-75px;
    }

    .footer-badge svg{
        width:150px;
        height:150px;
    }

    .footer-container{

        width:90%;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:40px;

    }

    .footer-left{
        width:100%;
    }

    .footer-logo{
        width:160px;
    }

    .footer-center{

        width:100%;
        padding-top:0;
        justify-content:center;

    }

    .footer-right{

        width:100%;
        justify-content:center;
        gap:60px;

    }

}


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

    footer{

        margin-top:120px;
        padding-top:85px;

    }

    .footer-badge{

        width:130px;
        height:130px;
        top:-65px;

    }

    .footer-badge svg{

        width:130px;
        height:130px;

    }

    .footer-logo{

        width:140px;

    }

    .footer-right{

        flex-direction:column;
        gap:25px;
        align-items:center;

    }

    .footer-right ul{

        padding:0;

    }

    .footer-right li{

        font-size:14px;
        margin-bottom:10px;

    }

    .social-icons{

        justify-content:center;
        flex-wrap:wrap;

    }

    .copyright{

        font-size:11px;
        padding:12px 15px;
        line-height:1.6;

    }

}


/* Small Mobile */
@media (max-width:480px){

    footer{

        margin-top:100px;
        padding-top:75px;

    }

    .footer-badge{

        width:110px;
        height:110px;
        top:-55px;

    }

    .footer-badge svg{

        width:110px;
        height:110px;

    }

    .footer-logo{

        width:120px;

    }

    .social-icons{

        gap:12px;

    }

    .social-icons a{

        width:34px;
        height:34px;
        font-size:14px;

    }

    .footer-right li{

        font-size:13px;

    }

    .copyright{

        font-size:10px;

    }

}