.swiper {
    width: 100%;
    height: 100vh;
    position: relative;
}

.swiper-slide {
    position: relative;
}

.swiper-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.swiper-slide video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.caption {
    position: absolute;
    top: 35%;
    left: 10%;
    color: #ffffff;
    padding: 10px;
    max-width: 70%;
}

.caption h1 {
    font-size: 3.5rem;
    color: rgb(226 232 240);
    line-height: 1.2;
    white-space: nowrap;
}

.caption p {
    font-size: 2rem;
    color: rgb(241 245 249);
}

/* Küçük masaüstü ekranları ve tabletler için */
@media (max-width: 1024px) {
    .swiper {
        height: 80vh;
    }
}

/* Dikey tabletler ve büyük telefonlar için */
@media (max-width: 768px) {
    .swiper {
        height: 70vh;
    }

    .caption h1 {
        font-size: 3rem;
    }
}

/* Dikey telefonlar ve daha küçük ekranlar için */
@media (max-width: 480px) {
    .swiper {
        height: 60vh;
    }

    .caption h1 {
        font-size: 2.75rem;
    }
}