/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

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

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

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

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

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

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

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

/* Theme Colors */
:root {
  --accent-color: #DEAD6F;
  --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: 'Chilanka', cursive; */
  /* --heading-font: 'Chilanka', cursive; */
  --secondary-font: 'Montserrat', 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: #DEAD6F;
  --bs-link-hover-color: #DEAD6F; */

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

  /* --bs-font-sans-serif: 'Chilanka', cursive; */
  /* --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: #41403E;

  --bs-primary: #DEAD6F;
  --bs-primary-rgb: 222, 173, 111;

  --bs-primary-bg-subtle: #FFF9EB;
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;

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

.btn-primary {
  padding: 1.2rem 3rem;
  --bs-btn-color: #fff;
  --bs-btn-bg: #DEAD6F;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e9b775;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DEAD6F;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}

.btn-outline-primary {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  --bs-btn-color: #DEAD6F;
  --bs-btn-border-color: #DEAD6F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #DEAD6F;
  --bs-btn-hover-border-color: #DEAD6F;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DEAD6F;
  --bs-btn-active-border-color: #DEAD6F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #DEAD6F;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #DEAD6F;
  --bs-gradient: none;
}

.btn-outline-dark {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  text-transform: uppercase;
  --bs-btn-color: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #41403E;
  --bs-btn-hover-border-color: #41403E;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #41403E;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #41403E;
  --bs-gradient: none;
}

.btn-dark {
  padding: 1.2rem 3rem;
  font-size: 1.1875rem;
  text-transform: uppercase;
  --bs-btn-color: #fff;
  --bs-btn-bg: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #363533;
  --bs-btn-hover-border-color: #363533;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #41403E;
  --bs-btn-disabled-border-color: #41403E;
}

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

  .btn-primary,
  .btn-outline-primary,
  .btn-outline-dark,
  .btn-dark {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

body {
  letter-spacing: 0.01625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: var(--heading-font); */
  color: var(--bs-body-color);
  font-weight: 400;
  /* text-transform: capitalize; */
}

a {
  text-decoration: none;
}

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

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

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 300;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}


/* search bar style  */
.search-bar {
  border: 1px solid #EAEAEA;
}

.search-bar ::placeholder {
  font-family: var(--secondary-font);
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}


/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--accent-color);
}

/* category style */
iconify-icon.category-icon {
  color: #DEAD6F99;
  font-size: 100px;
  transition: all 0.3s ease-in;

}

a.categories-item:hover iconify-icon.category-icon {
  color: #DEAD6F;
}


/* banner style */
.swiper-pagination-bullet {
  border: 1px solid var(--bs-body-color);
  background-color: transparent;
  opacity: 1;
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-body-color);
  background: var(--bs-body-color);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
}

/* Home banner swiper */
#homePageSwiper.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

#homePageSwiper .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

#homePageSwiper .swiper-slide img {
  display: block;
  width: 100%;
}

/* card */
.card {
  --bs-card-inner-border-radius: none;
  --bs-card-bg: transparent;
  background-color: transparent;
  border: none;
}

a.btn-cart {
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}
button.btn-cart {
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}

button.btn-wishlist {

  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}
a.btn-wishlist {

  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}


/* products style  */
button.filter-button {
  letter-spacing: 0.02125rem;
  border: none;
  border-bottom: 2px solid #D9D9D8;
  background: transparent;
  text-transform: uppercase;
  font-size: 1.0625rem;
  transition: all 0.3s ease-in;
}

button.filter-button.active,
button.filter-button:hover {
  border-bottom: 2px solid #DEAD6F;
}

/* testimonial style  */
.testimonial-content {
  color: #908F8D;
}

iconify-icon.quote-icon {
  color: #F7EEE4;
  font-size: 14rem;
}


/* register form  */
.form-control {
  color: #908F8D;
  line-height: normal;
  letter-spacing: 0.02125rem;
  /* text-transform: capitalize; */
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
  background: #FFF;
  display: flex;
  padding: 1.25rem 0rem 1.25rem 1.25rem;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
}

