/**
* Template Name: KnightOne
* Template URL: https://bootstrapmade.com/knight-simple-one-page-bootstrap-template/
* Updated: Oct 16 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #282828; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #177f06; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #177f06; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #177f06; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  /* Add padding for fixed header */
  padding-top: 120px;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  min-height: 60vh;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #ffffff;
  --default-color: #333333;
  --heading-color: #333333;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}

/* Search bar styling */
.search-bar-container {
  flex: 1;
  max-width: 400px;
  margin: 0 1rem;
}

.search-bar-container .input-group {
  height: 40px;
}

.search-bar-container input {
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px 0 0 4px;
  border: 1px solid #ddd;
}

.search-bar-container button {
  background-color: #177f06;
  color: white;
  border-radius: 0 4px 4px 0;
  border: 1px solid #177f06;
  cursor: pointer;
}

.search-bar-container button:hover {
  background-color: #177f06;
}

/* Categories bar below header on desktop */
.categories-bar {
  width: 100%;
  background-color: #177f06;
  border-top: 1px solid #177f06;
  padding: 0;
  display: none;
  z-index: 996;
  height: auto;
}

.categories-bar #categories-nav {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
}

.categories-bar .category-link {
  padding: 0.5rem 1rem;
  color: #fff !important;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.categories-bar .category-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Show categories bar on desktop */
@media (min-width: 992px) {
  .categories-bar {
    display: flex !important;
  }
}

/* Categories menu dropdown */
.category-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #177f06;
  z-index: 1000;
  min-width: 200px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.category-dropdown a {
  display: block;
  padding: 0.75rem 1rem;
  color: #fff !important;
  text-decoration: none;
  font-size: 0.9rem;
}

.category-dropdown a:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Categories injected into header menu */
.menu-items-categories {
  display: flex;
  list-style: none;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: calc(100% - 40px);
}
.menu-items-categories li { 
  position: relative;
  flex: 0 0 calc(16.666% - 0.85rem);
  min-width: 120px;
}
.menu-items-categories li a { text-decoration: none; color: var(--black); }
.menu-items-categories li .dropdown-menu { position: absolute; left: 0; top: 100%; background: var(--white); padding: 8px 0; min-width: 180px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); display: none; }
.menu-items-categories li.dropdown:hover .dropdown-menu { display: block; }
.menu-items-categories li .dropdown-menu li { padding: 6px 16px; }
.menu-items-categories li .dropdown-menu a { display: block; }

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .cta-btn,
.header .cta-btn:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  padding: 0;
  margin: 0 0 0 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  position: relative;
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
/* Cart Badge */
.header .cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: red;
  color: white;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Responsive Navbar Adjustments */
@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .logo h1 {
    font-size: 24px;
  }

  .header .cta-btn {
    order: 2;
    margin: 0 0 0 15px;
  }

  /* Optional: Hide extra nav items if needed */
  /* #navmenu ul li:nth-child(n+7) {
    display: none;
  } */
}
@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .logo h1 {
    font-size: 24px;
  }

  .header .cta-btn {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

/* Global Header on Scroll
------------------------------*/
/* When the page is scrolled a `scrolled` class is added to the <body> by
   `assets/js/main.js`.  The original design changed the header variable
   to a semi‑transparent dark colour which made the header look black when
   the user scrolled.  The customer prefers the header to remain solid
   white at all times, so we force the variable back to white with a
   higher‑specificity rule and use !important to defeat the inline style
   applied via the variable.  In practice the header already has a
   hardcoded background‑color, but this makes the intention explicit and
   future‑proofs the behaviour if the variable is reused elsewhere.
*/
.scrolled .header {
  --background-color: #ffffff !important;
  background-color: #ffffff !important;
}

/* Mobile header layout adjustments */
@media (max-width: 991px) {
  body {
    padding-top: 155px;
  }

  .header {
    flex-direction: column !important;
    padding: 0;
  }

  .header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 0.5rem 1rem !important;
    gap: 1rem;
  }

  /* Mobile: Menu on left */
  .navmenu.d-lg-none {
    order: 1;
    flex-shrink: 0;
  }

  /* Mobile: Logo in center */
  .logo {
    display: flex !important;
    align-items: center;
    order: 2;
    flex: 1;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 !important;
  }

  .logo img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
  }

  /* Mobile: Hide desktop nav */
  #desktop-navmenu {
    display: none !important;
  }

  /* Mobile: Cart on right */
  .cta-btn {
    flex-shrink: 0 !important;
    margin: 0 !important;
    order: 3;
  }

  /* Search bar row styling */
  .header-search-row {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
  }

  .header-search-row .search-bar-container {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .header-search-row .search-bar-container .input-group {
    height: 36px;
  }

  .header-search-row .search-bar-container input {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }

  .categories-bar {
    display: none !important;
  }
}

