/*=========================================================
ESBC 2.0
HERO.CSS
Premium Hero Section
=========================================================*/

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:var(--header-height);

    background:var(--bg-color);

}

/*=================================
BACKGROUND
=================================*/

.hero-slider{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0;

    visibility:hidden;

    z-index:0;

    transition:opacity 1.2s ease, visibility 0s ease 1.2s;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:1;

    transition-delay:0s;

}

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*=================================
OVERLAY
=================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(40,35,38,.90) 0%,
        rgba(40,35,38,.75) 45%,
        rgba(40,35,38,.45) 100%
    );

    z-index:2;

}

/*=================================
CONTENT
=================================*/

.hero-content{

    position:relative;

    z-index:5;

    max-width:720px;

    padding:40px 0;

}

.hero-subtitle{

    display:inline-block;

    color:var(--accent);

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-content h1{

    margin-bottom:24px;

    font-weight:800;

    line-height:1.05;

    color:#fff;

}

.hero-content p{

    font-size:1.15rem;

    max-width:620px;

    margin-bottom:40px;

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

}

/*=================================
BUTTONS
=================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    align-items:center;

}

.hero-buttons .btn{

    min-width:200px;

}

/*=================================
NEW HERO LAYOUT
=================================*/

.hero{

    position:relative;

    min-height:88vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg, rgba(59,51,55,.96) 0%, rgba(62,54,59,.92) 35%, rgba(21,20,22,.97) 100%);

    overflow:hidden;

    padding-top:var(--header-height);

}

.hero .container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1140px;

    padding:0 24px;

}

.hero-content{

    max-width:760px;
    width:100%;
    box-sizing:border-box;
    padding:80px 20px;

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

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

    border-radius:28px;

    box-shadow:0 40px 80px rgba(0,0,0,.22);

}

.hero-content h2{

    color:#fff;

    font-size:clamp(2rem, 4vw, 3.1rem);

    line-height:1.05;

    margin-bottom:20px;

    letter-spacing:1px;

}

.hero-content p{

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

    font-size:1.08rem;

    max-width:620px;

    margin-bottom:30px;

}

.hero-content .btn{

    display:inline-flex;

    padding:16px 32px;

    background:var(--accent);

    color:var(--bg-color);

    border-radius:999px;

    font-weight:700;

    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;

}

.hero-content .btn:hover{

    transform:translateY(-2px);

    box-shadow:0 16px 30px rgba(0,0,0,.25);

    background:#d6b870;

}

.floating-elements{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

    pointer-events:none;

}

.hero-logo-bg{

    position:absolute;

    inset:10% 20% auto 20%;

    width:calc(100% - 40%);

    height:calc(100% - 45%);

    background:url("images/imageslogo.png") center center/contain no-repeat;

    opacity:.08;

    z-index:2;

    filter:blur(2px);

    animation:logoFloat 16s ease-in-out infinite;

}

.floating-element{

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(214,184,112,.16);

    filter:blur(24px);

    animation:floatMove 12s ease-in-out infinite;

}

.floating-element:nth-child(1){

    top:20%;

    left:15%;

    width:180px;

    height:180px;

    animation-delay:0s;

}

.floating-element:nth-child(2){

    top:50%;

    right:12%;

    width:220px;

    height:220px;

    animation-delay:3s;

}

.floating-element:nth-child(3){

    bottom:14%;

    left:25%;

    width:160px;

    height:160px;

    animation-delay:6s;

}

@keyframes floatMove{

    0%,100%{transform:translateY(0) scale(1);}

    50%{transform:translateY(-24px) scale(1.05);}

}

@keyframes logoFloat{

    0%,100%{transform:translateY(0) scale(1);}

    50%{transform:translateY(-18px) scale(1.03);}

}

@media (max-width:992px){

    .hero-content{

        padding:60px 18px;

    }

    .hero-content h2{

        font-size:2.5rem;

    }

}

@media (max-width:768px){

    .hero{

        min-height:78vh;

    }

    .hero-content{

        padding:42px 18px;

        border-radius:22px;

    }

    .hero-content h2{

        font-size:2rem;

    }

}

@media (max-width:480px){

    .hero-content{

        padding:32px 16px;

    }

    .hero-content h2{

        font-size:1.7rem;

    }

    .hero-content p{

        font-size:1rem;

    }

}

/*=================================
QUICK STATS
=================================*/

.hero-stats{

    margin-top:60px;

}

.stats-grid{

    display:grid;

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

    gap:20px;

}

.stat-card{

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

    backdrop-filter:blur(16px);

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

    border-radius:22px;

    padding:28px 24px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.stat-card h2{

    color:var(--accent);

    font-size:2.2rem;

    margin-bottom:10px;

}

.stat-card span{

    display:block;

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

    font-size:1rem;

}

.hero-stat h3{

    color:var(--accent);

    font-size:2rem;

    margin-bottom:8px;

}

.hero-stat p{

    margin:0;

    font-size:.95rem;

}

/*=================================
SCROLL INDICATOR
=================================*/

.scroll-indicator,
.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:6;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--heading);

    text-decoration:none;

    opacity:.95;

}

.hero-scroll{

    width:52px;

    height:52px;

    padding:0;

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

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    box-shadow:0 12px 35px rgba(0,0,0,.18);

    transition:transform .3s ease, background .3s ease, color .3s ease;

    animation:bounce 1.8s ease-in-out infinite;

}

.hero-scroll:hover{

    transform:translateY(-4px);

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

    color:#fff;

}

.hero-scroll i{

    font-size:1.05rem;

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:46px;

    border:2px solid var(--heading);

    border-radius:40px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:6px;

    height:10px;

    background:var(--heading);

    border-radius:10px;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

0%{

opacity:1;

transform:translate(-50%,0);

}

100%{

opacity:0;

transform:translate(-50%,18px);

}

}

/*=================================
SLIDER CONTROLS
=================================*/

.hero-prev,
.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:var(--heading);

    cursor:pointer;

    transition:var(--transition);

    z-index:10;

}

.hero-prev:hover,
.hero-next:hover{

    background:var(--accent);

    color:var(--bg-color);

}

.hero-prev{

    left:30px;

}

.hero-next{

    right:30px;

}

/*=================================
SLIDER DOTS
=================================*/

.hero-dots{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:10;

    justify-content:center;

}

.hero-dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

}

.hero-dot.active{

    background:var(--accent);

    transform:scale(1.3);

}

/*=================================
RESPONSIVE
=================================*/

@media (max-width:992px){

.hero{

text-align:center;

}

.hero-content{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

grid-template-columns:1fr;

margin:auto;
margin-top:50px;

}

.hero-arrow{

display:none;

}

.hero-dots{

left:50%;

right:auto;

transform:translateX(-50%);

}

}

@media (max-width:768px){

.hero{

min-height:auto;

padding:150px 0 90px;

}

.hero-content h1{

font-size:2.6rem;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

}

@media (max-width:480px){

.hero{

padding-top:130px;

}

.hero-content h1{

font-size:2.1rem;

}

.hero-subtitle{

font-size:.8rem;

}

.hero-stat{

padding:18px;

}

.hero-stat h3{

font-size:1.6rem;

}

}