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

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0f2745;
}

/* Background Slideshow Layer */
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("../asset/images/hero/hero-1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroZoom 18s ease-in-out infinite alternate;
    z-index: 1;
}

/* Dark Overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(15,39,69,.88) 0%,
        rgba(15,39,69,.72) 45%,
        rgba(15,39,69,.45) 100%
    );
    z-index: 2;
}

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

/* ---------------------------------------
   LEFT CONTENT
---------------------------------------- */

.hero-content {
    color: #fff;
    max-width: 650px;
}

.hero-logo {
    width: 140px;
    height: auto;
    display: block;
    margin-bottom: 25px;
    object-fit: contain;
}

.hero-subtitle {
    display: inline-block;
    color: #C89A2B;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem,6vw,5.5rem);
    line-height: 1.05;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
}

.hero-title span {
    color: #C89A2B;
}

.hero-description {
    font-size: 1.1rem;
    color: rgba(255,255,255,.88);
    line-height: 1.9;
    margin-bottom: 40px;
    max-width: 620px;
}

/* ---------------------------------------
   BUTTONS
---------------------------------------- */

.hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.btn-primary-custom {

    background: #C89A2B;
    color: #0F2745;

    padding: 15px 34px;

    border-radius: 50px;

    font-weight: 700;

    transition: .35s;

    border: none;
}

.btn-primary-custom:hover {

    background: #d9ab38;

    color: #0F2745;

    transform: translateY(-4px);

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

}

.btn-outline-custom {

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

    color: white;

    padding: 15px 34px;

    border-radius: 50px;

    transition: .35s;

    font-weight: 600;
}

.btn-outline-custom:hover {

    background: white;

    color: #0F2745;

    transform: translateY(-4px);

}

/* ---------------------------------------
   RIGHT CARD
---------------------------------------- */

.hero-card {

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

    backdrop-filter: blur(16px);

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

    border-radius: 24px;

    padding: 40px;

    color: white;

    box-shadow: 0 25px 60px rgba(0,0,0,.18);

}

.hero-card-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 25px;

    color: #C89A2B;

}

.hero-feature {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;

    font-size: 1rem;

}

.hero-feature i{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#C89A2B;

    color:#0F2745;

    font-size:1.1rem;

}

/* ---------------------------------------
   HERO STATS
---------------------------------------- */

.hero-stats{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

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

    backdrop-filter:blur(12px);

    z-index:10;

    padding:22px 0;

}

.stat-number{

    font-size:2rem;

    font-weight:700;

    color:#0F2745;

}

.stat-text{

    color:#666;

    font-size:.95rem;

}

/* ---------------------------------------
   SCROLL BUTTON
---------------------------------------- */

.scroll-down{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:120px;

    color:white;

    font-size:1.3rem;

    animation:bounce 2s infinite;

    z-index:20;

}

.scroll-down:hover{

    color:#C89A2B;

}

/* ---------------------------------------
   ANIMATIONS
---------------------------------------- */

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translate(-50%,0);

    }

    40%{

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

    }

    60%{

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

    }

}
/* ==========================================
   HERO RESPONSIVE
========================================== */

@media (max-width: 1199px){

    .hero-title{
        font-size:4rem;
    }

}

@media (max-width:991px){

    .hero-section{
        padding-top:120px;
    }

    .hero-content{
        text-align:center;
        margin:0 auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-card{
        margin-top:60px;
    }

    .hero-stats{

        position:relative;

        margin-top:80px;

    }

    .scroll-down{
        display:none;
    }

}

@media (max-width:768px){

    .hero-title{
        font-size:3rem;
    }

    .hero-description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-card{

        padding:30px;

    }

}

@media (max-width:576px){

    .hero-title{

        font-size:2.4rem;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .btn-primary-custom,
    .btn-outline-custom{

        width:100%;

        justify-content:center;

        text-align:center;

    }

    .hero-logo{

        width:85px;

    }

    .stat-number{

        font-size:1.5rem;

    }

    .stat-text{

        font-size:.8rem;

    }

}