/* ========================================= */
/* Slider General & Swiper Base Styles       */
/* ========================================= */

/* Apply direction from parent */
#slides-preview[dir="rtl"] {
    direction: rtl;
}
#slides-preview[dir="ltr"] {
    direction: ltr;
}

.slider-container {
    height: 100%;
    width: 100%;
    /* Define variable for navigation color */
    /* --slider-navigation-color is set inline on the element */
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.slider-slide { /* Common styles for all slides */
    box-sizing: border-box;
    width: 100%;
    height: 100%; /* Ensure slides take full height */
    min-height: 100%; /* Ensure slides take full height */
    display: flex;
    /* align-items centers vertically for row direction (default) */
    align-items: center;
    /* justify-content centers vertically for column direction */
    justify-content: center;
    padding: 40px 50px; /* Default padding, can be overridden */
    background-repeat: repeat-x; /* Default repeat */
    background-size: auto; /* Default size */
    text-align: center; /* Default text align for inline/block content */
    line-height: 1.5;
    vertical-align: middle;
}

/* Swiper Navigation Color using CSS Variable */
.slider-container .swiper-pagination,
.slider-container .swiper-button-prev,
.slider-container .swiper-button-next {
    /* Use the variable set on .slider-container */
    color: var(--slider-navigation-color);
}
/* You might need !important depending on Swiper's specificity */
/* Or more specific selectors like: */
.slider-container .swiper-pagination-bullet-active {
    background: var(--slider-navigation-color);
}


/* ========================================= */
/* Template 1 Styles                         */
/* ========================================= */

.slider-template-1-slide {
    align-items: center;
    /* Specific overrides for template 1 if needed */
    /* background-color handled inline */
    /* background-image handled inline */
    /* Inherits flex row direction, align-items: center handles vertical centering */
}

.slider-template-1-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 100px; /* Gap between image and text */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.slider-template-1-image {
    max-width: 200px;
    min-width: 200px; /* Ensure image takes up space */
    height: auto;
    margin: 15px;
    margin-bottom: 100px;
    /* visibility is handled inline */
}
[dir="rtl"] .slider-template-1-image {
    margin-right: 200px;
    margin-left: 0;
}
[dir="ltr"] .slider-template-1-image {
    margin-right: 0;
    margin-left: 200px;
}

.slider-template-1-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Gap between text lines */
    flex: 1;
    min-width: 250px; /* Prevent text from becoming too narrow */
}

/* Directional text alignment for content */
[dir="rtl"] .slider-template-1-content {
    text-align: right;
}
[dir="ltr"] .slider-template-1-content {
    text-align: left;
}

.slider-template-1-text {
    margin: 0;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    /* Tablet styles */
    .slider-template-1-row {
        gap: 50px; /* Reduce gap on tablets */
    }
    
    .slider-template-1-image {
        margin-bottom: 50px; /* Reduce margin on tablets */
        margin-left:100px !important;
        margin-right:100px !important;
    }
}

@media (max-width: 576px) {
    /* Mobile styles */
    .slider-template-1-row {
        gap: 30px; /* Further reduce gap on mobile */
    }
    
    .slider-template-1-image {
        max-width: 150px; /* Smaller image on mobile */
        min-width: 150px;
        margin-bottom: 30px; /* Reduce margin on mobile */
        margin-left:100px !important;
        margin-right:100px !important;
        order: 1; /* Place image first */
    }
    
    .slider-template-1-content {
        order: 2; /* Place content second */
        width: 100%; /* Full width on mobile */
        text-align: center; /* Center text on mobile regardless of direction */
    }
    
    /* Override directional text alignment on mobile */
    [dir="rtl"] .slider-template-1-content,
    [dir="ltr"] .slider-template-1-content {
        text-align: center;
    }
    
    .slider-slide {
        padding: 20px 15px; /* Smaller padding on mobile */
    }
}


/* ========================================= */
/* Template 2 Styles                         */
/* ========================================= */

.slider-template-2-slide {
    flex-direction: column; /* Override common slide alignment */
    /* background-color handled inline */
    /* background-image handled inline */
    /* Inherits display: flex, justify-content: center handles vertical centering */
}

.slider-template-2-container {
    width: 100%;
    max-width: 1200px; /* Control max width */
    height: 100%; /* Ensure container takes full slide height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content WITHIN this container*/
}

.slider-template-2-first-row {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
    /* Optional: Add a border separator */
    /* border-bottom: 1px solid #eee; */
}

