/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
    background:#000;
}

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

.hero-section{
    width:100%;
    height:75vh;
    position:relative;
    overflow:hidden;
    background:#000;
}

/* =========================
   SLIDER
========================= */

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

/* =========================
   SLIDES
========================= */

.hero-slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:1s ease;
}

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

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

.hero-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    animation:zoom 8s linear infinite alternate;
}

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

@keyframes zoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.05);
    }
}

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

.hero-dots{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:10;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    transition:0.4s;
}

.dot.active{
    width:34px;
    border-radius:20px;
    background:#fff;
}

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

@media(max-width:992px){

    .hero-section{
        height:60vh;
    }
}

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

@media(max-width:768px){

    .hero-section{
        height:auto;
        overflow:hidden;
        background:transparent;
    }

    .hero-slider{
        height:auto;
    }

    .hero-slide{
        position:relative;
        height:auto;
    }

    .hero-slide:not(.active){
        display:none;
    }

    .hero-slide img{
        width:100%;
        height:auto;
        display:block;

        /* SHOW FULL IMAGE */
        object-fit:contain;
        object-position:center;

        animation:none;
        transform:none;
    }

    .hero-dots{
        bottom:10px;
    }
}

/* =========================
   EXTRA SMALL MOBILE
========================= */

@media(max-width:480px){

    .hero-slide img{
        width:100%;
        height:auto;
        object-fit:contain;
        object-position:center;
        transform:none;
    }

    .hero-dots{
        bottom:8px;
    }
}