/* ==========================================
   Responsive Design
========================================== */

/* Notebook */

@media (max-width:1200px){

    .navbar{
        padding:0 25px;
    }

    .hero h1{
        font-size:3.5rem;
    }

}


/* Tablet */

@media (max-width:900px){

    .hero h1{
        font-size:3rem;
    }

    .hero p{
        font-size:1.1rem;
    }

    section{
        padding:80px 20px;
    }

}


/* Smartphone */

@media (max-width:768px){

    .navbar{

        height:70px;

    }

    .navbar ul{

        position:fixed;

        top:70px;
        right:-100%;

        width:100%;
        height:calc(100vh - 70px);

        background:#0f172a;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.35s;

    }

    .navbar ul.active{

        right:0;

    }

    .navbar .button{

        display:none;

    }

    .menu-toggle{

        display:block;

        color:white;

        font-size:32px;

        cursor:pointer;

    }

    .hero{

        padding-top:120px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero p{

        font-size:1rem;

    }

    section h2{

        font-size:2rem;

    }

}


/* Desktop */

@media (min-width:769px){

    .menu-toggle{

        display:none;

    }

}
@media (max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}