:root {
    font-size: 16px;
    /* Brand colors */
    --color-main: #0257A2;
    --color-sub1: #000000;
    --color-sub2: #B30000;
    /* Buttons & Links */
    --color-main-hover: #014179;
    --color-sub1-hover: #333333;
    --color-sub2-hover: #80000A;
    --color-main-hover-light: rgb(2, 87, 162, 0.1);
    --color-sub1-hover-light: rgba(0, 0, 0, 0.10);
    --color-sub2-hover-light: rgb(179, 0, 0, 0.1);
    --color-white-hover-light: rgb(255, 255, 255, 0.1);
    /* Support/Notification Colors */
    --success: #1EA463;
    --error: #DF1F1F;
    --warning: #FFA639;
    /* Support/Notification Colors Hover*/
    --success-hover: #2B8D6F;
    --error-hover: rgba(223, 31, 31, 0.10);
    --warning-hover: #FF8F05;
    /* Support/Notification Colors Hover Light*/
    --success-hover-light: rgba(55, 182, 143, 0.1);
    --error-hover-light: rgba(255, 51, 102, 0.1);
    --warning-hover-light: rgba(255, 166, 57, 0.1);
    /* Font colors */
    --font-color-head: #000000;
    --font-color-sub: #1A1A1A;
    --font-color-body: #383838;
    --font-color-link: #B30000;
    --font-color-visited: #670099;
    --font-color-inv: #FFFFFF;
    /* UI Colors */
    --color-ui-01: #FFFFFF;
    --color-ui-02: #F9FAFB;
    --color-ui-03: #F1F1F1;
    --color-ui-04: #DFDFDF;
    --color-ui-05: #84848F;
    --color-ui-06: #383838;
    --color-ui-07: #436CF2;
    --color-ui-08: #000000;
    /* Gradiant Background */
    --color-gradiant1: linear-gradient(90deg, #0278DF 0%, #0257A2 100%);
    --color-gradiant2: linear-gradient(90deg, #B30000 0%, #FF0016 100%);
    --color-gradiant3: linear-gradient(90deg, #0278DF 0%, #FF0016 100%);
    --color-gradiant4: linear-gradient(90deg, #0278DF 0%, #FF0016 100%);
    /* Font family */
    --font-family-01: 'Playfair Display', sans-serif;
    /* usually on heading */
    --font-family-02: 'Inter', sans-serif;
    /* usually on sub-heading */
    --font-family-03: 'Cabin', sans-serif;
    /* usually on paragraph & buttons */
    /* Typography - font size & line height */
    /* previously name as --typography-xxxx-large ... */
    --font-xxxx-large: 3rem;
    /* 48px */
    --font-xxx-large: 2.5rem;
    /* 40px */
    --font-xx-large: 2rem;
    /* 32px */
    --font-x-large: 1.5rem;
    /* 24px */
    --font-large: 1.125rem;
    /* 18px */
    --font-medium: 1rem;
    /* 16px */
    --font-small: 0.875rem;
    /* 14px */
    --font-x-small: 0.75rem;
    /* 12px */
    --font-xx-small: 0.625rem;
    /* 10px */
    /* grid / container */
    --gutter: 12px;
    /* 24px divided by 2 */
    --gutter-medium: 20px;
    /* 40px divided by 2 */
    /* spacers */
    --container-max-width: 1232px;
    --container-max-width-half: 616px;
    --container-padding-xx-large: 24px;
    --container-padding-x-large: 24px;
    --container-padding-large: 24px;
    --container-padding-medium: 32px;
    --container-padding-small: 24px;
}


/* Body Pragraph */

body {
    background-color: var(--color-ui-01);
}

body,
p,
.body-paragraph {
    font-family: var(--font-family-02);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
    color: var(--font-color-body);
}

body,
header,
footer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.body-large {
    font-family: var(--font-family-02);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
}

.body-small {
    font-family: var(--font-family-03);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-x-small);
    line-height: normal;
}

a,
.body-link {
    font-family: var(--font-family-02);
    color: var(--font-color-link);
    font-weight: 400;
    cursor: pointer;
    line-height: var(--font-x-large);
}

a:hover,
a.color-main:hover,
.body-link:hover {
    color: var(--color-sub2);
}

a.font-color-head:hover,
a.font-color-body:hover,
a .font-color-head:hover,
a .font-color-body:hover {
    color: var(--color-main);
}


/* Heading Styles */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ol,
dl {
    margin-bottom: 0;
}

h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5,
h6,
.heading-6 {
    font-family: var(--font-family-01);
    font-weight: 700;
    color: var(--font-color-head);
    line-height: normal;
    font-variant-ligatures: none;
}

h1,
.heading-1 {
    font-size: var(--font-xxxx-large);
    font-weight: 600;
    line-height: 120%;
}

h2,
.heading-2 {
    font-size: var(--font-xx-large);
}

h3,
.heading-3 {
    font-size: var(--font-x-large);
    font-family: var(--font-family-02);
}

h4,
.heading-4 {
    font-size: var(--font-large);
}

h5,
.heading-5 {
    font-size: var(--font-medium);
}

h6,
.heading-6 {
    font-size: var(--font-small);
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    h1,
    .heading-1,
    h2,
    .heading-2 {
        font-size: 2rem !important;
    }
}

@media screen and (max-width: 420px) {
    h1,
    .heading-1 {
        font-size: 2rem !important;
    }
}

.subhead-1,
.subhead-2 {
    font-family: var(--font-family-01);
    font-size: var(--font-x-small);
    line-height: var(--font-small);
    color: var(--font-color-head);
    font-style: normal;
    font-weight: 700;
    font-size: var(--font-x-small);
}

.subhead-2 {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* inner grid container (1024px) */

.inner-wrap {
    max-width: 1024px;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .inner-wrap {
        max-width: initial;
    }
}

hr {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid var(--color-ui-04);
}


/**********
[Foundation Style Customization / Overwrite]
**********/


/* Gutter regular */

.grid-padding-x>.cell,
.gutter.grid-padding-x>.cell {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.grid-padding-y>.cell,
.gutter.grid-padding-y>.cell {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
}

.grid-container:not(.full) .grid-padding-x,
.grid-container:not(.full) .grid-padding-x.gutter {
    margin-right: calc(-1 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
}


/* Gutter medium */

.gutter-medium.grid-padding-x>.cell {
    padding-left: var(--gutter-medium);
    padding-right: var(--gutter-medium);
}

.gutter-medium.grid-padding-y>.cell {
    padding-top: var(--gutter-medium);
    padding-bottom: var(--gutter-medium);
}

.grid-container:not(.full) .grid-padding-x.gutter-medium {
    margin-right: calc(-1 * var(--gutter-medium));
    margin-left: calc(-1 * var(--gutter-medium));
}

.grid-container:not(.full) .grid-padding-y.gutter-medium {
    margin-top: calc(-1 * var(--gutter-medium));
    margin-bottom: calc(-1 * var(--gutter-medium));
}

@media print,
screen and (min-width: 640px) {
    .grid-padding-x .grid-padding-x {
        margin-right: calc(-1 * var(--gutter));
        margin-left: calc(-1 * var(--gutter));
    }
}

.main-wrap {
    min-height: 90vh;
}

.wrapper {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--container-padding-xx-large);
    padding-right: var(--container-padding-xx-large);
}

.wrapper .grid-container {
    max-width: var(--container-max-width);
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.wrapper .wrapper {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (min-width: 1440px) {
    .wrapper {
        padding-left: var(--container-padding-xx-large);
        padding-right: var(--container-padding-xx-large);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    .wrapper {
        padding-left: var(--container-padding-x-large);
        padding-right: var(--container-padding-x-large);
    }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .wrapper {
        padding-left: var(--container-padding-large);
        padding-right: var(--container-padding-large);
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .wrapper {
        padding-left: var(--container-padding-medium);
        padding-right: var(--container-padding-medium);
    }
}

@media screen and (max-width: 639px) {
    .wrapper {
        padding-left: var(--container-padding-small);
        padding-right: var(--container-padding-small);
    }
}

.grid-container-half {
    max-width: var(--container-max-width-half);
}


/*********
SweetAlert Style
*********/

.swal2-popup {
    padding: 2rem !important;
}

.swal2-popup .swal2-actions {
    flex-direction: row-reverse !important;
}

.swal2-popup .swal2-actions button {
    font-family: var(--font-family-03) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px;
    line-height: var(--font-x-small) !important;
    border-radius: 4px;
    letter-spacing: 0px;
    padding: 10px 16px;
    margin: 0 12px;
}

.swal2-popup .swal2-actions button,
.swal2-popup .swal2-actions button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.swal2-popup .ins-loader-wrap--title {
    color: var(--font-color-head) !important;
    font-family: var(--font-family-02) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-xx-large) !important;
    line-height: normal !important;
}

.swal2-popup .ins-loader-wrap--message {
    color: var(--font-color-body) !important;
    font-family: var(--font-family-02);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
    white-space: pre-line;
}

.swal2-styled.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid var(--color-sub2) !important;
    color: var(--color-sub2) !important;
}

.swal2-styled.swal2-cancel:hover {
    background: var(--color-sub2-hover-light) !important;
}

.swal2-popup .warning.ins-loader-wrap--state svg * {
    fill: var(--warning) !important;
}


/* Default btn */

.swal2-popup .swal2-confirm {
    background-color: var(--color-sub2) !important;
    border: solid 1px var(--color-sub2) !important;
}

.swal2-actions:not(.swal2-loading) .swal2-cancel:hover {
    background-image: none !important;
    background-color: var(--color-sub2-hover-light) !important;
}

.swal2-popup .error.ins-loader-wrap--state svg * {
    fill: var(--error) !important;
}


/* Negative btn */

.swal2-popup .swal2-confirm.negative {
    background-color: var(--color-sub2) !important;
    border: solid 1px var(--color-sub2) !important;
}

.swal2-popup .success.ins-loader-wrap--state svg * {
    fill: var(--success) !important;
}


/* Positive btn */

.swal2-popup .swal2-confirm.green {
    background-color: var(--success) !important;
    border: solid 1px var(--success) !important;
}


/**********
[Insites Component Style Customization / Overwrite]
**********/

.button-large,
ins-button button.ins-button.size--large,
ins-button button.ins-button.size--large span {
    font-family: var(--font-family-03);
    font-weight: 700;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
    letter-spacing: 0px;
    text-transform: uppercase;
}

.button-default,
ins-button button.ins-button,
ins-button button.ins-button span {
    font-family: var(--font-family-03);
    font-weight: 700;
    font-size: var(--font-x-small);
    line-height: var(--font-large);
    letter-spacing: 0px;
    text-transform: uppercase;
}

.button-small,
ins-button button.ins-button.size--small:not(.is-loading) {
    padding-left: 8px;
    padding-right: 8px;
    background: var(--color-sub2);
}

ins-button button[type=submit].blue.is-loading:hover {
    background: var(--color-sub2) !important;
}

.button-small,
ins-button button.ins-button.size--small,
ins-button button.ins-button.size--small span {
    font-family: var(--font-family-03);
    font-weight: 700;
    font-size: var(--font-xx-small);
    line-height: var(--font-medium);
    letter-spacing: 0px;
    text-transform: uppercase;
}

ins-button button.white.solid,
ins-button button[type=button].white.solid,
ins-button button[type=reset].white.solid,
ins-button button[type=submit].white.solid {
    background-color: var(--font-color-inv);
    color: var(--color-main);
}

ins-button button[type=reset].blue,
ins-button button[type=reset].primary,
ins-button button[type=submit].blue,
ins-button button[type=submit].primary,
ins-button button[type=button].blue,
ins-button button[type=button].primary,
ins-button button.blue,
ins-button button.primary {
    color: var(--color-main);
}

ins-button button[type=reset].negative,
ins-button button[type=reset].red,
ins-button button[type=submit].negative,
ins-button button[type=submit].red,
ins-button button[type=button].negative,
ins-button button[type=button].red,
ins-button button.negative,
ins-button button.red {
    color: var(--error);
}

.ins-carousel_slides {
    background-color: initial;
}

.ins-carousel {
    position: relative;
}

ins-button.btn-icon-right .btn__icon {
    position: absolute;
    right: 0;
}

ins-button.btn-icon-right .btn__label {
    padding-right: 18px;
}

ins-textarea textarea,
.ins-textarea-wrap textarea {
    min-height: 110px;
    resize: none;
}

.form-label,
ins-input [class*=ins-] label,
[class*=ins-] label,
label,
.ins-form-field-wrap .ins-form-label {
    font-family: var(--font-family-02);
    font-weight: 600;
    font-size: var(--font-x-small);
    line-height: var(--font-medium);
    color: var(--font-color-head);
    margin-bottom: 8px;
}

.insites-form .list-checkbox_label {
    font-family: var(--font-family-02) !important;
    font-weight: 600 !important;
    font-size: var(--font-x-small) !important;
    line-height: var(--font-medium) !important;
    color: var(--font-color-head) !important;
}

ins-checkbox .ins-radio-checkbox label .ins-checkbox-radio-label {
    font-family: var(--font-family-02) !important;
    font-weight: 400 !important;
    font-size: var(--font-small) !important;
    line-height: var(--font-medium) !important;
    color: var(--font-color-head) !important;
}

.ins-form-field-wrap .ins-form-field:focus+.icon-wrap {
    color: var(--color-main);
}

.ins-form-field-wrap .ins-form-field {
    font-family: var(--font-family-02);
    font-weight: 400;
    padding: 12px;
    line-height: 16px;
    height: auto;
}

.ins-form-field-wrap .ins-form-field {
    border-color: var(--color-ui-04);
}

.ins-form-field-wrap .ins-form-field:hover {
    border-color: var(--color-ui-05);
}

.ins-form-field-wrap .ins-form-field:focus {
    border-color: var(--color-sub1);
}

.ins-form-field-wrap .ins-form-label.active {
    color: var(--font-color-head);
}

.form-error,
.ins-form-field-wrap.is-invalid .ins-form-error,
.form-field-wrapper.error-recaptcha .ins-form-error,
.list-field-wrap.is-invalid .list-field_error {
    font-family: var(--font-family-03);
    font-weight: 400;
    font-size: var(--font-x-small);
    line-height: normal;
    color: var(--error);
}

.form-field-wrapper.error-recaptcha .ins-form-error::after {
    content: "reCAPTCHA is required.";
}

.ins-form-field-wrap.is-invalid .ins-form-label {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field {
    color: var(--error);
    border-color: var(--error);
    background-color: var(--error-hover) !important;
}

.ins-form-field-wrap.is-invalid .ins-form-field::placeholder {
    color: var(--error) !important;
}

.ins-select-wrap.is-invalid .ins-form-error,
.ins-select-wrap.is-invalid .ins-select-value-input::placeholder {
    color: var(--error) !important;
}

.list-field-wrap.is-invalid .list-field_error,
.list-field-wrap.is-invalid .list-checkbox_error,
.insites-form .list-field-wrap.is-invalid .list-checkbox_error,
.insites-form .list-field-wrap.is-invalid .list-field_error {
    display: block !important;
    margin-top: 8px;
}

.ins-form-field-wrap.is-invalid .ins-form-field:-moz-placeholder {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field::-moz-placeholder {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field:-ms-input-placeholder {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field::-webkit-input-placeholder {
    color: var(--error);
}

.form-placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
::placeholder {
    font-family: var(--font-family-02);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-small);
}

.form-placeholder-multiline,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder,
textarea::placeholder {
    font-family: var(--font-family-02);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
}

.large-field .ins-form-field-wrap {
    margin-bottom: 0;
}

.large-field .ins-form-field-wrap .ins-form-field {
    padding: 12px;
    line-height: 16px;
    height: auto;
}

.large-field .ins-form-field-wrap .icon-wrap {
    right: 16px;
}


/* Button color=default/blue/primary */


/* Solid button */

ins-button button.blue.solid,
ins-button button.primary.solid,
ins-button button[type=button].blue.solid,
ins-button button[type=button].primary.solid,
ins-button button[type=reset].blue.solid,
ins-button button[type=reset].primary.solid,
ins-button button[type=submit].blue.solid,
ins-button button[type=submit].primary.solid {
    background-color: var(--color-main);
    color: var(--font-color-inv);
}

ins-button button[type=reset].blue.solid:not([disabled]):hover,
ins-button button[type=reset].primary.solid:not([disabled]):hover,
ins-button button[type=submit].blue.solid:not([disabled]):hover,
ins-button button[type=submit].primary.solid:not([disabled]):hover,
ins-button button[type=button].blue.solid:not([disabled]):hover,
ins-button button[type=button].primary.solid:not([disabled]):hover,
ins-button button.blue.solid:not([disabled]):hover,
ins-button button.primary.solid:not([disabled]):hover {
    background-color: var(--color-main-hover);
    color: var(--font-color-inv);
}


/* Trasparent button */

ins-button button[type=reset].blue:not([disabled]):hover,
ins-button button[type=reset].blue:not([disabled]):active,
ins-button button[type=reset].primary:not([disabled]):hover,
ins-button button[type=reset].primary:not([disabled]):active,
ins-button button[type=submit].blue:not([disabled]):hover,
ins-button button[type=submit].blue:not([disabled]):active,
ins-button button[type=submit].primary:not([disabled]):hover,
ins-button button[type=submit].primary:not([disabled]):active,
ins-button button[type=button].blue:not([disabled]):hover,
ins-button button[type=button].blue:not([disabled]):active,
ins-button button[type=button].primary:not([disabled]):hover,
ins-button button[type=button].primary:not([disabled]):active,
ins-button button.blue:not([disabled]):hover,
ins-button button.blue:not([disabled]):active,
ins-button button.primary:not([disabled]):hover,
ins-button button.primary:not([disabled]):active {
    background-color: var(--color-white-hover-light);
    color: var(--color-main-hover);
}


/* Outlined */

ins-button button[type=reset].blue.outlined,
ins-button button[type=reset].primary.outlined,
ins-button button[type=submit].blue.outlined,
ins-button button[type=submit].primary.outlined,
ins-button button[type=button].blue.outlined,
ins-button button[type=button].primary.outlined,
ins-button button.blue.outlined,
ins-button button.primary.outlined {
    background: none;
    border: 1px solid var(--color-main-hover);
    color: var(--color-main-hover);
}


/* Button color="sub1" */


/* Solid button */

ins-button button.sub1.solid,
ins-button button[type=button].sub1.solid,
ins-button button[type=reset].sub1.solid,
ins-button button[type=submit].sub1.solid {
    background-color: var(--color-sub1);
    color: var(--font-color-inv);
}

ins-button button[type=reset].sub1.solid:not([disabled]):hover,
ins-button button[type=submit].sub1.solid:not([disabled]):hover,
ins-button button[type=button].sub1.solid:not([disabled]):hover,
ins-button button.sub1.solid:not([disabled]):hover {
    background-color: var(--color-sub1-hover);
    color: var(--font-color-inv);
}


/* Transparent button */

ins-button button[type=reset].sub1,
ins-button button[type=submit].sub1,
ins-button button[type=button].sub1,
ins-button button.sub1 {
    color: var(--color-sub1);
    background-color: transparent;
}

ins-button button[type=reset].sub1:not([disabled]):hover,
ins-button button[type=reset].sub1:not([disabled]):active,
ins-button button[type=submit].sub1:not([disabled]):hover,
ins-button button[type=submit].sub1:not([disabled]):active,
ins-button button[type=button].sub1:not([disabled]):hover,
ins-button button[type=button].sub1:not([disabled]):active,
ins-button button.sub1:not([disabled]):hover,
ins-button button.sub1:not([disabled]):active {
    background-color: var(--color-white-hover-light, rgba(126, 22, 208, 0.1));
    color: var(--color-sub1-hover);
}


/* Outlined */

ins-button button[type=reset].sub1.outlined,
ins-button button[type=submit].sub1.outlined,
ins-button button[type=button].sub1.outlined,
ins-button button.sub1.outlined {
    background: none;
    border: 1px solid var(--color-sub1-hover);
    color: var(--color-sub1-hover);
}


/* Button color="sub2" */


/* Solid button */

ins-button button.sub2.solid,
ins-button button[type=button].sub2.solid,
ins-button button[type=reset].sub2.solid,
ins-button button[type=submit].sub2.solid {
    background-color: var(--color-sub2, #D32F19);
    color: var(--font-color-inv);
}

ins-button button[type=reset].sub2.solid:not([disabled]):hover,
ins-button button[type=submit].sub2.solid:not([disabled]):hover,
ins-button button[type=button].sub2.solid:not([disabled]):hover,
ins-button button.sub2.solid:not([disabled]):hover {
    background-color: var(--color-sub2-hover, #D32F19);
    color: var(--font-color-inv);
}


/* Transparent button */

ins-button button[type=reset].sub2,
ins-button button[type=submit].sub2,
ins-button button[type=button].sub2,
ins-button button.sub2 {
    color: var(--color-sub2);
    background-color: transparent;
}

ins-button button[type=reset].sub2:not([disabled]):hover,
ins-button button[type=reset].sub2:not([disabled]):active,
ins-button button[type=submit].sub2:not([disabled]):hover,
ins-button button[type=submit].sub2:not([disabled]):active,
ins-button button[type=button].sub2:not([disabled]):hover,
ins-button button[type=button].sub2:not([disabled]):active,
ins-button button.sub2:not([disabled]):hover,
ins-button button.sub2:not([disabled]):active {
    background-color: var(--color-sub2-hover-light, rgba(211, 47, 25, 0.1));
    color: var(--color-sub2-hover, #D32F19);
}


/* Outlined */

ins-button button[type=reset].sub2.outlined,
ins-button button[type=submit].sub2.outlined,
ins-button button[type=button].sub2.outlined,
ins-button button.sub2.outlined {
    background: none;
    border: 1px solid var(--color-sub2-hover);
    color: var(--color-sub2-hover);
}

ins-button button,
ins-button button span {
    font-family: var(--font-family-03);
}

ins-button+ins-button button,
a.ins-button+ins-button button,
ins-button+a.ins-button button {
    margin-left: calc(2 * var(--gutter));
}

@media screen and (max-width: 639px) {
    .btn-container ins-button button,
    ins-button+ins-button button,
    a.ins-button+ins-button button {
        width: 100%;
        margin-left: 0;
        margin-bottom: calc(2 * var(--gutter));
    }
    .btn-container a.ins-button+ins-button:last-child button {
        margin-bottom: 0;
    }
}

ins-button.full {
    display: block;
}

ins-button.full button {
    width: 100%;
}

ins-card.full {
    width: 100%;
}

.ins-accordion-item.open>.ins-accordion-item_header>.inner-head {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--font-color-inv);
}

.ins-accordion-item_header>.inner-head:hover {
    border-color: var(--color-main);
}

.ins-carousel_ctrl-btns,
.ins-carousel_ctrl-btns .btn__icon {
    color: var(--color-main);
}

.ins-carousel_paginations .pagination {
    width: 14px;
    height: 14px;
    margin-left: 18px;
    background-color: var(--color-ui-01)
}

.ins-carousel_paginations .pagination.active {
    background-color: var(--color-sub2);
}

#client-list-carousel-small .ins-carousel_paginations .pagination {
    background: var(--color-ui-03);
}

#client-list-carousel-small .ins-carousel_paginations .pagination.active {
    background-color: var(--color-sub2) !important;
}

.ins-select-wrap.activated .ins-select-options-wrap {
    z-index: 999;
}

.ins-select-wrap.activated .ins-select-value-wrap,
.ins-select-wrap.activated .ins-select-options-wrap {
    border-color: var(--color-sub1);
}

.ins-select-wrap.is-invalid .ins-select-value-wrap,
.ins-select-wrap.is-invalid.activated .ins-select-options-wrap {
    border-color: var(--error);
}

.grid-padding-x>.cell ins-checkbox .ins-radio-checkbox,
.grid-padding-x>.cell ins-radio .ins-radio-checkbox {
    padding: 0;
}

ins-toggle-switch .v-switch .ins-switch {
    height: initial;
    margin-bottom: calc(2 * var(--gutter));
}

.ins-form-field-wrap,
.ins-select-wrap,
ins-checkbox .ins-radio-checkbox label,
ins-radio .ins-radio-checkbox label,
ins-code-editor .CodeMirror,
ins-editor .ins-editor {
    margin-bottom: calc(2 * var(--gutter));
}

ins-checkbox.inline .ins-radio-checkbox label .ins-checkbox-radio-label,
ins-radio.inline .ins-radio-checkbox label .ins-checkbox-radio-label {
    display: inline;
    line-height: normal;
}

ins-checkbox .ins-radio-checkbox .ripple-check:checked::after,
ins-radio .ins-radio-checkbox .ripple-check:checked::after,
ins-checkbox .ins-radio-checkbox .ripple-check:checked,
ins-radio .ins-radio-checkbox .ripple-check:checked {
    background: var(--color-sub2);
}



/* Step inactive - default state */

.ins-step_indicator {
    border-color: var(--color-ui-05);
    background-color: var(--font-color-inv);
}

.ins-step_progress-bar {
    background-color: var(--color-ui-04);
}

.ins-step_description {
    color: var(--color-ui-05);
}


/* Temp Fix overwrite CSS  -  https://pm.cbo.me/#/tasks/18212852*/

ins-select .ins-select-wrap .ins-select-value-input {
    /* padding-right: 30px; */
}

.shrink ins-select .ins-select-wrap .ins-select-value-input {
    /* padding-right: initial; */
}


/* Step active */

.ins-step.active .ins-step_indicator {
    border-color: var(--font-color-head);
    background: var(--color-ui-01);
}

.ins-step.active .ins-step_description {
    color: var(--font-color-head);
}

ins-steps.hydrated[clickable] ins-step:not([disabled]) .ins-step_details:hover .ins-step_indicator {
    border-color: var(--font-color-head);
}


/* Step completed */

.ins-step.completed .ins-step_indicator {
    border-color: var(--success);
    background: var(--success);
    color: var(--font-color-inv);
}

.ins-step.completed .ins-step_progress-bar {
    background-color: var(--color-ui-04);
}

.ins-step.completed .ins-step_description {
    color: var(--color-main);
}


/* Step has error */

.ins-step.has-error .ins-step_indicator,
.ins-step.active.has-error .ins-step_indicator {
    border-color: var(--error);
    color: var(--font-color-inv);
}

.ins-step.has-error .ins-step_progress-bar,
.ins-step.active.has-error .ins-step_progress-bar,
.ins-step.active.has-error .ins-step_dot {
    background-color: var(--error);
}

.ins-step.has-error .ins-step_description,
.ins-step.active.has-error .ins-step_description {
    color: var(--error);
}


/* Override insites-form .column for Insites Telephone */

.insites-form.insites-form-code .insites-form-grid ins-input-tel .ins-input-tel-wrap .column-1,
.insites-form.insites-form-code .insites-form-grid ins-input-tel .column-2 {
    width: auto;
}

.insites-form .insites-form-grid ins-input-tel .column-1:not(.insites-form.insites-form-grid.col-container.column-1) {
    width: auto;
}

.insites-form.insites-form-code ins-input-tel .column-1:not(.insites-form.insites-form-code.insites-form-grid.col-container.column-1) {
    margin: 0px;
}

.insites-form.insites-form-code ins-input-tel .column-2:not(.insites-form.insites-form-code.insites-form-grid.col-container.column-2) {
    margin: 0px 8px 9px;
}


/**********[GENERAL / Utilitities]**********/


/*-- Font Colors ----*/

.color-main,
.color-main:visited {
    color: var(--color-main);
}

.color-sub1 {
    color: var(--color-sub1);
}

.color-sub2 {
    color: var(--color-sub2);
}

.font-color-head,
.font-color-head:visited {
    color: var(--font-color-head);
}

.font-color-sub {
    color: var(--font-color-sub);
}

.font-color-body {
    color: var(--font-color-body);
}

.font-color-link {
    color: var(--font-color-link);
}

.font-color-visited {
    color: var(--font-color-visited);
}

.font-color-inv {
    color: var(--font-color-inv);
}

.success {
    color: var(--success);
}

.error {
    color: var(--error);
}

.warning {
    color: var(--color-sub2);
    font-family: var(--font-family-02);
    font-size: var(--font-x-small);
}

.success-hover {
    color: var(--success-hover);
}

.error-hover {
    color: var(--error-hover);
}

.warning-hover {
    color: var(--warning-hover);
}

.success-hover-light {
    color: var(--success-hover-light);
}

.error-hover-light {
    color: var(--error-hover-light);
}

.warning-hover-light {
    color: var(--warning-hover-light);
}


/*-- Font Size --*/

.font-xxxx-large {
    font-size: var(--font-xxxx-large);
}

.font-xxx-large {
    font-size: var(--font-xxx-large);
}

.font-xx-large {
    font-size: var(--font-xx-large);
}

.font-x-large {
    font-size: var(--font-x-large);
}

.font-large {
    font-size: var(--font-large);
}

.font-medium {
    font-size: var(--font-medium);
}

.font-small {
    font-size: var(--font-small);
}

.font-x-small {
    font-size: var(--font-x-small);
}

.font-xx-small {
    font-size: var(--font-xx-small);
}


/* Background colors */

.bg-color-ui-01 {
    background-color: var(--color-ui-01);
}

.bg-color-ui-02 {
    background-color: var(--color-ui-02);
}

.bg-color-ui-03 {
    background-color: var(--color-ui-03);
}

.bg-color-ui-04 {
    background-color: var(--color-ui-04);
}

.bg-color-ui-05 {
    background-color: var(--color-ui-05);
}

.bg-color-ui-06 {
    background-color: var(--color-ui-06);
    color: var(--font-color-inv);
}

.bg-color-ui-07 {
    background-color: var(--color-ui-07);
    color: var(--font-color-inv);
}

.bg-color-main {
    background-color: var(--color-main);
    color: var(--font-color-inv);
}


/*-- Border color --*/

.border-color-ui-01 {
    border-color: var(--color-ui-01);
}

.border-color-ui-02 {
    border-color: var(--color-ui-02);
}

.border-color-ui-03 {
    border-color: var(--color-ui-03);
}

.border-color-ui-04 {
    border-color: var(--color-ui-04);
}

.border-color-ui-05 {
    border-color: var(--color-ui-05);
}

.border-color-ui-06 {
    border-color: var(--color-ui-06);
}

.border-color-ui-07 {
    border-color: var(--color-ui-07);
}

.border-color-main {
    border-color: var(--color-main);
}


/*-- UI --*/

.ui-tags [class^='icon-'],
ins-tag span.tagged span[class^='icon-'],
ins-tag span.ins-tag span[class^='icon-'] {
    margin-right: 8px;
}

.ui-tags,
ins-tag span.ins-tag {
    font-family: var(--font-family-01);
    font-weight: 700;
    font-size: var(--font-xx-small);
    line-height: var(--font-medium);
    padding: 4px 16px;
    border-radius: 2px;
}

.ui-notifications {
    font-family: var(--font-family-01);
    font-weight: 400;
    font-size: var(--font-xx-small);
    line-height: normal;
}

.ui-sidebar {
    font-family: var(--font-family-01);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
}

.ui-timeline {
    font-family: var(--font-family-01);
    font-weight: 400;
    font-size: var(--font-xx-small);
    line-height: var(--font-medium);
}

.ui-tooltip {
    font-family: var(--font-family-01);
    font-weight: 700;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
}


/*-- Spacers --*/

.spacer {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 24px;
}

.spacer.xx-small {
    padding-bottom: 4px;
}

.spacer.x-small {
    padding-bottom: 8px;
}

.spacer.small {
    padding-bottom: 16px;
}

.spacer.large {
    padding-bottom: 32px;
}

.spacer.x-large {
    padding-bottom: 40px;
}

.spacer.xx-large {
    padding-bottom: 48px;
}

.spacer.xxx-large {
    padding-bottom: 56px;
}

.spacer.xxxx-large {
    padding-bottom: 80px;
}

.spacer.section {
    padding-bottom: 128px;
}

.spacer.section-large {
    padding-bottom: 160px;
}

@media screen and (min-width: 1440px) {
    /* insert spacer adjusment for xx-large */
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    /* insert spacer adjusment for x-large */
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    /* insert spacer adjusment for large */
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    /* insert spacer adjusment for medium */
}

@media screen and (max-width: 639px) {
    /* insert spacer adjusment for small */
    .spacer.section-large,
    .spacer.section {
        padding-bottom: 80px;
    }
    .spacer.xxxx-large {
        padding-bottom: 40px;
    }
}

.placeholder-img {
    background: var(--color-ui-03);
    text-align: center;
    font-size: 48px;
    color: #CCCED3;
    height: 100%;
}

.vertical-align-middle {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

.btn-full ins-button,
.btn-full button {
    width: 100%;
}

.error-message {
    color: var(--error);
    font-family: var(--font-family-03);
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px;
}

.preserve-line-break {
    white-space: pre-wrap;
}


/*-- FONTS --*/

.capitalize {
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

.inline-list li {
    display: inline-block;
    padding: 0 15px;
}

.inline-list li:first-child {
    padding-left: 0;
}

.inline-list li:last-child {
    padding-right: 0;
}


/********** [Header] **********/

.background-color-gradiant1 {
    background: var(--color-gradiant1);
    color: var(--font-color-inv);
}

.bg-color-main p,
.background-color-gradiant1 p,
.bg-color-main h1,
.background-color-gradiant1 h1 {
    color: var(--font-color-inv);
}

.component-background {
    background: url('../images/components.jpg') no-repeat;
    background-size: cover;
    color: var(--font-color-inv);
}

.component-background .heading-2 {
    color: var(--font-color-inv);
}

.header-top-bar .logo,
.header .logo {
    height: 56px;
}

.top-bar,
.header-top-bar {
    background-color: var(--color-ui-01);
    padding: 24px .9375rem;
}

.header-top-bar a,
.top-bar-right a {
    padding-right: 30px;
    font-weight: 700;
    position: relative;
    font-size: var(--font-x-small);
}

.header-top-bar a:last-child,
.top-bar a:last-child {
    padding-right: 0;
}

.header-top-bar ins-drop-down.hydrated,
.top-bar-right ins-dropdown.hydrated {
    display: inline-block;
}

.header-top-bar .top-bar-right ins-dropdown .ins-dropdown_menu,
.top-bar .top-bar-right ins-dropdown .ins-dropdown_menu {
    right: 0px;
}

.header {
    transition-property: transform;
    transition-duration: 400ms;
    will-change: transform;
}

.header .nav-bar ins-dropdown .ins-dropdown_menu {
    padding-top: 0px;
}

.header .nav-bar ins-dropdown.active .ins-dropdown_label,
#mobile-menu ins-accordion-link.active .ins-accordion-link_link {
    color: var(--color-main);
}

.header .nav-bar ins-dropdown.active .ins-dropdown_menu-card li.li-active a {
    background: none;
    color: var(--color-main);
}

.header-top-bar ins-dropdown {
    display: inline-block;
}

.header-top-bar ins-dropdown .ins-dropdown_menu {
    text-align: left;
}

.header-top-bar .cart-count,
.header .top-bar .cart-count {
    font-family: var(--font-family-01);
    font-size: var(--font-xx-small);
    color: var(--font-color-inv);
    background-color: var(--error);
    position: absolute;
    top: -7px;
    right: -7px;
    height: auto;
    line-height: normal;
    padding: 3px 6px;
    border-radius: 50%;
}

.page-header-wrap {
    position: relative;
}

.page-header-wrap .img-wrap img {
    width: 100%;
}

.page-heading {
    max-width: var(--container-max-width);
    margin: 0 auto;
}


/* IF page header has image  */

.page-header-wrap .img-wrap+.page-heading {
    position: absolute;
    left: 50%;
    margin-left: -24em;
    top: 0;
    height: 100%;
    color: var(--font-color-inv);
}


/* [Header Dropdown Overwrite] */

.header-top-bar .ins-dropdown_label .icon-angle-down,
.header .top-bar .ins-dropdown_label .icon-angle-down {
    position: relative;
    top: 0px;
    right: 0px;
    margin-left: 11px;
}

.header-top-bar [class^="icon-"],
.header-top-bar [class*=" icon-"],
.header .top-bar [class^="icon-"],
.header .top-bar [class*=" icon-"] {
    vertical-align: middle;
    font-size: var(--font-x-small);
    margin-right: 5px;
}

.header-top-bar .ins-dropdown_label,
.header .top-bar .ins-dropdown_label {
    color: var(--font-color-inv);
    font-family: var(--font-family-02);
    font-weight: 400;
    line-height: var(--font-x-large);
    padding-left: 0px;
}

.header-top-bar .ins-dropdown_label::before,
.header .top-bar .ins-dropdown_label::before {
    content: "\e908";
    font-family: 'insites-20-fonticon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: 6px;
    vertical-align: middle;
    font-size: var(--font-medium);
}

.header-top-bar .ins-dropdown_menu ul,
.header .top-bar .ins-dropdown_menu ul {
    list-style: none;
    background-color: var(--color-ui-01);
    margin-left: 0px;
}

.header-top-bar .ins-dropdown_menu a,
.header .top-bar .ins-dropdown_menu a {
    display: block;
    padding: 18px 25px;
    color: var(--font-color-body);
    font-family: var(--font-family-01);
    font-size: var(--font-medium);
    font-weight: 600;
}

.header-top-bar .ins-dropdown_menu ins-button,
.header-top-bar .ins-dropdown_menu button,
.header .top-bar .ins-dropdown_menu ins-button,
.header .top-bar .ins-dropdown_menu button {
    display: block;
    padding: 0px;
    width: 100%;
    height: auto;
    text-align: left;
}

.header-top-bar .ins-dropdown_menu button:hover,
.header .top-bar .ins-dropdown_menu button:hover {
    background-color: var(--color-ui-01);
}

.header-top-bar .ins-dropdown_menu .btn__label,
.header .top-bar .ins-dropdown_menu .btn__label {
    display: block;
    padding: 18px 25px;
    color: var(--font-color-inv);
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}


/********** [Navigation] **********/

ul.menu {
    margin-left: 0;
    list-style-type: none;
}

.menu li,
.menu a,
.navigation-level-1 {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: none;
    position: relative;
}

.navigation-cta {
    font-family: var(--font-family-01);
    font-weight: 700;
    font-size: var(--font-x-small);
    line-height: var(--font-x-large);
}

.menu li {
    list-style-type: none;
    display: inline-block;
}

.nav-bar .menu a {
    display: block;
    padding: 16px 24px;
    color: var(--font-color-body);
}

.nav-bar .menu a:hover,
.nav-bar .menu a:focus {
    color: var(--color-main);
}

.nav-bar .menu a.active {
    color: var(--color-main);
}

.menu.vertical li {
    display: block;
}


/* [Menu Dropdown Overwrite] */

.ins-dropdown_menu-card {
    overflow: hidden;
}

.menu .ins-dropdown_label {
    display: block;
    padding: 18px 25px;
    color: var(--font-color-body);
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    line-height: 20px;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
}

.menu .ins-dropdown.lined .ins-dropdown_label {
    padding: 0px;
}

.menu .ins-dropdown_label i {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    right: 5px;
    top: calc(48% - 7px);
}

.menu .ins-dropdown_menu-card ul,
.menu .ins-dropdown_menu-card ul li {
    display: block;
    margin-left: 0px;
}

.header .nav-bar ins-dropdown .ins-dropdown_menu a {
    color: var(--font-color-body);
}

.header .nav-bar ins-dropdown .ins-dropdown_menu a.active,
.header .nav-bar ins-dropdown.active .ins-dropdown_label a,
.header .nav-bar ins-dropdown .ins-dropdown_menu a:hover {
    color: var(--color-main);
}


/********** [Mobile Menu] **********/

.mobile-menu-toggle {
    position: relative;
}

#mobile-menu-btn {
    font-size: var(--font-large);
    color: var(--color-ui-01);
    cursor: pointer;
}

ins-drawer#mobile-menu ul {
    margin-left: 0;
}

ins-drawer#mobile-menu .menu li {
    border-bottom: 1px solid var(--color-white-hover-light);
}

ins-drawer#mobile-menu .menu li:first-child {
    border-bottom: 1px solid var(--color-white-hover-light);
}

ins-drawer#mobile-menu .inner-content li,
ins-drawer#mobile-menu .inner-content .ins-accordion-link {
    padding-left: 1rem;
}

ins-drawer#mobile-menu .menu li:last-child {
    border-bottom: none;
}

ins-drawer#mobile-menu .menu li.small a,
ins-drawer#mobile-menu .ins-accordion-item>.ins-accordion-item_header>.inner-head .heading,
ins-drawer#mobile-menu .user-info ins-accordion-item ins-button button .btn__label {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
    font-weight: 400;
    text-transform: initial;
    letter-spacing: normal;
}

ins-drawer#mobile-menu .menu li.small a.navigation-cta {
    font-family: var(--font-family-01);
    font-weight: 700;
    line-height: var(--font-x-large);
}

ins-drawer#mobile-menu .user-info ins-accordion-item ins-button:not(:hover) button .btn__label {
    color: var(--font-color-body);
}

ins-drawer#mobile-menu .menu li.small i {
    font-size: var(--font-medium);
    line-height: 19px;
    margin-right: 10px;
}

ins-drawer#mobile-menu .menu li a {
    padding: 20px 0.9375rem;
    color: var(--font-color-body);
}

