/*
 * =====================================================
 * ModArt Renov Framework
 * -----------------------------------------------------
 * File        : responsive.css
 * Description : Responsive layout
 * Version     : 1.0.0
 * Author      : Ayhan TACAR & Atlas
 * =====================================================
*/

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

@media (max-width:992px){

    .container{
        padding:0 24px;
    }

    /* ===========================
       HEADER
    =========================== */

    .site-header .container{
        min-height:82px;
    }

    .logo img{
        height:56px;
    }

    .site-header .btn{
        display:none;
    }

    .mobile-menu-toggle{

        display:flex;

        position:absolute;

        top:17px;
        right:24px;

        align-items:center;
        justify-content:center;

        z-index:1200;
    }

    body.menu-open{
        overflow:hidden;
    }

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

    .main-nav{

        position:fixed;

        top:0;
        right:-100%;

        width:320px;
        max-width:100%;

        height:100dvh;

        display:flex;
        flex-direction:column;
        justify-content:flex-start;

        margin:0;

        padding:100px 30px 40px;

        background:rgba(10,10,10,.96);

        backdrop-filter:blur(18px);

        border-left:1px solid rgba(255,255,255,.08);

        overflow-y:auto;

        transition:right var(--transition);

        z-index:999;

    }

    .main-nav.active{
        right:0;
    }

    .main-nav ul{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:24px;

        width:100%;

        margin:0;

        padding:0;

    }

    .main-nav li{
        width:100%;
    }

    .main-nav a{

        display:block;

        width:100%;

        text-align:center;

        font-size:22px;

        font-weight:600;

    }

	    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .portfolio-grid{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .why-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .testimonials-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

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

@media (max-width:768px){

    .container{

        padding:0 20px;

    }

    .site-header .container{

        min-height:76px;

    }

    .logo img{

        height:52px;

    }

    .mobile-menu-toggle{

        top:14px;
        right:20px;

    }

    .main-nav{

        width:100%;

        height:100dvh;

        padding:90px 24px 40px;

    }

    .main-nav ul{

        gap:20px;

    }

    .main-nav a{

        font-size:20px;

    }

    .hero{

        min-height:calc(100dvh + 72px);

        padding:132px 0 110px;

    }

    .hero-content{

        text-align:center;

    }

    .hero h1{

        font-size:clamp(36px,9vw,46px);

        line-height:1.2;

    }

    .hero p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:16px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        justify-content:center;

    }

	    .services-grid,
    .portfolio-grid,
    .why-grid,
    .testimonials-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:30px 24px;

    }

    .site-footer{

        padding:70px 0 30px;

    }

}

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

@media (max-width:480px){

    .container{

        padding:0 16px;

    }

    .site-header .container{

        min-height:70px;

    }

    .logo img{

        height:42px;

    }

    .mobile-menu-toggle{

        right:16px;

        top:12px;

    }

    .main-nav{

        padding:80px 20px 30px;

    }

    .main-nav a{

        font-size:18px;

    }

    .hero{

        min-height:calc(100dvh + 56px);

        padding:118px 0 96px;

    }

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:16px;

    }

    .service-card,
    .contact-form{

        padding:24px;

    }

}