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

.hero{
    position: relative;
    width:100%;
    height:90vh;
    overflow:hidden;
}

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

.hero-slider{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:1s ease-in-out;
}

.slide.active{
    opacity:1;
    visibility:visible;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoom 12s linear infinite;
}

@keyframes zoom{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.15);
    }

}

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

.hero-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(4,18,42,.90) 0%,
        rgba(4,18,42,.78) 35%,
        rgba(4,18,42,.35) 65%,
        rgba(4,18,42,.15) 100%
    );

    z-index:2;

}

/*================ Container ================*/

.hero-container{

    width:85%;
    height:100%;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    position:relative;

    z-index:5;

}

/*================ Left Side ================*/

.hero-left{

    width:55%;

    color:#fff;

}

.sub-title{

    display:inline-block;

    background:#ff6b00;

    padding:10px 22px;

    border-radius:30px;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:25px;

    text-transform:uppercase;

}

.hero-left h1{

    font-size:68px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:25px;

}

.hero-left h1 span{

    color:#FFD700;

}

.hero-left p{

    font-size:19px;

    line-height:1.9;

    color:#f2f2f2;

    max-width:650px;

    margin-bottom:40px;

}

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

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

.btn-primary,
.btn-outline{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 34px;

    text-decoration:none;

    border-radius:50px;

    font-size:16px;
    font-weight:600;

    transition:.4s;

}

.btn-primary{

    background:linear-gradient(135deg,#ff7b00,#ff5100);

    color:#fff;

    box-shadow:0 15px 35px rgba(255,123,0,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(255,123,0,.45);

}

.btn-outline{

    color:#fff;

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

    backdrop-filter:blur(10px);

}

.btn-outline:hover{

    background:#fff;

    color:#0a2b5a;

    transform:translateY(-5px);

}


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

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.35s;

    z-index:20;

}

.slider-btn:hover{

    background:#ff6b00;

    transform:translateY(-50%) scale(1.1);

}

.prev{

    left:40px;

}

.next{

    right:40px;

}


/*==========================================
          PAGINATION DOTS
==========================================*/

.slider-dots{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:25;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.35s;

}

.dot.active{

    background:#ff6b00;

    transform:scale(1.35);

}


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

.hero-stats{

    width:90%;

    margin:-70px auto 70px;

    display:grid;

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

    gap:25px;

    position:relative;

    z-index:30;

}

.stats-card{

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

    backdrop-filter:blur(15px);

    border-radius:22px;

    padding:28px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 15px 45px rgba(0,0,0,.12);

    transition:.4s;

}

.stats-card:hover{

    transform:translateY(-10px);

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

}

.icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

}

/* Icon Colors */

.blue{
    background:#2563eb;
}

.orange{
    background:#ff6b00;
}

.green{
    background:#16a34a;
}

.purple{
    background:#7c3aed;
}

.red{
    background:#dc2626;
}

.stats-card h2{

    font-size:32px;

    color:#08254c;

    margin-bottom:5px;

}

.stats-card p{

    color:#666;

    font-size:15px;

    font-weight:500;

}
/* ---------------------------------- */

/*========== Default Hidden ==========*/




.sub-title{
    opacity:1;
}

.hero-left h1{
    opacity:1;
}

.hero-left p{
    opacity:1;
}

.hero-buttons{
    opacity:1;
}

/* Active Animation */

.hero-left .sub-title.show{
    animation: slideDown .8s forwards;
}

.hero-left h1.show{
    animation: slideLeft 1s .2s forwards;
}

.hero-left p.show{
    animation: fadeUp 1s .5s forwards;
}

.hero-buttons.show{
    animation: scaleUp .8s .8s forwards;
}