/*
======================================================
ARENASA HERO v3
======================================================
*/

.hero{

    position:relative;

    width:100%;

    aspect-ratio:2560 / 1200;

    overflow:hidden;


}


.hero-title{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:82px;

    font-weight:700;

    line-height:.92;

    letter-spacing:-1px;

    color:#FFFFFF;

    text-shadow:
        0 3px 10px rgba(0,0,0,.45);

}

.hero-title span{

    display:block;

    margin-top:8px;

    color:#D4AF37;

}

.hero-label{

    display:inline-block;

    margin-bottom:18px;

    font-size:18px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#D4AF37;

}

.hero-description{

    margin-top:28px;

    width:610px;

    max-width:100%;

    color:#FFFFFF;

    font-size:18px;

    font-weight:400;

    line-height:1.75;

    opacity:.96;

}


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

.hero-slider{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity .8s ease;

    background-repeat:no-repeat;

    background-position:center center;

    background-size:100% auto;

}

.hero-slide.active{

    opacity:1;

    z-index:2;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:3;

    background:linear-gradient(

        90deg,

        rgba(4,27,14,.90) 0%,

        rgba(4,27,14,.72) 25%,

        rgba(4,27,14,.45) 45%,

        rgba(4,27,14,.12) 70%,

        rgba(4,27,14,0) 100%

    );

}

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

.hero .container{

    position:relative;

    height:100%;

    z-index:10;

}

.hero-wrapper{

    height:100%;

    display:flex;

    align-items:center;

}

.hero-content{

    width:640px;

    padding-top:40px;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:42px;

}

/*======================================================
BUTTON PRIMARY
======================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:210px;

    height:58px;

    padding:0 28px;

    border-radius:12px;

    background:#D4AF37;

    color:#111111;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

    box-shadow:
        0 10px 25px rgba(212,175,55,.25);

}

.btn-primary:hover{

    transform:translateY(-2px);

    background:#E4C14A;

}

/*======================================================
BUTTON SECONDARY
======================================================*/

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:210px;

    height:58px;

    padding:0 28px;

    border-radius:12px;

    border:2px solid rgba(212,175,55,.7);

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

    color:#FFFFFF;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.30s;

}

.btn-secondary:hover{

    background:#D4AF37;

    color:#111;

}

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

.hero-indicators{

    position:absolute;

    left:50%;

    bottom:32px;

    transform:translateX(-50%);

    z-index:20;

    display:flex;

    align-items:center;

    gap:12px;

}

.hero-dot{

    width:14px;

    height:14px;

    border:none;

    border-radius:50%;

    cursor:pointer;

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

    transition:.35s;

}

.hero-dot:hover{

    background:#D4AF37;

    transform:scale(1.15);

}

.hero-dot.active{

    width:38px;

    border-radius:30px;

    background:#D4AF37;

}

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

.hero-features{

    position:relative;

    z-index:30;

    margin-top:-48px;

    padding-bottom:0;

}

/*======================================================
GOLD DIVIDER
======================================================*/

.hero-features::before{

    content:"";

    position:absolute;

    left:50%;

    top:48px;

    transform:translateX(-50%);

    width:100vw;

    height:1px;

    background:rgba(212,175,55,.45);

    z-index:-1;

}

.hero-features .container{

    max-width:1480px;

}

.hero-features-grid{

    display:grid;

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

    gap:0;

    background:rgba(6,33,15,.96);

    border:1px solid rgba(212,175,55,.25);

    border-radius:22px;

    overflow:hidden;

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

}

.hero-feature{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:26px 18px;

    color:#FFFFFF;

    font-size:18px;

    font-weight:600;

    transition:.30s;

    border-right:1px solid rgba(212,175,55,.12);

}

.hero-feature:last-child{

    border-right:none;

}

.hero-feature i{

    color:#D4AF37;

    font-size:30px;

    flex-shrink:0;

}

.hero-feature span{

    line-height:1.4;

}

.hero-feature:hover{

    background:#0B3017;

}

.hero-feature:hover i{

    transform:scale(1.15);

    transition:.30s;

}

/*======================================================
RESPONSIVE HERO FEATURES
======================================================*/

@media(max-width:992px){

    .hero-features{

        margin-top:-35px;

    }

    .hero-features-grid{

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

    }

}

@media(max-width:576px){

    .hero-features{

        margin-top:-20px;

    }

    .hero-features-grid{

        grid-template-columns:1fr;

    }

    .hero-feature{

        justify-content:flex-start;

        padding:18px 20px;

        border-right:none;

        border-bottom:1px solid rgba(212,175,55,.10);

    }

    .hero-feature:last-child{

        border-bottom:none;

    }

}