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

@media (max-width:1200px){

    .navbar{

        padding:0 40px;

    }

    .hero h1{

        font-size:60px;

        line-height:80px;

    }

    .hero-content{

        width:55%;

    }

}

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

@media (max-width:992px){

    .navbar{

        padding:0 25px;

    }

    .menu{

        display:none;

    }

    .hero{

        justify-content:center;

        text-align:center;

    }

    .hero-content{

        width:100%;

        margin:auto;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero h1{

        font-size:52px;

        line-height:70px;

    }

    .hero p{

        margin:auto;

        margin-top:20px;

    }

}

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

@media (max-width:768px){

    .navbar{

        height:75px;

        padding:0 20px;

    }

    .logo{

        font-size:28px;

    }

    .hero{

        padding:0 25px;

    }

    .hero h1{

        font-size:38px;

        line-height:55px;

    }

    .hero p{

        font-size:17px;

        line-height:32px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:220px;

        margin:auto;

        text-align:center;

    }

}

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

@media (max-width:480px){

    .hero h1{

        font-size:31px;

        line-height:46px;

    }

    .hero p{

        font-size:15px;

        line-height:28px;

    }

    .subtitle{

        font-size:15px;

        letter-spacing:3px;

    }

    .logo{

        font-size:22px;

    }

}
.menu{

    display:none;

}

.menu-toggle{

    display:block;

}

.icons{

    display:none;

}
@media(max-width:992px){

    .container{

        flex-direction:column;

    }

    .about-content{

        text-align:center;

    }

    .about-content .btn{

        margin:auto;

    }

    .experience{

        left:50%;

        transform:translateX(-50%);

    }

}
/*=====================================
        COLLECTION RESPONSIVE