/* full Width Section css start*/


.full_width_flex h2.frame {
    text-align: center;
    background-color: #5C343400;
    padding: 0.15em;
    border-radius: 0;
    margin: 0.25em;
    margin-bottom: 0.5em !important;
    border: none;
    padding-bottom: 15px;
    border-bottom: solid 1px var(--super-section-border-color, rgba(255,255,255,0.2));
}

.full_width_flex .row{flex-direction: row-reverse;}

/* Remove gaps between sections */
body .full_width_flex {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: var(--super-section-outer-padding-top-bottom) 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    max-width: none !important;
    min-width: 100vw !important;
}

/* Container for content */
body .full_width_flex > div.super-section-content,
body .super-section-content {
    max-width: var(--super-section-container-max-width, 1200px) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-top: var(--super-section-container-padding-top, 20px) !important;
    padding-bottom: var(--super-section-container-padding-bottom, 20px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Override any theme padding */
body .full_width_flex > div.super-section-content > *:not(script),
body .super-section-content > *:not(script) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: var(--super-section-container-max-width, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* Responsive padding for different screen sizes */
@media only screen and (max-width: calc(var(--super-section-tablet-breakpoint, 768px) * 1px)) {
    body .full_width_flex > div.super-section-content > *:not(script),
    body .super-section-content > *:not(script) {
        padding-left: var(--super-section-tablet-side-padding, 40px) !important;
        padding-right: var(--super-section-tablet-side-padding, 40px) !important;
    }
}

@media only screen and (max-width: calc(var(--super-section-mobile-breakpoint, 430px) * 1px)) {
    body .full_width_flex > div.super-section-content > *:not(script),
    body .super-section-content > *:not(script) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Fix for WordPress adding p tags between shortcodes */
p:empty {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
}

/* Responsive font sizes for content - apply to container and let content inherit */
.super-section-content {
    /* Use clamp for smooth responsive scaling between mobile and desktop sizes */
    font-size: clamp(
        var(--super-section-font-size-mobile, 1.5rem), 
        1rem + var(--super-section-font-size-scaling, 1vw), 
        var(--super-section-font-size-desktop, 1.5rem)
    ) !important;
}

/* H2 tags will keep their natural responsive sizing */

/* Default layout and typography variables (overridden by dynamic settings) */
:root {
    --super-section-container-max-width: 1200px;
    --super-section-container-padding: 20px;
    --super-section-outer-padding-top-bottom: 2rem;
    --super-section-tablet-breakpoint: 768px;
    --super-section-mobile-breakpoint: 430px;
    --super-section-tablet-side-padding: 40px;
    --super-section-font-size-mobile: 1.5rem;
    --super-section-font-size-desktop: 1.5rem;
    --super-section-font-size-scaling: 1vw;
}

@media only screen and (max-width: 768px) {
    .super-section-content {
        /* Mobile devices use the clamp minimum font size */
        font-size: var(--super-section-font-size-mobile, 1.5rem) !important;
    }
}

.full_width_flex h2.frame span{color: #fff;}

.full_width_flex{color: #fff;}

.full_width_flex .column {
    font-size: clamp(1.1em, 1rem + 0.5vw, 1.2em);
}

.full_width_flex .column.full_width_col{ width:100%;}

.column.vm_column.full_width_txt {
    width: 100%;
}

.column.vm_column.full_width_txt .vertcal_middle_cont {
    position: relative;
}

.vertcal_middle_cont{
    position: absolute; 
    height: 100%; 
    width: auto;
    display: table; 
    padding-right: 10px;
}

.vm_middle {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

.vm_column{ position:relative;}

@media only screen and (max-width: 768px){
    .vertcal_middle_cont {
        position: relative;
    }
}

/* Super Section layout improvements */
.super_flex_wrap {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

.super-section-media-column {
    width: 50% !important;
}

.super-section-content-column {
    width: 50% !important;
}

.super-section-spacer {
    height: 20px !important;
}

/* Mobile view improvements for side-by-side content */
@media only screen and (max-width: 768px) {
    .super_flex_wrap {
        flex-direction: column !important;
        gap: 20px !important; /* Adds vertical spacing between stacked elements */
    }
    
    .super_flex_wrap > div,
    .super-section-media-column,
    .super-section-content-column {
        width: 100% !important;
    }
    
    /* Make images/videos always appear first on mobile */
    .super_flex_wrap > div:first-child:has(img),
    .super_flex_wrap > div:first-child:has(iframe) {
        order: -1;
    }
}

/* full Width Section css end*/