:root {
    /* Main Color */
    --white: #fff;
    --black: #000;
    /* Primary Color */
    --crimson-color: #4F0000;
    --dark-crimson-color: #320500;
    --light-gray-color: #F1F2F2;
    --regular-gray-color: #D1D3D4;
    --dark-gray-color: #58595B;
    --beige-color: #D5BDAF;

    /* Crimson */
    --crimson-400: #731818;
    --crimson-300: #963232;
    --crimson-200: #AB4B4B;
    --crimson-100: #DD6464;
    --crimson-50: #F2C1C1;

    /* Dark Crimson */
    --dark-crimson-400: #4A1A1A;
    --dark-crimson-300: #653232;
    --dark-crimson-200: #804B4B;
    --dark-crimson-100: #9A6464;
    --dark-crimson-50: #EEDDD2;

    /* Light Gray */
    --light-gray-400: #D9DADB;
    --light-gray-300: #C1C2C3;
    --light-gray-200: #A9AAAB;
    --light-gray-100: #919293;


    /* Regular Gray */
    --medium-gray-400: #727374;
    --medium-gray-300: #8C8D8E;
    --medium-gray-200: #A6A7A8;
    --medium-gray-100: #C0C1C2;
    --medium-gray-50: #E2E3E4;

    /* Dark Gray */


    --h1-font-family: "Rokh", Helvetica;
    --h1-font-weight: 700;
    --h1-font-size: 48px;
    --h1-letter-spacing: 0px;
    --h1-line-height: 17.71428680419922px;
    --h1-font-style: normal;
    --h2-font-family: "Rokh", Helvetica;
    --h2-font-weight: 700;
    --h2-font-size: 38px;
    --h2-letter-spacing: 0px;
    --h2-line-height: 17.71428680419922px;
    --h2-font-style: normal;
    --h3-font-family: "Rokh", Helvetica;
    --h3-font-weight: 700;
    --h3-font-size: 34px;
    --h3-letter-spacing: 0px;
    --h3-line-height: 17.71428680419922px;
    --h3-font-style: normal;
    --t1-font-family: "Peyda", Helvetica;
    --t1-font-weight: 500;
    --t1-font-size: 21px;
    --t1-letter-spacing: 0px;
    --t1-line-height: 17.71428680419922px;
    --t1-font-style: normal;
    --t2-font-family: "Peyda", Helvetica;
    --t2-font-weight: 500;
    --t2-font-size: 18px;
    --t2-letter-spacing: 0px;
    --t2-line-height: 17.71428680419922px;
    --t2-font-style: normal;
    --t3-font-family: "Peyda", Helvetica;
    --t3-font-weight: 500;
    --t3-font-size: 16px;
    --t3-letter-spacing: 0px;
    --t3-line-height: 17.71428680419922px;
    --t3-font-style: normal;
    --t4-font-family: "Peyda", Helvetica;
    --t4-font-weight: 500;
    --t4-font-size: 14px;
    --t4-letter-spacing: 0px;
    --t4-line-height: 17.71428680419922px;
    --t4-font-style: normal;
    --variable-collection-dark-red: rgba(79, 0, 0, 1);
    --variable-collection-dark-brown: rgba(50, 5, 0, 1);
    --variable-collection-light-gray: rgba(241, 242, 242, 1);
    --variable-collection-dark-gray: rgba(88, 89, 91, 1);
    --variable-collection-silver: rgba(209, 211, 212, 1);
    --variable-collection-bezh: rgba(213, 189, 175, 1);
}

/* Primary Color */
.crimson {
    color: var(--crimson-color) !important;
}

.bg-crimson {
    background-color: var(--crimson-color) !important;
}

.dark-crimson {
    color: var(--dark-crimson-color);
}

.bg-dark-crimson {
    background-color: var(--dark-crimson-color);
}

.light-gray {
    color: var(--light-gray-color) !important;
}

.bg-light-gray {
    background-color: var(--light-gray-color);
}

.regular-gray {
    color: var(--regular-gray-color) !important;
}

.bg-regular-gray {
    background-color: var(--regular-gray-color);
}

.dark-gray {
    color: var(--dark-gray-color);
}

.bg-dark-gray {
    background-color: var(--dark-gray-color);
}

/* Crimson */
.crimson-400 {
    color: #731818;
}

.crimson-300 {
    color: #963232;
}

.crimson-200 {
    color: #AB4B4B;
}

.crimson-100 {
    color: #DD6464;
}

