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

.hero{
    position:relative;
    height:90vh;
    min-height:720px;
    overflow:hidden;
    display:flex;
    align-items:center;
}

/*==========================
    Background Slider
===========================*/

.hero-slider{
    position:absolute;
    inset:0;
    z-index:1;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.2s ease;
}

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

/*==========================
    Overlay
===========================*/

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.28) 100%
    );
}

/*==========================
    Hero Content
===========================*/

.hero .home-container{
    position:relative;
    z-index:5;
}

.hero-content{
    max-width:720px;
}

.hero-subtitle{

    display:inline-block;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:20px;
}

.hero h1{

    color:#fff;

    font-size:4.4rem;

    line-height:1.1;

    margin-bottom:28px;

    font-weight:700;
}

.hero p{

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

    font-size:1.2rem;

    line-height:1.9;

    max-width:650px;

    margin-bottom:45px;
}

/*==========================
    Buttons
===========================*/

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:999px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;
}

.hero-primary{

    background:var(--up-maroon);

    color:#fff;

    box-shadow:0 12px 30px rgba(123,17,19,.35);
}

.hero-primary:hover{

    background:var(--up-maroon-dark);

    transform:translateY(-4px);
}

.hero-secondary{

    color:#fff;

    border:2px solid rgba(255,255,255,.8);

    backdrop-filter:blur(8px);

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

.hero-secondary:hover{

    background:#fff;

    color:#222;
}

/*==========================
    Scroll Indicator
===========================*/

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:4;

    color:#fff;

    text-align:center;

}

.hero-scroll span{

    display:block;

    margin-bottom:12px;

    font-size:.85rem;

    letter-spacing:.08em;

}

.mouse{

    width:28px;

    height:46px;

    border:2px solid #fff;

    border-radius:20px;

    margin:auto;

    position:relative;

}

.wheel{

    width:4px;

    height:10px;

    background:#fff;

    border-radius:3px;

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

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

    }

}
 
/* ======================================
   HERO ANIMATION
====================================== */

.hero-content{

    animation:heroFade 1.2s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.hero-nav{

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    transform:translateY(-50%);

    display:flex;

    justify-content:space-between;

    padding:0 30px;

    z-index:20;

    pointer-events:none;
}

.hero-prev,
.hero-next{

    pointer-events:auto;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    color:#fff;

    cursor:pointer;

    font-size:28px;

    transition:.35s;
}

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

    background:var(--up-maroon);

    transform:scale(1.08);
}

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

.hero-dots{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:20;
}

.hero-dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;
}

.hero-dot.active{

    width:34px;

    border-radius:20px;

    background:var(--up-gold);
}

/* ======================================
   HERO QUICK LINKS
====================================== */

.hero-quick-links{

    position:relative;

    margin-top:-70px;

    z-index:10;

}

.hero-links-grid{

    display:grid;

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

    gap:25px;

}

.hero-link-card{

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    text-decoration:none;

    color:#222;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.hero-link-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(0,0,0,.12);

}

.hero-link-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:18px;

    background:#7B1113;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}

.hero-link-card h3{

    margin:0;

    font-size:1.2rem;

}