.elementor-5311 .elementor-element.elementor-element-45ef234a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5311 .elementor-element.elementor-element-45ef234a:not(.elementor-motion-effects-element-type-background), .elementor-5311 .elementor-element.elementor-element-45ef234a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-5311 .elementor-element.elementor-element-f61bdf4{--display:flex;}.elementor-5311 .elementor-element.elementor-element-6c0bb45a{--display:flex;}.elementor-5311 .elementor-element.elementor-element-38a8fdaa img{height:250px;}.elementor-5311 .elementor-element.elementor-element-23ca5cb6{--display:flex;}.elementor-5311 .elementor-element.elementor-element-4ea48ddc img{height:250px;}.elementor-5311 .elementor-element.elementor-element-3c82c5eb{--display:flex;}.elementor-5311 .elementor-element.elementor-element-2864ce1c img{height:250px;}.elementor-5311 .elementor-element.elementor-element-3da8807e{--display:flex;}.elementor-5311 .elementor-element.elementor-element-7b2181f4 img{height:250px;}.elementor-5311 .elementor-element.elementor-element-2cb2d452{--display:flex;}.elementor-5311 .elementor-element.elementor-element-743dd546 img{height:250px;}.elementor-5311 .elementor-element.elementor-element-29dd10e{--display:flex;}.elementor-5311 .elementor-element.elementor-element-df3db49 img{width:100%;height:250px;}@media(max-width:767px){.elementor-5311 .elementor-element.elementor-element-45ef234a{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}}/* Start custom CSS for container, class: .elementor-element-6c0bb45a */.elementor-5311 .elementor-element.elementor-element-6c0bb45a {
    --position: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-23ca5cb6 */.elementor-5311 .elementor-element.elementor-element-23ca5cb6 {
    --position: 2;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3c82c5eb */.elementor-5311 .elementor-element.elementor-element-3c82c5eb {
    --position: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3da8807e */.elementor-5311 .elementor-element.elementor-element-3da8807e {
    --position: 4;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2cb2d452 */.elementor-5311 .elementor-element.elementor-element-2cb2d452 {
    --position: 5;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-29dd10e */.elementor-5311 .elementor-element.elementor-element-29dd10e {
    --position: 6;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f61bdf4 */.elementor-5311 .elementor-element.elementor-element-f61bdf4 {
    --quantity: 6;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ef234a */.banner{
    width: 100%;
    height: 60vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 230px;
    height: 175px;
    top: 20%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 30s linear infinite;
    z-index: 2;
}
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
    }to{
        transform: perspective(1000px) rotateX(-10deg) rotateY(360deg);
    }
}

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


/* Mobile Responsiveness */
@media (max-width: 767px) {
  

  
    .banner {
        height: 25vh; /* Adjust banner height for mobile */
    }

    .banner .slider {
        width: 380px; /* Adjust width */
        height: 120px; /* Adjust height */
        top: 15%; /* Adjust top position */
        left: calc(50% - 60px); /* Center horizontally */
        animation: autoRunMobile 20s linear infinite; /* Faster animation for mobile */
        transform: perspective(800px); /* Adjust perspective for mobile */
    }

    /* Mobile Animation */
    @keyframes autoRunMobile {
        from {
            transform: perspective(900px) rotateX(-10deg) rotateY(0deg);
        }
        to {
            transform: perspective(500px) rotateX(-10deg) rotateY(360deg);
        }
    }

    .banner .slider .item {
        transform: 
            rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(100px); /* Reduce depth for mobile, bringing it closer */
    }

    .banner .slider .item img {
        width: 350px;
        height: 120px;
        object-fit: cover;
        border-radius: 10px; /* Smaller border radius for mobile */
    }
}

/* Very Small Screens */
@media (max-width: 480px) {
    .banner .slider {
        width: 120px;  /* Further reduce width for small screens */
        height: 250px; /* Further reduce height for small screens */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
        .banner {
        height: 45vh; /* Adjust banner height for mobile */
    }
   
}/* End custom CSS */