// @import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');


/*
Font family 
*/
$fontFamilyPrimary : "Rubik";
$fontFamilySecondary: 'Rubik';

/*
* Heading Size 
**/
// min width 992
// min width 992
$h1-banner-size-min-width-992 : 34px;
$h1-size-min-width-992 : 45px; 
$h2-left-size-min-width-992 : 35px;
$h2-right-size-min-width-992 : 35px;
$h2-center-size-min-width-992 : 50px;
$h3-size-min-width-992 : 16px;
$h4-size-min-width-992 : 16px;
$h5-size-min-width-992 : 17px;
$h6-size-min-width-992 : 18px;
$subtitle-size-min-width-992 : 16px;
$text-size-min-width-992 : 16px;
// min width 768
$h1-banner-size-min-width-768 :  34px;
$h1-size-min-width-768 : 45px;
$h2-left-size-min-width-768 : 30px;
$h2-right-size-min-width-768 : 30px;
$h2-center-size-min-width-768 : 30px;
$h3-size-min-width-768 : 15px;
$h4-size-min-width-768 : 15px;
$h5-size-min-width-768 : 16px;
$h6-size-min-width-768 : 18px;
$subtitle-size-min-width-768 : 15px;
$text-size-min-width-768 : 15px;
// min width 576
$h1-banner-size-min-width-576 : 34px;
$h1-size-min-width-576 :35px;
$h2-left-size-min-width-576 : 35px;
$h2-right-size-min-width-576 : 35px;
$h2-center-size-min-width-576 : 50px;
$h3-size-min-width-576 : 14px;
$h4-size-min-width-576 : 14px;
$h5-size-min-width-576 : 15px;
$h6-size-min-width-576 : 18px;
$subtitle-size-min-width-576 : 12px;
$text-size-min-width-576 : 14px;
// min width 0
$h1-banner-size-min-width-0 : 32px;
$h1-size-min-width-0 : 32px;
$h2-left-size-min-width-0 : 25px;
$h2-right-size-min-width-0 : 25px;
$h2-center-size-min-width-0 : 25px;
$h3-size-min-width-0 : 14px;
$h4-size-min-width-0 : 14px;
$h5-size-min-width-0 : 14px;
$h6-size-min-width-0 : 18px;
$subtitle-size-min-width-0 : 12px;
$text-size-min-width-0 : 13px;
/** ================================== Light Mode ================================== **/
/** ======= Body bg color ======= **/
$bodyBgColor : #FFFFFF;
 /**  ======= Primary, secondary, tertiary ======= **/
$PrimaryColor: #9c895e;
$SecondaryColor: #252526;
$TertiaryColor : #252525;
/** ======= colors  ======= **/
$whiteColor : #FFFFFF;
$blackColor : #0D1011;
$textColor : #d7d7d7;
$hrefColor : #9c895e;
$colorError : #ddd;
$colorRed : red;

$colorGreen : #6F9B00;

/** ======= CTA ======= **/
$ctaTextColor : #FFFFFF;
$ctaBgColor : #9c895e;
$ctaHoverColor : #f3f3f3;
$cta2TextColor : #FFFFFF;
$cta2BgColor : #f3f3f3;
$cta2HoverColor : #9c895e;
/** ======= NAV BAR ======= **/
$BgColorNavbarFixed : #FFFFFF;
$ColorNavLinkFixed : #111;
$BgColorNavbar : #FFFFFF;
$ColorNavLink : #111;
$HoverColorNavLink : #9c895e;
$HoverColorBorderBottomNavLink : #9c895e;
/** ======= FOOTER ======= **/
$footerBgColor : #151515;
$hrBorderColor : #9c895e;
$footerTitleColor : #d7d7d7;
$footerTextColor : #d7d7d7;
/*** ======= Tables bg color ======= **/
$TableBgColor : #f3f7fb;
$TableHoverBgColor : #eee;
$TableTextColor : #111;
$delivered : #00c400;
$canceled : #d11e27;
$pending : #ff8a66;
$accepted : #9c895e;
$statusBgColor : rgba(41, 43, 117, .11);
/** ======= banner / sliders ======= **/
$bannerBgColor : #111;
$bannerH1Color : #ffffff;
$bannerH2Color : #ffffff;
$bannerTextColor : #ffffff;
/** =======  Primary Sections  ======= **/
$SectionPrimaryBgColor : #f3f3f3;
$SectionPrimaryH1Color : #FFFFFF;
$SectionPrimaryH2Color : #111;
$SectionPrimaryH3Color : #111;
$SectionPrimaryH4Color :#111;
$SectionPrimaryH5Color : #111;
$SectionPrimaryH6Color : #111;
$SectionPrimarySubTitleColor :#9c895e;
$SectionPrimaryTextColor : #111;
/** ======= Secondary Sections  ======= **/
$SectionSecondaryBgColor : #FFFFFF;
$SectionSecondaryH1Color : #FFFFFF;
$SectionSecondaryH2Color : #111;
$SectionSecondaryH3Color : #111;
$SectionSecondaryH4Color :#111;
$SectionSecondaryH5Color : #111;
$SectionSecondaryH6Color : #111;
$SectionSecondarySubTitleColor :#9c895e;
$SectionSecondaryTextColor : #262626;
/** ======= Card Products ======= **/
$ProductPrimaryBgColor : #f3f3f3;
$ProdutSecondaryBgColor : #FFFFFF;
$productTitleColor : #111;
$productDesColor : #111;
$productPriceColor : #9c895e;
/** ======= Icons color ======= **/
$socialMediaIconsColor : #FFFFFF;
$footerIconsColor : #FFFFFF;
$servicesIconsColor : #111;
$crudIconsColor : #FFFFFF;
$navbarDesktopIconsColor : #111;
$navbarMobileIconsColor : #FFFFFF;
$closeIconsColor : #111;
$readMoreIconsColor : #111;
/** ======= select option =======**/
$textSelectOption : #111;
/*** ======= Section contact ======= **/
$SectionContactbgColor : #111;
$ContactItemTitleColor : #111;
$ContactItemTextColor : #262626;
$ContactBorderItemIconColor : #42d11e;
$ContactItemIconColor : #9c895e;
/*** ======= Section values or services ======= **/
$SectionServicesbgColor : #9c895e;
$ServicesbgColor : #9c895e;
$ServicesHoverbgColor : #111;
$ServicesH3Color : #ffffff;
$ServicesHoverH3Color : #ffffff;
$ServicesTextColor : #d7d7d7;
$ServicesHoverTextColor : #ffffff;
$ServicesIconColor : #ffffff;
$ServicesHoverIconColor : #9c895e;

/** ================================== END Light Mode ================================== **/