/* --------------------------------
 * Text & Image Element Styles
 * -------------------------------- */

/* Variables */
:root {
    --ti-bg-color: #F2F1FC;
    --ti-fade-height: 50px; /* Define fade height */
    --ti-wrapper-padding: 0px !important; /* Define base inner padding */
}

/* New Outer Wrapper: Full-width, handles background color */
.ti-outer-wrapper {
    margin: 0; /* Changed margin: top 0px; to margin: 0; */
    padding-top: 30px;
    padding-bottom: 50px;
    position: relative; 
    overflow: hidden; 
}

/* Alternate background color on the outer wrapper */
.ti-outer-wrapper.ti-bg-alt {
    background-color: var(--ti-bg-color);
    padding-top: var(--ti-fade-height); 
    padding-bottom: var(--ti-fade-height); /* Default padding when bg is active, but no fade applied */
}

/* --- NEW FADE IMAGE STYLES (Copied from text-image-fade.css) --- */

/* Base styling for both fade images */
.ti-fade-top-image,
.ti-fade-bottom-image {
    position: relative;
    height: var(--ti-fade-height);
    width: 100%;
    /* Use background image properties to make the image repeat */
    background-size: auto 100%; /* Auto width, cover 100% height */
    background-repeat: repeat-x; /* Repeat horizontally */
    z-index: 1;
}

/* Adjust Outer Wrapper padding when fade images are present */
.ti-outer-wrapper.ti-bg-alt.ti-fade-top {
    padding-top: 0; /* Top padding removed because image provides separation */
}
.ti-outer-wrapper.ti-bg-alt.ti-fade-bottom {
    padding-bottom: 0; /* Bottom padding removed because image provides separation */
}

/* Adjust Inner Wrapper padding to compensate for removed outer padding */
.ti-outer-wrapper.ti-bg-alt.ti-fade-top .ti-wrapper {
    /* Base padding (20px) + offset (50px) */
    padding-top: calc(var(--ti-wrapper-padding) + var(--ti-fade-height)); 
}
.ti-outer-wrapper.ti-bg-alt.ti-fade-bottom .ti-wrapper {
    /* Base padding (20px) + offset (50px) */
    padding-bottom: calc(var(--ti-wrapper-padding) + var(--ti-fade-height));
}

/* Inner Wrapper: Constrains content to 1440px */
.ti-wrapper {
    max-width: 1440px;
    width: calc(100% - 40px);
    margin: 0 auto; /* Center the inner wrapper */
    display: flex;
    overflow: hidden;
    padding-top: var(--ti-wrapper-padding);
    padding-bottom: var(--ti-wrapper-padding);
    position: relative; /* Ensure content is above fade images */
    z-index: 2;
    margin-bottom:40px;
}

/* --- The rest of the styles are largely the same, but use CSS variables for consistency --- */

/* Columns */
.ti-column {
    width: 50%;
    box-sizing: border-box;
}

/* Image Column */
.ti-column-image {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 450px;
}

/* Text Column */
.ti-column-text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Layout Toggle */
.ti-layout-reversed {
    flex-direction: row-reverse;
}

/* Content Styling */
.ti-heading {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 2.5em; /* 48px */
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 0.5em 0;
}

.ti-content p {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1em; /* 16px */
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 1.5em 0;
    color:#000;
}

.ti-content ul{
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 1.5em 0;
    color: #000;
}

.ti-content li{
    margin-top:1.5em;
    margin-bottom:1.5em;
}

.ti-content ol{
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 1.5em 0;
    color: #000;
}

.ti-content p:last-child {
    margin-bottom: 0;
}

.ti-content h2{
font-family: 'Figtree', sans-serif;
    font-weight: 300;
    font-size: 1.6em;
    margin-bottom:10px;
}

.ti-content h3{
font-family: 'Figtree', sans-serif;
    font-weight: 300;
    font-size: 1.3em;
    margin-bottom:10px;
}

.ti-content h4{
font-family: 'Figtree', sans-serif;
    font-weight: 300;
    font-size: 1em;
    margin-bottom:10px;
}

/* Button */
.ti-button {
    display: inline-block;
    max-width: fit-content;
    border-radius: 25px;
    padding: 8px 16px;
    color: #ffffff;
    background-color: #94268F;
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    margin-top: 1.5em;
    transition: background-color 0.3s ease;
}

.ti-button:hover {
    background-color: #7a1f75;
}

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

.ti-outer-wrapper{
    padding-left:0px;
    padding-right:0px;
    padding-top:0px;
}

    .tissb-wrapper {
        margin-top:0px !important;
    }
    .ti-wrapper,
    .ti-layout-reversed {
        flex-direction: column;
    }

    .ti-column {
        width: 100%;
    }
    
    .ti-column-image {
        min-height: 250px;
        width: 80%;
        margin:0px auto;
    }

    .ti-column-text {
        padding: 30px;
    }

    .ti-heading {
        font-size: 2em; /* 36px */
    }

    /* Mobile Inner Padding Adjustment */
    .ti-outer-wrapper.ti-bg-alt.ti-fade-top .ti-wrapper {
        padding-top: 0px; 
    }
    .ti-outer-wrapper.ti-bg-alt.ti-fade-bottom .ti-wrapper {
        padding-bottom: calc(var(--ti-wrapper-padding) + var(--ti-fade-height));
    }
}