/*********************************************
 * Column Padding
**********************************************/
/* Column spacing, revert to VC spacing for screen smaller 1024px */
@media only screen and (min-width:1025px) {
    .main_content .vc_row {margin-left:calc(var(--vii-gap-vc-column) * -1); margin-right:calc(var(--vii-gap-vc-column) * -1);}
    .main_content .vc_column_container > .vc_column-inner {padding-left:var(--vii-gap-vc-column); padding-right:var(--vii-gap-vc-column);}
    .main_content .vc_row.vc_row-no-padding .vc_column-inner {padding-left:0; padding-right:0;}
}


/*********************************************
 * Padding Top (Row has fill)
**********************************************/
.vc_row-has-fill {--vii-vc-row-fill-padding-top:var(--vii-spacing-default);}

/* Row inner spacing (adjust when changing row background color)
 * search keyword: vii_row_inner_spacing */
.vc_row-has-fill.vii-row-inner-padding--small {--vii-vc-row-fill-padding-top:var(--vii-spacing-72);}
@media only screen and (min-width:769px) {
    .vc_row-has-fill.vii-row-inner-padding--none {--vii-vc-row-fill-padding-top:0;}
}

/* Spacing: Visual Composer */
.main_content .wpb_content_element {margin-bottom:var(--vii-spacing-default);}
.main_content .vc_col-has-fill > .vc_column-inner,
.main_content .vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner,
.main_content .vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner,
.main_content .vc_row-has-fill > .vc_column_container > .vc_column-inner {
    padding-top:var(--vii-vc-row-fill-padding-top);
}
.main_content .vc_row-has-fill > .vc_column_container.vc_col-sm-12:not(:first-child) > .vc_column-inner {padding-top:0;}

/* Row has fill > one col 767 > only the first col has padding top */
@media only screen and (max-width:767px) {
    .main_content .vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container:not(:first-child) > .vc_column-inner,
    .main_content .vc_row-has-fill > .vc_column_container:not(:first-child) > .vc_column-inner {padding-top:0;}
}

/* Option to clear padding top: no-padding-top */
.vc_row.no-padding-top > .vc_column_container > .vc_column-inner {padding-top:0 !important;}

/* clear padding-top of the next row, use custom bottom spacing instead */
.main_content .vc_row-has-fill.vii-row-bg-color + .vc_row-full-width + .vc_row:not(.vii-row-bg-color) > .vc_column_container > .vc_column-inner {padding-top:0;}


/*********************************************
 * Row container
**********************************************/
.vii-row-container {padding-left:0; padding-right:0;}
@media only screen and (min-width:1025px) {
    .vii-row-container > .vc_row {padding-right:var(--vii-gap-container); padding-left:var(--vii-gap-container);}
}


/*********************************************
 * Row reverse columns on mobile
**********************************************/
@media only screen and (max-width:767px) {
    .vc_row.vii-reverse-col-mobile {
        display:flex;
        flex-direction:column-reverse;
    }
}


