/*==================================================
    RESPONSIVE.CSS
    CW FESTAS & EVENTOS
==================================================*/

/*==============================
    NOTEBOOKS
==============================*/

@media (max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:58px;

}

.hero p{

    font-size:18px;

}

.hero-stats{

    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);

    width:90%;
    max-width:1200px;

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

    gap:25px;

}

}

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

@media (max-width:992px){

.header .container{

    padding:15px 0;

}

.logo img{

    height:60px;

}

.nav{
    display:flex;
}

.desktop-button{

    display:none;

}

.btn-menu{

    display:block;

}

.hero{

    text-align:center;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:18px;

}

.hero-content{

    margin:auto;

}

.buttons{

    justify-content:center;

}

.hero-stats{

    position:relative;

    margin-top:60px;

    bottom:auto;

    flex-wrap:wrap;

    gap:25px;

}

.about-grid{

    grid-template-columns:1fr;

}

.about-image{

    order:1;

}

.about-content{

    order:2;

    text-align:center;

}

.cards{

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

}

.grid{

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

}

.gallery{

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

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    margin:auto;

}

}

/*==============================
    CELULARES
==============================*/

@media (max-width:768px){

.section{

    padding:80px 0;

}

.hero{

    padding:120px 0 80px;

    min-height:auto;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:16px;

}

.section-title h2{

    font-size:32px;

}

.section-title p{

    font-size:15px;

}

.buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,

.btn-secondary{

    width:100%;

    max-width:320px;

    text-align:center;

}

.cards{

    grid-template-columns:1fr;

}

.grid{

    grid-template-columns:1fr;

}

.gallery{

    grid-template-columns:1fr;

}

.gallery img{

    height:250px;

}

.hero-stats{

    flex-direction:column;

}

.stat{

    background:rgba(20,20,20,.90);

    border:1px solid rgba(212,175,55,.25);

    border-radius:18px;

    padding:35px;

    text-align:center;

    backdrop-filter:blur(12px);

}

.contact-form{

    width:100%;

}

.contact-form input,

.contact-form textarea{

    font-size:16px;

}

iframe{

    height:320px;

}

.whatsapp,

.top{

    width:55px;

    height:55px;

    font-size:24px;

}

.whatsapp{

    right:18px;

    bottom:18px;

}

.top{

    right:18px;

    bottom:85px;

}

}

/*==============================
    CELULARES PEQUENOS
==============================*/

@media (max-width:480px){

.logo img{

    height:50px;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:15px;

}

.section-title h2{

    font-size:28px;

}

.about-content h3{

    font-size:28px;

}

.card{

    padding:25px;

}

.card h3{

    font-size:20px;

}

.tema img{

    height:220px;

}

.gallery img{

    height:220px;

}

.footer-grid{

    gap:25px;

}

footer{

    padding:50px 0 25px;

}

.copyright{

    font-size:14px;

}

}

/*==============================
    TELAS GRANDES
==============================*/

@media (min-width:1600px){

.container{

    max-width:1400px;

}

.hero h1{

    font-size:82px;

}

.hero p{

    font-size:24px;

}

.section-title h2{

    font-size:54px;

}

.gallery img{

    height:320px;

}

.tema img{

    height:320px;

}

}

/*==================================
      BOTÕES FLUTUANTES MOBILE
==================================*/

@media (max-width:768px){

    .whatsapp,
    .back-to-top{

        width:52px;
        height:52px;
        right:15px;

    }

   /*==================================
      BOTÕES FLUTUANTES RESPONSIVOS
==================================*/

.whatsapp,
.back-to-top{

    position: fixed;

    width: clamp(44px, 5vw, 60px);
    height: clamp(44px, 5vw, 60px);

    right: clamp(12px, 2vw, 30px);

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

    border-radius: 50%;

    z-index: 999;

    transition: all .3s ease;

}

.whatsapp{

    bottom: calc(clamp(44px,5vw,60px) + 35px);

}

.back-to-top{

    bottom: 15px;

}

.whatsapp i,
.back-to-top i{

    font-size: clamp(18px, 2vw, 28px);

}
}

@media (max-width:360px){

    .whatsapp,
    .back-to-top{

        width:42px;
        height:42px;
        right:10px;

    }

    .whatsapp i,
    .back-to-top i{

        font-size:18px;

    }

}