ins-drawer#mobile-menu .ins-accordion-item>.ins-accordion-item_header>.inner-head .heading {
    display: inline;
}

ins-drawer#mobile-menu .ins-accordion-item>.ins-accordion-item_header>.inner-head {
    padding: 20px 0px;
}

ins-drawer#mobile-menu .menu li a.active,
ins-drawer#mobile-menu .menu li a:hover,
ins-drawer#mobile-menu .menu li a:focus,
.bottom-bar .menu li a.active,
.bottom-bar .menu li a:hover,
.bottom-bar .menu li a:focus,
.bottom-bar .menu .ins-dropdown_label:hover * {
    color: var(--color-main);
    text-decoration: none;
}

ins-drawer#mobile-menu ins-accordion .inner-head .heading {
    font-size: var(--font-medium);
    color: var(--font-color-body);
}

ins-drawer#mobile-menu ins-accordion .ins-accordion-item_header>.inner-head {
    border: 0px;
}

ins-drawer#mobile-menu .ins-accordion.menu ins-accordion-item:first-of-type .ins-accordion-item_header {
    border-top: solid 0px var(--color-ui-04);
}

ins-drawer#mobile-menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head .heading {
    color: var(--font-color-inv) !important;
}

ins-drawer#mobile-menu .user-info ins-accordion-item ins-button {
    display: block;
    padding: 11px 0px;
    width: 100%;
    height: auto;
    text-align: left;
}

