/*--------------------------------------------------------------
CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}
/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}
/* Theme Colors */
:root {
  --accent-color: #ffc43f;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995b1;
  --light-primary-color: #eef1f3;
}

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

body {
  --bs-link-color: #333;
  --bs-link-hover-color: #333;

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;

  --bs-primary: #ffc43f;
  --bs-primary-rgb: 255, 196, 63;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;

  --bs-primary-bg-subtle: #fff9eb;
  --bs-success-bg-subtle: #eef5e5;

  --bs-border-color: #f7f7f7;

  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}

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

body {
  letter-spacing: 0.03em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 3rem;
}


/* *** Start editing below this line *** */
.container-fluid {
  max-width: 1600px;
}
.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}
.block-1 {
  grid-area: 1 / 1 / 3 / 8;
}
.block-2 {
  grid-area: 1 / 8 / 2 / 13;
}
.block-3 {
  grid-area: 2 / 8 / 3 / 13;
}

@media screen and (max-width: 1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 {
    grid-area: 1 / 1 / 3 / 2;
  }
  .block-2 {
    grid-area: 3 / 1 / 4 / 2;
  }
  .block-3 {
    grid-area: 4 / 1 / 5 / 2;
  }
}

/* banner ad */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.banner-ad.blue {
  background: #e6f3fb;
}
.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #fff;
  opacity: 1;
  transition: background 0.3s ease-out;
}
.banner-ad
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ffc43f;
}
.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}

.banner-ad .banner-content .categories {
  font-family: "Garamond";
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}
.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}
.banner-ad .banner-content .sale:before {
  content: "";
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}
.banner-ad .banner-content .sale:after {
  content: "SALE";
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}
.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}
.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}
.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}





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

  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #fbfbfb;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}
.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}
.product-item figure {
  background: #f9f9f9;
  border-radius: 12px;
  text-align: center;
}
.product-item figure img {
  max-height: 210px;
  height: auto;
}
.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}
.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}
.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9d9d9d;
}
.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .rating iconify-icon {
  color: #ffc43f;
}
.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .product-qty {
  width: 85px;
}
.product-item .btn-link {
  text-decoration: none;
}
.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

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



/* Animated Background */
body {
  background: linear-gradient(
    45deg,
    #f5deb3,
    #ffe4e1,
    #fdf5e6,
    #f0fff0,
    #ffe4b5,
    #e6e6fa,
    #f0e68c
  );
  background-size: 600% 600%;
  animation: remarkableGradientShift 80s ease-in-out infinite;
}

@keyframes remarkableGradientShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Style des cartes adaptatives au fond */
section .card {
  background: rgba(255, 255, 255, 0.35); /* fond semi-transparent */
  backdrop-filter: blur(10px); /* effet flou derrière */
  border: 1px solid rgba(255, 196, 63, 0.5); /* bordure douce accentuée */
  border-radius: 16px; /* coins arrondis */
  padding: 1rem; /* espace intérieur */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover pour léger effet */
section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Titre et texte */
section .card h5 {
  color: #222; /* reste lisible sur fond clair */
  font-weight: 700;
}

section .card p {
  color: #444; /* légèrement plus doux que le titre */
  margin-bottom: 0;
}
/* Footer global */
footer {
  background: rgba(255, 255, 255, 0.25); /* fond semi-transparent */
  backdrop-filter: blur(10px); /* flou pour effet soft UX */
  border-top: 1px solid rgba(255, 196, 63, 0.5); /* bordure douce */
  padding: 3rem 1rem;
  color: #222; /* texte sombre pour lisibilité */
  transition: all 0.3s ease;
}

/* Chaque bloc de menu */
footer .footer-menu {
  background: rgba(255, 255, 255, 0.35); /* léger fond pour démarquer */
  border: 1px solid rgba(255, 196, 63, 0.5);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Titres des menus */
footer .footer-menu .widget-title {
  font-weight: 700;
  margin-bottom: 1rem;
  color: #111;
  border-bottom: 1px solid rgba(255, 196, 63, 0.5);
  padding-bottom: 0.5rem;
}

/* Liens du menu */
footer .footer-menu .menu-list .menu-item a.nav-link {
  color: #222;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

footer .footer-menu .menu-list .menu-item a.nav-link:hover {
  color: #ffb700; /* accent couleur sur hover */
  text-decoration: none;
}

/* Formulaire newsletter */
footer form[role="newsletter"] input {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 196, 63, 0.5);
}

footer form[role="newsletter"] button {
  background-color: #222;
  color: #fff;
  border: 1px solid rgba(255, 196, 63, 0.5);
}

/* Social links */
footer .social-links a.btn {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 196, 63, 0.5);
  border-radius: 50%;
  padding: 0.5rem;
  color: #222;
  transition: all 0.3s ease;
}

footer .social-links a.btn:hover {
  background: rgba(255, 196, 63, 0.2);
  color: #ffb700;
  transform: translateY(-2px);
}

/* Ligne du copyright */
footer .border-top {
  border-color: rgba(255, 196, 63, 0.3);
  color: #444;
  font-size: 0.85rem;
}

/* Header global */
header {
  background: rgba(255, 255, 255, 0.25); /* fond semi-transparent */
  backdrop-filter: blur(10px); /* effet soft UX */
  border-bottom: 1px solid rgba(255, 196, 63, 0.5);
  padding: 1.5rem 0;
  transition: all 0.3s ease;
}

/* Logo */
header .navbar-brand h1 {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 196, 63, 0.5);
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  display: inline-block;
}

