/* ===========================
   MOBILE RESPONSIVE
   (mobile.css)
=========================== */

@media screen and (max-width:768px){

    /* GENERAL */

    section{
        padding:60px 20px;
        text-align:center;
    }

    h1{
        font-size:34px;
        line-height:1.3;
    }

    h2{
        font-size:28px;
        margin-bottom:25px;
    }

    h3{
        font-size:20px;
    }

    p{
        font-size:15px;
        line-height:1.7;
    }

    img{
        max-width:100%;
        height:auto;
    }

    /* ===========================
       BUTTONS
    =========================== */

    .buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        width:100%;
    }
    .btnenq{
        display: none;
    }

.btn,
.btn-outline{
    width:220px;
    text-align:center;
    margin:0;
}

    /* ===========================
       HERO
    =========================== */

    .hero{
        min-height:auto;
        flex-direction:column-reverse;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:40px;
    }

    .hero-left,
    .hero-right{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero-left p{
        max-width:100%;
        margin:20px auto 30px;
    }

    .hero-right img{
        width:100%;
        border-radius:18px;
    }

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

    .about p{
        max-width:100%;
        margin:auto;
    }

    /* ===========================
       PROJECTS
    =========================== */

    .projects{
        padding:60px 20px;
    }

    .featured-project{
        margin:40px auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .featured-project h3{
        font-size:22px;
    }

    .featured-project p{
        font-size:15px;
    }

    .featured-project video{
        width:100%;
        height:auto;
        border-radius:16px;
        display:block;
        margin:auto;
    }

    .featured-project a{
        margin-top:25px;
    }

    /* ===========================
       WHY US
    =========================== */

    .features{
        grid-template-columns:1fr;
        gap:20px;
    }

    .feature{
        text-align:center;
        padding:25px;
    }

    /* ===========================
       SERVICES
    =========================== */

    .services .card{
        text-align:center;
        font-size:18px;
    }

    /* ===========================
       BLOGS
    =========================== */

    .blogs .card{
        text-align:center;
        padding:20px;
    }

}