/***************************************
* Global Variables
****************************************/
:root {
    /** Colors **/
    --twc-color-bg:#fff; /* content background */
    --twc-color-text:#1d1b1b; /* body text */
    --twc-color-heading:var(--twc-color-primary);

    --twc-color-primary-highlight:#042249;
    --twc-color-on-primary:#fff;

    --twc-color-pink:#ae60a2;
    --twc-color-blue:var(--twc-color-light-blue);

    --twc-color-error:#dd4b29; /* for error, alert, warning */
    --twc-color-gray:#ccc; /* represent white color in editor */

    /* Text sizes */
    --twc-size-body:18px;
    --twc-size-h1:48px;
    --twc-size-h2:40px;
    --twc-size-h3:28px;
    --twc-size-h4:24px;
    --twc-size-h5:20px;
    --twc-size-h6:18px;
    --twc-size-16px:16px;

    /* Fonts */
    --twc-font-primary:"Manrope", sans-serif;
    --twc-font-heading:"Tilt Warp", sans-serif;

    /* Relative spacing (vertical) - change based on design */
    --twc-spacing-default:var(--twc-spacing-110);
    --twc-spacing-heading:var(--twc-spacing-25);

    /* Gap, width (horizontal) */
    --twc-100vw:100vw; /* this variable will be updated by updateCSSVariables() */
    --twc-gap-vc-column:25px; /* vc column */
    --twc-gap-container:50px; /* container paddings */
    --twc-gap-side:calc((var(--twc-100vw) - var(--twc-container)) * 0.5);


    /* Container */
    --twc-container:1280px;

    /* Header */
    --twc-header-height:103px;
    --twc-header-height-sticky:var(--twc-header-height);

    /* Transition */
    --twc-transition:all .3s ease;
    --twc-transition-slow:all .6s ease;

    /* Icons (create more icons if they are being used for several times) */
    --twc-font-icomoon:"icomoon", fantasy;
}


/***************************************
* Global Variables Responsive
****************************************/
@media only screen and (max-width:1280px) {
    :root {
        /* Gutter (horizontal) */
        --twc-gap-container:35px;
        --twc-gap-side:35px;

        /* Header */
        --twc-header-height:80px;

        /* Text sizes */
        --twc-size-h1:38px;
        --twc-size-h2:33px;
    }
}
@media only screen and (max-width:1024px) {
    :root {
        /* Gutter (horizontal) */
        --twc-gap-container:20px;
        --twc-gap-side:20px;

        /* Header */
        --twc-header-height:65px;

        /* Text sizes */
        --twc-size-body:16px;
        --twc-size-h1:36px;
        --twc-size-h2:30px;
        --twc-size-h3:25px;
        --twc-size-h4:22px;
        --twc-size-h5:18px;
        --twc-size-h6:16px;
        --twc-size-16px:16px;
    }
}
@media only screen and (max-width:480px) {
    :root {
        /* Text sizes */
        --twc-size-h1:32px;
        --twc-size-h2:27px;
        --twc-size-h3:24px;
    }
}
@media only screen and (max-width:420px) {
    :root {
        /* Text sizes */
        --twc-size-h1:28px;
        --twc-size-h2:24px;
        --twc-size-h3:22px;
        --twc-size-h4:20px;
        --twc-size-h5:16px;
        --twc-size-h6:15px;
        --twc-size-16px:15px;
        --twc-size-body:15px;
    }
}