/* ==========================
   PAGE STYLING
========================== */

body{

    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    background:#f4f4f4;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:30px;
}

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

.slider{

    position:relative;

    width:90%;

    max-width:900px;

    height:500px;

    overflow:hidden;
    
    border-radius:10px;
    
    margin: 10px auto 20px;

    box-shadow:0 10px 20px rgba(0,0,0,.25);
}

/* ==========================
   INDIVIDUAL SLIDE
========================== */

.slide{

    position:absolute;

    width:100%;

    height:100%;

    opacity:0;

    transition:opacity .8s ease;

    pointer-events:none;
}

/* Active slide */

.slide.active{

    opacity:1;

    pointer-events:auto;
}

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

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

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

.overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    background:rgba(0,0,0,.55);

    color:white;

    padding:25px;

    box-sizing:border-box;
}

.overlay h2{

    margin-top:0;

    margin-bottom:10px;
}

.overlay p{

    margin:0;

    line-height:1.5;
}

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

.dots{

    margin-top:20px;

    display:flex;

    gap:12px;
}

/* ==========================
   INDIVIDUAL DOT
========================== */

.dot{

    width:15px;

    height:15px;

    border-radius:50%;

    background:#bbb;

    cursor:pointer;

    transition:background .3s;
}

/* Active dot */

.dot.active{

    background:#333;
}

/* Hover effect */

.dot:hover{

    background:#666;
}