.slider-template-2-column {
    flex: 1; /* Allow columns to grow */
    min-width: 200px; /* Prevent columns from becoming too narrow */
    padding: 10px;
}

/* Directional text alignment */
[dir="rtl"] .slider-template-2-column,
[dir="rtl"] .slider-template-2-other-row {
    text-align: right;
}
[dir="ltr"] .slider-template-2-column,
[dir="ltr"] .slider-template-2-other-row {
    text-align: left;
}

.slider-template-2-item-title {
    /* text-decoration: underline; */ /* Add if underline is desired */
    text-underline-offset: 10px; /* Adjust as needed */
    margin: 10px 0;
}

.slider-template-2-subcontent-wrapper {
    /* Add styles if needed for the div wrapping subcontents */
}

.slider-template-2-subcontent-text {
    margin: 5px 0;
}

.slider-template-2-other-row {
    padding: 10px 0px;
    width: 100%;
    /* border-top: 1px solid #eee; */ /* Optional separator */
    margin-top: 15px; /* Space from the first row/previous item */
}

.slider-template-2-subcontent-row {
    display: flex;
    justify-content: space-between; /* Or start, depending on design */
    gap: 10px;
    flex-wrap: wrap; /* Allow subcontent items to wrap */
}

.slider-template-2-other-subcontent-text {
    margin: 5px 0;
    flex: 1; /* Allow text to take available space */
    min-width: 150px; /* Prevent excessive shrinking */
}


/* ========================================= */
/* Template 3 Styles                         */
/* ========================================= */

.slider-template-3-slide {
    flex-direction: column; /* Stack elements vertically */
    display: flex;
    justify-content: center; /* Center vertically */
    /* background-color handled inline */
    /* background-image handled inline */
    /* Inherits display: flex, justify-content: center handles vertical centering */
}

.slider-template-3-title {
    /* text-decoration: underline; */
    text-underline-offset: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.slider-template-3-content-row {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap; /* Allow items to wrap */
    width: 100%; /* Ensure row takes full width */
}

.slider-template-3-content-item {
    margin: 10px;
    flex: 1; /* Allow items to share space */
    min-width: 150px; /* Prevent items from becoming too narrow */
    text-align: center;
}

.slider-template-3-footer {
    text-align: center;
    margin-top: 20px;
}


/* ========================================= */
/* Template 4 Styles                         */
/* ========================================= */

.slider-template-4-slide {
    flex-direction: column;
    /* background-color handled inline */
    /* background-image handled inline */
    /* Inherits display: flex, justify-content: center handles vertical centering */
}
.slider-template-4-inner-container {
     width: 100%; /* Ensure it spans width */
     display: flex;
     flex-direction: column;
     align-items: center; /* Center title and content row horizontally */
     justify-content: center; /* Center vertically WITHIN this container */
     height: 100%; /* Take full slide height */
}


.slider-template-4-title {
    text-align: center;
    margin-bottom: 40px;
}

.slider-template-4-content-row {
    display: flex;
    justify-content: center; /* Center items horizontally */
    gap: 50px;
    flex-wrap: wrap; /* Allow items to wrap */
    align-items: start; /* Align items to the top */
    width: 100%; /* Ensure row uses available width */
    max-width: 1000px; /* Optional: Limit max width of the row */
}

.slider-template-4-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center circle and text vertically relative to each other */
    text-align: center;
    gap: 15px; /* Increased gap between circle and text */
}

.slider-template-4-item-circle {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    /* background-color is handled inline */
    color: #fff; /* Example: default text color for circle */
    font-weight: bold;
}

.slider-template-4-item-circle-text {
    /* Add styles for text inside circle if needed */
    padding: 5px; /* Prevent text touching edges */
}

.slider-template-4-item-description {
    text-align: center;
    margin-top: 0; /* Gap is handled by parent flexbox */
    max-width: 250px; /* Limit description width */
}


/* ========================================= */
/* Template 5 Styles                         */
/* ========================================= */

.slider-template-5-slide {
    position: relative;
    /* background-image and background-color handled inline */
    background-size: cover;
    background-position: center;
    color: #fff; /* Default text color for contrast */
    display: flex;
    /* These two properties center the child .slider-template-5-text container */
    /* align-items handles vertical centering as direction is row (default) */
    align-items: center;
    /* justify-content handles horizontal centering as direction is row (default) */
    justify-content: center;
    /* Ensure the slide itself takes up space */
    width: 100%;
    min-height: 400px; /* Adjust as needed, ensures slide has height */
    height: 100%; /* Or use a specific height/viewport height */
    /* Padding is inherited from .slider-slide */
    /* box-sizing is inherited from .slider-slide */
}