@media screen and (max-width: 1024px) {
    ins-drawer#mobile-menu .ins-drawer-wrap .ins-content,
    ins-drawer#mobile-menu .ins-backdrop-wrap {
        top: 105px;
        padding-bottom: 120px;
        /* Fix for sidebar scroll overflow */
    }
    .top-bar .top-bar-left,
    .top-bar .top-bar-right {
        flex: 0 0 auto;
    }
    .top-bar div:last-child {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .top-bar .top-bar-left {
        max-width: 65%;
        margin-right: 5%;
    }
    .top-bar .top-bar-right {
        max-width: 30%;
    }
    .top-bar-right a {
        display: block;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 1024px) {
    .page-heading {
        max-width: initial;
    }
    .page-header-wrap .img-wrap+.page-heading {
        max-width: 100%;
        padding: 0 25px;
        left: 0;
        margin-left: 0;
    }
}


/********** [Footer] ***********/

footer .heading {
    font-family: var(--font-family-02);
    font-weight: 600;
    display: block;
}

footer .social {
    justify-content: space-between;
}

footer .social [class*="icon-"] {
    font-size: 1.375rem;
}

footer .social.menu a {
    padding: 0;
}

footer .social.menu li:first-child a {
    padding-left: 0;
}

footer .social.menu li:last-child a {
    padding-right: 0;
}

footer .menu a {
    padding: 0;
}

@media screen and (max-width: 1023px) {
    footer .social {
        justify-content: initial;
    }
    footer .social.menu a {
        padding-right: 24px;
    }
}

footer a,
footer .body-link {
    color: var(--font-color-head);
}

footer a.active,
footer .body-link.active,
footer a:hover,
footer .body-link:hover,
footer a:focus,
footer .body-link:focus {
    color: var(--color-main);
}

footer .bottom-footer,
footer .bottom-footer p,
footer .bottom-footer a {
    color: var(--font-color-inv);
    font-size: 12px;
    line-height: 15px;
}

.scroll-to-top-btn {
    position: fixed;
    right: 10px;
    bottom: 5vh;
    width: 50px;
    height: 50px;
    transition: all 0.4s 'ease';
    text-align: center;
    display: none;
}

.scroll-to-top-btn .ins-button {
    width: 40px;
    height: 40px;
}

.scroll-to-top-btn ins-button button.ins-button {
    background-color: #FAFBFC;
    color: #595959;
}

.scroll-to-top-btn.visible {
    display: block;
    z-index: 1;
}

.scroll-to-top-btn.visible:hover ins-button button.ins-button {
    background-color: #F2F4F8;
    color: #2B2B2B;
}

.scroll-to-top-btn ins-button .btn__icon {
    vertical-align: middle;
    height: 20px;
    font-size: 20px;
}

@media screen and (max-width: 1024px) {
    footer .text-right {
        text-align: left;
        margin-top: 15px;
    }
}


/********** [Breadcrumbs] **********/

.breadcrumbs {
    margin-bottom: 0px;
    padding: 16px 0;
}

.breadbrumbs__wrapper {
    border-bottom: 1px solid var(--color-ui-03);
}

.breadcrumbs span,
.breadcrumbs span a {
    color: var(--font-color-body);
    font-family: var(--font-family-03);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-small);
}

