/*
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
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --accent-color: #FFC43F;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995B1;
  --light-primary-color: #eef1f3;
}

/* Fonts */
:root {
  --body-font: "Open Sans", sans-serif;
  --heading-font: "Nunito", sans-serif;
}

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;
}

.btn-outline-primary {
  --bs-btn-color: #ffc43f;
  --bs-btn-border-color: #ffc43f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}

.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}

.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}

.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}

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,
.display-6 {
  font-weight: 700;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.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-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.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);
  }

  40% {
    box-shadow: 0 2em 0 0 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.blue {
  background: #e6f3fb;
}

.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #FFF;
  opacity: 1;
  transition: background 0.3s ease-out;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFC43F;
}

.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}

/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
  font-family: 'Garamond';
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}

.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}

.banner-ad .banner-content .sale:before {
  content: '';
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}

.banner-ad .banner-content .sale:after {
  content: 'SALE';
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}

.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}

.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}

.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #FFC43F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}

.swiper-prev:hover,
.swiper-next:hover {
  background: #FFC43F;
}

.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  text-transform: capitalize;
  color: #787878;
}

/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.category-carousel .category-item:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}

.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}

.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}

.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;

  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}

.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
  border: 1px solid orange;
}

.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}

.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}

.product-item figure img {
  max-height: 210px;
  height: auto;
}

.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}

.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}

.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}

.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}

.product-item .rating iconify-icon {
  color: #FFC43F;
}

.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}

.product-item .product-qty {
  width: 85px;
}

.product-item .btn-link {
  text-decoration: none;
}

.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}

.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}

@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}

/* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}

.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

  .dropdown-menu a {
    padding-left: 0;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}

@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;
  }
}



.about-section {
  padding: 100px 0;
  position: relative;
}

.gray-bg {
  background-color: #f5f5f5;
}

.about-section img {
  max-width: 100%;
}

.about-section img {
  vertical-align: middle;
  border-style: none;
}

/* About Me 
---------------------*/
.about-text h3 {
  font-size: 45px;
  font-weight: 700;

}

@media (max-width: 767px) {
  .about-text h3 {
    font-size: 35px;
  }
}

.about-text h6 {
  font-weight: 600;

}

@media (max-width: 767px) {
  .about-text h6 {
    font-size: 18px;
  }
}

.about-text p {
  font-size: 18px;

}

.about-text p mark {
  font-weight: 600;
  color: #20247b;
}

.about-list {
  padding-top: 10px;
}

.about-list .media {
  padding: 5px 0;
}

.about-list label {
  color: #20247b;
  font-weight: 600;
  width: 88px;
  margin: 0;
  position: relative;
}

.about-list label:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 11px;
  width: 1px;
  height: 12px;
  background: #20247b;
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  margin: auto;
  opacity: 0.5;
}

.about-list p {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 991px) {
  .about-avatar {
    margin-top: 30px;
  }
}

.about-section .counter {
  padding: 22px 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
}

.about-section .counter .count-data {
  margin-top: 10px;
  margin-bottom: 10px;
}

.about-section .counter .count {
  font-weight: 700;
  color: #20247b;
  margin: 0 0 5px;
}

.about-section .counter p {
  font-weight: 600;
  margin: 0;
}

mark {
  background-image: linear-gradient(rgba(252, 83, 86, 0.6), rgba(252, 83, 86, 0.6));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-color: transparent;
  padding: 0;
  color: currentColor;
}

.theme-color {
  color: #fc5356;
}

.dark-color {
  color: #20247b;
}

.gradient-brand-color {
  background-image: -webkit-linear-gradient(0deg, #376be6 0%, #6470ef 100%);
  background-image: -ms-linear-gradient(0deg, #376be6 0%, #6470ef 100%);
  color: #a1d2ec;
}

.contact-info__wrapper {
  overflow: hidden;
  border-radius: .625rem .625rem 0 0
}

@media (min-width: 1024px) {
  .contact-info__wrapper {
    border-radius: 0 .625rem .625rem 0;
    padding: 5rem !important
  }
}

.contact-info__list span.position-absolute {
  left: 0
}

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

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

.contact__wrapper {
  background-color: #fff;
  border-radius: 0 0 .625rem .625rem
}

@media (min-width: 1024px) {
  .contact__wrapper {
    border-radius: .625rem 0 .625rem .625rem
  }
}

@media (min-width: 1024px) {
  .contact-form__wrapper {
    padding: 5rem !important
  }
}

.shadow-lg,
.shadow-lg--on-hover:hover {
  box-shadow: 0 1rem 3rem rgba(132, 138, 163, 0.1) !important;
}


.why-choose-us img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.sub-info {
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: #004975;
}

.display-30 {
  font-size: 0.9rem;
}


.team-list img {
  width: 60%;
}

.team-list .content {
  width: 100%;
}

.team,
.team-list {
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

.shadow {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
}

.rounded {
  border-radius: 5px !important;
}

.team-list .content .follow {
  position: absolute;
  bottom: 24px;
}

.list-inline-item:not(:last-child) {
  margin-right: 0px;
  margin-bottom: 0px;
}



.rounded {
  border-radius: 5px !important;
}


.text-muted {
  color: #8492a6 !important;
}



#testimonials {
  background-color: #f9f9f9;
}

#testimonials .testimonial {
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

#testimonials img {
  margin-bottom: 1rem;
}

#testimonials h5 {
  margin-top: 1rem;
  font-size: 1.25rem;
}