/* Extra small screens - optimize for very small phones */
@media (max-width: 576px) {
  body {
    padding-top: 150px;
  }

  .header-top {
    padding: 0.4rem 0.5rem !important;
    gap: 0.5rem;
  }

  .header-search-row {
    padding: 0.4rem 0.5rem !important;
  }

  .header-search-row .search-bar-container .input-group {
    height: 34px;
  }

  .header-search-row .search-bar-container input {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
  }

  .header-search-row .search-bar-container button {
    font-size: 0.85rem;
  }

  .logo img {
    height: 55px !important;
    max-height: 55px !important;
  }
}

/* Product name link: make it black and prominent */
.best-seller .name-of-p a.product-link {
  color: #000000;
  font-weight: 600;
  text-decoration: none;
}

.best-seller .name-of-p a.product-link:hover {
  color: #0b6b05; /* subtle green on hover */
}

/* Inline price next to add-to-cart button */
.best-seller .price-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.best-seller .priceAmount-inline {
  color: #000;
  font-weight: 700;
}

/* price overlay removed completely; markup deleted from templates */
/* keep this rule for backwards compatibility or remove entirely if desired */
/* .best-seller .best-p1 .price { display: none; } */

/* Make the inline price (next to the button) use the site's green color */
.best-seller .priceAmount-inline {
  color: #177f06; /* main site green */
}

/* Ensure add-to-cart button text is white */
.best-seller .add-cart button {
  color: #ffffff !important;
}

/* Desktop/Tablet header layout */
@media (min-width: 992px) {
  body {
    padding-top: 130px;
  }

  .header {
    flex-direction: column !important;
    padding: 0 !important;
  }

  .header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 0.75rem 1rem !important;
    gap: 2rem;
    flex-wrap: nowrap;
    position: relative;
  }
  /* Desktop: place search bar centered in header-top between logo and cart */
  .header-top .search-bar-container.d-none.d-lg-flex {
    display: flex !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 500px;
    margin: 0;
    justify-content: center;
  }

  /* Desktop: Hide mobile menu */
  .navmenu.d-lg-none {
    display: none !important;
  }

  /* Desktop: Logo on left */
  .logo {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
    margin: 0 !important;
    order: 1;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .logo img {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
  }

  /* Desktop: Navigation menu in center */
  #desktop-navmenu {
    display: flex !important;
    flex: 1;
    justify-content: center;
    padding: 0 !important;
    order: 2;
  }

  #desktop-navmenu ul {
    display: flex !important;
    list-style: none !important;
    gap: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }

  #desktop-navmenu ul li {
    display: list-item !important;
  }

  #desktop-navmenu ul li a {
    text-decoration: none;
    color: var(--default-color);
    font-weight: 500;
    padding: 0.5rem 0;
    transition: 0.3s;
  }

  /* Category links styling */
  .category-link {
    color: #fff !important;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: inline-block;
    transition: 0.3s;
  }

  .category-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
  }

  #desktop-navmenu ul li a:hover,
  #desktop-navmenu ul li a.active {
    color: var(--accent-color);
  }

  /* Desktop: Cart on right */
  .cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    padding: 0;
    margin: 0 !important;
    background: var(--accent-color);
    color: var(--contrast-color);
    transition: 0.3s;
    position: relative;
    flex-shrink: 0;
    order: 3;
  }

  .cta-btn:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
  }

  /* Search bar row styling */
  .header-search-row {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
  }

  .header-search-row .search-bar-container {
    margin: 0 auto !important;
    max-width: 400px !important;
  }

  .header-search-row .search-bar-container .input-group {
    height: 36px;
  }

  .header-search-row .search-bar-container input {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }

  .categories-bar {
    display: flex !important;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    row-gap: 0.15rem;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    padding: 5px 1px;
    flex: 0 0 calc(16.666% - 0.1rem);
    min-width: 100px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: color-mix(in srgb, var(--nav-color), transparent 30%);
    font-size: 13px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -27px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Make buy-now button text white to match request */
.buy-now button,
.buy-now button a {
  color: #ffffff !important;
}


/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: #ffffff;
    font-size: 28px;
    background-color: #177f06;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
  position: relative;
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer .social-links {
  margin: 0 0 30px 0;
}

.footer .social-links a {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--accent-color);
  border-top-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* White text with a visible black border/stroke for the site title */
header .logo .sitename,
header .logo h1.sitename,
.logo .sitename,
.logo h1.sitename {
  color: #fff !important;
  -webkit-text-stroke: 1px #000; /* black stroke for webkit browsers */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* fallback stroke effect */
  font-weight: 700; /* ensure boldness suits the stroke */
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 72px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 57px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
}

.section-title p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color) 90%, white 50%);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 55vh; /* shorter hero */
  position: relative;
  padding: 40px 0; /* reduced padding */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 10px 0 20px 0;
  font-size: 24px;
}

