/****** FONT START ******/
/* PRIMARY FONT FAMILY START */
@font-face {
    font-family: OpenSans-Light;
    font-display: swap;
    src: url(fonts/OpenSans/OpenSans-Light.ttf) format('truetype');
}

@font-face {
    font-family: OpenSans-Regular;
    font-display: swap;
    src: url(fonts/OpenSans/OpenSans-Regular.ttf) format('truetype');
}

@font-face {
    font-family: OpenSans-Medium;
    font-display: swap;
    src: url(fonts/OpenSans/OpenSans-Medium.ttf) format('truetype');
}

@font-face {
    font-family: OpenSans-SemiBold;
    font-display: swap;
    src: url(fonts/OpenSans/OpenSans-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: OpenSans-Bold;
    font-display: swap;
    src: url(fonts/OpenSans/OpenSans-Bold.ttf) format('truetype');
}

@font-face {
    font-family: OpenSans-ExtraBold;
    font-display: swap;
    src: url(fonts/OpenSans/OpenSans-ExtraBold.ttf) format('truetype');
}

/* PRIMARY FONT FAMILY END */

/* SECONDARY FONT FAMILY START */

@font-face {
    font-family: Montserrat-Regular;
    font-display: swap;
    src: url(fonts/Montserrat/Montserrat-Regular.ttf) format('truetype');
}

@font-face {
    font-family: Montserrat-Medium;
    font-display: swap;
    src: url(fonts/Montserrat/Montserrat-Medium.ttf) format('truetype');
}

@font-face {
    font-family: Montserrat-SemiBold;
    font-display: swap;
    src: url(fonts/Montserrat/Montserrat-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: Montserrat-Bold;
    font-display: swap;
    src: url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype');
}

@font-face {
    font-family: Montserrat-ExtraBold;
    font-display: swap;
    src: url(fonts/Montserrat/Montserrat-ExtraBold.ttf) format('truetype');
}

/* SECONDARY FONT FAMILY END */
/****** FONT END ******/


/****** ROOT START ******/
:root {
    /* COLOR START */
    --primary: #232222;
    --primary-light: ;
    --primary-lighter: ;

    --secondary: #316658;
    --secondary-light: #ede2d6;
    --secondary-lighter: #f8f2e9;
    --secondary-dark: #f6d8ba;
    --secondary-darker: #ffbe7f;

    --tertiary: #5f8c80;
    --tertiary-light: #b1c6c3;
    --tertiary-lighter: ;

    --custom-color-1: ;

    --gray: ;
    --gray-light: #f7f7f7;
    --gray-lighter: #f9f9f9;
    --gray-dark: ;

    --white: #fff;
    --black: ;

    --text-primary: #232222;
    --text-secondary: #316658;
    --text-tertiary: #5f8c80;
    --text-gray: ;
    --text-gray-light: ;
    --text-white: #fff;

    --border-primary: #232222;
    --border-secondary: #316658;
    --border-tertiary: #5f8c80;
    --border-gray: #d3d3d3;
    --border-gray-light: ;
    --border-gray-lighter: ;
    --border-white: #fff;
    --border-black: ;
    /* COLOR END */

    /* FONT START */
    --font-text: 16px;
    --font-text-mobile: 15px;
    /* FONT END */

    /* FONT FAMILY START */
    --font-family: OpenSans-Light, sans-serif;
    /* FONT FAMILY END */

    /* FILTER START */
    --filter-primary: invert(9%) sepia(5%) saturate(0%) hue-rotate(170deg) brightness(89%) contrast(87%);
    --filter-secondary: invert(33%) sepia(48%) saturate(385%) hue-rotate(114deg) brightness(92%) contrast(91%);
    --filter-tertiary: ;
    --filter-gray: invert(92%) sepia(7%) saturate(28%) hue-rotate(316deg) brightness(81%) contrast(84%);
    --filter-white: invert(100%);
    --filter-black: invert(0%);
    /* FILTER END */

    /* TRANSITION START */
    --transition-all: all .3s ease-out;
    --transition-color: color .3s ease-out;
    --transition-margin: margin .3s ease-out;
    --transition-transform: transform .5s ease-out;
    --transition-height: height .3s ease-out;
    /* TRANSITION END */

    /* MARGIN TOP START */
    --margin-top: 117.19px;
    --margin-top-fixed: 86.08px;
    --margin-top-mobile: 108px;
    --margin-top-mobile-fixed: 78px;
    /* MARGIN TOP END */

    /* BOX SHADOW START */
    --box-shadow: 0 0 20px rgba(0, 0, 0, .08);
    --box-shadow-bottom: rgb(0 0 0 / 12%) 0px 1px 5px;
    /* BOX SHADOW END */

    /* ROUNDED START */
    --rounded: 3px;
    --rounded-large: 8px;
    --rounded-larger: 11px;
    /* ROUNDED END */

    --overlay: rgba(0, 0, 0, 0.65);
}

/****** ROOT END ******/


/****** DEFAULT START ******/
/* * {
    user-select: none !important;
} */

html {
    font-size: var(--font-text);
    overscroll-behavior: none;
}

body {
    background-color: var(--white);
    color: var(--text-primary);
    font-family: var(--font-family);
    line-height: 1.6;
    /* letter-spacing: 1.4px; */
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/****** DEFAULT END ******/

@media (min-width: 1400px) {
    html {
        font-size: var(--font-text);
        overscroll-behavior: none;
    }
}

/****** SCROLL BAR START ******/
@media (min-width: 991px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--gray) var(--gray-lighter);
    }

    *::-webkit-scrollbar {
        width: 13px;
    }

    *::-webkit-scrollbar-track {
        background: var(--gray);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--gray);
        border-radius: 20px;
        border: 3px solid var(--gray);
    }

}

