/* ==========================================
   DISCOVER SPITI
   GLOBAL STYLES
========================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#050608;
color:white;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

section{

position:relative;
width:100%;

}

/* ===============================
COLORS
=============================== */

:root{

--gold:#d6b56d;
--white:#ffffff;
--dark:#050608;
--glass:rgba(255,255,255,.08);

}

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

.navbar{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 50px;

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

backdrop-filter:blur(20px);

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

border-radius:60px;

z-index:9999;

transition:.4s;

}

.logo h2{

font-family:'Cinzel',serif;

letter-spacing:4px;

font-size:28px;

color:var(--gold);

}

.nav-links{

display:flex;

list-style:none;

gap:40px;

}

.nav-links a{

color:white;

font-size:15px;

letter-spacing:2px;

transition:.3s;

}

.nav-links a:hover{

color:var(--gold);

}

.mobile-menu{

display:none;

cursor:pointer;

}

.mobile-menu span{

display:block;

width:28px;

height:3px;

margin:6px;

background:white;

}

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

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

position:relative;

}

.hero-image{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

animation:zoomHero 25s linear infinite;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:linear-gradient(to bottom,
rgba(0,0,0,.2),
rgba(0,0,0,.75));

}

.hero-content{

position:relative;

max-width:900px;

text-align:center;

padding:20px;

z-index:2;

}

.small-title{

letter-spacing:5px;

color:var(--gold);

margin-bottom:20px;

font-size:15px;

}

.hero h1{

font-family:'Cinzel',serif;

font-size:95px;

line-height:1;

margin-bottom:25px;

}

.hero-text{

font-size:20px;

line-height:1.9;

max-width:700px;

margin:auto;

color:#ddd;

}

.hero-buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.btn-primary{

padding:18px 42px;

background:var(--gold);

color:black;

border-radius:40px;

font-weight:700;

transition:.4s;

}

.btn-primary:hover{

transform:translateY(-6px);

}

.btn-secondary{

padding:18px 42px;

border:1px solid white;

border-radius:40px;

color:white;

transition:.4s;

}

.btn-secondary:hover{

background:white;

color:black;

}

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

text-align:center;

z-index:10;

}

.scroll-indicator span{

display:block;

width:2px;

height:70px;

background:white;

margin:auto;

animation:scrollDown 2s infinite;

}

.scroll-indicator p{

margin-top:10px;

letter-spacing:5px;

font-size:12px;

}

/* ===============================
INTRO
=============================== */

.intro{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

padding:130px 10%;

align-items:center;

}

.intro-image{

overflow:hidden;

border-radius:25px;

}

.intro-image img{

height:650px;

object-fit:cover;

transition:1.2s;

}

.intro-image:hover img{

transform:scale(1.08);

}

.intro-content h5{

letter-spacing:4px;

color:var(--gold);

margin-bottom:20px;

}

.intro-content h2{

font-family:'Cinzel',serif;

font-size:60px;

margin-bottom:35px;

}

.intro-content p{

font-size:18px;

line-height:2;

margin-bottom:25px;

color:#d4d4d4;

}

.discover-btn{

display:inline-block;

margin-top:20px;

padding:18px 40px;

background:var(--gold);

color:black;

border-radius:40px;

font-weight:bold;

transition:.4s;

}

.discover-btn:hover{

transform:translateY(-5px);

}

/* ===============================
PARALLAX
=============================== */

