/*======================================
SPA YUCCA
CSS PREMIUM
======================================*/

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    background:#F8F5F1;
    color:#36413A;
    overflow-x:hidden;
    line-height:1.7;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/* VARIÁVEIS */

:root{

--verde:#4D6655;
--verde2:#667C6B;
--verde3:#2F4336;
--bege:#F8F4EF;
--off:#FCFAF8;
--dourado:#B89A68;
--cinza:#6D6D6D;

--shadow:0 15px 40px rgba(0,0,0,.08);

}

/* CONTAINER */

.container{

width:min(1200px,90%);

margin:auto;

}

/* TÍTULOS */

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:600;

}

h1{

font-size:72px;

line-height:1;

margin-bottom:20px;

}

h2{

font-size:52px;

color:var(--verde3);

margin-bottom:20px;

position:relative;

}

h2::after{

content:"";

width:80px;

height:3px;

background:var(--dourado);

display:block;

margin-top:15px;

border-radius:20px;

}

h3{

font-size:28px;

margin-bottom:10px;

}

p{

font-size:18px;

color:#666;

}

/* HEADER */

header{

position:fixed;

width:100%;

top:0;

left:0;

padding:25px 0;

z-index:999;

transition:.4s;

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

backdrop-filter:blur(20px);

}

header .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:32px;

font-family:'Cormorant Garamond';

font-weight:700;

letter-spacing:3px;

color:white;

}

nav ul{

display:flex;

gap:40px;

}

nav a{

color:white;

font-weight:600;

transition:.3s;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:white;

transition:.3s;

}

nav a:hover::after{

width:100%;

}

.btn-header{

padding:14px 28px;

background:white;

border-radius:50px;

color:var(--verde);

font-weight:700;

transition:.4s;

}

.btn-header:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

/* HERO */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

background:
linear-gradient(rgba(26,41,31,.45),rgba(26,41,31,.45)),
url("../img/hero.jpg");

background-size:cover;

background-position:center;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.35));

}

.hero-content{

position:relative;

z-index:2;

width:min(900px,90%);

animation:fadeUp 1.2s ease;

}

.subtitle{

color:#F5F5F5;

letter-spacing:6px;

margin-bottom:20px;

font-size:14px;

text-transform:uppercase;

}

.hero h1{

color:white;

}

.hero p{

color:white;

font-size:22px;

max-width:650px;

margin:auto;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/* BOTÕES */

.btn-primary{

background:linear-gradient(135deg,var(--verde),var(--verde2));

padding:18px 40px;

border-radius:50px;

color:white;

font-weight:700;

transition:.4s;

box-shadow:0 15px 35px rgba(77,102,85,.25);

}

.btn-primary:hover{

transform:translateY(-5px);

background:linear-gradient(135deg,var(--verde3),var(--verde));

}

.btn-secondary{

padding:18px 40px;

border-radius:50px;

border:1px solid rgba(255,255,255,.5);

color:white;

backdrop-filter:blur(15px);

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

transition:.4s;

}

.btn-secondary:hover{

background:white;

color:var(--verde);

}

/* SEÇÕES */

section{

padding:120px 0;

}

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.grid-2 img{

border-radius:25px;

box-shadow:var(--shadow);

transition:.5s;

}

.grid-2 img:hover{

transform:scale(1.03);

}

/* SOBRE */

#sobre{

background:var(--off);

}

#sobre p{

margin-bottom:20px;

}

/* BENEFÍCIOS */

#beneficios{

background:linear-gradient(#F8F5F1,#F2EEE8);

}

.cards{

display:grid;

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

gap:30px;

margin-top:60px;

}

.card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid #ECE7E1;

}

.card:hover{

transform:translateY(-12px);

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

}

.card h3{

color:var(--verde3);

margin-bottom:15px;

}

.card p{

font-size:16px;

}

/* EXPERIÊNCIA */

.experience{

background:linear-gradient(135deg,var(--verde3),var(--verde));

color:white;

text-align:center;

}