.product-description {
  color: #666;
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 50px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  padding: 60px 30px;
  transition: all ease-in-out 0.3s;
  border-radius: 18px;
  border-bottom: 5px solid var(--surface-color);
  height: 100%;
}

.services .service-item .icon {
  color: var(--contrast-color);
  background: var(--accent-color);
  margin: 0;
  width: 64px;
  height: 64px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

@media (min-width: 1365px) {
  .services .service-item:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
  }

  .services .service-item:hover h3 {
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  width: 60px; /* Slightly bigger for better visibility */
  height: 60px;
  font-size: 28px; /* Larger icon */
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.5s;
}

.call-to-action .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-image {
  position: relative;
  min-height: 400px;
}

.features .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.features .features-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.features .features-item i {
  font-size: 48px;
  color: var(--accent-color);
  margin-right: 20px;
  line-height: 0;
}

.features .features-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .clients-wrap {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.clients .client-logo {
  background-color: var(--surface-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  overflow: hidden;
}

.clients .client-logo img {
  padding: 50px;
  max-width: 80%;
  transition: 0.3s;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 30px;
    max-width: 50%;
  }
}

.clients .client-logo:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  position: relative;
}

.stats img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.stats:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.stats .container {
  position: relative;
  z-index: 3;
}

.stats .subheading {
  text-align: center;
}

.stats .subheading h3 {
  font-weight: 700;
  font-size: 36px;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--default-color);
  font-weight: 700;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--surface-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  text-align: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.pricing .pricing-item h3 {
  padding: 15px;
  margin-top: 15px;
  font-size: 18px;
  font-weight: 600;
}

.pricing .pricing-item h4 {
  color: var(--accent-color);
  font-size: 42px;
  font-family: var(--default-font);
  font-weight: 500;
}

.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .pricing-item ul {
  padding: 20px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .pricing-item ul li {
  padding-bottom: 16px;
}

.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  text-decoration: line-through;
}

.pricing .pricing-item .btn-wrap {
  padding: 15px;
  text-align: center;
}

.pricing .pricing-item .btn-buy {
  color: var(--accent-color);
  background-color: transparent;
  border: 2px solid var(--accent-color);
  display: inline-block;
  padding: 10px 40px 12px 40px;
  border-radius: 50px;
  font-size: 14px;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.pricing .pricing-item .btn-buy:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .recommended .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .recommended .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .recommended-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 13px;
  padding: 3px 25px 6px 25px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  border-radius: 50px;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  background: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.recent-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.recent-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--accent-color);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.recent-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: #6c757d; /* Set a visible color for the placeholder text (light gray) */
  opacity: 1; /* Ensure the opacity is set to 1 so the placeholder text is fully visible */
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.blog-author-widget img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author-widget h4 {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author-widget .social-links {
  margin: 5px 0;
}

.blog-author-widget .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
  font-size: 18px;
}

.blog-author-widget .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 10px 0 0 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: none;
  color: var(--default-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 16px;
  transition: 0.3s;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  color: var(--accent-color);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50px;
  font-size: 14px;
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}










.collections {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 65px;
}

.content {
  width: 330px;
  margin: 20px;
  position: relative;
}

.content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.871);
  z-index: 2;
  opacity: 0;
}