.crimson-50 {
    color: #F2C1C1;
}

.bg-crimson-400 {
    background-color: #731818;
}

.bg-crimson-300 {
    background-color: #963232;
}

.bg-crimson-200 {
    background-color: #AB4B4B;
}

.bg-crimson-100 {
    background-color: #DD6464;
}

.bg-crimson-50 {
    background-color: #F2C1C1;
}

/* Dark Crimson */
.dark-crimson-400 {
    color: #4A1A1A;
}

.dark-crimson-300 {
    color: #653232;
}

.dark-crimson-200 {
    color: #804B4B;
}

.dark-crimson-100 {
    color: #9A6464;
}

.dark-crimson-50 {
    color: #EDD0D2;
}

.bg-dark-crimson-400 {
    background-color: #4A1A1A;
}

.bg-dark-crimson-300 {
    background-color: #653232;
}

.bg-dark-crimson-200 {
    background-color: #804B4B;
}

.bg-dark-crimson-100 {
    background-color: #9A6464;
}

.bg-dark-crimson-50 {
    background-color: #EDD0D2;
}

/* Light Gray */
.light-gray-400 {
    color: #D9DADB;
}

.light-gray-300 {
    color: #C1C2C3;
}

.light-gray-200 {
    color: #A9AAAB;
}

.light-gray-100 {
    color: #919293;
}

.bg-light-gray-400 {
    background-color: #D9DADB;
}

.bg-light-gray-300 {
    background-color: #C1C2C3;
}

.bg-light-gray-200 {
    background-color: #A9AAAB;
}

.bg-light-gray-100 {
    background-color: #919293;
}

/* Regular Gray */
.medium-gray-400 {
    color: #727374;
}

.medium-gray-300 {
    color: #8C8D8E !important;
}

.medium-gray-200 {
    color: #A6A7A8;
}

.medium-gray-100 {
    color: #C0C1C2;
}

.medium-gray-50 {
    color: #E2E3E4;
}

.bg-medium-gray-400 {
    background-color: #727374;
}

.bg-medium-gray-300 {
    background-color: #8C8D8E;
}

.bg-medium-gray-200 {
    background-color: #A6A7A8;
}

.bg-medium-gray-100 {
    background-color: #C0C1C2;
}

.bg-medium-gray-50 {
    background-color: #E2E3E4;
}

/* Beige */
.beige {
    color: #D5BDAF;
}

.bg-beige {
    background-color: #D5BDAF;
}

/* Main Color  */
.white {
    color: var(--white) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.black {
    color: var(--black) !important;
}

.bg-black {
    background-color: var(--black) !important;
}


/* font rokh */
.font-rokh-black {
    font-family: Rokh-Black !important;
}

.font-rokh-bold {
    font-family: Rokh-Bold !important;
}

.font-rokh-extra-bold {
    font-family: Rokh-ExtraBold !important;
}

.font-rokh-extra-light {
    font-family: Rokh-ExtraLight !important;
}

.font-rokh-hairline {
    font-family: Rokh-Hairline !important;
}

.font-rokh-light {
    font-family: Rokh-Light !important;
}

.font-rokh-medium {
    font-family: Rokh-Medium !important;
}

.font-rokh-normal {
    font-family: Rokh-Normal !important;
}

.font-rokh-regular {
    font-family: Rokh-Regular !important;
}

.font-rokh-semi-bold {
    font-family: Rokh-SemiBold !important;
}

.font-rokh-thin {
    font-family: Rokh-Thin !important;
}

.font-rokh-ultra-bold {
    font-family: Rokh-UltraBold !important;
}

/* font peyda */

.font-peyda-black {
    font-family: Peyda-Black !important;
}

.font-peyda-bold {
    font-family: Peyda-Bold !important;
}

.font-peyda-extra-bold {
    font-family: Peyda-ExtraBold !important;
}

.font-peyda-light {
    font-family: Peyda-light !important;
}

.font-peyda-medium {
    font-family: Peyda-Medium !important;
}

.font-peyda-reguler {
    font-family: Peyda-Regular !important;
}

.font-peyda-semi-bold {
    font-family: Peyda-SemiBold !important;
}

.font-peyda-thin {
    font-family: Peyda-Thin !important;
}

.btn-crimson-300 {
    --bs-btn-color: var(--regular-gray-color) !important;
    --bs-btn-bg: var(--crimson-300) !important;
    --bs-btn-border-color: var(--crimson-300) !important;
    --bs-btn-hover-color: var(--regular-gray-color) !important;
    --bs-btn-hover-bg: var(--crimson-200) !important;
    --bs-btn-hover-border-color: var(--crimson-200) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: var(--regular-gray-color) !important;
    --bs-btn-active-bg: var(--crimson-200) !important;
    --bs-btn-active-border-color: var(--crimson-200) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--regular-gray-color) !important;
    --bs-btn-disabled-bg: var(--crimson-300) !important;
    --bs-btn-disabled-border-color: var(--crimson-300) !important;
}