.breadcrumbs span a:hover {
    color: var(--color-main-hover);
}

.breadcrumbs span {
    margin-right: 16px;
}

.breadcrumbs span:not(:first-child) {
    margin-left: 16px;
}

.breadcrumbs i {
    font-size: var(--font-x-small);
    color: var(--color-ui-05);
}

.breadcrumbs span.active,
.breadcrumbs span.active a {
    font-weight: 600;
    color: var(--font-color-head);
    font-family: var(--font-family-01);
    line-height: var(--font-medium);
}


/********** [Home Page] **********/

.homepage-banner-wrap {
    position: relative;
    width: 100%;
}

.homepage-wrap .ins-carousel.layout-1 .ins-carousel_body,
.homepage-wrap .ins-carousel.layout-2 .ins-carousel_body {
    padding: 0;
    position: relative;
}

.homepage-wrap hr.service-list-hr {
    display: none;
}


/* Homepage Banner */

#homepage-banner .slide-container {
    background-size: cover;
    position: relative;
    background-color: #eee;
    width: 100%;
    height: 900px;
}

#homepage-banner .slide-container .wrapper .grid-x {
    width: 100%;
}

#homepage-banner .img-wrap {
    position: relative;
}

#homepage-banner .img-wrap img {
    width: 100%;
    height: 900px;
    object-fit: cover;
}