.content:hover::after {
  opacity: 1;
}

.content img {
  width: 100%;
  height: 300px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.img-content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
  color: var(--white);
  text-align: center;
  font-size: 2.2rem;
  font-weight: bolder;
  z-index: 5;
  opacity: 0;
}

.img-content p {
  font-size: 1.6rem;
}

.img-content button {
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 10px;
  padding: 10px;
}

.img-content a {
  text-decoration: none;
  font-size: 1.1rem;
  color: #fff;
  transition: 0.3s;
}

.img-content button:hover {
  background: var(--white);
  color: var(--primary-color);
}

.img-content button:hover~.img-content a {
  color: var(--primary-color);
}

.img-content a:hover {
  color: var(--primary-color);
}

.content:hover .img-content {
  opacity: 1;
  top: 50%;
}

.content2 {
  width: 330px;
  margin: 20px;
  position: relative;
}

.content2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.871);
  z-index: 2;
  opacity: 0;
}

.content2:hover::after {
  opacity: 1;
}

.content2 img {
  width: 100%;
  height: 300px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.img-content2 {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
  color: var(--white);
  text-align: center;
  font-size: 2.2rem;
  font-weight: bolder;
  z-index: 5;
  opacity: 0;
}

.img-content2 p {
  font-size: 1.6rem;
}

.img-content2 a {
  text-decoration: none;
  font-size: 1.1rem;
  color: #fff;
  transition: 0.3s;
}

.img-content2 button {
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 10px;
  padding: 10px;
}

.img-content2 button:hover {
  background: var(--white);
  color: var(--primary-color);
}

.img-content2 button:hover~.img-content2 a {
  color: var(--primary-color);
}

.img-content2 a:hover {
  color: var(--primary-color);
}

.content2:hover .img-content2 {
  opacity: 1;
  top: 50%;
}
/* //........ seller  ........// */

.best-seller {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping of items */
  justify-content: flex-start;
  align-items: center;
  gap: 20px; /* Space between items */
}

/* Color Styles */
.best-seller .red {
  color: var(--primary-color);
  cursor: pointer;
}

.best-seller .blue {
  color: #8989ce;
  cursor: pointer;
}

.best-seller .white {
  color: var(--light-black);
  cursor: pointer;
}

.best-seller .grey {
  color: grey;
  cursor: pointer;
}

.best-seller .brown {
  color: rgb(175, 53, 53);
  cursor: pointer;
}

.best-seller .yellow {
  color: #ffff00;
  cursor: pointer;
}

.best-seller .orange {
  color: #ffa500;
  cursor: pointer;
}

.best-seller .green {
  color: #008000;
  cursor: pointer;
}

/* Title Styling */
.seller h2 {
  margin-top: 65px;
  margin-bottom: 20px;
}

/* Product Box Styling */
.seller .best-p1 {
  width: 300px; /* Fixed width */
  height: 400px; /* Fixed height */
  margin-bottom: 20px; /* Add spacing between items */
  box-sizing: border-box; /* Ensure padding and borders are included in total width and height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content at the top */
  position: relative; /* Ensures the price is on top */
}

.seller .best-p1 img {
  width: 100%; /* Ensures the image takes up the full width of the box */
  height: 250px; /* Fixed height for images */
  object-fit: cover; /* Ensures the image maintains its aspect ratio */
  border-radius: 10px; /* Optional: Adds rounded corners to the images */
}

/* Price and Color Selection */
.seller .best-p1 .price {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 10px; /* Position the price at the top of the box */
  left: 10px;
  right: 10px;
  z-index: 1; /* Makes sure the price is above the image */
  font-size: 24px; /* Increase the font size */
  color: white; /* Set text color to white */
  font-weight: bold; /* Make the text bold */
  text-shadow: 0 0 5px #177f06, 0 0 10px #177f06, 0 0 15px #177f06; /* Add glowing effect around the text */
}

.seller .best-p1 .price .colors input[type="radio"] {
  color: #000;
  background-color: #000;
}

/* Button Container for Alignment */
.best-seller .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* Space between buttons */
  margin-top: 10px; /* Reduced margin to reduce space between image and buttons */
  padding: 0 10px; /* Add padding for alignment */
}

