/*==================================================
    CW FESTAS & EVENTOS
    Desenvolvido por TGO
==================================================*/

/*==========================
        RESET
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --preto:#0f0f0f;
    --preto2:#181818;
    --preto3:#242424;

    --dourado:#d4af37;
    --dourado2:#f2d675;

    --branco:#ffffff;
    --cinza:#d9d9d9;

    --transparente:rgba(0,0,0,.55);

    --sombra:0 20px 50px rgba(0,0,0,.35);

    --radius:18px;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--preto);

    color:var(--branco);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(92%,1200px);

    margin:auto;

}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:transparent;

    backdrop-filter:none;

    transition:.35s;

}



.header.scrolled{

    background:rgba(0,0,0,.70);

    backdrop-filter:blur(12px);

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

.logo img{

    height:72px;

}

.nav{

    flex:1;

    display:flex;

    justify-content:left;

    gap:32px;

}

.nav a{

    position:relative;

    font-weight:500;

    transition:.3s;

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--dourado);

    transition:.35s;

}

.nav a:hover{

    color:var(--dourado);

}

.nav a:hover::after{

    width:100%;

}

.btn-menu{

    display:none;

    font-size:34px;

    cursor:pointer;

}

/*==========================
        BOTÕES
==========================*/

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:var(--dourado);

    color:#000;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(212,175,55,.45);

}

.btn-secondary{

    border:2px solid var(--dourado);

}

.btn-secondary:hover{

    background:var(--dourado);

    color:#000;

}

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

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    background-image:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("../img/hero.png");

    background-size:cover;

    background-position:right center;

    background-repeat:no-repeat;

    overflow:hidden;

}

.hero-container{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:0 80px;

    position:relative;

    z-index:2;

}

.hero-content{

    width:48%;

    max-width:620px;

    padding-top:40px;

}

.subtitulo{

    color:var(--dourado);

    font-size:15px;

    letter-spacing:5px;

    font-weight:600;

}

.hero h1{

    font-size:72px;

    line-height:1.05;

}

.hero h1 span{

    color:var(--dourado);

}

.hero hr{

    width:180px;

    height:3px;

    border:none;

    background:var(--dourado);

    margin:25px 0;

}

.hero p{

    font-size:20px;

    color:#ececec;

}

.hero-description{

    max-width:520px;

    font-size:19px;

}

.buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:40px;

}

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

.hero-stats{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:min(92%,1100px);

    display:grid;

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

    gap:25px;

    z-index:3;

}

.stat{

    background:rgba(18,18,18,.92);

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

    border-radius:20px;

    backdrop-filter:blur(12px);

    padding:30px;

    text-align:center;

    box-shadow:var(--sombra);

}

.stat h2{

    color:var(--dourado);

    font-size:40px;

    margin-bottom:8px;

}

.stat p{

    font-size:15px;

    color:#ddd;

}

/*==================================================
            SEÇÕES GERAIS
==================================================*/

section{

    padding:110px 0;

}

.dark{

    background:var(--preto2);

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--dourado);

    letter-spacing:4px;

    font-size:15px;

    font-weight:600;

}

.section-title h2{

    margin-top:12px;

    font-size:48px;

    font-family:'Playfair Display',serif;

}

.section-title p{

    max-width:700px;

    margin:20px auto 0;

    color:#cfcfcf;

}

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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:22px;

    box-shadow:var(--sombra);

    transition:.45s;

}

.about-image:hover img{

    transform:scale(1.02);

}

.about-content h3{

    font-size:40px;

    margin-bottom:25px;

    font-family:'Playfair Display',serif;

}

.about-content p{

    margin-bottom:18px;

    color:#d5d5d5;

}

.about-list{

    margin-top:30px;

}

.about-list li{

    margin-bottom:14px;

    display:flex;

    align-items:center;

    gap:12px;

}

.about-list i{

    color:var(--dourado);

}