#homepage-banner .slide-content {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

#homepage-banner .heading-1,
#homepage-banner p {
    color: var(--font-color-inv);
}

@media screen and (max-width: 1024px) {
    .homepage-wrap .ins-carousel_slides .heading {
        font-size: 3rem;
        line-height: 52px;
    }
    #homepage-banner .slide-container,
    #homepage-banner .img-wrap img {
        min-height: 430px;
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .homepage-wrap .ins-carousel_slides .heading {
        font-size: 2.25rem;
        line-height: 42px;
    }
    #homepage-banner .slide-container,
    #homepage-banner .img-wrap img {
        min-height: 310px;
    }
}

@media screen and (max-width: 639px) {
    .homepage-wrap .ins-carousel_slides .heading {
        font-size: 2rem;
        line-height: 39px;
    }
    #homepage-banner .slide-container,
    #homepage-banner .img-wrap img {
        min-height: 382px;
    }
}

.homepage-banner-wrap .ins-carousel .ins-carousel_paginations {
    position: absolute;
    bottom: 3.5%;
}

@media screen and (max-width: 639px) {
    .homepage-banner-wrap .ins-carousel .ins-carousel_paginations {
        /* left align w/ slider content */
        text-align: left;
        padding-left: 12%;
    }
}


/********** [About Us] **********/

