/*** Start Slider Header ***/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    overflow-x: hidden;
}

 /* Default image height for large screens */
 .home {
    height: 550px; /* Height for large screens */
    object-fit: cover; /* Ensure the image covers the area */
}

/* Medium screens (tablets) */
@media (max-width: 991.98px) {
    .home {
        height: 450px; /* Height for medium screens */
    }
}

/* Small screens (mobiles) */
@media (max-width: 767.98px) {
    .home {
        height: 250px; /* Height for small screens */
    }
}
.home{
    
    overflow: hidden;
    position: relative;
    background-color: #9c9c9c;
    color: #27c5de;

    .slide{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        z-index: 1;
        display: none;
        animation: slide 2s ease-in-out;

        .container{
            max-width: 1170px;
            margin: auto;
            flex-grow: 1;
            .caption{
                width: 50%;

                h1{
                    font-size: 45px;
                    color: #04fc4e;
                    margin: 0;
                }
                p{
                    font-size: 20px;
                    color: #ffffff;
                    margin: 2rem 0;
                }
                a{
                    display: inline-block;
                    padding: 10px 30px;
                    background-color: #ffffff;
                    text-decoration: none;
                    color: #ffffff;
                }
            }
        }
    }
    .controls{
        .prev,
        .next{
            position: absolute;
            z-index: 2;
            top: 50%;
            display: flex;
            height: 50px;
            width: 50px;
            margin-top: -20px;
            color: #ffffff;
            background-color: rgba(0,0,0, 0.5);
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .prev{
            left: 0;
        }
        .next{
            right: 0;
        }
    }
    .indicator{
        position: absolute;
        left: 45%;
        bottom: 5px;
        z-index: 2;
         > div{
            display: inline-block;
            text-align: center;
            width: 25px;
            line-height: 25px;
            margin: 0 2px;
            height: 25px;
            color: #ffffff;
            background-color: sandybrown;
            border-radius: 50%;
           cursor: pointer;
        }
    }
}
.home .slide.active {
    display: flex;
}

.home .slide.active .caption h1 {
    opacity: 0;
    animation: captionText .5s ease forwards;
    animation-delay: 1s;
}

.home .slide.active .caption p {
    opacity: 0;
    animation: captionText .5s ease forwards;
    animation-delay: 1.2s;
}

.home .slide.active .caption a {
    opacity: 0;
    animation: captionText .5s ease forwards;
    animation-delay: 1.4s;
}

.home .indicator div.active {
    background-color: #000;
}

@keyframes captionText {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*** End Slider Header ***/