/* ==========================================
   RESPONSIVE.CSS
   Tablet + Mobile Layout
========================================== */

/* =========================
   LARGE TABLETS
========================= */

@media (max-width:1024px){

    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
        gap:50px;
    }

    .hero-image{
        order:-1;
    }

    .hero h1{
        font-size:48px;
    }

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

    .work-grid{
        grid-template-columns:1fr;
    }

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

}

/* =========================
   TABLETS
========================= */

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    .hero{
        padding:60px 0;
    }

    .hero h1{
        font-size:40px;
    }

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

    .hero-image img{
        width:300px;
        height:300px;
    }

    .nav-links{

        position:fixed;
        top:80px;
        right:-100%;

        width:260px;
        height:calc(100vh - 80px);

        background:#111;

        display:flex;
        flex-direction:column;

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

        padding-top:50px;

        gap:30px;

        transition:.35s ease;

        border-left:1px solid #222;

    }

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

    .hamburger{
        display:block;
    }

    .hamburger.active span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .hamburger span{
        transition:.3s;
    }

    .case-grid{
        grid-template-columns:1fr;
    }

    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .company-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    h2{
        font-size:34px;
    }

}

/* =========================
   PHONES
========================= */

@media (max-width:480px){

    .container{
        width:92%;
    }

    nav{
        height:70px;
    }

    .logo{
        font-size:24px;
    }

    .hero h1{
        font-size:32px;
    }

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

    .hero-image img{
        width:240px;
        height:240px;
    }

    .btn{
        width:100%;
        text-align:center;
        padding:16px;
    }

    section h2{
        font-size:30px;
    }

    .section-text{
        font-size:15px;
    }

    .case-card h3,
    .work-card h3{
        font-size:22px;
    }

    .testimonial{
        padding:25px;
    }

    .client{
        flex-direction:column;
        align-items:flex-start;
    }

    .company-grid{
        grid-template-columns:1fr;
    }

    .contact input,
    .contact textarea{
        font-size:15px;
        padding:15px;
    }

    footer{
        font-size:14px;
    }

}

/* =========================
   EXTRA SMALL DEVICES
========================= */

@media (max-width:340px){

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

    .hero-image img{
        width:200px;
        height:200px;
    }

    .logo{
        font-size:20px;
    }

    .btn{
        font-size:15px;
    }

}