.form-control:focus {
  border-color: #41403E;
}


/* blog style */
.blog-paragraph {
  color: #908F8D;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--secondary-font);
}

.blog-read {
  color: #908F8D;
  font-size: 1rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

a.blog-read {
  border-bottom: 3px solid #D9D9D8;
  transition: all 0.3s ease-in;
}

a.blog-read:hover {
  border-bottom: 3px solid #8a8a8a;
}


/* services style  */
.service-icon {
  font-size: 30px;
  border-radius: 3.125rem;
  border: 1px solid #D9D9D8;
  padding: 1.25rem;
}


/* insta style  */
.instagram-item:hover:before,
.instagram-item:hover .icon-overlay {
  opacity: 1;
  cursor: pointer;
}

.icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  -moz-transition: 0.8s ease;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}


/* footer style */
iconify-icon.social-icon {
  color: #CACACA;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid #D9D9D8;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
  transition: all 0.5s ease;
}

li.social:hover iconify-icon.social-icon {
  color: #FFF;
  border: 1px solid #DEAD6F;
  background: #DEAD6F;
}

iconify-icon.send-icon {
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  color: #FFF;
  border: 1px solid #DEAD6F;
  background: #DEAD6F;
}


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

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

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

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

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

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


/*--------------------------------------------------------------
faqs section style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');

}

.accordion-button::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  box-shadow: none;
}

/*--------------------------------------------------------------
Account section style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Blog section style start
--------------------------------------------------------------*/
/* ------ Pagination ------*/
.pagination .page-numbers {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--bs-body-color);
  padding: 0 10px;
  line-height: 1.4;
  transition: 0.9s all;
  border-radius: 8px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--accent-color);
}

iconify-icon.pagination-arrow {
  color: var(--bs-body-color);
  transition: 0.9s all;
}

iconify-icon.pagination-arrow:hover {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Single Product section style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--light-color);
  background-color: var(--accent-color);
}

.cursor-pointer{
  cursor: pointer;
}
.select2-container--default .select2-selection--single {
  height: 50px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 50px !important;
}
.iti{
  width: 100% !important;
}
.iti__search-input{
  height: 30px !important;
}
.iti__search{
  height: 50px !important;
}
.error{
  color: red;
}
.main-logo a img{
  height: 90px;
}
.comn_soon img{
  width: 100%;
  height: auto;
}


/* Pagination */
.grp-pagination {
  margin-top: 2rem;
  text-align: center;
}

.grp-pagination p {
  font-size: 1rem;
  color: #6c757d;
}

.pagination {
  justify-content: center;
}

.pagination .page-item {
  margin: 0 0.2rem;
}

.pagination .page-link {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  color: #007bff;
  font-size: 0.9rem;
  border-radius: 50px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.pagination .page-link:hover {
  background-color: #007bff;
  color: #ffffff;
}

.pagination .page-item.active .page-link {
  background-color: #007bff;
  color: #ffffff;
  border-color: #007bff;
}
/* Apply border-radius only to the first element's left corners */
.pagination .page-link:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

/* Apply border-radius only to the last element's right corners */
.pagination .page-link:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

/* Product details */
.carousel-item .large-img{
  height: 70vh;
  object-fit: contain;
}
.product-variant-row .product-variant-col img{
  height: 50px;
  width: 100%;
  object-fit: contain;
}
.google-login-btn span img{
  width: 100%;
  height: 40px;
  font-size: 18px;
}
.google-login-btn span{
  font-size: 18px;
}
.IN_CART{
  background-color: #007bff;
}
.IN_CART *{
  color: #ffffff;
}
.product-list-card .product-list-img{
  background-color: #EEEBE6;
}
.product-detail-card .product-detail-img{
  background-color: #EEEBE6;
}

#productGallerySlider {
  width: 70%;
}

#productGallerySlider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.payment-method-div {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.payment-method-div:hover {
  background-color: #f9f9f9;
}

.payment-method-div input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.payment-method-div label {
  margin: 0;
  flex-grow: 1;
  cursor: pointer;
  font-weight: bold;
}

