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

/* ---------- Laptop ---------- */
@media (max-width:1200px){

    html{
        overflow-x: hidden;
    }

    .container{
        width:92%;
    }

    .hero-container{
        padding-left:100px;
    }

    .services-grid,
    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ---------- Tablet ---------- */
@media (max-width:992px){

    section{
        padding:80px 0;
    }

    .navbar{
        height:80px;
    }

    .logo-icon{
        width:75px;
        height:75px;
    }

    .logo-text h3{
        font-size:20px;
    }

    .logo-text span{
        font-size:12px;
    }

    .call-btn{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    .nav-menu{
        position:fixed;
        top:80px;
        left:-100%;
        width:100%;
        background:#fff;
        transition:.3s;
        padding:30px 0;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }

    .nav-menu.active{
        left:0;
    }

    .nav-menu ul{
        flex-direction:column;
        gap:20px;
    }

    .hero{
        padding-top:80px;
    }

    .hero-container{
        padding:0 30px;
        justify-content:center;
    }

    .hero-content{
        text-align:center;
        max-width:100%;
    }

    .hero-tag{
        margin:auto;
    }

    .hero-content h1{
        font-size:42px;
    }

    .hero-content p{
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-features{
        justify-content:center;
    }

    .services-grid,
    .gallery-grid,
    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

}

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

    section{
        padding:70px 0;
    }

    .container{
        width:95%;
    }

    .navbar{
        height:75px;
    }

    .hero{
        min-height:auto;
        padding:120px 0 70px;
    }

    .hero-container{
        min-height:auto;
        padding:0 15px;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-content p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons a{
        width:100%;
    }

    .feature-box{
        width:100%;
    }

    .section-title h2{
        font-size:32px;
    }

    .services-grid,
    .why-grid,
    .process-grid,
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item img{
        height:280px;
        width:100%;
    }

    .cta-box{
        padding:50px 25px;
    }

    .cta-box h2{
        font-size:30px;
    }

    .cta-box p{
        font-size:16px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-about{
        max-width:100%;
    }

    .footer-service{
        column-count:1;
    }

    .footer li::marker{
        content:"";
    }

    .floating-buttons{
        right:15px;
        bottom:15px;
    }

    .floating-buttons a{
        width:55px;
        height:55px;
        font-size:22px;
    }

}

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

    .logo{
        gap:10px;
    }

    .logo-icon{
        width:60px;
        height:60px;
    }

    .logo-text h3{
        font-size:17px;
    }

    .logo-text span{
        display:none;
    }

    .hero-content h1{
        font-size:28px;
    }

    .hero-content p{
        font-size:15px;
    }

    .hero-tag{
        font-size:12px;
        padding:8px 15px;
    }

    .hero-buttons a{
        padding:14px 20px;
    }

    .feature-box{
        flex-direction:column;
        text-align:center;
    }

    .section-title h2{
        font-size:28px;
    }

    .service-card,
    .why-card,
    .process-card{
        padding:30px 20px;
    }

    .gallery-item img{
        height:220px;
    }

    .cta-box h2{
        font-size:26px;
    }

    .cta-box{
        padding:40px 20px;
    }

    .floating-buttons a{
        width:50px;
        height:50px;
        font-size:20px;
    }

}