#testimonials p {
  font-size: 1rem;
  line-height: 1.6;
}

#testimonials .carousel-control-prev-icon,
#testimonials .carousel-control-next-icon {
  background-color: var(--dark);
  border-radius: 50%;
}

@media only screen and (max-width: 768px) {
  .center-content {
    text-align: center;
  }
}


/* Default styles for large screens */
.slider-image {
  height: 575px;
}

/* For medium-sized screens (e.g., tablets) */
@media (max-width: 1024px) {
  .slider-image {
    height: 500px;
  }
}

/* For smaller screens (e.g., mobile phones) */
@media (max-width: 768px) {
  .slider-image {
    height: auto;
  }
}

/* For extra small screens (e.g., very small mobile devices) */
@media (max-width: 480px) {
  .slider-image {
    height: auto;
  }
}





/* Custom Styles */
.product-slider {
  max-width: 100%;
  margin-bottom: 30px;
}

.product-image {
  height: 400px;
  object-fit: contain;
}

.product-details {
  padding: 30px;
}

.product-name {
  font-size: 2rem;
  font-weight: 600;
}

/* Responsive layout overrides shared by the home page and product pages. */
@media (max-width: 991.98px) {
  header .container-fluid {
    max-width: 100%;
  }

  header > .container-fluid:first-child .row {
    align-items: center;
    margin: 0;
  }

  header > .container-fluid:first-child [class*="col-"] {
    width: 33.333%;
    padding: 2px 6px;
    font-size: .68rem;
    line-height: 1.35;
  }

  header > .container-fluid:first-child [class*="col-"] span {
    display: inline-block;
    padding: 0 !important;
  }

  header > .container-fluid:nth-child(2) > .row {
    align-items: center;
    margin: 0;
    padding: 14px 12px !important;
  }

  header > .container-fluid:nth-child(2) [class*="col-"] {
    width: 50%;
    padding: 0 6px;
  }

  header > .container-fluid:nth-child(2) [class*="col-"]:last-child {
    display: none !important;
  }

  header .main-logo {
    text-align: left;
  }

  header .main-logo img {
    width: 110px !important;
    max-width: 100%;
  }

  header .input-group {
    width: 100%;
  }

  header .input-group .form-control {
    min-width: 0;
    width: 1%;
  }

  header .input-group button {
    white-space: nowrap;
  }

  header > .container-fluid:last-child > .row {
    margin: 0;
    padding: 8px 12px !important;
  }

  header .main-menu {
    justify-content: flex-end !important;
  }

  header .navbar-toggler {
    display: block;
    margin-left: auto;
    padding: 7px 10px;
    border-color: rgba(9, 46, 41, .25);
  }

  header .offcanvas {
    width: min(82vw, 340px);
    background: var(--balkaa-cream);
  }

  header .offcanvas.offcanvas-end {
    right: 0;
    left: auto;
    max-width: min(82vw, 340px);
  }

  header .offcanvas-body {
    padding: 12px 24px;
  }

  header .offcanvas-body .navbar-nav {
    display: block !important;
  }

  header .offcanvas-body .nav-item {
    border-bottom-color: rgba(9, 46, 41, .12);
  }

  header .offcanvas-body .nav-link {
    padding: 13px 0;
  }

  .modern-hero {
    min-height: 720px;
  }

  .hero-visual {
    max-width: 78vw;
  }

  #about,
  #products,
  #contact,
  #why-us,
  #team {
    overflow: hidden;
  }

  #about .container,
  #contact .container,
  #why-us .container,
  #team .container {
    max-width: 100%;
  }

  #about .story-visual img {
    max-width: 100%;
    height: auto;
  }

  #contact .contact-info__wrapper,
  #contact .contact-form__wrapper {
    padding: 32px !important;
  }

  #testimonials .carousel-item {
    padding: 0 32px;
  }

  footer .container-fluid {
    max-width: 100%;
  }

  .product-hero {
    padding: 72px 0 90px !important;
  }

  .product-hero > .container {
    max-width: 100%;
    padding: 0 24px;
  }

  .product-slider {
    min-height: 430px !important;
    padding: 18px !important;
  }

  .product-slider .carousel-inner,
  .product-slider .carousel-item {
    height: 390px !important;
  }

  .product-details {
    padding: 48px 0 0 !important;
  }
}

