.elementor-2097 .elementor-element.elementor-element-dc96de0{--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;--margin-top:05%;--margin-bottom:05%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:10%;--padding-right:10%;}.elementor-2097 .elementor-element.elementor-element-fab6b30{text-align:center;}.elementor-2097 .elementor-element.elementor-element-fab6b30 .elementor-heading-title{font-size:60px;font-weight:700;color:var( --e-global-color-0d70415 );}.elementor-2097 .elementor-element.elementor-element-cca1d33{--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-2097 .elementor-element.elementor-element-cbc0574{font-family:"Cormorant Garamond", Sans-serif;font-size:20px;}.elementor-2097 .elementor-element.elementor-element-4bbebead{--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-2097 .elementor-element.elementor-element-4bbebead:not(.elementor-motion-effects-element-type-background), .elementor-2097 .elementor-element.elementor-element-4bbebead > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2097 .elementor-element.elementor-element-2d6b38f4{--display:flex;}.elementor-2097 .elementor-element.elementor-element-37c0b2a9{--display:flex;}.elementor-2097 .elementor-element.elementor-element-39325ca0 img{height:250px;}.elementor-2097 .elementor-element.elementor-element-5cf53d5d{--display:flex;}.elementor-2097 .elementor-element.elementor-element-3456e849 img{height:250px;}.elementor-2097 .elementor-element.elementor-element-281f3f68{--display:flex;}.elementor-2097 .elementor-element.elementor-element-66d2d72d img{height:250px;}.elementor-2097 .elementor-element.elementor-element-1e6167e7{--display:flex;}.elementor-2097 .elementor-element.elementor-element-54fa1019 img{height:250px;}.elementor-2097 .elementor-element.elementor-element-46a7a4d4{--display:flex;}.elementor-2097 .elementor-element.elementor-element-2da9477f img{height:250px;}.elementor-2097 .elementor-element.elementor-element-0229572{--display:flex;}.elementor-2097 .elementor-element.elementor-element-0ab035c img{width:100%;height:250px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-2097 .elementor-element.elementor-element-dc96de0{--margin-top:15%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-2097 .elementor-element.elementor-element-fab6b30 .elementor-heading-title{font-size:40px;}.elementor-2097 .elementor-element.elementor-element-cca1d33{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-2097 .elementor-element.elementor-element-4bbebead{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}}/* Start custom CSS for container, class: .elementor-element-37c0b2a9 */.elementor-2097 .elementor-element.elementor-element-37c0b2a9 {
    --position: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf53d5d */.elementor-2097 .elementor-element.elementor-element-5cf53d5d {
    --position: 2;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-281f3f68 */.elementor-2097 .elementor-element.elementor-element-281f3f68 {
    --position: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1e6167e7 */.elementor-2097 .elementor-element.elementor-element-1e6167e7 {
    --position: 4;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-46a7a4d4 */.elementor-2097 .elementor-element.elementor-element-46a7a4d4 {
    --position: 5;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0229572 */.elementor-2097 .elementor-element.elementor-element-0229572 {
    --position: 6;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d6b38f4 */.elementor-2097 .elementor-element.elementor-element-2d6b38f4 {
    --quantity: 6;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4bbebead */.banner{
    width: 100%;
    height: 60vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 230px;
    height: 175px;
    top: 10%;
    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: 0%; /* 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 */
    }
}/* End custom CSS */