.container{
max-width:1200px;
margin:auto;
padding:40px;
}

.section{
padding:90px 0;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.hero{
position:relative;
height:85vh;
overflow:hidden;
background:#000;
}

.hero-slideshow{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.hero-slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity 1.5s ease-in-out;
}

.hero-slide.active{
opacity:1;
z-index:1;
}

.hero-slide img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 30%;
animation:kenburns 20s ease-out infinite;
}

@keyframes kenburns{
0%{
transform:scale(1);
}
50%{
transform:scale(1.1);
}
100%{
transform:scale(1);
}
}

.hero-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.3) 0%,
rgba(0,0,0,0.5) 50%,
rgba(0,0,0,0.8) 100%
);
z-index:2;
}

.hero-text{
position:absolute;
bottom:-15%;
left:60px;
color:white;
text-shadow:2px 2px 12px rgba(0,0,0,0.9);
z-index:10;
max-width:700px;
animation:fadeInUp 1s ease-out;
}

@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.hero-subtitle{
font-size:22px;
margin:15px 0 25px;
opacity:0.95;
letter-spacing:1px;
}

.hero-nav{
position:absolute;
bottom:50px;
left:50%;
transform:translateX(-50%);
z-index:10;
display:flex;
gap:12px;
}

.hero-nav-dot{
width:12px;
height:12px;
border-radius:50%;
background:rgba(255,255,255,0.4);
border:2px solid rgba(255,255,255,0.6);
cursor:pointer;
transition:all 0.3s ease;
padding:0;
}

.hero-nav-dot:hover{
background:rgba(198,162,90,0.8);
border-color:var(--gold);
transform:scale(1.2);
}

.hero-nav-dot.active{
background:var(--gold);
border-color:var(--gold);
width:30px;
border-radius:6px;
}