.about-us .about-section-title {
    letter-spacing: 2.5px;
    text-transform: capitalize;
    font-size: var(--font-small);
    font-weight: 400;
}


/********** [Dynamic Content Styling] **********/

.dynamic-content,
.dynamic-content p {
    color: var(--font-color-body);
}

.dynamic-content h1,
.dynamic-content h2,
.dynamic-content h3,
.dynamic-content h4,
.dynamic-content h5 {
    color: var(--font-color-head);
}

.dynamic-content p,
.dynamic-content h1,
.dynamic-content h2,
.dynamic-content h3,
.dynamic-content h4,
.dynamic-content h5 {
    margin-bottom: calc(2 * var(--gutter));
}

.dynamic-content table,
.dynamic-content table tbody,
.dynamic-content table thead,
.dynamic-content table td,
.dynamic-content table th {
    border: none;
    outline: none;
}

.dynamic-content table td,
.dynamic-content table th {
    vertical-align: top;
}

.dynamic-content table td:first-child,
.dynamic-content table th:first-child {
    padding-left: 0;
}

.dynamic-content table td:last-child,
.dynamic-content table th:last-child {
    padding-right: 0;
}


/* Dynamid content table = 2 column */

.dynamic-content table td+td {
    width: 50%;
}


/* device lower smaller than tablet */