/*********************************************
 * Background style > Image Gradient
**********************************************/
.vc_row.vii-bg-image-gradient {overflow:unset; min-height:300px;}
.vc_row.vii-bg-image-gradient .vii-row__image-bg {
    position:absolute; z-index:-1; inset:calc(-1 * var(--vii-spacing-100)) 0 0; overflow:hidden;
}
.vc_row.vii-bg-image-gradient .vii-row__image-bg:before {
    content:"";
    width:100%; height:clamp(500px, 70%, 100%);
    background:linear-gradient(180deg, #fff 0%, #e2e4e3 73.88%, rgba(216, 218, 217, 0) 100%);
    position:absolute; left:0; bottom:34%; z-index:2;
}
.vc_row.vii-bg-image-gradient .vii-row__image-bg img {object-position:center bottom; transform:translateY(1px);}
.vc_row.vii-bg-image-gradient .vc_column_container {position:relative; z-index:1;}

/*********************************************
 * Background style > Image on top
**********************************************/
/* general */
.vc_row[class*="vii-bg-image-top-"] {
    --spacing-overlap:clamp(40px, 16vw, 245px);
    --background-color:var(--vii-color-white);
    --height-image:clamp(225px, 41.11vw, 592px);
    --spacing-lr-more:clamp(0px, calc((var(--vii-container) - 1096px) / 2), 100vw);
    --vii-container-small:790px;

    position:relative; background:var(--background-color);
    padding-top:calc(var(--height-image) - var(--spacing-overlap) + var(--vii-spacing-80));
}
.vc_row[class*="vii-bg-image-top-"] .vii-row__image-bg {
    position:absolute; top:0; right:0; left:0;
    height:var(--height-image);
}
.vc_row[class*="vii-bg-image-top-"] > .vc_column_container {position:relative; z-index:3;}
.vc_row[class*="vii-bg-image-top-"]:after {
    content:""; display:block !important;
    background:var(--background-color); border-radius:4px 4px 0 0; z-index:1;
    position:absolute; left:50%; top:calc(var(--height-image) - var(--spacing-overlap) + 1px); transform:translateX(-50%);
    width:clamp(300px, var(--vii-container), calc(var(--vii-100vw) - 2 * var(--vii-gap-vc-column)));
    height:var(--spacing-overlap);
}
@media only screen and (min-width:1181px) {
    .vc_row[class*="vii-bg-image-top-"] {
        padding-left:calc(var(--vii-gap-side) + var(--spacing-lr-more)) !important;
        padding-right:calc(var(--vii-gap-side) + var(--spacing-lr-more)) !important;
    }
}

/* background gray */
.vc_row.vii-bg-image-top-gray {--background-color:var(--vii-color-light-gray);}
.vc_row.vii-row-bg-style.vii-bg-gray {background-color:var(--vii-color-light-gray)}
body.home .vc_row:first-child.vii-row-bg-style.vii-bg-gray {margin-top:calc(-1 * var(--vii-spacing-default))}

/* Responsive */
@media only screen and (max-width:1180px) {
    .vc_row[class*="vii-bg-image-top-"]:after {width:calc(100% - 16px);}
}
@media only screen and (max-width:768px) {
    body.home:has(.vii-home-banner.has-content) .vc_row:first-child.vii-row-bg-style.vii-bg-gray {
        margin-top:calc(40px - var(--vii-spacing-default));
    }
}


/*********************************************
 * Wave decoration
**********************************************/
.vc_row[class*="vii-wave-decoration-"] {
    --vii-container-medium:897px;
    min-height:150px; position:relative;
}
.vc_row.vii-wave-decoration-left-n-right {--vii-container-medium:1004px;}
.vii-row__image-wave_decoration {
    --decoration-position:calc(-1 * var(--vii-gap-side) + var(--vii-gap-vc-column));
    position:absolute; bottom:0; pointer-events:none; overflow:hidden;
    width:clamp(250px, 36vw, 550px); aspect-ratio:512/135;
}
.vii-row__image-wave_decoration img {
    width:140%; aspect-ratio:736/283; max-width:unset;
    position:absolute; top:0; left:0; transform:translate(-1%, -22.5%)
}
.vii-row__image-wave_decoration.left {left:var(--decoration-position); transform:scaleX(-1)}
.vii-row__image-wave_decoration.right {right:var(--decoration-position);}


.vc_row.vii-wave-decoration {position:relative; min-height:150px;}
.vc_row.vii-wave-decoration:before {
    content:""; display:block !important;

    background-image:var(--vii-pattern-blue-small); background-repeat:no-repeat;
    background-size:clamp(550px, 51vw, 735px); background-position:0 0;
    pointer-events:none;
    position:absolute; bottom:0; right:calc(-1 * var(--vii-gap-side) + var(--vii-gap-vc-column));
}
.vc_row.vii-wave-decoration > div {position:relative; z-index:1;}

/* row fullwidth */
.vc_row[data-vc-full-width] .vii-row__image-wave_decoration {--decoration-position:0px}


/* row has background image on top */
.vc_row.vii-wave-decoration[class*="vii-bg-image-top-"]:before {
    aspect-ratio:735/315; background-image:var(--vii-pattern-blue); z-index:2;
    transform:translate(3%, 42.5%);
}

@media only screen and (max-width:1024px) {
    .vii-row__image-wave_decoration {--decoration-position:calc(-1 * var(--vii-gap-side) + 15px);}
}
@media only screen and (max-width:480px) {
    .vii-row__image-wave_decoration {width:clamp(100px, 50vw, 550px);}
}