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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:900px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#000;

}

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

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:hidden;

    z-index:1;

}

.hero-video video{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

    object-position:center center;

}

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

.overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(55, 76, 110, .35) 0%,
            rgba(20, 28, 44, .45) 45%,
            rgba(17, 24, 39, .65) 100%
        );

}

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

.hero-content {

    position: relative;

    z-index: 10;

    text-align: center;

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

    padding: 0 24px;

}

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

.hero-content h1 {

    font-family: "Plus Jakarta Sans", sans-serif;

    color: white;

    font-size: 7rem;

    font-weight: 800;

    line-height: .95;

    letter-spacing: -4px;

    margin-bottom: 48px;

}

.hero-content h1 span {

    color: #FFB285;

    font-style: italic;

}

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

.hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: linear-gradient(
        135deg,
        #0B4DBB,
        #0A3F9C
    );

    color: white;

    font-size: 20px;

    font-weight: 700;

    padding: 20px 42px;

    border-radius: 999px;

    transition: .35s ease;

    box-shadow:
        0 18px 40px rgba(11,77,187,.30);

}

.hero-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 24px 45px rgba(11,77,187,.40);

}

.hero-button span {

    font-size: 26px;

}

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

.hero-content h1 {

    animation: heroTitle .9s ease;

}

.hero-button {

    animation: heroButton 1.1s ease;

}

@keyframes heroTitle {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroButton {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================
   LARGE DESKTOP
========================================== */

@media (min-width:1600px){

    .hero-content h1{

        font-size:8rem;

    }

}


/* ==========================================
   DESKTOP / LAPTOP LARGE
========================================== */

@media (max-width:1400px){

    .hero{

        min-height:800px;

    }


    .hero-content{

        max-width:1000px;

    }


    .hero-content h1{

        font-size:5.8rem;

        letter-spacing:-3px;

        margin-bottom:40px;

    }


    .hero-button{

        font-size:18px;

        padding:18px 36px;

    }


}


/* ==========================================
   LAPTOP WINDOW MODE
========================================== */

@media (max-width:1200px){

    .hero{

        height:100vh;

        min-height:700px;

    }


    .hero-content{

        padding:0 40px;

    }


    .hero-content h1{

        font-size:4.8rem;

        line-height:1;

        letter-spacing:-2px;

        margin-bottom:35px;

    }


    .hero-button{

        font-size:17px;

        padding:16px 32px;

    }


    .hero-button span{

        font-size:22px;

    }

}



/* ==========================================
   TABLET
========================================== */

@media (max-width:768px){


    .hero{

        min-height:650px;

    }


    .hero-content{

        padding:0 24px;

    }


    .hero-content h1{

        font-size:3.5rem;

        line-height:1.05;

        letter-spacing:-1.5px;

        margin-bottom:30px;

    }


    .hero-button{

        padding:15px 30px;

        font-size:16px;

    }

    .hero-video video{

    object-position:center center;

}


}



/* ==========================================
   MOBILE
========================================== */

@media (max-width:480px){


    .hero{

        min-height:600px;

    }


    .hero-content{

        padding:0 20px;

    }


    .hero-content h1{

        font-size:2.8rem;

        line-height:1.1;

        letter-spacing:-1px;

        margin-bottom:28px;

    }


    .hero-button{

        width:100%;

        max-width:260px;

        padding:15px 20px;

        font-size:15px;

    }


    .hero-button span{

        font-size:20px;

    }

    .hero-video video{

    object-position:center center;

}


}