/* Menu desktop */
header .navbar-nav .nav-link {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 196, 63, 0.5);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  color: #222;
  transition: all 0.3s ease;
  display: inline-block;
}

header .navbar-nav .nav-link:hover {
  background: rgba(255, 196, 63, 0.2);
  color: #ffb700;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Support section */
header .text-end {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 196, 63, 0.5);
  border-radius: 12px;
  padding: 0.5rem 1rem;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  header .text-end {
    display: none;
  }

  header .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
  }
}
/* Section titles */
h3 {
  background: rgba(255, 255, 255, 0.35); /* fond semi-transparent */
  border: 1px solid rgba(255, 196, 63, 0.5); /* bordure douce */
  border-radius: 12px;
  padding: 0.5rem 1rem; /* espace autour du texte */
  display: inline-block; /* pour que le fond s'adapte juste au texte */
  color: #222; /* texte sombre pour lisibilité */
  font-weight: 700; /* plus visible */
  font-size: 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* léger relief */
  margin-bottom: 1rem; /* espacement avec le contenu suivant */
  transition: all 0.3s ease;
}

h3:hover {
  background: rgba(255, 196, 63, 0.2); /* léger effet hover */
  transform: translateY(-2px);
}


/* style du boutton partager  */
.share-btn {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #111;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);

  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* visible après scroll */
.share-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* animation d’entrée */
.share-btn {
  transform: translateY(8px);
}

/* hover desktop */
@media (hover: hover) {
  .share-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
}

/* MOBILE → flottant bas */
@media (max-width: 768px) {
  .share-btn {
    bottom: 16px;
    right: 16px;
  }
}

/* DESKTOP → sticky header */
@media (min-width: 769px) {
  .share-btn {
    top: 20px;
    right: 20px;
  }
}


/* style des boutton header pour mobile  */
/* container des boutons */
.mobile-sticky-btns {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  display: flex;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* visible (même logique que .share-btn.show) */
.mobile-sticky-btns.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* animation d’entrée */
.mobile-sticky-btns {
  transform: translateX(-50%) translateY(-8px);
}

/* boutons */
.mobile-sticky-btns .share-btn {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;

  background: rgba(255, 255, 255, 0.85);
  color: #111;

  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);

  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* hover desktop */
@media (hover: hover) {
  .mobile-sticky-btns .share-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
}

/* mobile : un peu plus compact */
@media (max-width: 768px) {
  .mobile-sticky-btns {
    top: 10px;
    padding: 6px 10px;
    gap: 6px;
  }

  .mobile-sticky-btns .share-btn {
    font-size: 12px;
    padding: 6px 10px;
  }
}
.mobile-sticky-btns a {
  text-decoration: none !important;
}

.mobile-sticky-btns a,
.mobile-sticky-btns a:hover,
.mobile-sticky-btns a:focus,
.mobile-sticky-btns a:visited {
  text-decoration: none;
  
}



/* boutton filtre sites  */
/* container */
.tabs-header {
  gap: 12px;
}

/* boutons de filtre */
.filter-btn {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid  rgba(255, 196, 63, 0.5);
  color: #111;

  padding: 8px 16px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;

  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* hover (desktop seulement) */
@media (hover: hover) {
  .filter-btn:hover {
    color: #111;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }
}

/* bouton actif */
.filter-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* mobile : plus compact */
@media (max-width: 768px) {
  .filter-btn {
    padding: 7px 14px;
    font-size: 13px;
  }
}
/* css des prix des services dans le form */
/* Grille responsive */
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Card service */
.service-item {
  display: block;
  cursor: pointer;
}

.service-item input {
  display: none;
}

/* Contenu compact */
.service-content {
  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;

  font-size: 14px;
  transition: all 0.2s ease;
}

/* Titre */
.service-content strong {
  font-size: 14px;
  line-height: 1.2;
}

/* Description */
.service-content .small {
  font-size: 12px;
}

/* Prix */
.service-content .price {
  font-size: 12px;
  font-weight: 600;
  color: #29cf23;
  margin-top: auto;
}

/* Hover */
.service-item:hover .service-content {
  border-color:  #29cf23;
}

/* Checked */
.service-item input:checked + .service-content {
  background:  #29cf23;
  border-color:  #29cf23;
  color: #fff;
}

.service-item input:checked + .service-content .price,
.service-item input:checked + .service-content .text-muted {
  color: #e0e7ff;
}

/* Mobile ultra compact */
@media (max-width: 480px) {
  .service-list {
    grid-template-columns: 1fr 1fr;
  }
}
/* === FORM GLOBAL STYLE === */
#obtenirForm .form-control,
#obtenirForm .form-select,
#obtenirForm textarea {
  border: 1.5px solid #d1d5db;          /* gris clair moderne */
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.95rem;
  background-color: #fff;
  transition: all 0.2s ease;
}

/* Placeholder plus doux */
#obtenirForm ::placeholder {
  color: #9ca3af;
}

/* Focus clair et stylé */
#obtenirForm .form-control:focus,
#obtenirForm .form-select:focus,
#obtenirForm textarea:focus {
  border-color: #198754;                /* vert principal */
  box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.15);
  outline: none;
}

/* Labels plus visibles */
#obtenirForm .form-label {
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}

/* Bouton submit renforcé */
#obtenirForm button[type="submit"] {
  font-size: 1rem;
  letter-spacing: 0.3px;
}

/* Mobile boost */
@media (max-width: 576px) {
  #obtenirForm .form-control,
  #obtenirForm .form-select,
  #obtenirForm textarea {
    font-size: 1rem;
  }
}