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

 @media(max-width:768px){

  :root{
    --top-header-height:140px;
    --navbar-height:70px;
  }

}
/* ===================================
   DESKTOP SLIDER
=================================== */

.desktop-slider{
    width:100%;
      height:calc(
      100vh -
      var(--top-header-height) -
      var(--navbar-height)
    );
    position:relative;
    overflow:hidden;
}

/* SLIDES */

.desktop-slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;

    animation:desktopFade 24s infinite ease-in-out;
}

/* IMAGE */

.desktop-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    animation:zoomEffect 24s infinite ease-in-out;
}

/* DELAYS */

.desktop-slide:nth-child(1){
    animation-delay:0s;
}

.desktop-slide:nth-child(2){
    animation-delay:6s;
}

.desktop-slide:nth-child(3){
    animation-delay:12s;
}

.desktop-slide:nth-child(4){
    animation-delay:18s;
}

/* FADE ANIMATION */

@keyframes desktopFade{

    0%{
        opacity:0;
    }

    8%{
        opacity:1;
    }

    22%{
        opacity:1;
    }

    30%{
        opacity:0;
    }

    100%{
        opacity:0;
    }

}

/* SLOW ZOOM EFFECT */

@keyframes zoomEffect{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

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

.mobile-slider{
    display:none;
    width:100%;
     height:55vh;
    position:relative;
    overflow:hidden;
}

/* MOBILE SLIDES */

.mobile-slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;

    animation:mobileFade 20s infinite ease-in-out;
}

.mobile-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    animation:mobileZoom 20s infinite ease-in-out;
}

/* MOBILE DELAY */

.mobile-slide:nth-child(1){
    animation-delay:0s;
}

.mobile-slide:nth-child(2){
    animation-delay:5s;
}

.mobile-slide:nth-child(3){
    animation-delay:10s;
}

.mobile-slide:nth-child(4){
    animation-delay:15s;
}

/* MOBILE FADE */

@keyframes mobileFade{

    0%{
        opacity:0;
    }

    10%{
        opacity:1;
    }

    25%{
        opacity:1;
    }

    35%{
        opacity:0;
    }

    100%{
        opacity:0;
    }

}

/* MOBILE ZOOM */

@keyframes mobileZoom{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

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

.slider-dots{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:100;
}

.slider-dots span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);

    animation:dotAnimation 24s infinite;
}

/* DOT DELAYS */

.slider-dots span:nth-child(1){
    animation-delay:0s;
}

.slider-dots span:nth-child(2){
    animation-delay:6s;
}

.slider-dots span:nth-child(3){
    animation-delay:12s;
}

.slider-dots span:nth-child(4){
    animation-delay:18s;
}

/* ACTIVE DOT */

@keyframes dotAnimation{

    0%{
        background:#ff3b3b;
        transform:scale(1.4);
    }

    22%{
        background:#ff3b3b;
        transform:scale(1.4);
    }

    30%{
        background:rgba(255,255,255,0.5);
        transform:scale(1);
    }

    100%{
        background:rgba(255,255,255,0.5);
        transform:scale(1);
    }

}

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

@media(max-width:768px){

    .desktop-slider{
        display:none;
    }

    .mobile-slider{
        display:block;
    }

}


.desktop-slider,
.mobile-slider{
    margin-top:calc(
      var(--top-header-height) +
      var(--navbar-height)
    );
}