/*==========================================================================
KWARA STATE MINISTRY OF LIVESTOCK DEVELOPMENT
PREMIUM HERO SECTION
File: assets/css/hero.css
==========================================================================*/


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

.hero-section{

    position:relative;

    width:100%;

    height:100vh;

    min-height:760px;

    overflow:hidden;

    background:#000;

}


/*==========================================================================
CAROUSEL
==========================================================================*/

.hero-section .carousel,

.hero-section .carousel-inner,

.hero-section .carousel-item{

    width:100%;

    height:100%;

}


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

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    animation:kenBurns 18s linear infinite;

    filter:

        brightness(.78)

        contrast(1.08)

        saturate(1.08);

}


/*==========================================================================
KEN BURNS EFFECT
==========================================================================*/

@keyframes kenBurns{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}


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

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(5,35,18,.90) 0%,

        rgba(8,55,28,.78) 35%,

        rgba(10,70,35,.45) 65%,

        rgba(0,0,0,.18) 100%

    );

}


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

.hero-section .container{

    position:relative;

    z-index:20;

    height:100%;

}


/*==========================================================================
ROW
==========================================================================*/

.hero-section .row{

    height:100%;

}


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

.hero-content{

    max-width:720px;

    color:#fff;

}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 28px;

    border-radius:60px;

    background:rgba(212,175,55,.15);

    border:1px solid rgba(212,175,55,.45);

    backdrop-filter:blur(15px);

    color:#FFD86A;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}


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

.badge-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#FFD86A;

    box-shadow:0 0 15px #FFD86A;

}


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

.hero-title{

    margin-top:35px;

    margin-bottom:28px;

    font-size:76px;

    font-weight:800;

    line-height:1.08;

    color:#fff;

    text-shadow:

        0 6px 25px rgba(0,0,0,.35);

}


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

.hero-description{

    font-size:22px;

    line-height:1.8;

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

    max-width:640px;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:45px;

    flex-wrap:wrap;

}

.hero-btn-primary{

    background:#0B6B3A;

    color:#FFFFFF;

    border:2px solid #0B6B3A;

    border-radius:60px;

    padding:18px 38px;

    font-size:17px;

    font-weight:700;

    transition:all .35s ease;

    box-shadow:0 18px 35px rgba(11,107,58,.35);

}

.hero-btn-primary:hover{

    background:#09552D;

    border-color:#09552D;

    color:#FFFFFF;

    transform:translateY(-4px);

    box-shadow:0 25px 45px rgba(11,107,58,.45);

}

.hero-btn-outline{

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

    backdrop-filter:blur(12px);

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

    color:#FFFFFF;

    border-radius:60px;

    padding:18px 38px;

    font-size:17px;

    font-weight:700;

    transition:all .35s ease;

}

.hero-btn-outline:hover{

    background:#FFFFFF;

    color:#0B6B3A;

    border-color:#FFFFFF;

    transform:translateY(-4px);

}



/*==========================================================================
FEATURES
==========================================================================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:15px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

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

    color:#FFFFFF;

    transition:all .35s ease;

}

.hero-feature:hover{

    background:#D4AF37;

    color:#FFFFFF;

    transform:translateY(-4px);

}

.hero-feature i{

    font-size:18px;

    color:#FFD76A;

}

.hero-feature:hover i{

    color:#FFFFFF;

}

.hero-feature span{

    font-size:15px;

    font-weight:600;

}



/*==========================================================================
NAVIGATION ARROWS
==========================================================================*/

.hero-control{

    width:70px;

    opacity:1;

}

.hero-control-box{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(12px);

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

    border-radius:50%;

    transition:all .35s ease;

}

.hero-control-box i{

    font-size:26px;

    color:#FFFFFF;

}

.hero-control:hover .hero-control-box{

    background:#D4AF37;

    transform:scale(1.08);

    border-color:#D4AF37;

}



/*==========================================================================
INDICATORS
==========================================================================*/

.hero-indicators{

    bottom:45px;

}

.hero-indicators button{

    width:48px !important;

    height:6px !important;

    margin:0 6px !important;

    border:none !important;

    border-radius:30px;

    background:#FFFFFF !important;

    opacity:.35;

    transition:all .35s ease;

}

.hero-indicators .active{

    width:70px !important;

    background:#D4AF37 !important;

    opacity:1;

}



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

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    z-index:30;

}

.hero-scroll a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#FFFFFF;

    text-decoration:none;

}

.hero-scroll-text{

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.8;

}

.hero-scroll-icon{

    font-size:28px;

    animation:scrollBounce 2s infinite;

}

@keyframes scrollBounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media (min-width:1600px){

    .hero-title{

        font-size:88px;

        max-width:900px;

    }

    .hero-description{

        font-size:24px;

        max-width:720px;

    }

}



/*==========================================================================
LAPTOP
==========================================================================*/

@media (max-width:1399.98px){

    .hero-title{

        font-size:64px;

    }

    .hero-description{

        font-size:20px;

    }

}



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

@media (max-width:991.98px){

    .hero-section{

        min-height:760px;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

        margin:auto;

    }

    .hero-title{

        font-size:54px;

    }

    .hero-description{

        font-size:19px;

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-control{

        display:none;

    }

}



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

@media (max-width:767.98px){

    .hero-section{

        min-height:720px;

    }

    .hero-overlay{

        background:

        linear-gradient(

            180deg,

            rgba(5,35,18,.88),

            rgba(5,35,18,.72),

            rgba(0,0,0,.45)

        );

    }

    .hero-content{

        padding-top:70px;

    }

    .hero-badge{

        font-size:11px;

        letter-spacing:1px;

        padding:10px 20px;

    }

    .hero-title{

        font-size:42px;

        margin-top:25px;

        margin-bottom:20px;

    }

    .hero-description{

        font-size:17px;

        line-height:1.7;

        margin-bottom:30px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:14px;

        width:100%;

    }

    .hero-btn-primary,

    .hero-btn-outline{

        width:100%;

        justify-content:center;

        text-align:center;

        padding:16px 24px;

    }

    .hero-features{

        gap:12px;

    }

    .hero-feature{

        width:100%;

        justify-content:center;

    }

    .hero-indicators{

        bottom:75px;

    }

    .hero-scroll{

        bottom:18px;

    }

}



/*==========================================================================
SMALL PHONES
==========================================================================*/

@media (max-width:480px){

    .hero-title{

        font-size:34px;

        line-height:1.15;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-badge{

        font-size:10px;

        padding:10px 16px;

    }

    .hero-feature{

        font-size:14px;

    }

}



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

@media (max-height:650px){

    .hero-section{

        min-height:650px;

    }

    .hero-title{

        font-size:38px;

    }

    .hero-description{

        margin-bottom:22px;

    }

    .hero-features{

        display:none;

    }

}



/*==========================================================================
ACCESSIBILITY
==========================================================================*/

.hero-btn-primary:focus,

.hero-btn-outline:focus,

.hero-control:focus{

    outline:3px solid rgba(255,255,255,.35);

    outline-offset:4px;

}



/*==========================================================================
REDUCED MOTION
==========================================================================*/

@media (prefers-reduced-motion:reduce){

    .hero-image{

        animation:none;

    }

    .hero-scroll-icon{

        animation:none;

    }

    .hero-btn-primary,

    .hero-btn-outline,

    .hero-feature,

    .hero-control-box{

        transition:none;

    }

}