/* Text with Image Widget Styles */
.text-with-image-widget {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
}

.text-image-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 80px;
    box-shadow: 0px 4px 30px #EEEEEE;
    border-radius: 32px;
    gap: 40px;

}

/* Content Section */
.text-image-content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
}

.text-image-subtitle {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.text-image-title {
    font-weight: 700;
    line-height: 1.3;
}

.text-image-description {
    line-height: 1.6;
}

/* Image Section */
.text-image-image {
    flex: 0 0 50%;
}

.text-image-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Image Position - Left (Default) */
.text-with-image-widget.image-left .text-image-container {
    flex-direction: row;
}

.text-with-image-widget.image-left .text-image-image {
    order: 1;
}

.text-with-image-widget.image-left .text-image-content {
    order: 2;
}

/* Image Position - Right */
.text-with-image-widget.image-right .text-image-container {
    flex-direction: row;
}

.text-with-image-widget.image-right .text-image-image {
    order: 2;
}

.text-with-image-widget.image-right .text-image-content {
    order: 1;
}

/* Responsive - Mobile (under 1000px) */
@media (max-width: 999px) {
    .text-with-image-widget{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .text-image-container {
        flex-direction: column !important;
        padding: 40px;
    }
    
    .text-image-content,
    .text-image-image {
        flex: 0 0 100% !important;
        order: unset !important;
    }
    
    /* Image always on top for mobile */
    .text-image-image {
        order: 1 !important;
    }
    
    .text-image-content {
        order: 2 !important;
    }
}
@media screen and (max-width:700px) {
    .text-with-image-widget {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .text-image-container {
        padding: 16px;
    }
    .text-image-content .text-image-subtitle{
        font-size: 14px !important;
    }
    .text-image-content .text-image-title {
        font-size: 24px !important;
    }
    .text-image-content .text-image-description {
        font-size: 14px !important;
    }
    .text-image-container .text-image-image img{
        max-height: 300px;
    }
    
    
    
}