/* =======================================
   MOBILE STYLE
   <768px
======================================= */

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

    /* ===========================
       NAVBAR
    =========================== */

    .navbar{
        height:72px;
    }

    .nav-container{
        padding:0 20px;
    }

    .logo img{
        height:42px;
        width:auto;
    }

    /* ===========================
       HAMBURGER BUTTON
    =========================== */

    .mobile-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:6px;

        width:45px;
        height:45px;

        background:transparent;
        border:none;
        cursor:pointer;

        margin-left:auto;

        z-index:1200;
    }

    .mobile-toggle span{
        width:28px;
        height:3px;

        background:#fff;

        border-radius:100px;

        transition:all .3s ease;
    }

    /* ===========================
       OFF CANVAS MENU
    =========================== */

    .nav-right{
    position:fixed;
    top:0;
    right:-100%;

    width:280px;
    height:100vh;

    background:#01070c;
    opacity: 0.85;
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:90px 0 30px;

    transition:right .35s ease;

       z-index:1100;

        margin-left:0;   /* Override desktop */
        gap:0;           /* Override desktop */
    }

    .nav-right.open{
        right:0;

        overflow-y:auto;
    }

    .nav-menu{

        display:flex;

        flex-direction:column;

        width:100%;

        align-items:flex-start;

        padding:0;

        margin:0;

    }

    .nav-menu a{

        display:block;

        width:100%;

        padding:18px 30px;

        color:#fff;

        font-size:18px;

        text-decoration:none;

        box-sizing:border-box;

    }

    .nav-menu a::after{
        display:none;
    }

    .lang-switch{

        display:flex;

        gap:12px;

        padding:25px 30px;

    }

    /* ===========================
       OVERLAY
    =========================== */

    .nav-overlay{

        position:fixed;

        top:0;
        left:0;

        width:100%;
        height:100vh;

        background:rgba(0,0,0,.45);

        opacity:0;

        visibility:hidden;

        transition:.3s ease;

        z-index:1050;

    }

    .nav-overlay.show{

        opacity:1;

        visibility:visible;

    }

    /* ===========================
       HAMBURGER ANIMATION
    =========================== */

    .mobile-toggle.active span:nth-child(1){

        transform:translateY(9px) rotate(45deg);

    }

    .mobile-toggle.active span:nth-child(2){

        opacity:0;

    }

    .mobile-toggle.active span:nth-child(3){

        transform:translateY(-9px) rotate(-45deg);

    }

    /* ==========================================
       GLOBAL MOBILE LAYOUT
    ========================================== */

    .container,
    .nav-container,
    .hero-container,
    .about-container,
    .services-container,
    .projects-container,
    .contact-container,
    .footer-container{

        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;

        box-sizing:border-box;

    }

    img{

        max-width:100%;

        height:auto;

    
   }

    .row,
    .flex,
    .about-content,
    .services-content,
    .project-content{

        flex-direction:column;

    }

    .grid,
    .cards,
    .service-grid,
    .project-grid,
    .gallery-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }

    h1{

        font-size:32px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:22px;

    }

    p{

       font-size:16px;

       line-height:1.7;

    }


    .btn,
    .button{

        width:100%;

        justify-content:center;

    }

    section{

        padding-top:70px;

        padding-bottom:70px;

    }


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

    .container{

        width:100%;

        padding:50px 20px;

        box-sizing:border-box;

    }

    .about-container{

        width:100%;

        max-width:100%;

    }

    .about-container h2{

        font-size:28px;

        margin-bottom:20px;

        text-align:center;

    }

    .about-container p{

        font-size:16px;

        line-height:1.9;

        text-align:justify;

        word-break:break-word;

    }

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

.hero{

    min-height:70dvh;

}

.hero-overlay{

    padding:20px;

    text-align:center;

}

.hero-overlay h1{

    font-size:36px;

    line-height:1.2;

}

.hero-overlay p{

    font-size:18px;

    margin-top:15px;

}

}



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

.container{

    padding:50px 20px;

}

.about-container{

    width:100%;

}

.about-container p{

    font-size:16px;

    line-height:1.9;

    text-align:justify;

}