.elementor-4261 .elementor-element.elementor-element-1366652{--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-4261 .elementor-element.elementor-element-c6895a7{--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:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-4261 .elementor-element.elementor-element-02af7f9{--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;}@media(max-width:767px){.elementor-4261 .elementor-element.elementor-element-1366652{--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-e4e9cd1 *//* 1. Full Width Container with Red Border */
.scroll-wrapper-outer {
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    display: block; 
    /* Red Border/Outline */
    boder: 2px solid #FF0000;
}

/* Base Scroll Container Styling (Black Background) */
.scroll-container {
    background-color: #000000;
    color: #ffffff; 
    padding: 10px 0;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    scroll-behavior: smooth; 
    scroll-snap-type: x mandatory;
    width: 100%; 
}

/* Scrollbar hide */
.scroll-container::-webkit-scrollbar {
    display: none; 
}

/* 2. Content Centering (Page Width ke andar) */
.list-centered-wrapper {
    /* Page ki content width. Agar aap Elementor mein 1140px use karte hain, toh woh set karen. */
    max-width: 1170px; 
    margin: 0 auto;
    position: relative; 
}

.item-list {
    display: flex;
    gap: 110px; 
    padding: 0 16px; 
    width: fit-content; 
}

.info-item {
    min-width: 300px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap; 
    text-decoration: underline; 
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, 0.7); 
    scroll-snap-align: start; 
}

/* --- Alignment Rules --- */
.info-item.align-left {
    justify-content: flex-start;
}
.info-item.align-center {
    justify-content: center;
}
.info-item.align-right {
    /* Right alignment ke liye icon ko text se pehle dikhana */
    justify-content: flex-end;
    flex-direction: row-reverse; 
}
.info-item.align-right .icon {
    margin-left: 8px; 
    margin-right: 0; 
}


/* Icon Styling (Ensures white color) */
.icon {
    font-size: 18px;
    margin-right: 8px;
    color: #ffffff; 
}

/* Arrow Button Base Styling */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.5); 
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    line-height: 1;
    display: none; 
    /* Custom arrow styling for the screenshot request (sharp corners) */
    font-weight: bold; 
}

/* --- Mobile View Styles (Below 640px) --- */
@media (max-width: 639px) {
    /* Mobile par full width scrollable list chahiye */
    .list-centered-wrapper {
        max-width: none;
        margin: 0;
        
    }
   
    .item-list {
        padding: 0 10px;
        padding-bottom:10px !important;
    }
    .info-item {
        /* Single item width on mobile */
        min-width: calc(100vw - 40px);
        /* Mobile par sabko center rakhte hain */
        justify-content: center !important; 
        flex-direction: row !important; 
    }
    .info-item.align-right .icon {
        margin-right: 8px;
        margin-left: 0;
    }
    .scroll-container {
        height: 40px; 
    }
    /* Show arrows only on mobile */
    .slide-arrow {
        display: block;
    }
    #prev-btn {
        left: 0;
    }
    #next-btn {
        right: 0;
    }
}/* End custom CSS */