/* Content Details action buttons inside product details (Cart + Go-to-cart) */
#productDetails .action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

#productDetails .action-buttons .add-cart button {
  width: 48px; /* Slightly larger for detail page */
  height: 48px;
  padding: 8px;
  border-radius: 8px;
}

#productDetails .action-buttons .go-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* reduced padding for more compact button */
  padding: 6px 12px;
  background: #177f06;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  /* override header .cta-btn default circle dimensions */
  width: auto;
  height: auto;
}

#productDetails .action-buttons .go-to-cart:hover {
  background: var(--white);
  color: #177f06;
}

/* Buy Now Button Styling */
.best-seller .buy-now a {
  text-decoration: none;
  color: var(--white);
}

.seller a:hover {
  color: #177f06;
}

/* Common Button Styling (Buy Now & Add to Cart) */
.best-seller .buy-now button,
.best-seller .add-cart button {
  padding: 10px 15px;
  margin-top: 5px;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #177f06;
  color: var(--white);
  border: none;
  border-radius: 15px;
  font-weight: 500;
  border: 1px solid #177f06;
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure buy now button accommodates longer text */
.best-seller .buy-now button {
  min-width: 220px; /* ensure background covers larger text */
  padding: 12px 24px; /* increase horizontal padding */
  white-space: nowrap; /* prevent text from wrapping */
}

/* Make the text in Buy Now and Add to Cart button white */
.best-seller .buy-now button span,
.best-seller .add-cart button span {
  color: white; /* Set text color to white */
}

/* Hover Effects */
.best-seller .buy-now button:hover,
.best-seller .add-cart button:hover {
  background-color: var(--white);
  font-weight: 600;
}

.best-seller .buy-now button:hover a {
  color: #177f06;
}

/* Add to Cart Button Specific Styling */
.best-seller .add-cart button {
  width: 40px; /* Make the button square for the cart icon */
  height: 40px;
  padding: 5px; /* Adjusted padding */
}

.best-seller .add-cart button i {
  font-size: 16px;
  color: var(--white); /* Make sure icon color is white */
}

.best-seller .add-cart button:hover i {
  color: #177f06;
}

/* Mobile button size reduction */
@media (max-width: 768px) {
  .best-seller .buy-now button {
    min-width: 150px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .best-seller .add-cart button {
    width: 35px;
    height: 35px;
    padding: 3px;
  }

  .best-seller .add-cart button i {
    font-size: 14px;
  }
}

/* Override add-to-cart button: size to content and center it */
.best-seller .add-cart {
  display: flex;
  align-items: center;
  justify-content: center; /* center the button within its container */
}

.best-seller .add-cart button {
  width: auto !important; /* ensure button width matches text */
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-transform: none; /* keep casing as provided */
}

@media (max-width: 768px) {
  .best-seller .add-cart button {
    padding: 6px 10px;
  }
}

/* Shop Now Button */
.shop-now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px; /* Reduced fixed width for the button (original) */
  height: 50px; /* Set a height for the button */
  border-radius: 25px; /* Curved edges */
  font-size: 16px; /* Smaller text for better fit */
  background: var(--accent-color);
  color: var(--contrast-color); /* Ensure text is visible */
  transition: width 0.25s ease-in-out, border-radius 0.25s ease-in-out, padding 0.25s ease-in-out;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 15px; /* Add horizontal padding for space around text */
}

.shop-now-btn:hover {
  width: 240px; /* Expands width when hovered */
  border-radius: 30px; /* Slightly more curved on hover */
  padding: 0 20px; /* Adjust padding to create space for the expanded text */
  background: color-mix(in srgb, var(--accent-color), transparent 20%); /* Optional: Add hover background effect */
  color: var(--highlight-color); /* Optional: Change text color on hover */
}

/* Responsive Layout - Maintain Item Size */
@media (max-width: 1200px) {
  .seller {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap while keeping their size */
    justify-content: space-between;
    gap: 20px; /* Spacing between items */
  }
}

@media (max-width: 900px) {
  .seller {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap while keeping their size */
    justify-content: space-between;
    gap: 20px; /* Spacing between items */
  }
}

@media (max-width: 600px) {
  .seller {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap while keeping their size */
    justify-content: center; /* Center the items on small screens */
    gap: 15px; /* Spacing between items */
  }

  .seller .best-p1 {
    margin: 0 auto; /* Ensure the product is centered */
    width: calc(50% - 7.5px); /* 2 columns with gap */
    height: auto;
    min-width: 140px;
    max-width: 180px;
  }

  .seller .best-p1 img {
    height: 140px;
  }

  .best-seller .button-container {
    gap: 5px;
  }
}
/* Product Box Styling */
.seller .best-p1 {
  width: 300px; /* Fixed width */
  height: 400px; /* Fixed height */
  margin-bottom: 20px; /* Add spacing between items */
  box-sizing: border-box; /* Ensure padding and borders are included in total width and height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content at the top */
  position: relative; /* Ensures the price is on top */
}

.seller .best-p1 img {
  width: 100%; /* Ensures the image takes up the full width of the box */
  height: 250px; /* Fixed height for images */
  object-fit: cover; /* Ensures the image maintains its aspect ratio */
  border-radius: 10px; /* Optional: Adds rounded corners to the images */
}

/* Price and Color Selection */
.seller .best-p1 .price {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 10px; /* Position the price at the top of the box */
  left: 10px;
  right: 10px;
  z-index: 1; /* Makes sure the price is above the image */
  font-size: 24px; /* Increase the font size */
  color: white; /* Set text color to white */
  font-weight: bold; /* Make the text bold */
  text-shadow: 0 0 5px #177f06, 0 0 10px #177f06, 0 0 15px #177f06; /* Add glowing effect around the text */
}

.seller .best-p1 .price .colors input[type="radio"] {
  color: #000;
  background-color: #000;
}

/* Button Container for Alignment */
.best-seller .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* Space between buttons */
  margin-top: 10px; /* Reduced margin to reduce space between image and buttons */
  padding: 0 10px; /* Add padding for alignment */
}

