/* h1 {
    font-size: var(--xxxl);
    font-weight: bold;
    line-height: 1.1;
    color: var(--white);
    margin: 0 !important;
}

h2 {
    font-size: var(--xl);
    font-weight: 600;
    font-stretch: normal;
    color: var(--white);
}

h3 {
    font-size: var(--lg2);
    font-weight: 500;
    line-height: 1.24;
}

h4 {
    font-size: var(--lg);
    font-weight: 600;
    line-height: 1.29;
    color: var(--black);
}

h5 {
    font-size: var(--md);
    font-weight: 500;
    color: var(--white);
}

h6 {
    font-size: var(--xs);
    line-height: 1.44;
    font-weight: normal;
}

p {
    font-size: var(--xxs);
    line-height: 1.5;
    color: var(--black);
}
a {
    font-size: var(--xxs);
    font-weight: 600;
    line-height: 1.5;
}

li {
    font-size: var(--md2);
} */
/*===========================================================
 Custom Variable
============================================================*/
:root {
    /* Hamber menu icon style */
    --hamWidth: 40px;
    --hamHeight: 4px;
    --hamMargin: 6px;
    /* summation of --hamMargin adn --hamHeight */
    --hamTranslate: 10px;
    /* summation of --hamMargin adn --hamHeight */
    --hamTranslate3: -10px;
    --header-height: 0;

    /*   Colors */
    --white: #fff;
    --gray: #828282;
    --whitegray: #eee;
    --black: #000;
    --offblue: #ebf3fa;
    --gradientblue: #4a79a4;
    --blue: #1567b3;
    --blue2: var(--blue);
    --blue3: var(--blue);
    --hamBg: var(--blue);
    --green: var(--blue);
    /* Font sizes    */
    --h1: 50px;
    --h1Small: 40px;
    --md: 30px;
    --md2: 22px;
    --bodyBig: 20px;
    --bodyMedium: 18px;
    --body: 16px;
    --bodySmall: 14px;
}

/* .H1-Scotch {
    font-family: ScotchDisplay;
    font-size: 70px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
} */
h1,
.H1-Lexend {
    font-family: 'Lexend', serif;
    font-optical-sizing: auto;
    font-size: var(--h1);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
}
/* .H1-Scotch-Small {
    font-family: ScotchDisplay;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
} */
.H1-Lexend-Small {
    font-family: 'Lexend', serif;
    font-optical-sizing: auto;
    font-size: var(--h1Small);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
}
/* .H2-Scotch {
    font-family: ScotchDisplay;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.27;
    letter-spacing: normal;
} */
h2,
.H2-Lexend {
    font-family: 'Lexend', serif;
    font-optical-sizing: auto;
    font-size: var(--md);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.27;
    letter-spacing: normal;
}
h3 {
    font-family: 'Lato', serif;
    font-size: var(--md2);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.36;
    letter-spacing: normal;
}
.body-big {
    font-family: 'Lato', serif;
    font-size: var(--bodyBig);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
}
.body-medium {
    font-family: 'Lato', serif;
    font-size: var(--bodyMedium);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
}
body {
    font-family: 'Lato', serif;
    font-size: var(--body);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
}
.body-small {
    font-family: 'Lato', serif;
    font-size: var(--bodySmall);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
}