.btn-dark-crimson {
    --bs-btn-color: var(--regular-gray-color) !important;
    --bs-btn-bg: var(--dark-crimson-color) !important;
    --bs-btn-border-color: var(--dark-crimson-color) !important;
    --bs-btn-hover-color: var(--regular-gray-color) !important;
    --bs-btn-hover-bg: var(--dark-crimson-400) !important;
    --bs-btn-hover-border-color: var(--dark-crimson-400) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: var(--regular-gray-color) !important;
    --bs-btn-active-bg: var(--dark-crimson-400) !important;
    --bs-btn-active-border-color: var(--dark-crimson-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--regular-gray-color) !important;
    --bs-btn-disabled-bg: var(--dark-crimson-color) !important;
    --bs-btn-disabled-border-color: var(--dark-crimson-color) !important;
}

.btn-crimson {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--crimson-color) !important;
    --bs-btn-border-color: var(--crimson-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--dark-crimson-color) !important;
    --bs-btn-hover-border-color: var(--dark-crimson-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--crimson-400) !important;
    --bs-btn-active-border-color: var(--crimson-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
}

.btn-outline-crimson {
    --bs-btn-color: var(--crimson-color) !important;
    --bs-btn-border-color: var(--crimson-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--crimson-color) !important;
    --bs-btn-hover-border-color: var(--crimson-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--crimson-400) !important;
    --bs-btn-active-border-color: var(--crimson-400) !important;
    --bs-btn-disabled-color: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
    --bs-gradient: none;
}


.btn-outline-crimson {
    --bs-btn-color: var(--crimson-color) !important;
    --bs-btn-bg: #fff !important;
    --bs-btn-border-color: var(--crimson-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--crimson-color) !important;
    --bs-btn-hover-border-color: var(--crimson-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--crimson-400) !important;
    --bs-btn-active-border-color: var(--crimson-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
}

.btn-light-gray {
    --bs-btn-color: var(--dark-gray-color) !important;
    --bs-btn-bg: var(--light-gray-color) !important;
    --bs-btn-border-color: var(--light-gray-color) !important;
    --bs-btn-hover-color: var(--black) !important;
    --bs-btn-hover-bg: var(--regular-gray-color) !important;
    --bs-btn-hover-border-color: var(--regular-gray-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: var(--medium-gray-400) !important;
    --bs-btn-active-bg: var(--light-gray-400) !important;
    --bs-btn-active-border-color: var(--light-gray-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--light-gray-100) !important;
    --bs-btn-disabled-border-color: var(--light-gray-100) !important;
}

.btn-crimson-100 {
    --bs-btn-color: var(--light-gray-color) !important;
    --bs-btn-bg: var(--crimson-100) !important;
    --bs-btn-border-color: var(--crimson-100) !important;
    --bs-btn-hover-color: var(--regular-gray-color) !important;
    --bs-btn-hover-bg: var(--crimson-200) !important;
    --bs-btn-hover-border-color: var(--crimson-200) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: var(--regular-gray-color) !important;
    --bs-btn-active-bg: var(--crimson-200) !important;
    --bs-btn-active-border-color: var(--crimson-200) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--light-gray-100) !important;
    --bs-btn-disabled-bg: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
}

.btn-light-gray-400 {
    --bs-btn-color: var(--black) !important;
    --bs-btn-bg: var(--light-gray-400) !important;
    --bs-btn-border-color: var(--light-gray-400) !important;
    --bs-btn-hover-color: var(--black) !important;
    --bs-btn-hover-bg: var(--light-gray-200) !important;
    --bs-btn-hover-border-color: var(--light-gray-200) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: var(--black) !important;
    --bs-btn-active-bg: var(--light-gray-200) !important;
    --bs-btn-active-border-color: var(--light-gray-200) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--light-gray-400) !important;
    --bs-btn-disabled-bg: var(--light-gray-100) !important;
    --bs-btn-disabled-border-color: var(--light-gray-100) !important;
}