/* (Duplicate button styling removed; consolidated earlier in file to avoid conflicts) */

@media (max-width: 768px) {
  .shop-now-btn { width: 180px; font-size: 14px; }
  .shop-now-btn:hover { width: 200px; }
}

/* Responsive Layout - Maintain Item Size */
@media (max-width: 1200px) {
  .seller {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap while keeping their size */
    justify-content: space-between;
    gap: 20px; /* Spacing between items */
  }
}

@media (max-width: 900px) {
  .seller {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap while keeping their size */
    justify-content: space-between;
    gap: 20px; /* Spacing between items */
  }
}

@media (max-width: 600px) {
  .seller {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap while keeping their size */
    justify-content: center; /* Center the items on small screens */
    gap: 20px; /* Spacing between items */
  }

  .seller .best-p1 {
    margin: 0 auto; /* Ensure the product is centered */
  }
}




/* General Styling */
body {
  margin: 0;
  text-transform: capitalize;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
}

/* Product Container */
#containerProduct {
  padding-top: 80px;
}

#containerD {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 80px 40px;
}

/* Image Section */
#imageSection {
  width: 80%;
  margin: auto;
}

#imageSection img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
  transition: box-shadow 0.3s ease-in-out;
}

#imageSection img:hover {
  box-shadow: 1px 0px 9px 1px #177f06;
}