.quote-section{

height:90vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.quote-bg{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}

.quote-overlay{

position:absolute;

width:100%;

height:100%;

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

}

.quote-content{

position:relative;

text-align:center;

z-index:5;

padding:20px;

}

.quote-content h2{

font-family:'Cinzel',serif;

font-size:75px;

margin-bottom:30px;

}

.quote-content p{

font-size:26px;

color:#ddd;

}
/* ======================================================
   FEATURES SECTION
====================================================== */

.features{

padding:140px 8%;
background:#0a0d12;

}

.section-title{

text-align:center;
margin-bottom:80px;

}

.section-title p{

color:var(--gold);
letter-spacing:5px;
font-size:15px;
margin-bottom:15px;

}

.section-title h2{

font-family:'Cinzel',serif;
font-size:58px;
color:#fff;

}

.feature-grid{

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

}

.feature-card{

background:rgba(255,255,255,.04);
backdrop-filter:blur(18px);
padding:50px 40px;
border-radius:25px;
text-align:center;
transition:.45s;
border:1px solid rgba(255,255,255,.08);

}

.feature-card:hover{

transform:translateY(-15px);
border-color:var(--gold);
box-shadow:0 30px 60px rgba(0,0,0,.45);

}

.icon{

font-size:60px;
margin-bottom:30px;

}

.feature-card h3{

font-family:'Cinzel',serif;
font-size:30px;
margin-bottom:20px;

}

.feature-card p{

color:#d2d2d2;
line-height:1.9;

}

/* ======================================================
   CINEMATIC BANNER
====================================================== */

.cinematic-banner{

position:relative;
height:100vh;
overflow:hidden;

}

.cinematic-banner img{

position:absolute;
width:100%;
height:100%;
object-fit:cover;

}

.banner-overlay{

position:absolute;
width:100%;
height:100%;
background:linear-gradient(
to right,
rgba(0,0,0,.78),
rgba(0,0,0,.25)
);

}

.banner-content{

position:relative;
z-index:5;
max-width:700px;
padding:140px;

}

.banner-content p:first-child{

letter-spacing:5px;
color:var(--gold);

}

.banner-content h2{

font-family:'Cinzel',serif;
font-size:80px;
margin:30px 0;

}

.banner-content p{

line-height:2;
font-size:20px;
color:#ddd;

}

.banner-button{

display:inline-block;
margin-top:40px;
padding:18px 50px;
background:var(--gold);
color:black;
border-radius:50px;
font-weight:bold;
transition:.4s;

}

.banner-button:hover{

transform:translateY(-8px);

}

/* ======================================================
   EXPERIENCE GRID
====================================================== */

.mini-experience{

padding:140px 10%;
background:#080909;

}

.experience-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;

}

.experience-item{

background:#101216;
padding:45px;
border-radius:22px;
transition:.4s;

}

.experience-item:hover{

background:#171b22;
transform:translateY(-10px);

}

.experience-item h3{

font-family:'Cinzel',serif;
font-size:34px;
margin-bottom:20px;

}

.experience-item p{

color:#ccc;
line-height:1.9;

}

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

.final-cta{

padding:170px 10%;
text-align:center;
background:#050608;

}

.final-cta h2{

font-family:'Cinzel',serif;
font-size:72px;
margin-bottom:25px;

}

.final-cta p{

font-size:22px;
color:#ccc;
margin-bottom:50px;

}

.cta-buttons{

display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;

}

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

footer{

background:#030303;
padding:100px 10% 40px;

}

.footer-container{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:60px;

}

.footer-column h2{

font-family:'Cinzel',serif;
color:var(--gold);
margin-bottom:25px;

}

.footer-column h3{

margin-bottom:25px;

}

.footer-column p{

line-height:2;
color:#c9c9c9;
margin-bottom:10px;

}

.footer-column ul{

list-style:none;

}

.footer-column li{

margin-bottom:15px;

}

.footer-column a{

color:#ddd;
transition:.3s;

}

.footer-column a:hover{

color:var(--gold);

}

.footer-button{

display:inline-block;
padding:16px 34px;
background:var(--gold);
color:black;
border-radius:50px;
font-weight:bold;

}

.footer-bottom{

margin-top:70px;
border-top:1px solid rgba(255,255,255,.08);
padding-top:30px;
text-align:center;
color:#888;

}

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

.whatsapp{

position:fixed;
right:30px;
bottom:35px;
width:70px;
height:70px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
box-shadow:0 15px 30px rgba(0,0,0,.35);
transition:.4s;

}

.whatsapp:hover{

transform:scale(1.12);

}

.whatsapp img{

width:38px;

}

/* ======================================================
   BACK TO TOP
====================================================== */

#topBtn{

position:fixed;
left:30px;
bottom:35px;
width:60px;
height:60px;
border:none;
border-radius:50%;
background:var(--gold);
color:black;
font-size:22px;
cursor:pointer;
display:none;
transition:.4s;
z-index:9999;

}

#topBtn:hover{

transform:translateY(-8px);

}