/* Style list for body */
.body1 {
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
}
.body2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.body3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
}
.body3-medium {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
.body3-bold {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
.caption2 {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
}
@media all and (max-width: 1500px) {
    .body3-medium {
        font-size: 12px;
    }
}
@media all and (max-width: 1399px) {
    .caption2 {
        font-size: 10px;
    }
   
}
.caption {
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
}
.caption-small {
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 21px;
}

.excerpt {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;

    color: var(--neutral-400);
}

.caption2-captial {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    /* identical to box height */

    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Style list for heading */
.h1 {
    font-weight: 500;
    font-size: 32px;
    line-height: 48px;
}
.h2 {
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
}

.h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
}
@media all and (max-width: 1500px) {
    .h1 {
        font-size: 32px;
    }
    .h2 {
        font-size: 20px;
    }
    .h3 {
        font-size: 18px;
    }
}

@media all and (max-width: 1399px) {
    .h3 {
        font-size: 14px;
        line-height: 20px;
    }
    .h2 {
        font-size: 16px;
    }
}
@media all and (max-width: 767px) {
    .h2 {
        font-size: 16px;
    }
 }
:root {
    /* Primary */
    --primary-50: #faffe6;
    --primary-100: #f2fec0;
    --primary-200: #e7fd94;
    --primary-300: #e0fe67;
    --primary-400: #d7fb3a;
    --primary-500: #cff700;
    --primary-600: #c6e600;
    --primary-700: #b6cf00;
    --primary-800: #a7b700;
    --primary-900: #908e00;

    /* Error */
    --error-50: #ffecef;
    --error-100: #ffcfd4;
    --error-200: #f19d9e;
    --error-300: #e87778;
    --error-400: #f35857;
    --error-500: #f8483d;
    --error-600: #ea403c;
    --error-700: #d83636;
    --error-800: #cb2f2f;
    --error-900: #bc2523;

    /* Text */
    --button: #1e1e1e;
    --heading: #ffffff;
    --subtitle: rgba(255, 255, 255, 0.9);
    --placeholder: #b7b8b5;
    --placeholder2: #5f605c;
    --inputLabel: #b7b8b5;

    /* Neutral */
    --neutral-50: #ffffff;
    ---light0: #fafafa;
    --neutral-200: #f5f5f5;
    --neutral-300: #f0f0f0;
    --neutral-400: #dedede;
    --neutral-500: #c2c2c2;
    --neutral-600: #979797;
    --neutral-700: #818181;
    --neutral-800: #606060;
    --neutral-900: #3c3c3c;

    /* Background */
    --tertiary: #292929;
    --main: #070803;
    --secondary: #1e1e1e;
    --scrim: rgba(0, 0, 0, 0.6);

    /* Miscellaneous */
    --disabled: #898a87;
    --stroke: rgba(255, 255, 255, 0.1);
    --image-background: rgba(255, 255, 255, 0.08);
    --neutral-50-light: rgba(255, 255, 255, 0.6);
    --neutral-10: rgba(255, 255, 255, 0.8);

    /* Input */
    --input-active: rgba(224, 254, 103, 0.04);
    --input-active-border: rgba(224, 254, 103, 0.4);

    /* Icon button */
    --primary-icon-btn: rgba(224, 254, 103, 0.15);
    --danger-icon-btn: rgba(216, 54, 54, 0.15);
}

.shadow-cover {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.25);
}

.background {
    background-color: var(--backgroundVar);
}
.text {
    color: var(--textVar) !important;
}
.border {
    color: var(--borderVar);
}
.rounded {
    border-radius: var(--borderRadVar) !important;
}
.px {
    padding-left: var(--paddingLR);
    padding-right: var(--paddingLR);
}
.py {
    padding-top: var(--paddingTB);
    padding-bottom: var(--paddingTB);
}
.p {
    padding: var(--padding);
}

.border-none {
    border: 0px;
}
.border-b {
    border-bottom: 1px solid var(--borderBColor);
}
.border-t {
    border-top: 1px solid var(--borderTColor);
}
.border-l {
    border-bottom: 1px solid var(--borderLColor);
}
.border-r {
    border-right: 1px solid var(--borderRColor);
}

.mt {
    margin-top: var(--marginT);
}
.mb {
    margin-bottom: var(--marginB);
}
.mr {
    margin-right: var(--marginR);
}
.ml {
    margin-left: var(--marginL);
}
.m {
    margin: var(--margin);
}

.gap {
    gap: var(--gap);
}

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.cursor-pointer {
    cursor: pointer;
}
.w-100px{
    width: 100px !important;
}
.word-break{
    word-break: break-all;
}