/* ==========================================
   CASA RURAL - STYLE CSS
   Design moderno e responsivo
========================================== */


/* ==========================
   VARIÁVEIS
========================== */

:root{

    --verde:#1f5d36;
    --verde-escuro:#164426;
    --verde-claro:#2f7d49;

    --dourado:#c9a94b;

    --branco:#ffffff;
    --preto:#1c1c1c;

    --cinza:#666;
    --fundo:#f6f8f7;

    --sombra:
    0 15px 40px rgba(0,0,0,.10);

    --transicao:.35s ease;

}


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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    color:var(--preto);

    overflow-x:hidden;

}


h1,
h2,
h3,
h4,
h5{

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

}


img{

    max-width:100%;
    display:block;

}


a{

    text-decoration:none;

}


/* ==========================
   TOP BAR
========================== */


.top-bar{

    background:var(--verde);

    color:white;

    font-size:.9rem;

    font-weight:600;

}



/* ==========================
   NAVBAR
========================== */


#navbar{

    transition:.4s;

    padding:18px 0;

    background:transparent;

}


#navbar.scrolled{

    background:white;

    box-shadow:var(--sombra);

}


.logo{

    width:160px;

}


.navbar .nav-link{

    color:white;

    font-weight:600;

    margin:0 8px;

    transition:.3s;

}


#navbar.scrolled .nav-link{

    color:var(--preto);

}


.navbar .nav-link:hover{

    color:var(--dourado);

}


.navbar-toggler{

    background:rgba(255,255,255,.2);

}


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


.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

    url("assets/frente1.png")

    center/cover no-repeat;

    color:white;

}


.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(0,0,0,.65),

    rgba(0,0,0,.45)

    );

}



.hero .container{

    position:relative;

    z-index:2;

}



.hero-badge{

    background:

    rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    border:

    1px solid rgba(255,255,255,.3);

    color:white;

    letter-spacing:2px;

}


.hero h1{

    font-size:

    clamp(2.5rem,5vw,4.5rem);

    line-height:1.1;

}


.hero p{

    max-width:650px;

    color:#eee;

}


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


.btn-success{

    background:var(--verde);

    border:none;

}


.btn-success:hover{

    background:var(--verde-escuro);

}


.btn-warning{

    background:var(--dourado);

    border:none;

}


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


section{

    overflow:hidden;

}


.text-success{

    color:var(--verde)!important;

}


/* ==========================
   CARDS
========================== */


.card{

    border-radius:20px;

    transition:

    transform .3s,

    box-shadow .3s;

}


.card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.15)!important;

}


.card i{

    transition:.3s;

}


.card:hover i{

    transform:scale(1.15);

}

/* ==========================================
   SEXTA PET
========================================== */

#pet{

    background:

    linear-gradient(

    135deg,

    var(--verde),

    var(--verde-claro)

    );

}


#pet h2{

    color:white;

}


#pet p{

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

}


#pet img{

    border-radius:25px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

}



/* ==========================================
   IMAGENS DAS SEÇÕES
========================================== */


.rounded-4{

    border-radius:25px!important;

}


.shadow{

    box-shadow:

    var(--sombra)!important;

}



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


#diferenciais .card{

    padding:20px;

    border:none;

}


#diferenciais i{

    color:var(--verde);

}


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


#contato{

    background:var(--fundo);

}


#contato h5 i{

    width:35px;

}


#contato iframe{

    min-height:450px;

}



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


footer{

    background:

    #132b1c!important;

}


footer img{

    max-width:180px;

}


footer a{

    transition:.3s;

}


footer a:hover{

    color:var(--dourado)!important;

}



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


.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25d366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    z-index:9999;

    box-shadow:

    0 10px 30px rgba(0,0,0,.3);

    animation:

    pulse 2s infinite;

}


.whatsapp-float:hover{

    transform:scale(1.1);

    color:white;

}



@keyframes pulse{


    0%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,.6);

    }


    70%{

        box-shadow:

        0 0 0 20px rgba(37,211,102,0);

    }


    100%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,0);

    }

}



/* ==========================================
   ANIMAÇÕES AO SCROLL
========================================== */


.reveal{

    opacity:0;

    transform:

    translateY(40px);

    transition:

    .8s ease;

}


.reveal.active{

    opacity:1;

    transform:

    translateY(0);

}



/* ==========================================
   BOTÃO TOPO
========================================== */


.top-button{

    position:fixed;

    right:25px;

    bottom:105px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--verde);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}


.top-button.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   RESPONSIVIDADE
========================================== */


@media (max-width: 991px){


    #navbar{

        background:var(--verde);

    }


    #navbar.scrolled{

        background:white;

    }


    .navbar-collapse{

        background:var(--verde);

        padding:20px;

        border-radius:15px;

        margin-top:15px;

    }


    #navbar.scrolled .navbar-collapse{

        background:white;

    }


    .navbar .nav-link{

        padding:12px 0;

    }


    .hero{

        text-align:center;

        min-height:90vh;

    }


    .hero p{

        margin:auto;

    }


}



/* ==========================================
   CELULAR
========================================== */


@media(max-width:768px){


    .top-bar{

        font-size:.75rem;

        padding:8px;

    }



    .logo{

        width:130px;

    }



    .hero{

        padding-top:100px;

    }



    .hero h1{

        font-size:2.4rem;

    }



    .hero p{

        font-size:1rem;

    }



    .hero .btn{

        width:100%;

        margin-bottom:10px;

    }



    section{

        padding-top:60px;

        padding-bottom:60px;

    }



    h2{

        font-size:2rem!important;

    }



    .display-5{

        font-size:2rem;

    }



    #pet .btn{

        width:100%;

    }



    #pet .row{

        text-align:center;

    }



    #pet .col-6{

        text-align:left;

    }



    .card{

        margin-bottom:15px;

    }



    #contato iframe{

        min-height:300px;

    }



    .whatsapp-float{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

        font-size:1.6rem;

    }



    .top-button{

        width:45px;

        height:45px;

        right:18px;

        bottom:90px;

    }


}



/* ==========================================
   ANIMAÇÃO DE ENTRADA
========================================== */


.fade-up{

    animation:

    fadeUp .8s ease forwards;

}



@keyframes fadeUp{


    from{

        opacity:0;

        transform:

        translateY(30px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }


}



/* ==========================================
   MELHORIAS VISUAIS
========================================== */


::selection{

    background:var(--verde);

    color:white;

}



::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#eee;

}



::-webkit-scrollbar-thumb{

    background:var(--verde);

    border-radius:20px;

}



html{

    scroll-padding-top:90px;

}

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

.menu.active{

    display:flex;

    flex-direction:column;

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:#2E7D32;

    padding:25px;

    gap:20px;

    text-align:center;

}

.menu.active a{

    color:white;

}

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

.card{

    opacity:0;

    transform:translateY(40px);

}

.card.show{

    opacity:1;

    transform:translateY(0);

    transition:.8s;

}

/* ===========================
BOTÃO TOPO
=========================== */

.top-button{

    position:fixed;

    bottom:25px;

    right:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#2E7D32;

    color:white;

    font-size:24px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}

.top-button.visible{

    opacity:1;

    visibility:visible;

}