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

html, body {
    height: 100%;
    font-family: Arial, sans-serif;
}

.slider {
    position: relative;
    width: 100%;
    height: 100vh; /* Full height of the viewport */
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%; /* Ensure slides take full height */
}

.slide {
    min-width: 100%;
    height: 100%; /* Ensure each slide takes full height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em; /* Increased font size for better visibility */
    color: white;
    position: relative; /* Position relative for absolute children */
}

.slide1 {
    background-image: url(./img-000/main-img/slider1.png);
    animation: fadeIn 1s;
    background-position: center;
    background-size: cover;
}

.slide2 {
    background-image: url(./img-000/main-img/slider2.png);
    animation: slideIn 1s;
    background-position: center;
    background-size: cover;
}

.slide3 {
    background-image: url(./img-000/main-img/slider3.png);
    animation: zoomIn 1s;
    background-position: center;
    background-size: cover;
}

.slide4 {
    background-image: url(./img-000/main-img/slider4.png);
    animation: fadeIn 1s; /* You can change this to any animation you prefer */
    background-position: center;
    background-size: cover;
}

/* Keyframes for animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes rotateIn {
    from { transform: rotate(-200deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}

.navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.sli-btn {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 10px 17px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 50%;
}
.sli-btn:hover{
    background-color: rgb(255 154 83);
    color: white;
    border: none;
    padding: 10px 17px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 50%;

}