/* Theme Name: FoodMart Theme URI: https://templatesjungle.com/ Author: TemplatesJungle Author URI: https://templatesjungle.com/ Description: FoodMart is specially designed product packaged for eCommerce store websites. Version: 1.1 */ /*-------------------------------------------------------------- This is main CSS file that contains custom style rules used in this template --------------------------------------------------------------*/ /*------------------------------------*\ Table of contents \*------------------------------------*/ /*------------------------------------------------ CSS STRUCTURE: 1. VARIABLES 2. GENERAL TYPOGRAPHY 2.1 General Styles 2.2 Floating & Alignment 2.3 Forms 2.4 Lists 2.5 Code 2.6 Tables 2.7 Spacing 2.8 Utilities 2.9 Misc - Row Border - Zoom Effect 2.10 Buttons - Button Sizes - Button Shapes - Button Color Scheme - Button Aligns 2.11 Section - Hero Section - Section Title - Section Paddings - Section Margins - Section Bg Colors - Content Colors - Content Borders 3. EXTENDED TYPOGRAPHY 3.1 Blockquote / Pullquote 3.2 Text Highlights 4. CONTENT ELEMENTS 4.1 Tabs 4.2 Accordions 4.3 Brand Carousel 4.4 Category Carousel 5. BLOG STYLES 5.1 Blog Single Post 5.2 About Author 5.3 Comments List 5.4 Comments Form3 6. SITE STRUCTURE 6.1 Header - Header Menu - Nav Sidebar 6.2 Billboard 6.3 About Us Section 6.4 Video Section 6.5 Selling Products Section 6.6 Quotation Section 6.7 Latest Blogs Section 6.8 Newsletter Section 6.9 Instagram Section 6.10 Footer - Footer Top - Footer Bottom 7. OTHER PAGES 7.1 Product detail 7.2 Shop page /*-------------------------------------------------------------- /** 1. VARIABLES --------------------------------------------------------------*/ /* on mobile devices below 600px */ @media screen and (max-width: 600px) { :root { --header-height : 100px; --header-height-min : 80px; }} /* Theme Colors */ /* Fonts */ body { --bs-link-color: #333; --bs-link-hover-color:#333; --bs-link-color-rgb: 40,40,40; --bs-link-hover-color-rgb: 0,0,0; /* --bs-link-color: #FFC43F; --bs-link-hover-color: #FFC43F; */ --bs-light-rgb: 248, 248, 248; --bs-font-sans-serif: "Open Sans", sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 2; --bs-body-color: #747474; --bs-primary: #FFC43F; --bs-primary-rgb: 255, 196, 63; --bs-success: #a3be4c; --bs-success-rgb: 163, 190, 76; --bs-primary-bg-subtle: #FFF9EB; --bs-success-bg-subtle: #eef5e5; --bs-border-color: #F7F7F7; --bs-secondary-rgb: 230, 243, 251; /* --bs-success-rgb: 238, 245, 228; */ --bs-danger-rgb: 249, 235, 231; --bs-warning-rgb: 255, 249, 235; --bs-info-rgb: 230, 243, 250;}.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #ffc43f; --bs-btn-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #f7a422; --bs-btn-hover-border-color: transparent; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #ffc43f; --bs-btn-active-border-color: transparent; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d3d7dd; --bs-btn-disabled-border-color: transparent;}body { letter-spacing: 0.03em;}h1,h2,h3,h4,h5,h6 { font-family: var(--heading-font); color: var(--dark-color); font-weight: 700;}.display-1, .display-2, .display-3, .display-4, .display-5, .dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary);} .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 3rem;}/*----------------------------------------------*/ /* 6. SITE STRUCTURE */ /*----------------------------------------------*/ /* 6.1 Header --------------------------------------------------------------*/ /* Preloader */ .preloader-wrapper { width: 100%; height: 100vh; margin: 0 auto; position: fixed; top: 0; left: 0; z-index: 111; background: #fff;} .preloader:before, .preloader:after { content: ''; position: absolute; top: 0;} .preloader:before, .preloader:after, .preloader { border-radius: 50%; width: 2em; height: 2em; animation: animation 1.2s infinite ease-in-out;} .preloader { animation-delay: -0.16s;} .preloader:before { left: -3.5em; animation-delay: -0.32s;} .preloader:after { left: 3.5em;} @keyframes animation { 0%, 80%, 100% { box-shadow: 0 2em 0 -1em var(--accent-color); }} /* *** Start editing below this line *** */ .container-fluid { max-width: 1600px;}.banner-blocks { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 1fr); grid-gap: 2rem;}.block-1 { grid-area: 1 / 1 / 3 / 8; }.block-2 { grid-area: 1 / 8 / 2 / 13; }.block-3 { grid-area: 2 / 8 / 3 / 13; }@media screen and (max-width:1140px) { .banner-blocks { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .block-1 { grid-area: 1 / 1 / 3 / 2; } .block-2 { grid-area: 3 / 1 / 4 / 2; } .block-3 { grid-area: 4 / 1 / 5 / 2; } } /* banner ad */ .banner-ad { position: relative; overflow: hidden; border-radius: 12px;}/* .banner-ad .banner-content { padding: 52px;} /* Swiper carousel */ .swiper-prev, .swiper-prev:hover, /* category carousel */ /* brand carousel */ /* product tabs */ .product-tabs .nav-tabs .nav-link.active, /* product-grid */ /* .product-grid { gap: 25px;} */ /* cart */ /* floating image */ @media screen and (max-width:991px) { .image-float { margin: 0; }} /* post item */ @media screen and (max-width: 991px) { /* offcanvas menu */ .offcanvas-body .nav-item { font-weight: 700; border-bottom: 1px solid #d1d1d1; } /* dropdown-menu */ .dropdown-menu { padding: 0; border: none; line-height: 1.4; font-size: 0.9em; } .dropdown-toggle::after { position: absolute; right: 0; top: 21px; }} /* single product */ /* product-thumbnail-slider */ @media screen and (max-width:992px) { .product-thumbnail-slider { margin-top: 20px; height: auto; }} @media screen and (min-width:992px) { .product-thumbnail-slider { height: 520px; }} @media screen and (min-width:1200px) { .product-thumbnail-slider { height: 740px; }}