/*
=========================================================
LA DARSENA DELLA VELA
Responsive
=========================================================
*/

/* =====================================================
   1400px
===================================================== */

@media (max-width:1400px){

    .container{

        width:min(94%,1200px);

    }

}

/* =====================================================
   1200px
===================================================== */

@media (max-width:1200px){

    section{

        padding:90px 0;

    }

    .hero-content h1{

        font-size:4.5rem;

    }

    .services-grid{

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

    }

    .experience-grid{

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

    }

    .reviews-grid{

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

    }

    .footer-grid{

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

    }

}

/* =====================================================
   992px
===================================================== */

@media (max-width:992px){

    header{

        height:80px;

    }

    nav{

        display:none;

    }

    .book-button{

        display:none;

    }

    .hero{

        min-height:700px;

    }

    .hero-content h1{

        font-size:3.8rem;

    }

    .hero-content p{

        font-size:1.1rem;

    }

    .about .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .gallery-layout{

        grid-template-columns:1fr;

    }

    .gallery-main img{

        height:500px;

    }

    .gallery-side{

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

    }

    .location-grid{

        grid-template-columns:1fr;

    }

    .numbers .container{

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

    }

    .booking-card{

        padding:45px;

    }

}

/* =====================================================
   768px
===================================================== */

@media (max-width:768px){

    :root{

        --section-space:70px;

    }

    .section-header h2{

        font-size:2.3rem;

    }

    .hero-content{

        padding:0 20px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        max-width:320px;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .experience-grid{

        grid-template-columns:1fr;

    }

    .reviews-grid{

        grid-template-columns:1fr;

    }

    .gallery-side{

        grid-template-columns:1fr;

    }

    .gallery-main img{

        height:360px;

    }

    .gallery-side img{

        height:220px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .booking-card{

        padding:35px;

    }

    .booking-card h2{

        font-size:2.2rem;

    }

    .parallax{

        background-attachment:scroll;

        height:380px;

    }

    .parallax-overlay h2{

        font-size:2.4rem;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .cookie-content{

        flex-direction:column;

        align-items:flex-start;

    }

    .cookie-actions{

        width:100%;

    }

    .cookie-actions button{

        flex:1;

    }

}

/* =====================================================
   576px
===================================================== */

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .container{

        width:92%;

    }

    .hero{

        min-height:620px;

    }

    .hero-content span{

        font-size:.75rem;

        letter-spacing:2px;

    }

    .hero-content h1{

        font-size:2.3rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2rem;

    }

    .about-left h2{

        font-size:2.2rem;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .service-card{

        padding:30px;

    }

    .experience-card img{

        height:220px;

    }

    .number h2{

        font-size:2.3rem;

    }

    .numbers .container{

        grid-template-columns:1fr;

        gap:40px;

    }

    .location-item{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .map-placeholder{

        height:320px;

    }

    .booking-card{

        padding:28px;

    }

    .booking-links{

        flex-direction:column;

    }

    .booking-links a{

        width:100%;

        text-align:center;

    }

    .newsletter-box{

        padding:35px 25px;

    }

    .newsletter-box h2{

        font-size:2rem;

    }

    .cookie-banner{

        left:15px;

        right:15px;

        bottom:15px;

        padding:20px;

    }

    .whatsapp-button{

        width:58px;

        height:58px;

        font-size:1.6rem;

        right:18px;

        bottom:18px;

    }

    .back-to-top{

        right:18px;

        bottom:90px;

        width:48px;

        height:48px;

    }

}

/* =====================================================
   420px
===================================================== */

@media (max-width:420px){

    .hero-content h1{

        font-size:2rem;

    }

    .hero-content p{

        font-size:.95rem;

    }

    .section-header h2{

        font-size:1.8rem;

    }

    .booking-card h2{

        font-size:1.8rem;

    }

    .btn-primary,

    .btn-secondary{

        height:52px;

    }

}