@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600&Poppins:wght@400;600&display=swap');

:root {
    --smplsColorWhite-hsl: 0, 0%, 100%;
    --smplsColorBlack-hsl: 213, 18%, 1%;
    --smplsColorPrimary-hsl: 19, 18%, 65%;
    --smplsColorLightPrimary-hsl: 32, 25%, 80%;
    --smplsColorDarkPrimary-hsl: 147, 20%, 7%;
    --smplsColorParagraph-hsl: 240, 4%, 46%;
    --smplsColorParagraphDark-hsl: 0, 0%, 70%;
    --smplsFontHeading: "Sofia Sans", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --smplsFontParagraph: "Poppins", sans-serif;
    --smplsFontButton: "Sofia Sans", sans-serif;
    --smplsFontMisc: "Sofia Sans", sans-serif;
    --smplsColorGray50: #fafaf9;
    --smplsColorGray100: #f5f5f4;
    --smplsColorGray200: #e7e5e4;
    --smplsColorGray300: #d6d3d1;
    --smplsColorGray400: #a8a29e;
    --smplsColorGray500: #78716c;
    --smplsColorGray600: #57534e;
    --smplsColorGray700: #44403c;
    --smplsColorGray800: #292524;
    --smplsColorGray900: #1c1917;
    --smplsColorGray950: #0c0a09;
    --smplsContainer3xl: 1140px;
    --smplsContainer2xl: 1140px;
}
:root {
    --smplsFontSizeHtml: 100%;
    --smplsFontSizeBody: 16px;
    --smplsFontSizeNavigationItem: 16px;
    --smplsLineHeightParagraph: 2;
    --smplsFontWeightParagraph: 400;
    --smplsLetterSpacingParagraph: 0.4;

    --smplsColorBody: hsla(var(--smplsColorWhite-hsl));
    --smplsColorBodyDark: var(--smplsColorGray900);
    --smplsColorParagraph: hsla(var(--smplsColorParagraph-hsl));
    --smplsColorParagraphDark: hsla(var(--smplsColorParagraphDark-hsl));
    --smplsColorWhite: hsla(var(--smplsColorWhite-hsl));
    --smplsColorBlack: hsla(var(--smplsColorBlack-hsl));
    --smplsColorPrimary: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorLightPrimary: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorDarkPrimary:hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorLink: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorLinkHover: hsla(var(--smplsColorBlack-hsl));
    --smplsRadiusBase: 0px;

    --smplsColorHeader: transparent;
    --smplsColorHeaderDark: transparent;
    --smplsColorHeaderText: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeaderTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorHeadroom: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeadroomDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeaderMoreTools: hsla(var(--smplsColorWhite-hsl));
    --smplsColorHeaderMoreToolsDark: hsla(var(--smplsColorBlack-hsl));

    --smplsColorButton: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorButtonHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorButtonText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorButtonBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorButtonUnderlined: hsla(var(--smplsColorBlack-hsl));
    --smplsColorButtonUnderlinedInversed: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorButtonUnderlinedHover: hsla(var(--smplsColorBlack-hsl));
    --smplsColorButtonUnderlinedInversedHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsRadiusButton: 0px;
    --smplsFontWeightButton: 400;
    --smplsLetterSpacingButton: 0.05em;
    --smplsBorderWidthButton: 1px solid transparent;
    --smplsTextTransformButton: uppercase;

    --smplsColorHeading: hsla(var(--smplsColorBlack-hsl));
    --smplsColorHeadingHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorHeadingDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorHeadingDarkHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorSubHeading: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorSubHeadingDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsFontWeightSubHeading: 100;
    --smplsFontWeightHeading: 700;
    --smplsLetterSpacingHeading: inherit;
    --smplsLetterSpacingSubHeading: .1em;
    --smplsFontSubHeading: var(--smplsFontButton);
    --smplsTextTranformHeading: none;
    --smplsTextTranformSubHeading: uppercase;
    --smplsLineHeightHeading: 1.3;
    --smplsLineHeightSubHeading: 1.375;

    --smplsColorIcon: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorIconText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorIconInvert: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorIconInvertText: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorIconBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconInvertBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorIconFlat: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconFlatHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorIconFlatDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorIconFlatHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorIconBorderDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsRadiusIcon: 0px;
    --smplsBorderWidthIcon: 0;

    --smplsColorCard: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorCardDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorCardButton: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorCardButtonDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardButtonText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardButtonTextDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardIcon: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardIconDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorCardIconText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardIconTextDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardIconBorder: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardText: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorCardTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorCardHeading: hsla(var(--smplsColorBlack-hsl));
    --smplsColorCardHeadingDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorCardLink: hsla(var(--smplsColorPrimary-hsl));

    --smplsColorSectionOverlay: hsla(var(--smplsColorBlack-hsl));
    --smplsColorSectionOverlayGradient: linear-gradient(0deg, rgba(33, 29, 22, 0.841) 0%, rgba(33, 32, 22, 0.58) 50%, rgb(33, 32, 22) 100%);
    --smplsColorCirclesStart: hsla(0, 0%, 100%, 0.17);
    --smplsColorCirclesEnd: hsla(0, 0%, 100%, 0.07);

    --smplsColorModal: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorModalHeading: hsla(var(--smplsColorWhite-hsl));
    --smplsColorModalText: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorModalButton: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorModalButtonText: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorModalInput: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorModalInputPlaceholder: var(--smplsColorGray600);

    --smplsColorInput: transparent;
    --smplsColorInputText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorInputPlaceholder: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsBorderWidthInput: 0px 0px 1px 0px;
    --smplsBorderColorInput: var(--smplsColorDarkPrimary);
    --smplsBorderColorInputInversed: var(--smplsColorLightPrimary);

    --smplsColorFooter: hsla(var(--smplsColorBlack-hsl));
    --smplsColorFooterDark: hsla(var(--smplsColorBlack-hsl));
    --smplsColorFooterCopyrightDark: var(--smplsColorGray900);
    --smplsColorFooterText: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterCopyright: black;

    --smplsColorNavigation: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorNavigationDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItem: hsla(var(--smplsColorBlack-hsl));
    --smplsColorNavigationItemHover: hsla(var(--smplsColorWhite-hsl));
    --smplsColorNavigationItemSub: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItemSubHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationItemDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorNavigationItemHoverDark: hsla(var(--smplsColorWhite-hsl));
    --smplsColorNavigationSubmenu: hsla(var(--smplsColorWhite-hsl));
    --smplsColorNavigationSubmenuDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationSubmenuItem: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorNavigationSubmenuItemHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorNavigationSubmenuItemDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorNavigationSubmenuItemHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorMobileMenu: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorMobileMenuItem: hsla(var(--smplsColorBlack-hsl));
    --smplsColorMobileMenuItemBorder: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsFontWeightNavigationItem: 400;
    --smplsFontNavigationItem: var(--smplsFontButton);
    --smplsNavColor: var(--smplsColorDarkPrimary);
    --smplsNavColorInvert: var(--smplsColorWhite);
    --smplsNavActiveColor: var(--smplsColorPrimary);
    --smplsNavBorder: 1px solid var(--smplsColorPrimary);
    --smplsNavBorderColor: var(--smplsColorWhite);

    --smplsColorSwiperButton: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsBorderWidthSwiperButton: 1px;

    --smplsColorFooterHeading: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterHeadingDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterLink: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterLinkHover: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterLinkDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterLinkHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIcon: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconText: hsla(var(--smplsColorWhite-hsl));
    --smplsColorFooterIconInvert: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterIconInvertText: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorFooterIconBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconInvertBorder: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconTextDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterIconFlat: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconFlatHover: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorFooterIconFlatDark: hsla(var(--smplsColorLightPrimary-hsl));
    --smplsColorFooterIconFlatHoverDark: hsla(var(--smplsColorPrimary-hsl));
    --smplsColorFooterIconBorderDark: hsla(var(--smplsColorPrimary-hsl));

    --smplsColorMobileMenuDark: hsla(var(--smplsColorDarkPrimary-hsl));
    --smplsColorMobileMenuOverlay: hsla(var(--smplsColorBlack-hsl), 0.9);
    --smplsColorMobileMenuOverlayDark: hsla(var(--smplsColorBlack-hsl));
    --smplsNavBorderColorDark: var(--smplsColorBlack);

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