@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
@import url('https://fonts.cdnfonts.com/css/poppins');

.banner {
    width: 100%;
    height: 100vh;
    overflow-x:hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space between slider and h1 */
    align-items: center;
    text-align: center;
}

.banner .slider {
    position: relative;
    width: 100%; /* Responsive size */
    height: 100px; /* Responsive size */
    transform-style: preserve-3d;
    transform: perspective(100px);
    animation: autoRun 20s linear infinite;
    z-index: 2;
    margin-top: 100px;  /*Add margin to separate from top */
}

@keyframes autoRun {
    from {
        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
    }
    to {
        transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
    }
}

.banner .slider .item {
    position: absolute;
    inset: 0;
    transform: 
        rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
        translateZ(550px);
}

.banner .slider .item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevent image stretching */
}

.banner .content {
    width: min(1400px, 100vw);
    z-index: 1;
    text-align: center;
    margin-bottom: 200px; /* Add margin to separate from bottom */
}

.banner .content h1 {
    font-family: 'ICA Rubrik';
    font-size: 4em;
    line-height: 1em;
    color: black;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .banner .slider {
        width: 40vmin; /* Adjust size for medium screens */
        height: 40vmin;
    }
    .banner .slider .item {
        transform: 
            rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
            translateZ(300px);
    }
    .banner .content h1 {
        font-size: 3em; /* Adjust font size */
    }
}

@media screen and (max-width: 767px) {
    .banner .slider {
        width: 30vmin; /* Adjust size for small screens */
        height: 30vmin;
    }
    .banner .slider .item {
        transform: 
            rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
            translateZ(200px);
    }
    .banner .content h1 {
        font-size: 2.5em; /* Adjust font size */
    }
}

/* Styles for screens 1200px and above */
@media (min-width: 1200px) {
    .banner .slider {
        width: 60vmin; /* Increase size for larger screens */
        height: 60vmin;
    }
    .banner .slider .item img{
        width:200px;
        height:300px;
    }
    .banner .slider .item {
        transform:  rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
            translateZ(500px); /* Adjust depth for larger screens */
    }
    .banner .content h1 {
        font-size: 5em; /* Increase font size */
    }
}
@media (min-width:512px){
    .banner .slider .item img{
        width:300px;
        height:300px;
    }
}

/* Styles for screens 1600px and above */
@media (min-width: 1600px) {
    .banner .slider {
        width: 70vmin; /* Further increase size */
        height: 70vmin;
    }
    .banner .slider .item {
        transform: 
            rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
            translateZ(700px); /* Further adjust depth */
    }
    .banner .content{
        margin-bottom:-20px;
    }
    .banner .content h1 {
        font-size: 6em; /* Further increase font size */
    }
}
@media (min-width:768px){
    .banner .slider .item img{
        width:150px;
    }
}
@media (min-width:700px){
    .banner .slider .item img{
        width:150px;
    }
       .banner .slider .item {
        transform: 
            rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
            translateZ(250px); /* Further adjust depth */
    }
}
@media (min-width:600px){
    .banner .slider .item img{
        width:100px;
    }
}