/*==================================================
                    SERVIÇOS
==================================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.card{

    background:linear-gradient(
        180deg,
        #222,
        #181818
    );

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

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

    overflow:hidden;

    position:relative;

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--dourado);

    transform:scaleX(0);

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.card:hover::before{

    transform:scaleX(1);

}

.card .icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    color:var(--dourado);

}

.card h3{

    margin-bottom:18px;

    font-size:24px;

}

.card p{

    color:#d3d3d3;

}

/*==================================================
                  DIFERENCIAIS
==================================================*/

.features{

    display:grid;

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

    gap:30px;

}

.feature{

    display:flex;

    gap:20px;

    padding:28px;

    background:#202020;

    border-radius:18px;

    transition:.35s;

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

}

.feature:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.35);

}

.feature i{

    font-size:38px;

    color:var(--dourado);

}

.feature h4{

    margin-bottom:10px;

    font-size:22px;

}

/*==================================================
                     TEMAS
==================================================*/

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:30px;

}

.tema{

    overflow:hidden;

    border-radius:22px;

    position:relative;

    cursor:pointer;

    box-shadow:var(--sombra);

}

.tema img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.5s;

}

.tema:hover img{

    transform:scale(1.10);

}

.tema::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

}

.tema h3{

    position:absolute;

    left:25px;

    bottom:20px;

    z-index:2;

    font-size:28px;

    font-family:'Playfair Display',serif;

}

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

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));

    gap:22px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    box-shadow:var(--sombra);

}

.gallery-item img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.30);

    opacity:0;

    transition:.35s;

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery-item::before{

    content:"+";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) scale(.6);

    width:75px;

    height:75px;

    border-radius:50%;

    background:rgba(212,175,55,.92);

    color:#000;

    font-size:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:5;

    opacity:0;

    transition:.35s;

}

.gallery-item:hover::before{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

/*==================================================
                CONTATO
==================================================*/

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info h3{

    font-size:36px;

    margin-bottom:20px;

    font-family:'Playfair Display',serif;

}

.contact-info p{

    color:#d5d5d5;

    margin-bottom:18px;

}

.contact-list{

    margin-top:35px;

}

.contact-list li{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.contact-list i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(212,175,55,.10);

    color:var(--dourado);

    font-size:22px;

}

.contact-form{

    background:#181818;

    padding:40px;

    border-radius:22px;

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

    box-shadow:var(--sombra);

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    background:#353535;          /* Cinza mais claro */

    border:1px solid #4a4a4a;

    border-radius:12px;

    color:#fff;

    font-size:16px;

    transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

    border:1px solid var(--dourado);

    background:#2d2d2d;

}

.contact-form textarea{

    min-height:170px;

    resize:vertical;

}

/*==================================================
            AVALIAÇÕES
==================================================*/

.testimonials{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.testimonial{

    background:#1c1c1c;

    border-radius:20px;

    padding:35px;

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

    transition:.35s;

}

.testimonial:hover{

    transform:translateY(-8px);

    box-shadow:var(--sombra);

}

.testimonial .stars{

    color:var(--dourado);

    margin-bottom:18px;

}

.testimonial p{

    color:#d9d9d9;

    margin-bottom:22px;

}

.testimonial h4{

    color:var(--dourado);

}

/*==================================================
                MAPA
==================================================*/

.map{

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--sombra);

}

.map iframe{

    width:100%;

    height:450px;

    border:0;

}

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

footer{

    background:#090909;

    padding:80px 0 30px;

    border-top:1px solid rgba(212,175,55,.08);

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:45px;

}

.footer-logo{

    width:180px;

    margin-bottom:20px;

}

footer h3{

    margin-bottom:22px;

    color:var(--dourado);

}

footer ul li{

    margin-bottom:12px;

}

footer a{

    transition:.3s;

}

footer a:hover{

    color:var(--dourado);

    padding-left:6px;

}

.social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.social a{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#1c1c1c;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.social a:hover{

    background:var(--dourado);

    color:#000;

}

.copyright{

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#bdbdbd;

}

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

.whatsapp,
.top{

    position:fixed;

    right:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    z-index:999;

    transition:.35s;

}

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(37,211,102,.45);

    transition:.3s;

    z-index:9999;

}

