/* =====================================================
   MAZALLI PISCINAS
   GALERIA
===================================================== */


/* =====================================================
   HERO
===================================================== */


.gallery-hero {


    min-height:520px;

    display:flex;

    align-items:center;


    background:

    linear-gradient(
        135deg,
        #042b52,
        #07529a
    );


    color:white;

    padding-top:82px;


}



.gallery-hero h1 {


    margin-top:20px;


    font-family:"Montserrat",sans-serif;


    font-size:
    clamp(3rem,7vw,6rem);


    line-height:.95;


    letter-spacing:-0.06em;


}



.gallery-hero h1 em {


    color:#12b8c4;

    font-style:normal;


}



.gallery-hero p {


    max-width:560px;


    margin-top:25px;


    color:
    rgba(255,255,255,.78);


    line-height:1.8;


}



/* =====================================================
   GALERIA
===================================================== */


.gallery {


    background:#f5f8fa;


}



.gallery-grid {


    display:grid;


    grid-template-columns:

    repeat(3,minmax(0,1fr));


    gap:28px;


}





/* =====================================================
   CARD
===================================================== */


.gallery-card {


    background:white;


    overflow:hidden;


    border-radius:4px;


    box-shadow:

    0 20px 50px rgba(4,43,82,.10);


    transition:.35s ease;


}



.gallery-card:hover {


    transform:translateY(-8px);


}





.gallery-card img {


    width:100%;


    height:360px;


    object-fit:cover;


    transition:.6s ease;


}



.gallery-card:hover img {


    transform:scale(1.06);


}





/* =====================================================
   INFORMAÇÕES
===================================================== */


.gallery-info {


    padding:22px;


}



.gallery-info span {


    color:#12b8c4;


    font-family:"Montserrat";


    font-size:.62rem;


    font-weight:800;


    letter-spacing:.16em;


    text-transform:uppercase;


}



.gallery-info h3 {


    margin-top:10px;


    font-family:"Montserrat";


    font-size:1.25rem;


    font-weight:600;


    color:#12202d;


}



.gallery-info p {


    margin-top:12px;


    color:#687783;


    font-size:.9rem;


    line-height:1.7;


}





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


@media(max-width:1000px){


.gallery-grid{


    grid-template-columns:

    repeat(2,1fr);


}


}




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


@media(max-width:600px){


.gallery-grid{


    grid-template-columns:1fr;


}



.gallery-card img{


    height:320px;


}



.gallery-hero{


    min-height:450px;


}



}
/* =========================================================
   AJUSTES MOBILE FINAL
   MAZALLI PISCINAS
========================================================= */


@media(max-width:760px){



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


.site-header{

height:72px;

}



.header-inner{

height:72px;

padding:0;

}



.brand{

width:120px;

}



.brand img{

height:50px;

}




/* MENU MOBILE */


.main-nav{

top:72px;

padding:40px 25px;

gap:28px;

}



.main-nav a{

font-size:.75rem;

}





/* ================= HERO ================= */


.hero{


min-height:100svh;


}



.hero-media img{


object-position:center;


}



.hero-overlay{


background:


linear-gradient(

90deg,

rgba(3,43,82,.88),

rgba(3,43,82,.55)

),


linear-gradient(

0deg,

rgba(3,43,82,.75),

transparent

);


}



.hero-content{


padding-top:100px;

}



.hero-label{


font-size:.58rem;


}



.hero h1{


font-size:

clamp(2.8rem,13vw,3.8rem);


line-height:.95;


letter-spacing:-.05em;


margin-top:18px;


}



.hero-text{


font-size:.95rem;


line-height:1.7;


margin-top:22px;


}



.hero-actions{


margin-top:30px;


gap:14px;


}



.button{


min-height:50px;


}





/* ================= PROJETOS ================= */



.projects{


padding-top:80px;

padding-bottom:80px;


}



.section-heading{


margin-bottom:35px;


}



.section-number{


margin-bottom:8px;


}



h2{


font-size:2.5rem;


}



.section-description{


font-size:.9rem;


line-height:1.7;


}





.projects-grid{


gap:18px;


}



.project-image{


height:280px;


}



.project-card{


border-radius:4px;


}




.projects-button{


margin-top:35px;


}





/* ================= SOBRE ================= */


.about{


padding-top:80px;

padding-bottom:80px;


}



.about-grid{


gap:35px;


}



.about-image{


height:380px;


}



.about-content h2{


font-size:2.5rem;


}



.about-content > p{


font-size:.9rem;


line-height:1.8;


margin-top:18px;


}





/* ================= CTA ================= */


.contact-cta{


min-height:500px;


padding:70px 0;


}



.cta-content h2{


font-size:3rem;


}



.cta-content > p:not(.eyebrow){


font-size:.9rem;


}





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


.footer-main{


padding:55px 0;


}



.footer-brand img{


width:160px;


}



.footer-bottom{


font-size:.6rem;


gap:15px;


}





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


.whatsapp-float{


right:16px;


bottom:16px;


min-width:105px;


height:42px;


padding:0 18px;


}



}