.slider-template-5-text {
    /* This centers the actual text lines within this container */
    text-align: center;
    /* Consider larger font size for impact */
    /* font-size: 1.5em; */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Enhanced shadow */
    position: relative; /* Needed for z-index */
    z-index: 2; /* Ensure text is above background gradient/image */
    /* The combination of the parent's flex centering and this text-align
       achieves full centering both for the block and the text within it. */
    /* Adding horizontal margins auto is redundant due to parent's justify-content: center, but doesn't hurt */
    margin-left: auto;
    margin-right: auto;

    /* Optional: Add padding inside the text container */
    padding: 15px;
    box-sizing: border-box; /* Ensure padding doesn't increase total size beyond max-width */
}

/* ========================================= */
/* Template 6 Styles                         */
/* ========================================= */

.slider-template-6-slide {
    padding: 0 !important;

}

.slider-template-6-slide .rx-container {
    width: 100% !important; /* Ensure full width */
    height: 100% !important; /* Ensure full height */
    margin: 0 !important; /* Remove default margin */
    padding: 0 !important; /* Remove default padding */
    position: relative;
    overflow: hidden;
    min-height: 500px; /* Minimum height to prevent collapse */
}

.slider-template-6-slide .rx-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.slider-template-6-slide .rx-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.slider-template-6-slide .rx-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
    color: white;
}

.slider-template-6-slide .rx-title {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
    color: white;
}

.slider-template-6-slide .rx-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 30px;
    opacity: 0.9;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
    line-height: 1.4;
    word-break: break-word;
    max-width: 800px;
    color: white;
}

.slider-template-6-slide .rx-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.slider-template-6-slide .rx-button-link {
    text-decoration: none;
    display: inline-block;
    color: inherit;
}

.slider-template-6-slide .rx-button {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 500;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-align: center;
    border: none;
    background-color: var(--dark-color, #333);
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.slider-template-6-slide .rx-button:hover {
    background-color: var(--primary-color, #555);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Direction-specific text alignment */
.slider-template-6-slide .rtl-text {
    direction: rtl;
    text-align: right;
}

.slider-template-6-slide .ltr-text {
    direction: ltr;
    text-align: left;
}

/* Tablet Styles */
@media (max-width: 768px) {
    .slider-template-6-slide .rx-container {
        min-height: 400px;
    }
    
    .slider-template-6-slide .rx-content {
        padding: 25px 15px;
    }
    
    .slider-template-6-slide .rx-title {
        font-size: clamp(1.6rem, 6vw, 2.8rem);
        margin-bottom: 12px;
    }
    
    .slider-template-6-slide .rx-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1.3rem);
        margin-bottom: 25px;
    }
    
    .slider-template-6-slide .rx-buttons {
        margin-top: 15px;
        gap: 12px;
    }
    
    .slider-template-6-slide .rx-button {
        padding: 10px 25px;
    }
    .slider-template-6-slide .rx-content-wrapper{
        margin-bottom: 300px;
    
    }
}

/* Mobile Styles */
@media (max-width: 480px) {
    .slider-template-6-slide .rx-container {
        min-height: 300px;
    }
    
    .slider-template-6-slide .rx-content {
        width: 95%;
        padding: 20px 10px;
    }
    
    .slider-template-6-slide .rx-title {
        font-size: clamp(1.4rem, 7vw, 2.2rem);
        margin-bottom: 10px;
    }
    
    .slider-template-6-slide .rx-subtitle {
        font-size: clamp(0.85rem, 4vw, 1.1rem);
        margin-bottom: 20px;
    }
    
    .slider-template-6-slide .rx-buttons {
        margin-top: 15px;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .slider-template-6-slide .rx-button-link {
        width: 100%;
        max-width: 300px;
        display: block;
    }
    
    .slider-template-6-slide .rx-button {
        padding: 12px 20px;
        width: 100%;
        box-sizing: border-box;
        font-size: clamp(0.9rem, 4vw, 1rem);
    }
    
    /* Center text on mobile regardless of direction */
    .slider-template-6-slide .rtl-text,
    .slider-template-6-slide .ltr-text {
        text-align: center;
    }
    .slider-template-6-slide .rx-content-wrapper{
        margin-bottom: 300px;
    
    }
}