/* REMOVE ALL DEFAULT SPACING */
html,
body{
    margin:0;
    padding:0;
}

/* REMOVE GAP BETWEEN HEADER & SLIDER */
.header{
    margin-bottom:0;
    padding-bottom:0;
}

#home-slider{
    margin-top:0;
    padding-top:0;
    line-height:0;
}

/* HERO SECTION */
.desktop-slider,
.mobile-slider{
    margin-top:0;
    padding-top:0;
    display:block;
}


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

body{
    font-family:'Poppins',sans-serif;
    background:#f5f5f5;
    overflow-x:hidden;
}

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

.desktop-slider{
    width:100%;
    height:100vh;
    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: 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:70vh;
    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;
    }

}