.experience h2{

color:white;

}

.experience h2::after{

background:white;

margin-left:auto;

margin-right:auto;

}

.experience p{

color:#E8E8E8;

max-width:700px;

margin:auto;

font-size:20px;

}/*======================================
VALE PRESENTE
======================================*/

#vale{

background:#FDFBF8;

}

#vale h2{

margin-bottom:25px;

}

#vale p{

margin-bottom:35px;

}

#vale img{

border-radius:30px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

transition:.4s;

}

#vale img:hover{

transform:scale(1.03);

}

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

.gallery{

background:#F4F0EA;

}

.gallery h2{

text-align:center;

}

.gallery h2::after{

margin:auto;
margin-top:15px;

}

.gallery-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.gallery-grid img{

height:380px;

object-fit:cover;

border-radius:25px;

transition:.5s;

cursor:pointer;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.gallery-grid img:hover{

transform:scale(1.04);

}

/*======================================
DEPOIMENTOS
======================================*/

.testimonial{

background:white;

text-align:center;

}

.quote{

max-width:800px;

margin:auto;

background:#FCFBF9;

padding:60px;

border-radius:30px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.quote p{

font-size:24px;

font-style:italic;

margin-bottom:25px;

color:#555;

}

.quote span{

font-size:30px;

color:#D6A84E;

}

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

#contato{

background:linear-gradient(#F8F5F1,#EFE8DD);

text-align:center;

}

#contato p{

margin:30px 0;

font-size:20px;

line-height:2;

}

#contato .btn-primary{

margin-top:20px;

}

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

footer{

background:#26352B;

padding:80px 0;

text-align:center;

color:white;

}

footer h3{

font-size:36px;

margin-bottom:15px;

color:white;

}

footer p{

color:#d8d8d8;

}

.social{

display:flex;

justify-content:center;

gap:25px;

margin:35px 0;

}

.social a{

padding:12px 24px;

border:1px solid rgba(255,255,255,.2);

border-radius:50px;

transition:.3s;

}

.social a:hover{

background:white;

color:var(--verde3);

}

.copyright{

margin-top:40px;

font-size:14px;

opacity:.7;

}

/*======================================
BOTÃO WHATSAPP
======================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

box-shadow:0 15px 35px rgba(0,0,0,.2);

transition:.3s;

z-index:999;

}

.whatsapp:hover{

transform:scale(1.1);

}

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

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.fade.show{

opacity:1;

transform:translateY(0);

}

/*======================================
SCROLLBAR
======================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#F3EFE9;

}

::-webkit-scrollbar-thumb{

background:var(--verde);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--verde3);

}

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

@media(max-width:1024px){

.grid-2{

grid-template-columns:1fr;

gap:50px;

}

.cards{

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

}

h1{

font-size:58px;

}

h2{

font-size:42px;

}

}

@media(max-width:768px){

header{

padding:18px 0;

}

nav{

display:none;

}

.btn-header{

display:none;

}

.hero{

padding:0 20px;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:18px;

}

.cards{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:280px;

}

.grid-2{

gap:40px;

}

section{

padding:90px 0;

}

.quote{

padding:35px;

}

.quote p{

font-size:20px;

}

footer{

padding:60px 20px;

}

.social{

flex-direction:column;

align-items:center;

}

}

@media(max-width:480px){

h1{

font-size:38px;

}

h2{

font-size:32px;

}

p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

justify-content:center;

}

.gallery-grid img{

height:220px;

}

.whatsapp{

width:58px;

height:58px;

font-size:28px;

}

}

.depoimentos{

margin-top:60px;

padding-bottom:50px;

}

.swiper-slide{

display:flex;

justify-content:center;

}

.quote{

max-width:700px;

background:white;

padding:50px;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

text-align:center;

}

.quote h4{

margin-top:20px;

color:#4D6655;

font-weight:600;

}

.swiper-pagination-bullet{

background:#4D6655;

}

.swiper-pagination{

margin-top:20px;

}