/* ==========================================================
   HERO.CSS
   SovereignAqua Research & Development Foundation
========================================================== */

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    color:#ffffff;

}

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

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-2;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(8,20,36,.72),
        rgba(8,20,36,.82)
    );

    z-index:-1;

}

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

.hero-content{

    position:relative;

    text-align:center;

    max-width:900px;

    padding:140px 20px 100px;

}

/* ==========================================================
   FOUNDATION LOGO
========================================================== */

.hero-logo{

    margin-bottom:30px;

}

.hero-logo img{

    width:130px;

    margin:auto;

    filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));

}

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

.hero h1{

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

    margin-bottom:25px;

    color:#ffffff;

}

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

.hero p{

    max-width:760px;

    margin:0 auto 40px;

    font-size:1.2rem;

    color:var(--text-secondary);

}

/* ==========================================================
   BUTTON GROUP
========================================================== */

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

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

.hero-scroll{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    animation:bounce 2s infinite;

}

.hero-scroll a{

    color:#ffffff;

    font-size:1.5rem;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes bounce{

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

        transform:translateY(0);

    }

    40%{

        transform:translateY(-12px);

    }

    60%{

        transform:translateY(-6px);

    }

}

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

@media (max-width:992px){

    .hero-content{

        padding-top:160px;

    }

}

@media (max-width:768px){

    .hero{

        min-height:90vh;

    }

    .hero h1{

        font-size:2.6rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-logo img{

        width:100px;

    }

}