css/responsive.css
/* ==========================================================
   RESPONSIVE.CSS
   EDILIZIA PIZZIMENTI S.R.L.
========================================================== */


/* ==========================================================
   DESKTOP LARGE
========================================================== */

@media (max-width:1400px){

    .container{

        width:92%;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .grid-2{

        gap:45px;

    }

    .hero-content h1{

        font-size:54px;

    }

    .section-title h2{

        font-size:40px;

    }

    .content-box h2{

        font-size:38px;

    }

    #numbers .container{

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

        gap:35px;

    }

    .process-grid{

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

    }

    .footer-grid{

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

    }

}


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

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .testimonial-slider{

        grid-template-columns:1fr;

    }

    .hero-content{

        text-align:center;

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-content h1{

        font-size:48px;

    }

    .section-title h2{

        font-size:36px;

    }

    .content-box{

        text-align:center;

    }

    .check-list{

        display:inline-block;

        text-align:left;

    }

}


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

@media (max-width:992px){

    #navbar{

        position:fixed;

        top:90px;

        left:-100%;

        width:100%;

        background:#ffffff;

        transition:.35s;

        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }

    #navbar.active{

        left:0;

    }

    #navbar ul{

        flex-direction:column;

        padding:35px;

        gap:25px;

    }

    #menu-btn{

        display:block;

    }

    .phone-btn{

        display:none;

    }

}
/* ==========================================================
   SMARTPHONE
========================================================== */

@media (max-width:768px){

    body{
        font-size:16px;
    }

    section{
        padding:70px 0;
    }

    .container{
        width:94%;
    }

    .hero-content h1{
        font-size:40px;
        line-height:1.15;
    }

    .hero-content p{
        font-size:18px;
    }

    .subtitle{
        font-size:13px;
        letter-spacing:2px;
    }

    .section-title h2{
        font-size:32px;
    }

    .content-box h2{
        font-size:32px;
    }

    .btn{
        width:100%;
        justify-content:center;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

}

/* ==========================================================
   NUMERI
========================================================== */

@media (max-width:768px){

    #numbers .container{

        grid-template-columns:1fr;

    }

    .number-card{

        padding:15px 0;

    }

    .number-card h3{

        font-size:42px;

    }

}

/* ==========================================================
   SERVIZI
========================================================== */

@media (max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        padding:35px 25px;

    }

}

/* ==========================================================
   PORTFOLIO
========================================================== */

@media (max-width:768px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .portfolio-item img{

        height:260px;

    }

}

/* ==========================================================
   PROCESSO
========================================================== */

@media (max-width:768px){

    .process-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   CONTATTI
========================================================== */

@media (max-width:768px){

    .contact-form{

        padding:30px 22px;

    }

    .info-box{

        padding:25px;

    }

}
/* ==========================================================
   SMARTPHONE PICCOLI
========================================================== */

@media (max-width:480px){

    header .container{
        height:75px;
    }

    .logo img{
        height:55px;
    }

    #navbar{
        top:75px;
    }

    .hero-content h1{
        font-size:34px;
    }

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

    .section-title h2{
        font-size:28px;
    }

    .content-box h2{
        font-size:28px;
    }

    .service-card{
        padding:30px 20px;
    }

    .service-card i{
        font-size:42px;
    }

    .service-card h3{
        font-size:22px;
    }

    .portfolio-item img{
        height:220px;
    }

    .step{
        padding:30px 20px;
    }

    .step span{
        width:60px;
        height:60px;
        font-size:22px;
    }

    .testimonial{
        padding:30px 22px;
    }

    .contact-form{
        padding:25px 18px;
    }

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

}

/* ==========================================================
   FOOTER
========================================================== */

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:35px;

    }

    .footer-logo{

        margin:0 auto 20px;

    }

}

/* ==========================================================
   WHATSAPP
========================================================== */

@media (max-width:768px){

    .whatsapp{

        width:58px;
        height:58px;

        right:18px;
        bottom:18px;

        font-size:30px;

    }

}

/* ==========================================================
   BACK TO TOP
========================================================== */

@media (max-width:768px){

    #backToTop{

        width:48px;
        height:48px;

        right:20px;
        bottom:90px;

        font-size:18px;

    }

}

/* ==========================================================
   GOOGLE MAP
========================================================== */

@media (max-width:768px){

    #map iframe{

        height:350px;

    }

}

/* ==========================================================
   FINE RESPONSIVE.CSS
========================================================== */