// @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=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');


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

/*
* Heading Size 
**/ 
// min width 992
$h1-banner-size-min-width-992 : 90px;
$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 :  80px;
$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 :  75px;
$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 :  45px;
$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;

/** ================================== Dark Mode ================================== **/
/** ======= Body bg color ======= **/
$bodyBgColor : #0c1536;
/**  ======= Primary, secondary, tertiary ======= **/
$PrimaryGoldColor: linear-gradient(90deg, #f5e3b3, #e4ca97, #9c895e);
$PrimaryColor :#e4ca97;
$SecondaryColor: #252526;
$TertiaryColor : #252525;
/** ======= colors  ======= **/
$whiteColor : #FFFFFF;
$blackColor : #0D1011;
$textColor : #d7d7d7;
$hrefColor : #e4ca97;
$colorError : #ddd;
$colorRed : #E80009;
$colorGreen : #6F9B00;
/** ======= CTA ======= **/
$ctaTextColor : #0c1536;
$ctaBgColor : linear-gradient(90deg, #f5e3b3, #e4ca97, #9c895e);
$ctaBgHoverColor : #000000;
$ctaHoverTextColor : #FFFFFF; 
/** ======= NAV BAR ======= **/
$BgColorNavbarFixed : #0c1536;
$ColorNavLinkFixed : #FFFFFF;
$BgColorNavbar : #0c1536;
$ColorNavLink : #FFFFFF;
$HoverColorNavLink : #252526;
$HoverColorBorderBottomNavLink : #e4ca97;
/** ======= FOOTER ======= **/
$footerBgColor : #151515;
$hrBorderColor : #252526;
$footerTitleColor : #d7d7d7;
$footerTextColor : #d7d7d7;
/** ======= Tables ======= **/
$TableBgColor : #5e5e5e;
$TableHoverBgColor : #515151;
$TableTextColor : #ffffff;
$delivered : #00c400;
$canceled : #e4ca97;
$pending : #ff8a66;
$accepted : #ffffff;
$statusBgColor : #0c1536;
/** ======= banner / sliders ======= **/
$bannerBgColor : #000;
$bannerH1Color : #ffffff;
$bannerH2Color : #e4ca97;
$bannerTextColor : #ffffff;
/** =======  Primary Sections  ======= **/
$SectionPrimaryBgColor : #0c1536;
$SectionPrimaryH1Color : #FFFFFF; 
$SectionPrimaryH2Color : #FFFFFF;
$SectionPrimaryH3Color : #FFFFFF;
$SectionPrimaryH4Color :#FFFFFF;
$SectionPrimaryH5Color : #FFFFFF;
$SectionPrimaryH6Color : #FFFFFF;
$SectionPrimarySubTitleColor :#FFFFFF;
$SectionPrimaryTextColor : #d7d7d7;
/** =======  Secondary Sections  ======= **/
$SectionSecondaryBgColor : #121d46;
$SectionSecondaryH1Color : #FFFFFF;
$SectionSecondaryH2Color : #FFFFFF;
$SectionSecondaryH3Color : #FFFFFF;
$SectionSecondaryH4Color :#FFFFFF;
$SectionSecondaryH5Color : #FFFFFF;
$SectionSecondaryH6Color : #FFFFFF;
$SectionSecondarySubTitleColor :#FFFFFF;
$SectionSecondaryTextColor : #d7d7d7;
/** ======= Card Products ======= **/
$ProductPrimaryBgColor : #0c1536;
$ProdutSecondaryBgColor : #121d46;
$productTitleColor : #FFFFFF;
$productDesColor : #FFFFFF;
$productPriceColor : #e4ca97;
$bgCheckedElementPrimary: #e4ca97;
$bgCheckedElementSecondary: #e4ca97;
$btnQteMinusPlusCart: #e4ca97;

/** ======= Icons color ======= **/
$socialMediaIconsColor : #FFFFFF;
$footerIconsColor : #FFFFFF;
$formContactIconsColor : #252526;
$servicesIconsColor : #252526;
$crudIconsColor : #FFFFFF;
$navbarDesktopIconsColor : #0c1536;
$navbarMobileIconsColor : #FFFFFF;
$closeIconsColor : #FFFFFF;
$readMoreIconsColor : #0c1536;
/** ======= select option ======= **/
$textSelectOption : #0c1536;
/*** ======= Section contact ======= **/
$SectionContactbgColor : #2a2929;
$ContactItemTitleColor : #FFFFFF;
$ContactItemTextColor : #d7d7d7;
$ContactBorderItemIconColor : #e4ca97;
$ContactItemIconColor : #FFFFFF;
/*** ======= Section values or services ======= **/
$SectionServicesbgColor : #2a2929;
$ServicesbgColor : linear-gradient(90deg, #f5e3b3, #e4ca97, #9c895e); 
$ServicesHoverbgColor : #0c1536;
$ServicesTitleColor :  #0c1536;
$ServicesHoverTitleColor :  #0c1536;
$ServicesTextColor : #0c1536;
$ServicesHoverTextColor : #2a2929;
$ServicesIconBgColor :  #0c1536;
$ServicesIconColor :  #e4ca97; 
$ServicesHoverIconColor : #2a2929;
/** ================================== END Dark Mode ================================== **/