/* ======================================================
   HERO BANNER
====================================================== */

.vp-hero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#fff;
    
    margin-bottom:40px;
    
    cursor:grab;
    
    user-select:none;
    
    -webkit-user-select:none;

}

.vp-hero-slider{

    position:relative;

    width:100%;

    height:100%;

}

.vp-slide{

    position:absolute;
    inset:0;

    opacity:0;
    visibility:hidden;

    transform:scale(1.01);
    
    transition: transform 6s ease-out;

    transition:
        opacity .8s ease,
        transform 5s ease;

}

.vp-slide.active{

    opacity:1;
    visibility:visible;

    position:relative;

    transform:scale(1);

}

.vp-slide img{

    display:block;

    width:100%;

    height:auto;
    
    pointer-events:none;

}

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

.vp-hero-prev,
.vp-hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

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

    color:#222;

    font-size:22px;

    cursor:pointer;

    z-index:20;

    transition:.25s ease;

    box-shadow:0 8px 24px rgba(0,0,0,.12);

}

.vp-hero-prev{

    left:24px;

}

.vp-hero-next{

    right:24px;

}

.vp-hero-prev:hover,
.vp-hero-next:hover{

    background:#6b8e23;

    color:#fff;

    transform:translateY(-50%) scale(1.05);

}

/* ======================================================
   DOTS
====================================================== */

.vp-hero-dots{

    position:absolute;

    left:50%;

    bottom:24px;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:20;

}

.vp-dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.25s ease;

}

.vp-dot.active{

    width:34px;

    border-radius:20px;

    background:#6b8e23;

}

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

@media(min-width:992px){

    .vp-hero{

        aspect-ratio:2241 / 702;

        max-height:702px;

    }

}

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

@media(max-width:991px){

    .vp-hero{

        aspect-ratio:2241 / 702;

    }

}

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

@media(max-width:768px){

    .vp-hero{

        aspect-ratio:1.35;

    }

    .vp-slide img{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center;

    }

    .vp-hero-prev,
    .vp-hero-next{

        width:40px;

        height:40px;

        font-size:18px;

    }

    .vp-hero-prev{

        left:12px;

    }

    .vp-hero-next{

        right:12px;

    }

    .vp-hero-dots{

        bottom:16px;

    }

}