.payment-method-div input[type="radio"]:checked + label {
  background-color: #e6f7ff;
  border-radius: 5px;
  color: #007bff;
}

/* .product-list-swiper-slider .swiper {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

.product-list-swiper-slider .swiper-slide {
  background-position: center;
  background-size: cover;
}

.product-list-swiper-slider .swiper-slide img {
  display: block;
  width: 100%;
} */


/* custom share */

/* Section Styling */
#custom-share-section {
  background-color: #f8f9fa;
  padding: 30px 0;
}

/* Product Container */

/* Product Sticker */
.custom-product-sticker {
  background-color: #EEEBE6 !important;
  border-radius: 12px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  padding: 12px;
  transition: transform 0.3s ease-in-out;
  max-width: 180px;
}

.custom-product-sticker:hover {
  transform: translateY(-3px);
}

/* Product Image */
.custom-product-img {
  background-color: #EEEBE6 !important;
  width: 100%;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
}

.custom-product-sticker:hover .custom-product-img {
  opacity: 0.9;
}

/* Product Info */
.custom-product-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-product-price {
  font-size: 14px;
  color: #007bff;
  font-weight: 500;
  margin-bottom: 6px;
}

/* product details scopped css */


/* Product Title */
.product-details-section h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #222;
}

/* Price */
.product-details-section h2.price {
  font-size: 22px;
  color: #e63946;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-details-section h2.price s {
  font-size: 18px;
  color: #888;
  margin-right: 10px;
}

.product-details-section h2 span {
  color: #000;
}

/* Discount Label */
.product-details-section h2.discount {
  font-size: 20px;
  color: #28a745;
  font-weight: bold;
}

/* Stock Messages */
.product-details-section h6 {
  font-size: 16px;
  font-weight: bold;
  color: #e67e22;
}

/* Out of Stock Message */
.product-details-section p.out-of-stock {
  font-size: 18px;
  font-weight: bold;
  color: red;
}

/* Product Gallery */
.product-details-section #productGallerySlider {
  margin-bottom: 20px;
}

.product-details-section .product-detail-card {
  text-align: center;
}

.product-details-section .product-detail-img {
  max-width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.product-details-section .product-detail-img:hover {
  transform: scale(1.05);
}

/* Swiper Pagination */
.product-details-section .swiper-pagination {
  margin-top: 10px;
}

/* Product Variants */
.product-details-section .product-variant-row {
  margin-top: 20px;
}

.product-details-section .product-variant-col a {
  text-decoration: none;
}

.product-details-section .card {
  border: none;
  transition: all 0.3s ease;
}

.product-details-section .card-body {
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.product-details-section .card-body img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

.product-details-section .card-body h2 {
  font-size: 16px;
  color: #222;
  font-weight: bold;
}

.product-details-section .card-body:hover {
  background-color: #f1f1f1;
  transform: scale(1.05);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .product-details-section .col-md-7, .col-md-5 {
      text-align: center;
  }

  .product-details-section .product-detail-img {
      width: 100%;
      height: auto;
  }

  .product-details-section .product-variant-col {
      margin-bottom: 15px;
  }
}

/* Scoped to discount percentage */
.discount-percentage {
  background: #ff4d4f; /* Bright red for visibility */
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

/* share icons */
/* Wrapper for the share button */
.share-wrapper {
  position: relative;
  display: inline-block;
}

/* Share button */
.share-icon {
  width: 50px;
  height: 50px;
  background: #DEAD6F;
  color: white;
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

/* Hover effect */
.share-icon:hover {
  background: #DEAD6F;
}

/* Hidden share options */
.share-options {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Each share option */
.share-option {
  width: 45px;
  height: 45px;
  background: #DEAD6F;
  color: white;
  font-size: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

/* Hover effect */
.share-option:hover {
  background: #DEAD6F;
}

/* Show options on hover (desktop) */
.share-wrapper:hover .share-options {
  visibility: visible;
  opacity: 1;
}

/* Mobile click toggle */
@media (max-width: 768px) {
  .share-options {
      bottom: 50px;
  }
}