/****** SCROLL BAR END ******/


/****** CUSTOM START ******/
.sticky-top {
    top: calc(var(--margin-top-fixed) + 3rem) !important;
}

.transition-icon img {
    transition: transform .3s ease-out;
}

.transition-icon:hover img {
    transform: rotate(45deg);
}

.h-1 {
    height: 1px;
}

.user-select-none {
    user-select: none;
}

.max-w-unset {
    max-width: unset !important;
}

.scroll-lock {
    overflow: hidden;
}

.text-center-inner * {
    text-align: center !important;
}

.white-normal {
    white-space: normal;
}

.white-nowrap {
    white-space: nowrap
}

.object-cover {
    object-fit: cover;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}

.z-1000 {
    z-index: 10000;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.pointer-none {
    pointer-events: none !important;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay);
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.w-fit {
    width: fit-content;
}

.title-in-text p strong {
    font-size: 20px !important;
    line-height: 27px !important;
    font-family: OpenSans-Medium, sans-serif;
    margin-bottom: .75rem;
    display: inline-block;
}

.text-not-last p:last-child {
    margin-bottom: 0 !important;
}

.text-align-last-center {
    text-align-last: center !important;
}

.text-justify {
    text-align: justify;
}

.border-divider {
    background-color: var(--border-gray-lighter);
    width: 100%;
    height: 1px;
}

.ls-none {
    list-style: none;
}

.ls-dist {
    list-style-type: disc;
}

.m-top {
    margin-top: var(--margin-top);
    transition: var(--transition-margin);
}

.m-top.fixed {
    margin-top: var(--margin-top-fixed);
    transition: var(--transition-margin);
}

/****** CUSTOM END ******/


/****** WEBKIT START ******/
.webkit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.webkit-1 {
    -webkit-line-clamp: 1;
}

.webkit-2 {
    -webkit-line-clamp: 2;
}

.webkit-3 {
    -webkit-line-clamp: 3;
}

.webkit-4 {
    -webkit-line-clamp: 4;
}

.webkit-5 {
    -webkit-line-clamp: 5;
}

.webkit-6 {
    -webkit-line-clamp: 6;
}

.webkit-7 {
    -webkit-line-clamp: 7;
}

.webkit-8 {
    -webkit-line-clamp: 8;
}

/****** WEBKIT END ******/


/****** FONT FAMILY START ******/
/* PRIMARY START */
.ff-p-light {
    font-family: OpenSans-Light, sans-serif;
}

.ff-p-regular {
    font-family: OpenSans-Regular, sans-serif;
}

.ff-p-medium {
    font-family: OpenSans-Medium, sans-serif;
}

.ff-p-semi {
    font-family: OpenSans-SemiBold, sans-serif;
}

.ff-p-bold {
    font-family: OpenSans-Bold, sans-serif;
}

.ff-p-extra {
    font-family: OpenSans-ExtraBold, sans-serif;
}

/* PRIMARY END */

/* SECONDARY START */
.ff-s-regular {
    font-family: Montserrat-Regular, sans-serif;
}

.ff-s-medium {
    font-family: Montserrat-Medium, sans-serif;
}

.ff-s-semi {
    font-family: Montserrat-SemiBold, sans-serif;
}

.ff-s-bold {
    font-family: Montserrat-Bold, sans-serif;
}

.ff-s-extra {
    font-family: Montserrat-ExtraBold, sans-serif;
}

/* SECONDARY END */
/****** FONT FAMILY END ******/


/****** FONT SIZE START ******/
.fs-6xl {
    font-size: 95px;
    line-height: 105px;
}

.fs-5xl {
    font-size: 70px;
    line-height: 80px;
}

.fs-4xl {
    font-size: 60px;
    line-height: 75px;
}

.fs-3xl {
    font-size: 48px;
    line-height: 68px;
}

.fs-xxl {
    font-size: 42px;
    line-height: 1.6;
}

.fs-xl {
    font-size: 32px;
    line-height: 1.6;
}

.fs-lg {
    font-size: 24px;
    line-height: 1.6;
}

.fs-md {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

.fs-xmd {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

.fs-sm {
    font-size: 16px;
    line-height: 1.6;
}

.fs-xsm {
    font-size: 14px;
    line-height: 1.6;
}

.fs-xxsm {
    font-size: 13px;
    line-height: 1.6;
}

/****** FONT SIZE END ******/


/****** BACKGROUND START ******/
.bg-1 {
    background-color: #131313;
}

.bg-2 {
    background-color: #242321;
}

.bg-3 {
    background-color: #222426;
}

.bg-4 {
    background-color: #615e59;
}

.bg-none {
    background: none;
}

/* PRIMARY START */
.bg-p {
    background-color: var(--primary) !important;
}

.bg-p-light {
    background-color: var(--primary-light) !important;
}

.bg-p-lighter {
    background-color: var(--primary-lighter) !important;
}

/* PRIMARY END */

/* SECONDARY START */
.bg-s {
    background-color: var(--secondary) !important;
}

.bg-s-light {
    background-color: var(--secondary-light) !important;
}

.bg-s-lighter {
    background-color: var(--secondary-lighter) !important;
}

.bg-s-dark {
    background-color: var(--secondary-dark) !important;
}

.bg-s-darker {
    background-color: var(--secondary-darker) !important;
}

/* SECONDARY END */

/* TERTIARY START */
.bg-t {
    background-color: var(--tertiary) !important;
}

.bg-t-light {
    background-color: var(--tertiary-light) !important;
}

.bg-t-lighter {
    background-color: var(--tertiary-lighter) !important;
}

/* TERTIARY END */


.custom-color-1 {
    background-color: var(--custom-color-1);
}

/* GRAY START */
.bg-gray {
    background-color: var(--gray) !important;
}

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

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

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

/* GRAY END */

/* OTHER COLORS START */
.bg-w {
    background-color: var(--white) !important;
}

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

.bg-w-opacity {
    background-color: #ffffffc5;
}

.bg-g-to-b {
    background-color: var(--gray-lighter);
    transition: var(--transition-all);
}

.bg-g-to-b:hover {
    background-color: var(--black);
}

.bg-g-to-b p {
    transition: var(--transition-all);
}

.bg-g-to-b:hover p {
    color: var(--white) !important;
}

.bg-g-to-b:hover .button {
    background-color: var(--white) !important;
    color: var(--text-primary) !important;
}

/* OTHER COLORS END */
/****** BACKGROUND END ******/


/****** TEXT START ******/
.text-p {
    color: var(--text-primary) !important;
}

.text-s {
    color: var(--text-secondary) !important;
}

.text-t {
    color: var(--text-tertiary) !important;
}

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

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

.text-w {
    color: var(--text-white) !important;
}

/****** TEXT END ******/


/****** ICON START ******/
.icon-11xl {
    width: 300px;
}

.icon-10xl {
    width: 250px;
}

.icon-10xl-custom {
    width: 250px;
    height: 120px;
    object-fit: contain;
}

@media (min-width: 991px) {
    .icon-10xl-custom.smaller {
        height: 90px;
    }
}

.icon-9xl {
    width: 220px;
}

.icon-8xl {
    width: 200px;
}

.icon-7xl {
    width: 180px;
}

.icon-6xl {
    width: 150px;
}

.icon-5xl {
    width: 110px;
}

.icon-4xl {
    width: 100px;
}

.icon-3xl {
    width: 72px;
}

.icon-img {
    width: 55px;
}

.icon-2xl {
    width: 48px !important;
    height: 48px !important;
}

.icon-xl {
    width: 34px;
}

.icon-parent-custom {
    width: 62px !important;
    height: 62px !important;
}

.icon-custom {
    min-width: 42px !important;
    min-height: 42px !important;
}

.icon-lg {
    width: 24px;
}

.icon-md {
    width: 20px;
}

.icon-sm {
    width: 16px;
}

.icon-xsm {
    width: 14px;
}

.icon-xxsm {
    width: 12px;
}

.icon-hover {
    transition: var(--transition-transform);
    transform: scale(1) translateZ(0);
}

.icon-hover-minus:hover {
    transform: scale(0.95) translateZ(0);
}

.icon-hover-plus:hover {
    transform: scale(1.05) translateZ(0);
}

/****** ICON END ******/


/****** BORDER START ******/
/* SIZE START */
.border-t {
    border-top: 1px solid !important;
}

.border-e {
    border-right: 1px solid !important;
}

.border-b {
    border-bottom: 1px solid !important;
}

.border-s {
    border-left: 1px solid !important;
}

/* SIZE END */

/* COLOR START */
/* BORDER PRIMARY START */
.border-color-p {
    border-color: var(--border-primary) !important;
}

.border-color-p-to-s-parent span,
.border-color-p-to-s {
    border-color: var(--border-primary);
}

.border-color-p-to-s-parent:hover span,
.border-color-p-to-s:hover {
    border-color: var(--border-secondary);
}

.border-color-p-to-t {
    border-color: var(--border-primary);
}

.border-color-p-to-t:hover {
    border-color: var(--border-tertiary);
}

.border-color-p-to-g {
    border-color: var(--border-primary);
}

.border-color-p-to-g:hover {
    border-color: var(--border-gray);
}

.border-color-p-to-w {
    border-color: var(--border-primary);
}

.border-color-p-to-w:hover {
    border-color: var(--border-white);
}

.border-color-p-to-b {
    border-color: var(--border-primary);
}

.border-color-p-to-b:hover {
    border-color: var(--border-black);
}

/* BORDER PRIMARY END */

/* BORDER SECONDARY START */
.border-color-s {
    border-color: var(--border-secondary) !important;
}

.border-color-s-to-p {
    border-color: var(--border-secondary);
}

.border-color-s-to-p:hover {
    border-color: var(--border-primary);
}

.border-color-s-to-t {
    border-color: var(--border-secondary);
}

.border-color-s-to-t:hover {
    border-color: var(--border-tertiary);
}

.border-color-s-to-g {
    border-color: var(--border-secondary) !important;
}

.border-color-s-to-g:hover {
    border-color: var(--border-gray) !important;
}

.border-color-s-to-w {
    border-color: var(--border-secondary);
}

.border-color-s-to-w:hover {
    border-color: var(--border-white);
}

.border-color-s-to-b {
    border-color: var(--border-secondary);
}

.border-color-s-to-b:hover {
    border-color: var(--border-black);
}

/* BORDER SECONDARY END */

/* BORDER TERTIARY START */
.border-color-t {
    border-color: var(--border-tertiary);
}

.border-color-t-to-p {
    border-color: var(--border-tertiary);
}

.border-color-t-to-p:hover {
    border-color: var(--border-primary);
}

.border-color-t-to-s {
    border-color: var(--border-tertiary);
}

.border-color-t-to-s:hover {
    border-color: var(--border-secondary);
}

.border-color-t-to-g {
    border-color: var(--border-tertiary);
}

.border-color-t-to-g:hover {
    border-color: var(--border-gray);
}

.border-color-t-to-w {
    border-color: var(--border-tertiary);
}

.border-color-t-to-w:hover {
    border-color: var(--border-white);
}

.border-color-t-to-b {
    border-color: var(--border-tertiary);
}

.border-color-t-to-b:hover {
    border-color: var(--border-black);
}

/* BORDER TERTIARY END */


/* BORDER GRAY START */
.border-color-g {
    border-color: var(--border-gray) !important;
}

.border-color-g-to-p {
    border-color: var(--border-gray) !important;
}

.border-color-g-to-p:hover {
    border-color: var(--border-primary) !important;
}

.border-color-g-to-s {
    border-color: var(--border-gray) !important;
}

.border-color-g-to-s:hover {
    border-color: var(--border-secondary) !important;
}

.border-color-g-to-t {
    border-color: var(--border-gray);
}

.border-color-g-to-t:hover {
    border-color: var(--border-tertiary);
}

.border-color-g-to-w {
    border-color: var(--border-gray);
}

.border-color-g-to-w:hover {
    border-color: var(--border-white);
}

.border-color-g-to-b {
    border-color: var(--border-gray);
}

.border-color-g-to-b:hover {
    border-color: var(--border-black);
}

.border-color-g-light {
    border-color: var(--border-gray-light);
}

.border-color-g-light-to-g {
    border-color: var(--border-gray-light);
}

.border-color-g-light-to-g:hover {
    border-color: var(--border-gray);
}

.border-color-g-lighter {
    border-color: var(--border-gray-lighter);
}

/* BORDER GRAY END */


/* BORDER WHITE START */
.border-color-w {
    border-color: var(--border-white);
}

.border-color-w-to-p {
    border-color: var(--border-white);
}

.border-color-w-to-p:hover {
    border-color: var(--border-primary);
}

.border-color-w-to-s {
    border-color: var(--border-white);
}

.border-color-w-to-s:hover {
    border-color: var(--border-secondary);
}

.border-color-w-to-g {
    border-color: var(--border-white);
}

.border-color-w-to-g:hover {
    border-color: var(--border-gray);
}

.border-color-w-to-t {
    border-color: var(--border-white);
}

.border-color-w-to-t:hover {
    border-color: var(--border-tertiary);
}

.border-color-w-to-b {
    border-color: var(--border-white);
}

.border-color-w-to-b:hover {
    border-color: var(--border-black);
}

/* BORDER WHITE END */


/* BORDER BLACK START */
.border-color-b {
    border-color: var(--border-black);
}

.border-color-b-to-p {
    border-color: var(--border-black);
}

.border-color-b-to-p:hover {
    border-color: var(--border-primary);
}

.border-color-b-to-s {
    border-color: var(--border-black);
}

.border-color-b-to-s:hover {
    border-color: var(--border-secondary);
}

.border-color-b-to-g {
    border-color: var(--border-black);
}

.border-color-b-to-g:hover {
    border-color: var(--border-gray);
}

.border-color-b-to-t {
    border-color: var(--border-black);
}

.border-color-b-to-t:hover {
    border-color: var(--border-tertiary);
}

.border-color-b-to-w {
    border-color: var(--border-black);
}

.border-color-b-to-w:hover {
    border-color: var(--border-white);
}

/* BORDER BLACK END */

/* COLOR END */

/* RADIUS START */
.rounded-p {
    border-radius: var(--rounded);
}

.rounded-s {
    border-radius: var(--rounded-large);
}

.rounded-t {
    border-radius: var(--rounded-larger);
}

/* RADIUS END */
/****** BORDER END ******/

.rotate-90 {
    transform: rotate(-90deg);
}

.rotate-180 {
    transform: rotate(-180deg);
}

/****** LINK START ******/
.link-in-text a {
    transition: var(--transition-color);
    color: var(--text-secondary);
}

.link-in-text a:hover {
    color: var(--text-primary);
}

.heading-in-text h1,
.heading-in-text h2,
.heading-in-text h3,
.heading-in-text h4,
.heading-in-text h5,
.heading-in-text h6 {
    font-family: Montserrat-Medium, sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: var(--text-secondary) !important;
}

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

.link-p-to-s {
    color: var(--text-primary) !important;
}

.link-p-to-s:hover {
    color: var(--text-secondary) !important;
}

.link-p-to-t {
    color: var(--text-primary) !important;
}

.link-p-to-t:hover {
    color: var(--text-tertiary) !important;
}

.link-p-to-w:hover {
    color: var(--text-primary) !important;
}

.link-p-to-w:hover {
    color: var(--text-white) !important;
}

.link-s-to-p {
    color: var(--text-secondary) !important;
}

.link-s-to-p:hover {
    color: var(--text-primary) !important;
}

.link-s-to-t {
    color: var(--text-secondary) !important;
}

.link-s-to-t:hover {
    color: var(--text-tertiary) !important;
}

.link-s-to-w:hover {
    color: var(--text-secondary) !important;
}

.link-s-to-w:hover {
    color: var(--text-white) !important;
}

.link-t-to-p {
    color: var(--text-tertiary) !important;
}

.link-t-to-p:hover {
    color: var(--text-primary) !important;
}

.link-t-to-s {
    color: var(--text-tertiary) !important;
}

.link-t-to-s:hover {
    color: var(--text-secondary) !important;
}

.link-t-to-w:hover {
    color: var(--text-tertiary) !important;
}

.link-t-to-w:hover {
    color: var(--text-white) !important;
}

.link-w-to-p:hover {
    color: var(--text-white) !important;
}

.link-w-to-p:hover {
    color: var(--text-primary) !important;
}

.link-w-to-s {
    color: var(--text-white) !important;
}

.link-w-to-s:hover {
    color: var(--text-secondary) !important;
}

.link-w-to-t:hover {
    color: var(--text-white) !important;
}

.link-w-to-t:hover {
    color: var(--text-tertiary) !important;
}

/* LINK BORDER START */
.link-border {
    display: inline-block;
}

.link-border:after {
    content: '';
    display: block;
    border-bottom: solid 1px;
    transform: scaleX(0);
    transition: var(--transition-transform);
}

.link-border:after {
    transform-origin: 100% 50%;
}

.link-border:hover:after {
    transform: scaleX(1);
    transform-origin: 0% 50%;
}

.link-border-p:after {
    border-color: var(--text-primary);
}

.link-border-s:after {
    border-color: var(--text-secondary);
}

.link-border-t:after {
    border-color: var(--text-tertiary);
}

.link-border-w:after {
    border-color: var(--white);
}

/* LINK BORDER END */
/****** LINK END ******/


/****** FILTER START ******/
/* FILTER PRIMARY START */
.filter-p {
    filter: var(--filter-primary);
}

.filter-p-to-s-parent img,
.filter-p-to-s {
    filter: var(--filter-primary);
}

.filter-p-to-s-parent:hover img,
.filter-p-to-s:hover {
    filter: var(--filter-secondary);
}

.filter-p-to-t {
    filter: var(--filter-primary);
}

.filter-p-to-t:hover {
    filter: var(--filter-tertiary);
}

.filter-p-to-w {
    filter: var(--filter-primary);
}

.filter-p-to-w:hover {
    filter: var(--filter-white);
}

.filter-p-to-b {
    filter: var(--filter-primary);
}

.filter-p-to-b:hover {
    filter: var(--filter-black);
}

.filter-p-to-g {
    filter: var(--filter-primary);
}

.filter-p-to-g:hover {
    filter: var(--filter-gray);
}

.filter-s-to-p-parent img,
.filter-s-to-p {
    filter: var(--filter-secondary);
}

.filter-s-to-p-parent:hover img,
.filter-s-to-p:hover {
    filter: var(--filter-primary);
}

/* FILTER PRIMARY END */

/* FILTER SECONDARY START */
.filter-s {
    filter: var(--filter-secondary);
}

.filter-s-to-p {
    filter: var(--filter-secondary);
}

.filter-s-to-p:hover {
    filter: var(--filter-primary);
}

.filter-s-to-t {
    filter: var(--filter-secondary);
}

.filter-s-to-t:hover {
    filter: var(--filter-tertiary);
}

.filter-s-to-w {
    filter: var(--filter-secondary);
}

.filter-s-to-w:hover {
    filter: var(--filter-white);
}

.filter-s-to-b {
    filter: var(--filter-secondary);
}

.filter-s-to-b:hover {
    filter: var(--filter-black);
}

.filter-s-to-g {
    filter: var(--filter-secondary);
}

.filter-s-to-g:hover {
    filter: var(--filter-gray);
}

/* FILTER SECONDARY END */

/* FILTER TERTIARY START */
.filter-t {
    filter: var(--filter-tertiary);
}

.filter-t-to-p {
    filter: var(--filter-tertiary);
}

.filter-t-to-p:hover {
    filter: var(--filter-primary);
}

.filter-t-to-s {
    filter: var(--filter-tertiary);
}

.filter-t-to-s:hover {
    filter: var(--filter-secondary);
}

.filter-t-to-w {
    filter: var(--filter-tertiary);
}

.filter-t-to-w:hover {
    filter: var(--filter-white);
}

.filter-t-to-b {
    filter: var(--filter-tertiary);
}

.filter-t-to-b:hover {
    filter: var(--filter-black);
}

.filter-t-to-g {
    filter: var(--filter-tertiary);
}

.filter-t-to-g:hover {
    filter: var(--filter-gray);
}

/* FILTER TERTIARY END */

/* FILTER WHITE START */
.filter-w {
    filter: var(--filter-white);
}

.filter-w-to-p {
    filter: var(--filter-white);
}

.filter-w-to-p:hover {
    filter: var(--filter-primary);
}

.filter-w-to-s {
    filter: var(--filter-white);
}

.filter-w-to-s:hover {
    filter: var(--filter-secondary);
}

.filter-w-to-t {
    filter: var(--filter-white);
}

.filter-w-to-t:hover {
    filter: var(--filter-tertiary);
}

.filter-w-to-b {
    filter: var(--filter-white);
}

.filter-w-to-b:hover {
    filter: var(--filter-black);
}

.filter-w-to-g {
    filter: var(--filter-white);
}

.filter-t-to-g:hover {
    filter: var(--filter-gray);
}

/* FILTER WHITE END */

/* FILTER BLACK START */
.filter-b {
    filter: var(--filter-black);
}

.filter-b-to-p {
    filter: var(--filter-black);
}

.filter-b-to-p:hover {
    filter: var(--filter-primary);
}

.filter-b-to-s {
    filter: var(--filter-black);
}

.filter-b-to-s:hover {
    filter: var(--filter-secondary);
}

.filter-b-to-t {
    filter: var(--filter-black);
}

.filter-b-to-t:hover {
    filter: var(--filter-tertiary);
}

.filter-b-to-w {
    filter: var(--filter-black);
}

.filter-b-to-w:hover {
    filter: var(--filter-white);
}

.filter-b-to-g {
    filter: var(--filter-black);
}

.filter-t-to-g:hover {
    filter: var(--filter-gray);
}

/* FILTER BLACK END */

/* FILTER GRAY START */
.filter-g {
    filter: var(--filter-gray);
}

.filter-g-to-p {
    filter: var(--filter-gray);
}

.filter-g-to-p:hover {
    filter: var(--filter-primary);
}

.filter-g-to-s {
    filter: var(--filter-gray);
}

.filter-g-to-s:hover {
    filter: var(--filter-secondary);
}

.filter-g-to-t {
    filter: var(--filter-gray);
}

.filter-g-to-t:hover {
    filter: var(--filter-tertiary);
}

.filter-g-to-w {
    filter: var(--filter-gray);
}

.filter-g-to-w:hover {
    filter: var(--filter-white);
}

.filter-g-to-b {
    filter: var(--filter-gray);
}

.filter-g-to-b:hover {
    filter: var(--filter-black);
}

/* FILTER GRAY END */
/****** FILTER END ******/


/****** BUTTON START ******/


/****** BUTTON END ******/


/****** BOX SHADOW START ******/
.box-shadow {
    box-shadow: var(--box-shadow);
}

.box-shadow-b {
    box-shadow: var(--box-shadow-bottom);
}

/****** BOX SHADOW END ******/