/* ==========================================================
   PROJECT TITAN
   hero.css
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--navy);

}

/* ===========================
   VIDEO BACKGROUND
=========================== */

.hero video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

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

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,31,61,.92),
            rgba(8,31,61,.72),
            rgba(8,31,61,.45)
        );

    z-index:2;

}

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

.hero-content{

    position:relative;

    z-index:5;

    width:min(92%,1320px);

    margin:auto;

    color:#fff;
    top: 5vh;
    max-width:760px;

}

/* ===========================
   BADGE
=========================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:999px;

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

    backdrop-filter:blur(15px);

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

    margin-bottom:20px;

    margin-top: 40px;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero-badge i{

    color:#00B8FF;

}

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

.hero-title{

    font-family:'Poppins',sans-serif;

    font-size:72px;

    font-weight:800;

    line-height:1.08;

    margin-bottom:20px;

    color:#fff;

}

.hero-title span{

    color:var(--secondary);

}

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

.hero-description{

    font-size:20px;

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

    line-height:1.8;

    margin-bottom:15px;

    max-width:680px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

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

.hero-stats{

    display:flex;

    gap:60px;

    margin-top:80px;

    flex-wrap:wrap;

}

.hero-stat{

    color:#fff;

}

.hero-stat h3{

    font-size:42px;

    color:#fff;

    margin-bottom:5px;

}

.hero-stat p{

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

    font-size:15px;

}

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

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

}

.mouse{

    width:30px;

    height:52px;

    border:2px solid #fff;

    border-radius:30px;

    position:relative;

}

.mouse::before{

    content:"";

    position:absolute;

    left:50%;

    top:10px;

    transform:translateX(-50%);

    width:5px;

    height:12px;

    background:#fff;

    border-radius:20px;

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

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

    }

}

/* ===========================
   BACKGROUND GLOW
=========================== */

.hero-glow{

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(3,127,252,.25),
    transparent 70%);

    right:-220px;

    top:-180px;

    z-index:2;

    filter:blur(50px);

}

/* ===========================
   FLOATING CARD
=========================== */

.hero-card{

    position:absolute;

    right:8%;

    bottom:90px;

    z-index:5;

    width:340px;

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

    backdrop-filter:blur(20px);

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

    border-radius:20px;

    padding:25px;

    color:#fff;

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

}

.hero-card h4{

    font-size:22px;

    margin-bottom:15px;

    color:#fff;

}

.hero-card p{

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

    font-size:15px;

    line-height:1.7;

}

.hero-card .status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    color:#4ADE80;

    font-weight:600;

}

.hero-card .status i{

    font-size:12px;

}