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

.hero{

    position:relative;

    display:flex;
    align-items:center;

    width:100%;
    height:100vh;
    min-height:820px;

    overflow:hidden;

}

.hero img{

    width:100%;
    height:100%;

    object-fit:cover;

    animation:heroZoom 18s ease-in-out infinite alternate;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.48) 38%,
        rgba(0,0,0,.22) 65%,
        rgba(0,0,0,.12) 100%
    );

    z-index:2;

}

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

.hero-content{

    position:absolute;

    top:56%;
    left:9%;

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

    z-index:5;

    opacity:0;

    transform:translateY(calc(-50% + 40px));

    transition:all .9s ease;

}

.hero-content.show{

    opacity:1;

    transform:translateY(-50%);

}

/*=========================================================
  SUBTITLE
=========================================================*/

.hero-content .subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#F4B400;

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*=========================================================
  HEADING
=========================================================*/

.hero-content h1{

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

    font-size:clamp(42px,5vw,68px);

    line-height:1.08;

    font-weight:800;

    color:#ffffff;

    margin-bottom:25px;

    text-shadow:0 5px 18px rgba(0,0,0,.45);

}

.hero-content h1 span{

    color:#F4B400;

}

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

.hero-content p{

    font-size:clamp(17px,1.5vw,22px);

    line-height:1.8;

    color:#ffffff;

    max-width:580px;

    margin-bottom:40px;

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

}

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

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

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 42px;

    background:transparent;

    color:#ffffff;

    border:2px solid #F4B400;

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

    font-size:17px;

    font-weight:600;

    border-radius:60px;

    transition:all .35s ease;

    text-decoration:none;

}

/* Hover */

.hero-btn:hover{

    background:#F4B400;

    color:#111111;

    border-color:#F4B400;

    transform:translateY(-4px);

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

}
/*=========================================================
  HERO ANIMATIONS
=========================================================*/

.hero-content h1{

    animation:fadeUp .9s ease forwards;

}

.hero-content p{

    animation:fadeUp 1.2s ease forwards;

}

.hero-btn{

    animation:fadeUp 1.5s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
  HERO IMAGE ZOOM
=========================================================*/

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:45px;

    border:2px solid #ffffff;

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);

    width:6px;

    height:6px;

    background:#ffffff;

    border-radius:50%;

    animation:scrollDown 1.8s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:1;

        top:8px;

    }

    100%{

        opacity:0;

        top:26px;

    }

}

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

@media(max-width:992px){

    .hero{

        min-height:700px;

    }

    .hero-content{

        left:6%;

        top:58%;

        max-width:520px;

    }

}

@media(max-width:768px){

    .hero{

        min-height:620px;

    }

    .hero-content{

        left:5%;
        right:5%;

        max-width:90%;

        top:60%;

    }

    .hero-content p{

        line-height:1.7;

    }

    .hero-btn{

        padding:15px 30px;

        font-size:15px;

    }

}
/*=========================================
 HERO SLIDER
=========================================*/

.hero-slider{
    position:relative;
    width:100%;
    height:100%;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .8s ease;
}

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

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}