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

/* :root{

   
    --primary-dark:#1639c7;
    --secondary:#00b8d9;
    --white:#ffffff;
    --light:#f5f8ff;
    --dark:#0f172a;
    --text:#eaf2ff;

    --shadow-lg:0 25px 70px rgba(0,0,0,.30);
    --shadow:0 10px 35px rgba(0,0,0,.20);

    --radius:18px;
    --transition:.45s ease;

} */

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

.hero{

    position:relative;
    width:100%;
    min-height:500px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    background:#000;

}

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

.hero-slider{

    position:absolute;
    inset:0;
    z-index:-3;

}

.slide{

    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity 1.2s ease,
               visibility 1.2s ease;

}

.slide.active{

    opacity:1;
    visibility:visible;

}

.slide img{

    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoomBackground 12s linear infinite;

}

@keyframes zoomBackground{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}

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

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(90deg,
    rgba(8,18,40,.82) 0%,
    rgba(8,18,40,.72) 35%,
    rgba(8,18,40,.55) 60%,
    rgba(8,18,40,.40) 100%);

    z-index:-2;

}

/* Decorative Blur */

.hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-180px;
    left:-180px;

    border-radius:50%;

    background:rgba(47,84,235,.30);

    filter:blur(120px);

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    bottom:-120px;
    right:-120px;

    border-radius:50%;

    background:rgba(0,184,217,.25);

    filter:blur(110px);

    pointer-events:none;

}

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

.hero-content{

    position:relative;

    width:min(1200px,92%);

    color:#ffffff;

    padding:120px 20px 70px;

    z-index:5;

    animation:heroContent .9s ease;

}

@keyframes heroContent{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*=========================================================
    TAG
=========================================================*/

.hero-tag{

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

    padding:10px 22px;

    border-radius:50px;

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

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

    backdrop-filter:blur(12px);

    font-size:.95rem;
    font-weight:600;

    color:#ffffff;

    margin-bottom:28px;

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

}

.hero-tag i{

    color:#ffd43b;

}

/*=========================================================
    TITLE
=========================================================*/

.hero-content h1{

    max-width:700px;

    font-size:clamp(2.6rem,6vw,5rem);

    line-height:1.08;

    font-weight:800;

    letter-spacing:.4px;

    margin-bottom:24px;

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

}

/*=========================================================
    DESCRIPTION
=========================================================*/

.hero-content p{

    max-width:650px;

    font-size:1.12rem;

    line-height:1.8;

    color:#eaf2ff;

    margin-bottom:32px;

}

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

.hero-buttons{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

    margin-bottom:25px;

}

.hero-buttons a{

    text-decoration:none;

    transition:.45s ease;

}

.btn-primary{

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

    padding:17px 36px;

    background:linear-gradient(135deg,
    #2f54eb,
    #5b8cff);

    color:#fff;

    font-weight:600;

    border-radius:50px;

    box-shadow:
    0 15px 35px rgba(47,84,235,.45);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
    0 25px 45px rgba(47,84,235,.55);

}

.btn-primary i{

    transition:.35s ease;

}

.btn-primary:hover i{

    transform:translateX(7px);

}

.btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:17px 36px;

    border-radius:50px;

    color:#fff;

    font-weight:600;

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

    backdrop-filter:blur(10px);

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

}

.btn-secondary:hover{

    background:#fff;

    color:#2f54eb;

    transform:translateY(-5px);

}

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

.hero-stats{

    display:flex;
    gap:25px;
    flex-wrap:wrap;

}

.stat-box{

    min-width:180px;

    padding:28px;

    border-radius:18px;

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

    backdrop-filter:blur(15px);

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

    transition:.45s ease;

}

.stat-box:hover{

    transform:translateY(-8px);

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

}

.stat-box h2{

    font-size:2rem;

    color:#ffffff;

    margin-bottom:8px;

}

.stat-box span{

    color:#d7e4ff;

    font-size:.95rem;

}

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

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:32px;
    height:32px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

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

    backdrop-filter:blur(12px);

    transition:.35s ease;

    z-index:10;

}

.slider-btn:hover{

    background:#2f54eb;

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

}

.prev{

    left:15px;

}

.next{

    right:15px;

}

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

/*.slider-dots{

    position:absolute;

    left:50%;
    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:15;

}

.dot{

    width:14px;
    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.35s ease;

}

.dot.active{

    width:42px;

    border-radius:30px;

    background:#ffffff;

}

.dot:hover{

    background:#fff;

} */

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

.scroll-indicator{

    position:absolute;

    bottom:25px;
    right:45px;

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:.9rem;

    opacity:.85;

    animation:bounce 2s infinite;

}

.scroll-indicator i{

    font-size:1.4rem;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

@media(max-width:991px){

.hero{

    min-height:650px;

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    margin-inline:auto;

}

.hero-content p{

    margin-inline:auto;
    margin-bottom:35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.slider-btn{

    width:55px;
    height:55px;

}

.prev{

    left:18px;

}

.next{

    right:18px;

}

.scroll-indicator{

    display:none;

}

}

@media(max-width:768px){

.hero{

    min-height:650px;

}

.hero-content{

    padding-top:110px;

}

.hero-content h1{

    font-size:2.7rem;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;
    align-items:center;

}

.btn-primary,
.btn-secondary{

    width:260px;
    justify-content:center;

}

.hero-stats{

    gap:18px;

}

.stat-box{

    width:100%;
    max-width:320px;

    text-align:center;

}

.slider-btn{

    display:none;

}

}

@media(max-width:480px){

.hero{

    min-height:650px;

}

.hero-tag{

    font-size:.82rem;

    padding:9px 18px;

}

.hero-content h1{

    font-size:2.2rem;

}

.hero-content p{

    line-height:1.7;

}

.slider-dots{

    bottom:25px;

}

}