/* Product Details */
#productDetails {
  width: 100%;
}

#productDetails h1 {
  font-size: 35px;
  letter-spacing: 1px;
  word-spacing: 2px;
}

#productDetails h4 {
  font-size: 15px;
  font-weight: bold;
  color: #177f06;
  letter-spacing: 1px;
  word-spacing: 2px;
}

#productPreview {
  padding-bottom: 10px;
}

#productPreview img {
  width: 50px;
  padding: 10px;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

#productPreview img:hover {
  transform: scale(1.1);
}

#productDetails p {
  font-size: 15px;
  word-spacing: 2px;
  letter-spacing: 1px;
  line-height: 25px;
}

/* Buttons */
#productDetails button {
  padding: 10px 15px;
  color: white;
  background-color: #177f06;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s ease-in-out;
}

#productDetails button:hover {
  background-color: rgb(3, 94, 94);
}

#productDetails button a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}

#productDetails button a:focus {
  outline: none;
}

/* Responsive Design */
@media (max-width: 1300px) {
  #productDetails h1 {
      font-size: 28px;
  }

  #productPreview img {
      width: 40px;
      padding: 10px;
  }

  #productDetails button {
      padding: 8px 13px;
  }
}

@media (max-width: 1170px) {
  #productDetails h1 {
      font-size: 22px;
  }

  #productPreview img {
      width: 40px;
      padding: 10px;
  }

  #productDetails button a {
      font-size: 15px;
  }

  #productDetails h4,
  #productDetails p {
      font-size: 13px;
  }

  #productDetails h3 {
      font-size: 15px;
  }
}

@media (max-width: 900px) {
  #containerD {
      width: 60%;
      margin: auto;
      display: grid;
      grid-template-columns: 1fr;
  }

  #imageSection {
      width: 100%;
      text-align: center;
  }

  #imageSection img {
      text-align: center;
      width: 70%;
  }

  #productDetails {
      width: 100%;
  }

  #button {
      text-align: center;
  }
}

@media (max-width: 650px) {
  #containerD {
      width: 80%;
  }
}


