:root{
--bottom-bar-h: 0px;
--hero-x: 50%;
--hero-y: 75%;
--hero-bottom: auto;
--hero-transform: translate(-50%, -50%);
--hero-align: center;
}
.hero-slider{
position: relative;
width: 100%;
overflow: hidden;
background: #000;
height: 100vh;
height: 100svh;
height: 100dvh;
min-height: 560px;
margin-bottom: 0;
} .hero-slide{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.hero-slide.active{
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
}
.hero-bg,
.hero-slide video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-bg{
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transform: scale(1.05);
animation: kenburns 10s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes kenburns{
0%   { transform: scale(1.05) translate(0, 0); }
100% { transform: scale(1.15) translate(-10px, -10px); }
}
.hero-overlay{
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.30));
z-index: 2;
pointer-events: none;
}
.hero-text-wrapper{
position: absolute;
max-width: 92%;
padding: 16px 20px;
border-radius: 12px;
z-index: 5;
left: var(--hero-x);
top: var(--hero-y);
bottom: var(--hero-bottom);
transform: var(--hero-transform);
text-align: var(--hero-align);
}
.hero-text-wrapper.has-bg{
background: rgba(0,0,0,0.3);
}
.hero-text-wrapper.no-bg{
background: transparent;
}
.hero-text-wrapper span,
.hero-text-wrapper h2,
.hero-text-wrapper p{
color: #fff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
opacity: 0;
transform: translateY(20px);
}
.hero-text-wrapper.animate span { animation: fadeInUp 0.6s ease 0.1s forwards; }
.hero-text-wrapper.animate h2   { animation: fadeInUp 0.6s ease 0.25s forwards; }
.hero-text-wrapper.animate p    { animation: fadeInUp 0.6s ease 0.4s forwards; }
@keyframes fadeInUp{
to{
opacity: 1;
transform: translateY(0);
}
}
.hero-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
user-select: none;
z-index: 50;
font-size: 20px;
color: #000;
border: 0;
background: rgba(255,255,255,0.8);
padding: 0;
line-height: 1;
}
.hero-prev{ left: 15px; }
.hero-next{ right: 15px; }
.hero-progress{
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 4px;
background: var(--color-accent, #9cba36);
z-index: 9999;
pointer-events: none;
}
.hero-progress.glow{
box-shadow: 0 0 8px rgba(156,186,54,0.8);
}
.hero-slide.desktop{ display: block; }
.hero-slide.mobile{ display: none; } .hero-slider *{
box-sizing: border-box;
} .hero-slider,
.hero-slider .hero-slide,
.hero-slider .hero-bg{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media (max-width: 768px){
.hero-slide.desktop{ display:none; }
.hero-slide.mobile{ display:block; }
.hero-slider{
height: 100vh;
height: 100svh;
height: 100dvh;
min-height: 420px;
}
.hero-bg{
animation: kenburnsMobile 12s ease-in-out infinite alternate;
}
@keyframes kenburnsMobile{
0%   { transform: scale(1.03); }
100% { transform: scale(1.10); }
}
.hero-text-wrapper{
width: calc(100% - 24px);
max-width: 560px;
padding: 14px 16px;
border-radius: 14px;
}
.hero-text-wrapper span{
display:block;
font-size: clamp(12px, 2.8vw, 14px);
line-height: 1.2;
margin-bottom: 6px;
}
.hero-text-wrapper h2{
font-size: clamp(20px, 5.4vw, 28px);
line-height: 1.12;
margin: 0 0 8px 0;
}
.hero-text-wrapper p{
font-size: clamp(13px, 3.6vw, 16px);
line-height: 1.25;
margin: 0;
}
.hero-nav{
width: 40px;
height: 40px;
font-size: 18px;
}
.hero-prev{ left: 10px; }
.hero-next{ right: 10px; }
}
@media (max-width: 768px) {
.hero-slider {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
} .hero-slider + *,
.hero-slider ~ .vc_row:first-of-type,
.hero-slider ~ .wpb_row:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
}
}