@media (max-width: 575.98px) {
  header > .container-fluid:first-child [class*="col-"] {
    width: 33.333%;
    font-size: .58rem;
  }

  header > .container-fluid:first-child [class*="col-"]:first-child span {
    border-right: 0 !important;
  }

  header > .container-fluid:nth-child(2) > .row {
    padding: 12px 8px !important;
  }

  header > .container-fluid:nth-child(2) [class*="col-"] {
    width: 50%;
  }

  header .main-logo img {
    width: 92px !important;
  }

  header .input-group button {
    padding: 8px 10px;
    font-size: .72rem;
  }

  header > .container-fluid:last-child > .row {
    padding: 5px 8px !important;
  }

  .modern-hero {
    min-height: 730px !important;
    padding: 58px 20px 42px !important;
  }

  .modern-hero h1 {
    font-size: clamp(2.65rem, 13vw, 3.6rem) !important;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
  }

  .hero-visual {
    right: 7%;
    top: 63%;
    width: 86vw;
  }

  .hero-stat {
    right: 7%;
    bottom: 6%;
    padding: 12px 15px;
  }

  .hero-stat strong {
    font-size: 1.45rem;
  }

  #about {
    padding: 70px 12px 45px !important;
  }

  #about .story-copy h3 {
    font-size: 2.55rem !important;
  }

  #about .counter {
    margin-top: 38px;
    padding: 15px 8px;
  }

  #about .counter p {
    font-size: .72rem;
    line-height: 1.35;
  }

  #products {
    padding: 68px 12px !important;
  }

  #products .tabs-header h3 {
    font-size: 2.65rem !important;
  }

  #products .product-grid > .col {
    padding: 0 !important;
  }

  #products .product-item {
    min-height: 405px;
  }

  #contact .contact-info__wrapper,
  #contact .contact-form__wrapper {
    padding: 25px 20px !important;
  }

  #contact .contact-info__wrapper h3 {
    margin-bottom: 25px !important;
  }

  #why-us {
    padding: 68px 12px !important;
  }

  #testimonials {
    padding: 72px 0 !important;
  }

  #testimonials .carousel-item {
    padding: 0 14px;
  }

  #testimonials .testimonial {
    padding: 28px 22px !important;
  }

  footer {
    padding: 58px 0 22px !important;
  }

  footer .container-fluid {
    padding: 0 20px;
  }

  footer .footer-menu {
    margin-bottom: 30px;
  }

  .product-hero {
    padding: 56px 0 72px !important;
  }

  .product-hero > .container {
    padding: 0 14px;
  }

  .product-slider {
    min-height: 360px !important;
    padding: 12px !important;
    border-radius: 22px;
  }

  .product-slider .carousel-inner,
  .product-slider .carousel-item {
    height: 330px !important;
  }

  .product-slider:before {
    width: 250px !important;
    height: 250px !important;
  }

  .product-slider .carousel-control-prev {
    left: 10px;
  }

  .product-slider .carousel-control-next {
    right: 10px;
  }

  .product-details {
    padding-top: 38px !important;
  }

  .product-name {
    font-size: clamp(2.7rem, 14vw, 3.6rem) !important;
  }

  .product-description {
    font-size: .92rem;
  }

  .product-features {
    grid-template-columns: 1fr !important;
    gap: 9px;
  }

  .buy-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  header > .container-fluid:first-child [class*="col-"] {
    padding-inline: 2px;
    font-size: .52rem;
  }

  header .input-group button {
    padding-inline: 7px;
  }

  .modern-hero {
    min-height: 750px !important;
  }
}

.product-price {
  font-size: 1.5rem;
  color: #28a745;
  font-weight: 500;
}

.product-description {
  font-size: 1rem;
  margin-top: 15px;
  color: #555;
}

.buy-button {
  margin-top: 20px;
  background-color: #28a745;
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
}

.buy-button:hover {
  background-color: #218838;
}


.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #f4f4f4;
  padding: 20px 0;
}

/* Track holding all the slides (images) */
.slide-track {
  display: flex;
  animation: scroll 20s linear infinite; /* Animation for continuous scroll */
}

/* Individual slides */
.partner-slide {
  flex: 0 0 auto; /* Prevent shrinking */
  margin-right: 20px; /* Space between slides */
}

.partner-slide img {
  height: 100px; /* Image height */
  width: 250px; /* Image width */
  object-fit: contain;
}

/* Animation that moves the track continuously from left to right */
@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%); /* Move the entire track left */
  }
}


.text-container {
  position: relative;
  max-width: 100%;
}

#text-content {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Show only 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.3s ease; /* Smooth transition */
  max-height: 3.8em; /* Adjust based on your font size and line height (3 lines) */
}

#text-content.show-all {
  -webkit-line-clamp: unset; /* Unclamp to show all lines */
  max-height: none; /* Remove height limitation */
}

.read-more-btn {
  color: #007bff;
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
  display: inline-block;
  margin-top: 10px;
}


 #main-img {
    transition: opacity 1s ease-in-out; /* Fade effect */
    opacity: 1; /* Default opacity */
  }

  /* Add smooth hover effect to thumbnails */
  .thumbnail {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Scale and fade effect on hover */
  }

  .thumbnail:hover {
    transform: scale(1.1); /* Slight zoom effect */
    opacity: 0.8; /* Slight fade on hover */
  }

  /* Optional: Add some transition for image swap animation */
  .main-img {
    position: relative;
    transition: opacity 1s ease-in-out;
  }