@media screen and (max-width: 1023px) {
    .dynamic-content table td {
        width: 100%;
        display: block;
    }
    .dynamic-content table td+td {
        width: 100%;
        padding-top: calc(2 * var(--gutter));
    }
}


/********** [Our Team] **********/

.our-team img,
.our-team .placeholder-img {
    border-radius: 5px;
    object-fit: cover;
}

.our-team .team-list .description {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
}

.our-team .details a {
    font-size: var(--font-medium);
}

.our-team .details p [class*="icon-"] {
    padding-right: 12px;
}

.our-team .social.menu [class*="icon-"] {
    font-size: var(--font-large);
    color: var(--font-color-head);
}

.our-team .social.menu a {
    padding: 20px 0px;
}


/********** [Blog / News] **********/

.go-back-nav {
    font-family: var(--font-family-02);
    font-weight: 600;
    font-size: var(--font-small);
    line-height: 17px;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.blog .ins-select-wrap.small .ins-select-options-wrap {
    min-width: initial;
}

.blog-list .spacer.small {
    padding-left: 0px;
    padding-right: 0px;
}

.blog-list .body-link {
    font-family: var(--font-family-03);
    font-weight: 600;
    font-size: var(--font-small);
    line-height: 17px;
}

.blog-list .body-link i {
    margin-left: 12px;
    font-weight: 600;
}


/********** [Services - INS DB] **********/

.service-heading {
    position: relative;
}

.service-heading .placeholder-img {
    background: #909090;
}

.service-heading h1,
.service-heading p {
    color: var(--font-color-inv);
}

.service-list a,
.service-list .body-link {
    color: var(--font-color-head);
}

.service-list .ins-card-wrap {
    padding: 48px 56px;
    height: 100%;
    box-shadow: 0px 12px 12px rgba(140, 148, 164, 0.14), 0px 2px 5px rgba(140, 148, 164, 0.2);
}

@media screen and (max-width: 1024px) {
    .service-list .ins-card-wrap {
        padding: 32px;
    }
}

.service-list .content {
    color: var(--font-color-body);
    display: flex;
    flex-direction: column;
    height: 100%
}

.service-list .content .body-link {
    margin-top: auto;
    font-family: var(--font-family-02);
    font-weight: 600;
}

.service-list .content .body-link i {
    margin-left: 12px;
    font-weight: 600;
}

.service-list a {
    display: block;
    height: 100%;
}

.service-list a:hover .content .name,
.service-list a:focus .content .name,
.service-list a:hover .content .body-link,
.service-list a:focus .content .body-link {
    color: var(--color-main);
}

.service-list a:hover .ins-card-wrap,
.service-list a:focus .ins-card-wrap {
    border-color: var(--color-main);
}


/* Service Details */

.service-details .image-wrap img {
    border-radius: 5px;
}

.service-details .content .dynamic-content:last-child .spacer.x-large {
    display: none;
}

.service-details .image-wrap,
.service-details .product-heading {
    position: relative;
}

.service-details .content-wrap {
    text-align: center;
}

.service-details .content-wrap.overlay {
    padding: 0 0;
    position: absolute;
    z-index: 1;
    height: 100%;
}

@media screen and (max-width: 639px) {
    .service-details .content-wrap.overlay {
        position: absolute;
        color: var(--font-color-body);
        text-align: left;
        margin-bottom: 30px;
        padding: 0 20px;
    }
    .service-details .content-wrap.overlay .font-heading {
        color: var(--color-main);
        ;
    }
}


/**
Contact Us
*/

.contact-us #contact-google-map {
    width: 100%;
    height: 300px;
}

.google-map {
    margin-bottom: 1rem;
}

.contact-us .contact-details {
    font-size: var(--font-small);
    line-height: 17px;
}

.contact-us .contact-details li {
    position: relative;
    padding-left: 30px;
}

.contact-us .contact-details i {
    /*padding-right: 15px;*/
    position: absolute;
    left: 0px;
    top: 3px;
}

.contact-us .opening-hours,
.contact-us .opening-hours p {
    font-size: var(--font-small);
    line-height: 24px;
    font-family: var(--font-family-02);
}

.contact-us .opening-hours .bold,
.contact-us .opening-hours .bold p {
    font-weight: 700;
}

.ins-input-tel-wrap .iti .iti__flag-container .iti__selected-flag {
    padding: 10px 8px;
    line-height: 20px;
}


/**
Contact Us
*/

@media screen and (max-width: 639px) {
    #subscribe-form .subscribe-component {
        width: 100%;
        text-align: left;
    }
}


/**********
 [Terms & Conditions / Privacy Policy]
**********/

.legal {
    font-size: var(--font-small);
    line-height: 26px;
}


/* Main list styling */