.colors {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.bx.bxs-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.bx.bxs-circle.chrome {
  background-color: grey;
}

.bx.bxs-circle.black {
  background-color: black;
}

.bx.bxs-circle.red {
  background-color: red;
}

.bx.bxs-circle.blue {
  background-color: blue;
}

.bx.bxs-circle.white {
  background-color: white;
  border: 1px solid #ccc; /* To make it visible on a white background */
}

/* French color names */
.bx.bxs-circle.rouge {
  background-color: red;
}

.bx.bxs-circle.noir {
  background-color: black;
}

.bx.bxs-circle.bleu {
  background-color: blue;
}

.bx.bxs-circle.gris {
  background-color: grey;
}

.bx.bxs-circle.vert {
  background-color: green;
}

.bx.bxs-circle.orange {
  background-color: orange;
}

.bx.bxs-circle.jaune {
  background-color: yellow;
}

.bx.bxs-circle.rose {
  background-color: pink;
}

.bx.bxs-circle:hover {
  transform: scale(1.2);
}
.bx.bxs-circle.chrome {
  background: linear-gradient(135deg, #e0e0e0, #b3b3b3, #ffffff, #b3b3b3, #e0e0e0);
  display: inline-block;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.bx.bxs-circle.R01-01-bg {
  background-image: url('../img/articles/R1/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R01-02-bg {
  background-image: url('../img/articles/R1/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R01-03-bg {
  background-image: url('../img/articles/R1/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R02-01-bg {
  background-image: url('../img/articles/R2/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R02-02-bg {
  background-image: url('../img/articles/R2/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R02-03-bg {
  background-image: url('../img/articles/R2/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R02-04-bg {
  background-image: url('../img/articles/R2/4.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R03-01-bg {
  background-image: url('../img/articles/R3/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R03-02-bg {
  background-image: url('../img/articles/R3/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R03-03-bg {
  background-image: url('../img/articles/R3/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R01-07-bg {
  background-image: url('../img/articles/R3/7.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R04-01-bg {
  background-image: url('../img/articles/R4/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R04-02-bg {
  background-image: url('../img/articles/R4/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R04-03-bg {
  background-image: url('../img/articles/R4/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R05-01-bg {
  background-image: url('../img/articles/R5/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R05-02-bg {
  background-image: url('../img/articles/R5/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R05-03-bg {
  background-image: url('../img/articles/R5/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R06-01-bg {
  background-image: url('../img/articles/R6/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R06-02-bg {
  background-image: url('../img/articles/R6/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R06-03-bg {
  background-image: url('../img/articles/R6/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R07-01-bg {
  background-image: url('../img/articles/R7/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R07-02-bg {
  background-image: url('../img/articles/R7/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R07-03-bg {
  background-image: url('../img/articles/R7/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R08-01-bg {
  background-image: url('../img/articles/R8/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R08-02-bg {
  background-image: url('../img/articles/R8/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R08-03-bg {
  background-image: url('../img/articles/R8/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R09-01-bg {
  background-image: url('../img/articles/R9/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R09-02-bg {
  background-image: url('../img/articles/R9/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R09-03-bg {
  background-image: url('../img/articles/R9/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R010-01-bg {
  background-image: url('../img/articles/R10/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R010-02-bg {
  background-image: url('../img/articles/R10/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R010-03-bg {
  background-image: url('../img/articles/R10/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R010-04-bg {
  background-image: url('../img/articles/R10/4.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R011-01-bg {
  background-image: url('../img/articles/R11/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R011-02-bg {
  background-image: url('../img/articles/R11/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R011-03-bg {
  background-image: url('../img/articles/R11/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle[class*="R"] {
  background-image: none !important;
  background-color: #dcdcdc !important;
}

.bx.bxs-circle.R012-01-bg {
  background-image: url('../img/articles/R12/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R012-02-bg {
  background-image: url('../img/articles/R12/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R012-03-bg {
  background-image: url('../img/articles/R12/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R013-01-bg {
  background-image: url('../img/articles/R13/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R013-02-bg {
  background-image: url('../img/articles/R13/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R013-03-bg {
  background-image: url('../img/articles/R13/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R014-01-bg {
  background-image: url('../img/articles/R14/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R014-02-bg {
  background-image: url('../img/articles/R14/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R014-03-bg {
  background-image: url('../img/articles/R14/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R015-01-bg {
  background-image: url('../img/articles/R15/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R015-02-bg {
  background-image: url('../img/articles/R15/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R015-03-bg {
  background-image: url('../img/articles/R15/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R016-01-bg {
  background-image: url('../img/articles/R16/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R016-02-bg {
  background-image: url('../img/articles/R16/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R016-03-bg {
  background-image: url('../img/articles/R16/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

.bx.bxs-circle.R017-01-bg {
  background-image: url('../img/articles/R17/1.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R017-02-bg {
  background-image: url('../img/articles/R17/2.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}
.bx.bxs-circle.R017-03-bg {
  background-image: url('../img/articles/R17/3.jpeg');
  background-size: cover; /* Ensures the image covers the entire circle */
  background-position: center; /* Centers the image inside the circle */
}

@media (max-width: 768px) {
  .seller {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Adjust the spacing between product boxes */
  }
}
@media (max-width: 768px) {
  .seller .best-p1 {
    margin-bottom: 40px; /* Adjust space between product items */
  }
}