.whatsapp:hover{

    transform:scale(1.12);

    background:#20c55a;

}



.top{

    bottom:100px;

    background:var(--dourado);

    color:#000;

    opacity:0;

    visibility:hidden;

}

.top.show{

    opacity:1;

    visibility:visible;

}

/*==================================================
            LIGHTBOX
==================================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:18px;

}

.lightbox span{

    position:absolute;

    top:30px;

    right:40px;

    font-size:45px;

    cursor:pointer;

}

/*==================================================
            ANIMAÇÕES
==================================================*/

.fade{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:none;

}

@keyframes flutuar{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.logo img{

    animation:flutuar 5s infinite;

}

/*==================================================
            RESPONSIVO
==================================================*/

@media(max-width:991px){

    .hero h1{

        font-size:58px;

    }

    .about-grid,
    .contact-grid,
    .features{

        grid-template-columns:1fr;

    }

    .hero-stats{

        grid-template-columns:1fr;

        position:relative;

        margin-top:60px;

        left:auto;

        transform:none;

        width:100%;

        bottom:auto;

    }

}

@media(max-width:768px){

    .btn-menu{

        display:block;

    }

    .nav{

        position:fixed;

        top:90px;

        left:-100%;

        width:280px;

        height:100vh;

        background:#111;

        flex-direction:column;

        padding:40px;

        transition:.35s;

    }

    .nav.active{

        left:0;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero h1{

        font-size:44px;

    }

    .buttons{

        justify-content:center;

    }

    .section-title h2{

        font-size:36px;

    }

}


@media (max-width:768px){

    .btn-menu{

        display:flex;

        align-items:center;

        justify-content:center;

        width:48px;

        height:48px;

        background:none;

        border:none;

        color:#fff;

        font-size:30px;

        cursor:pointer;

        z-index:10002;

    }

    .nav{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:#111;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:30px;

        transition:.35s;

        z-index:10001;

    }

    .nav.active{

        right:0;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        width:100%;

        margin:auto;

    }

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

    .btn-menu{
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:10001;
         transition:.35s;
    }

    .nav{

    position:fixed;

    top:0;

    right:-320px;

    width:300px;

    height:100vh;

    background:#111;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:32px;

    transition:right .45s ease;

    z-index:9999;

    box-shadow:-10px 0 40px rgba(0,0,0,.45);

}

   .nav.active{

    right:0;
    

}

}

/*==============================
      OVERLAY MENU
==============================*/

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

.nav a{

    font-size:20px;

    font-weight:600;

    transition:.25s;

}

.nav a:hover{

    color:var(--dourado);

    transform:translateX(6px);

}

/*==================================
        NÚMEROS
==================================*/

.numbers{

    padding:120px 0;

    background:linear-gradient(180deg,#101010,#181818);

}

.numbers-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

    margin-top:70px;

}

.number-card{

    background:#181818;

    border-radius:22px;

    padding:45px 30px;

    text-align:center;

    transition:.35s;

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

    position:relative;

    overflow:hidden;

}

.number-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,0,0,.35);

    border-color:var(--dourado);

}

.number-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--dourado);

}

.icon-circle{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(212,175,55,.10);

}

.icon-circle i{

    font-size:36px;

    color:var(--dourado);

}

.number-card h3{

    font-size:58px;

    color:var(--dourado);

    margin-bottom:12px;

    font-family:'Playfair Display',serif;

}

.number-card h4{

    font-size:22px;

    margin-bottom:15px;

}

.number-card p{

    color:#cfcfcf;

}

.stars{

    margin:12px 0;

    color:#FFD700;

    font-size:22px;

}

.destaque{

    background:linear-gradient(180deg,#222,#181818);

}