.legal ol {
    counter-reset: item;
    margin-left: 0px;
}

.legal li {
    position: relative;
}

.legal li:last-child {
    margin-bottom: 0;
}

.legal ol>li {
    counter-increment: item;
    padding-left: 10px;
    list-style: none;
}

.legal ol>li:before {
    content: counters(item, ".") ". ";
}


/* Sub list styling */

.legal li>ol,
.legal li>ul {
    margin-left: 1rem;
    margin-top: 1rem;
}

.legal>ol>li>ol>li {
    padding-left: 40px;
}

.legal>ol>li>ol>li>ol>li {
    padding-left: 50px;
}

.legal>ol>li>ol>li>ol {
    margin-bottom: 1rem;
}

.legal ol ol>li:before {
    font-size: var(--font-small);
    line-height: 26px;
    font-weight: 400;
    text-align: left;
    min-width: initial;
}


/**
SYSTEM PAGES

Thank you page
*/

.thank-you .thank-you-img i {
    font-size: 54px;
    color: var(--font-color-inv);
    padding: 24px;
    background: var(--success);
    border-radius: 100px;
}

.thank-you-img {
    margin-bottom: 30px;
}

.thank-you-spacer {
    padding-bottom: 40px;
}


/* Invalid Token */

.system-pages .warning i {
    color: var(--warning);
    font-size: 64px!important;
}

ins-card.bg-grey .ins-card-wrap {
    background-color: var(--color-ui-02);
    color: #595959;
}


/**
PLUGINS Custom

Notyf 
*/

.notyf {
    z-index: 999999;
}

.notyf__toast--disappear {
    animation-delay: unset;
}

.notyf__toast {
    background: var(--color-ui-06);
    padding: 0;
}

.notyf__wrapper {
    padding: 0;
}

.notyf__icon {
    vertical-align: middle;
    margin: 0;
    width: auto;
    background: none;
    animation-delay: unset;
    height: 100%;
    position: absolute;
}

.notyf__message {
    font-family: var(--font-family-02);
    font-size: var(--font-small);
    line-height: var(--font-medium);
    vertical-align: middle;
    width: 260px;
    min-height: 48px;
    font-weight: 700;
    text-align: left;
    margin-left: 48px;
    padding: 16px;
    animation-delay: unset;
}

.notyf__toast [class*="notyf__icon--"] {
    font-family: 'insites-20-fonticon' !important;
    font-style: normal;
    font-size: 14px;
    border-radius: 0;
    height: 100%;
    width: 48px;
    vertical-align: middle;
    text-align: center;
    color: var(--font-color-inv) !important;
}

.notyf__toast [class*="notyf__icon--"]:before {
    transform: none;
    background: none;
    display: block;
    position: relative;
    top: 25%;
    left: unset;
    width: auto;
}

.notyf__toast .notyf__icon--error {
    background-color: var(--error);
}

.notyf__toast .notyf__icon--success {
    background-color: var(--success);
}

.notyf__toast .notyf__icon--warning {
    background-color: var(--warning);
}

.notyf__toast .notyf__icon--error:before {
    content: "\e92a";
}

.notyf__toast .notyf__icon--success:before {
    content: "\e926";
}

.notyf__toast .notyf__icon--warning:before {
    content: "\e91d";
}

.notyf__toast [class*="notyf__icon--"]:after {
    content: '';
    display: none;
}


/** SYSTEM PAGES **/

.system-page {
    min-height: 100vh;
}

.system-page .header {
    border-bottom: 1px solid var(--color-ui-03);
    background-color: var(--color-ui-01);
}

.system-page .system-content {
    margin: auto;
}

.system-page .footer>.grid-container {
    border-top: 1px solid var(--color-ui-04);
}

.system-page .title {
    font-family: var(--font-family-02);
    font-style: normal;
    font-weight: 900;
    color: var(--color-ui-04);
    font-size: 150px;
    line-height: 180px;
}

.system-page .sub-title {
    font-family: var(--font-family-01);
    font-style: normal;
    font-weight: bold;
    font-size: var(--font-xxxx-large);
    color: var(--font-color-head);
    line-height: 120%;
}

.system-page .context {
    max-width: 332px;
    margin: auto;
}

.system-page .context p {
    font-family: var(--font-family-02);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-medium);
    color: var(--font-color-body);
    line-height: 24px;
}


/********************************************
 *********[Home Page - Version 2] ***********
 *******************************************/


/****** [Overwrite] ******/

.homepage-v2-banner-wrap {
    position: relative;
    width: 100%;
}

.homepage-v2-banner-wrap .main-container {
    position: relative;
}

.homepage-v2-banner-wrap .vertical-align-middle {
    align-items: flex-start;
}

@media print,
screen and (min-width: 1024px) {
    .homepage-v2-banner-wrap .wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .homepage-v2-banner-wrap .main-text {
        z-index: 99;
        position: absolute;
        width: 50%;
        height: 100%;
    }
    .homepage-v2-banner-wrap .main-text .text-content {
        position: absolute;
        width: 54%;
        right: 10%;
        height: 100%;
        max-width: 440px;
        align-items: initial;
    }
}

.homepage-v2-banner-wrap .main-text .text-content p {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
}

.homepage-v2-banner-wrap .main-image {
    position: relative;
}

.homepage-v2-banner-wrap .main-image img {
    width: 100%;
}

#homepage-carousel .slide-container {
    padding: 12px;
}

.homepage-wrap .homepage-v2-carousel .ins-carousel.layout-1 .ins-carousel_body,
.homepage-wrap .homepage-v2-carousel .ins-carousel.layout-2 .ins-carousel_body {
    position: relative;
    padding: 0 84px;
}

.homepage-clients p {
    font-size: var(--font-medium);
}

.recent-blogs .recent-blog-list .image {
    border-radius: 5px;
}

.homepage-clients .clients-container {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.homepage-clients .clients-container .client-item {
    width: 19%;
}

.homepage-clients .clients-container .client-item:hover {
    box-shadow: 0 12px 12px rgba(140, 148, 164, .05), 0 2px 5px rgba(140, 148, 164, .12);
}

.homepage-clients .clients-container .client-item a {
    display: block;
    border-radius: 5px;
}

.homepage-clients .clients-container .client-item .img-wrap {
    padding: 32px 32px;
}

.homepage-clients .clients-container .client-item .img-wrap img {
    max-width: 100%;
}

@media screen and (max-width: 1024px) {
    .homepage-v2-wrap.main-container,
    .homepage-v2-banner-wrap .main-container {
        margin: 0px 0px;
    }
}

@media screen and (max-width: 639px) {
    .subscribe-wrapper.grid-container,
    .footer>.grid-container,
    .homepage-v2-wrap>.grid-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .homepage-v2-banner-wrap .main-text {
        position: relative;
        width: 100%;
        height: auto;
    }
    .homepage-v2-banner-wrap .main-text .text-content {
        position: relative;
        transform: translate(0, 0);
        width: 100%;
        right: auto;
        top: auto;
    }
    .homepage-clients .clients-container .client-item {
        width: 32%;
    }
    .homepage-clients .clients-container .client-item .img-wrap {
        padding: 25px 25px;
    }
}


/* Custom Css */

.ins-step_details {
    background-color: var(--color-ui-01) !important;
}

.ins-form-field {
    background: var(--color-ui-01);
}

.thank-you .insites-form-buttons a ins-button button {
    background: var(--color-sub2) !important;
    border-radius: 100px;
}

.thank-you .insites-form-buttons a ins-button button:hover {
    background: var(--color-sub2-hover) !important;
}

.confirmation__wrapper .heading-3 {
    font-family: var(--font-family-02);
    font-weight: 600;
    font-size: var(--font-x-large);
}


/* WBO2 Design QA */

.homepage-banner-client .img-wrap img {
    object-fit: cover !important;
}

#galleryModal .ins-modal-wrap.show-modal .ins-modal-head.no-heading .icon-close-1 {
    top: -10px;
}