/*
Theme Name: Bookly
Theme URI: https://templatejungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Bookly - Bookstore eCommerce Bootstrap 5 HTML CSS Website Template
Version: 1.1
*/

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

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

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

CSS STRUCTURE:
1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Section Title
  2.3 Buttons

3. CONTENT ELEMENTS
  3.1 Form Control
  3.2 Form Select
  3.3 Table
  3.4 Pagination
  3.5 Slash Divider

4. SITE STRUCTURE
  4.1 Header
  4.2 Billboard
  4.3 Icon Box - Company Services
  4.4 Product
  4.5 Items Listings
  4.6 Testimonial
  4.7 Brands
  4.8 Instagram
  4.9 Footer

5. OTHER PAGES
  5.1 Single Product Page
    - Product Tabs
    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color:             #717171;
  --white-color:              #fff;
  --premium-color:            #000000;
  --black-color:              #272727;
  --gray-color:               #F3F3F3;
  --gray-color-200:           #E3E3E3;
  --gray-color-300:           #E0E0E0;
  --gray-color-500:           #D0D0D0;
  --gray-color-800:           #3A3A3A;
  --light-gray-color:         #D2D2D2;
  --gold-color:            #EBCA40;
  --bs-body-color:            #272727;
  --bs-secondary-color:       #212020;
  --bs-secondary-rgb:         255, 232, 240;
  --bs-primary-rgb:           248,109,114;
  --bs-border-color:          #E3E3E3;
  --bs-dropdown-link-active-bg: #F5F5F5;
  --light-color:              #F8F8F8;
  --light-blue-color:         #EDF1F3;
  --navbar-color-color:       #131814;
  --swiper-theme-color:       #4A4A4A;
  --swiper-pagination-color:  #4A4A4A;
  --bs-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  --primary-color: #2c3e50;
  --secondary-color: #e74c3c;
  --accent-color: #3498db;
  --light-gray: #f8f9fa;
  --dark-gray: #343a40;
 

  --bs-btn-font-size: 1rem;
}

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

@media (min-width: 1850px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1540px;
  }
}

/*----------------------------------------------*/
/* 2. GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
body {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 300;
  margin: 0;
}
p {
  color: var(--black-color);
  letter-spacing: 0.01rem;
  line-height: normal;
}
a {
  color: var(--black-color);
  text-decoration: none;
  transition: 0.3s color ease-out;
}
a.light {
  color: var(--light-color);
}
a:hover {
  text-decoration: none;
  color: var(--gold-color);
}
hr{
  margin: 1.25rem 0;
  color: var(--gray-color-200);
  opacity: 1;
}

/*------------ Background Color -----------*/
.bg-gray {
  background: var(--gray-color);
}
.bg-dark {
  background: var(--black-color);
}
.bg-light {
  background: var(--light-color);
}
.bg-light-gray {
  background: #F5F5F5;
}

/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

/* - Section margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 2em;
  margin-bottom: 2em;
}
.margin-medium {
  margin-top: 4em;
  margin-bottom: 4em;
}
.margin-large {
  margin-top: 7em;
  margin-bottom: 7em;
}
.margin-xlarge {
  margin-top: 9.5em;
  margin-bottom: 9.5em;
}

/* 2.2 Section Title
/*----------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  text-transform: capitalize;
  letter-spacing: 0.03em;
  font-weight: 600;
  line-height: 115%;
}
h4,
h5,
h6 {
  color: var(--light-black-color);
}

h1{
  font-size: 3.9rem;
}
h2{
  font-size: 3.6rem;
}
h3{
  font-size: 2.1rem;
}
h4{
  font-size: 1.4rem;
}
h5{
  font-size: 1.3rem;
  font-weight: 300;
  text-transform: capitalize;
  letter-spacing: 0.01rem;
}
h6{
  font-size: 1.1rem;
}

@media only screen and (max-width: 999px) {
  h1{
    font-size: 3rem;
  }
  h2{
    font-size: 2.95rem;
  }
  h3{
    font-size: 1.5rem;
  }
  h4{
    font-size: 1.24rem;
  }
  h5{
    font-size: 1.20rem;
  }
}

@media only screen and (max-width: 500px) {
  h1{
    font-size: 2.6rem;
  }
  h2{
    font-size: 2rem;
  }
}

/*--------------------------------------------------------------
/** 2.3 Buttons
--------------------------------------------------------------*/
/* Enhanced button styling for landing page */
.btn {
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.06em;
    color: var(--white-color);
    background: linear-gradient(135deg, var(--gold-color), #ffb400);
    border: none;
    padding: 1rem 2.25rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
    color: var(--white-color);
    background: linear-gradient(135deg, #ffb400, var(--gold-color));
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.7s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-dark {
    background: linear-gradient(135deg, #333, #000);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-dark:hover {
    background: linear-gradient(135deg, #000, #333);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.btn-light {
  background-color: var(--light-color);
}
.btn-light:hover {
  color: #fff;
  background-color: var(--gold-color);
}

.color-gray{
  color: var(--black-color) !important;
}

/* General button alignment fixes */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fix the vertical alignment of buttons with icons */
.btn svg {
    vertical-align: middle;
    margin-right: 8px;
}

/* Ensure proper spacing in icon boxes */
#company-services .d-flex {
    align-items: flex-start;
    gap: 15px;
}

/* Ensure consistent button styling in all areas */
.banner-content .btn {
    margin-top: 20px;
    padding: 12px 30px;
    font-weight: 600;
}
/* Improve banner button visibility on dark backgrounds */
.banner-content .btn {
    background: linear-gradient(135deg, var(--gold-color), #ffb400);
    color: #fff;
    font-weight: 700;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: none;
}

.banner-content .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffb400, var(--gold-color));
}

/*--------------------------------------------------------------
/** 3. CONTENT ELEMENTS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
/** 3.1 Form Control
--------------------------------------------------------------*/
.form-control {
  padding: 1rem;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 0.01rem;
  line-height: normal;
}
.form-control:focus {
  box-shadow: none;
  border-color: #131814;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--black-color);
}

/*--------------------------------------------------------------
/** 3.2 Form Select
--------------------------------------------------------------*/
.filter-blog .form-select,
.filter-shop .form-select{
  padding: 0;
  font-size: 21px;
  font-weight: 300;
  border: none;
  background-color: transparent;
  line-height: normal;
  width: 180px;
}
.form-select:focus {
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--gold-color);
  border-color: var(--gold-color);
}
.form-check-input:focus {
  border-color: var(--gold-color);
  box-shadow: 0 0 0 0.25rem rgba(243, 141, 68, 0.25);
}

/*--------------------------------------------------------------
/** 3.3 Table
--------------------------------------------------------------*/
th{
  font-weight: 300;
  letter-spacing: 0.06rem;
}

/*--------------------------------------------------------------
/** 3.4 Pagination
--------------------------------------------------------------*/
.page-link {
  padding: 0;
  font-size: 21px;
  color: var(--black-color);
  background: none;
  border: none;
}
.page-link:focus {
  color: var(--gold-color);
  background: none;
  box-shadow: none;
}
.page-link:hover {
  color: var(--gold-color);
  background: none;
  border: none;
}
.active>.page-link, .page-link.active {
  color: var(--gold-color);
  background: none;
  border: none;
}
.disabled>.page-link, .page-link.disabled {
  color: var(--gray-color-500);
  background: none;
  border: none;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*----------------------------------------------*/
/* 4. SITE STRUCTURE */
/*----------------------------------------------*/

/* Preloader */
/* Replace the existing preloader CSS with this */

#preloader {
  background: #FFF;
  opacity: 0.8;
  height: 100%;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99999999;
  transition: 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preloader.hide-preloader {
  display: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #f1c516; /* Using the primary color from your theme */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.book {
  --color: #F86D72;
  --duration: 6.8s;
  width: 32px;
  height: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.book .inner {
  width: 32px;
  height: 12px;
  position: relative;
  transform-origin: 2px 2px;
  transform: rotateZ(-90deg);
  animation: book var(--duration) ease infinite;
}
.book .inner .left,
.book .inner .right {
  width: 60px;
  height: 4px;
  top: 0;
  border-radius: 2px;
  background: var(--color);
  position: absolute;
}
.book .inner .left:before,
.book .inner .right:before {
  content: "";
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: inherit;
  position: absolute;
  top: -10px;
  left: 6px;
}
.book .inner .left {
  right: 28px;
  transform-origin: 58px 2px;
  transform: rotateZ(90deg);
  animation: left var(--duration) ease infinite;
}
.book .inner .right {
  left: 28px;
  transform-origin: 2px 2px;
  transform: rotateZ(-90deg);
  animation: right var(--duration) ease infinite;
}
.book .inner .middle {
  width: 32px;
  height: 12px;
  border: 4px solid var(--color);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  transform: translateY(2px);
}
.book ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 50%;
  top: 0;
}
.book ul li {
  height: 4px;
  border-radius: 2px;
  transform-origin: 100% 2px;
  width: 48px;
  right: 0;
  top: -10px;
  position: absolute;
  background: var(--color);
  transform: rotateZ(0deg) translateX(-18px);
  animation-duration: var(--duration);
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
.book ul li:nth-child(0) {
  animation-name: page-0;
}
.book ul li:nth-child(1) {
  animation-name: page-1;
}
.book ul li:nth-child(2) {
  animation-name: page-2;
}
.book ul li:nth-child(3) {
  animation-name: page-3;
}
.book ul li:nth-child(4) {
  animation-name: page-4;
}
.book ul li:nth-child(5) {
  animation-name: page-5;
}
.book ul li:nth-child(6) {
  animation-name: page-6;
}
.book ul li:nth-child(7) {
  animation-name: page-7;
}
.book ul li:nth-child(8) {
  animation-name: page-8;
}
.book ul li:nth-child(9) {
  animation-name: page-9;
}
.book ul li:nth-child(10) {
  animation-name: page-10;
}
.book ul li:nth-child(11) {
  animation-name: page-11;
}
.book ul li:nth-child(12) {
  animation-name: page-12;
}
.book ul li:nth-child(13) {
  animation-name: page-13;
}
.book ul li:nth-child(14) {
  animation-name: page-14;
}
.book ul li:nth-child(15) {
  animation-name: page-15;
}
.book ul li:nth-child(16) {
  animation-name: page-16;
}
.book ul li:nth-child(17) {
  animation-name: page-17;
}
.book ul li:nth-child(18) {
  animation-name: page-18;
}

@keyframes page-0 {
  4% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  13%, 54% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  63% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-1 {
  5.86% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  14.74%, 55.86% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  64.74% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-2 {
  7.72% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  16.48%, 57.72% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  66.48% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-3 {
  9.58% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  18.22%, 59.58% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  68.22% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-4 {
  11.44% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  19.96%, 61.44% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  69.96% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-5 {
  13.3% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  21.7%, 63.3% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  71.7% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-6 {
  15.16% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  23.44%, 65.16% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  73.44% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-7 {
  17.02% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  25.18%, 67.02% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  75.18% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-8 {
  18.88% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  26.92%, 68.88% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  76.92% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-9 {
  20.74% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  28.66%, 70.74% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  78.66% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-10 {
  22.6% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  30.4%, 72.6% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  80.4% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-11 {
  24.46% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  32.14%, 74.46% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  82.14% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-12 {
  26.32% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  33.88%, 76.32% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  83.88% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-13 {
  28.18% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  35.62%, 78.18% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  85.62% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-14 {
  30.04% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  37.36%, 80.04% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  87.36% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-15 {
  31.9% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  39.1%, 81.9% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  89.1% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-16 {
  33.76% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  40.84%, 83.76% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  90.84% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-17 {
  35.62% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  42.58%, 85.62% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  92.58% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes page-18 {
  37.48% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  44.32%, 87.48% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  94.32% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}
@keyframes left {
  4% {
    transform: rotateZ(90deg);
  }
  10%, 40% {
    transform: rotateZ(0deg);
  }
  46%, 54% {
    transform: rotateZ(90deg);
  }
  60%, 90% {
    transform: rotateZ(0deg);
  }
  96% {
    transform: rotateZ(90deg);
  }
}
@keyframes right {
  4% {
    transform: rotateZ(-90deg);
  }
  10%, 40% {
    transform: rotateZ(0deg);
  }
  46%, 54% {
    transform: rotateZ(-90deg);
  }
  60%, 90% {
    transform: rotateZ(0deg);
  }
  96% {
    transform: rotateZ(-90deg);
  }
}
@keyframes book {
  4% {
    transform: rotateZ(-90deg);
  }
  10%, 40% {
    transform: rotateZ(0deg);
    transform-origin: 2px 2px;
  }
  40.01%, 59.99% {
    transform-origin: 30px 2px;
  }
  46%, 54% {
    transform: rotateZ(90deg);
  }
  60%, 90% {
    transform: rotateZ(0deg);
    transform-origin: 2px 2px;
  }
  96% {
    transform: rotateZ(-90deg);
  }
}

/* Search Bar
------------------------------------------------------------- */
.search-box {
  background: var(--gray-color);
  position: relative;
}
.close-button {
  position: absolute;
  top: 20px;
  right: 120px;
  cursor: pointer;
  z-index: 9;
}
.search-box input.search-input {
  font-size: 1.3em;
  width: 70%;
  height: 30px;
  padding: 25px;
  border-radius: 80px;
  border-color: rgb(0 0 0 / 25%);
  background: transparent;
}
.search-box svg {
  width: 22px;
  height: 22px;
  color: var(--gold-color);
}
.search-box svg.search {
  margin-left: -50px;
}



/** Search Form
--------------------------------------------------------------*/
.search-form input[type="search"].search-field {
  border: none;
  background: #f1f1f1;
  width: 100%;
  border-radius: 50px;
  padding: 10px 40px;
}
.search-form input[type="search"].search-field::focus {
  border-color: #af9aaa;
}
.search-form button {
  position: absolute;
  top: 6px;
  right: 9px;
  background: transparent;
  border: none;
}

/** Search Popup
--------------------------------------------------------------*/
.search-popup {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.search-popup.is-visible {
  opacity: 1;
  visibility: visible;
  cursor: -webkit-image-set(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 2x), pointer;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E"), pointer;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.search-popup-container {
  background-color: transparent;
  position: relative;
  top: 50%;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  text-align: center;
  box-shadow: none;
  cursor: default;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.is-visible .search-popup-container {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.search-popup-form {
  position: relative;
  margin: 0 0 3em 0;
}
.search-popup-form .form-control {
  padding: 0 0 .375em 0;
  font-size: 2em;
}
.search-popup-form #search-popup-submit {
  display: none;
}
.search-popup .search-popup-close {
  display: block;
  position: absolute;
  top: 2em;
  right: 2em;
  margin: -0.5em;
  padding: 0.5em;
  line-height: 0;
}
.search-popup .search-popup-close:hover {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.search-popup .search-popup-close i {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  fill: rgba(0,0,0,0.5);
}
.search-popup .search-popup-close:hover i {
  fill: rgba(0,0,0,1);
}
.search-popup .cat-list-title {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 0.6em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.search-popup .cat-list {
  margin: 0;
  list-style-type: none;
}
.search-popup .cat-list-item {
  display: inline-block;
  margin-bottom: 0;
  letter-spacing: 0.015em;
  font-size: 2em;
}
.search-popup .cat-list-item a {
  position: relative;
}
.search-popup .cat-list-item a::after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 1px;
  border-bottom: 1px solid #ff9697;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  -webkit-transition: height 0.3s,opacity 0.3s,-webkit-transform 0.3s;
  transition: height 0.3s,opacity 0.3s,transform 0.3s;
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.search-popup .cat-list-item a:hover::after {
  height: 1px;
  opacity: 1;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
.search-popup .cat-list-item::after {
  content: "/";
  padding: 0 5px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  vertical-align: text-top;
}
.search-popup .cat-list-item:last-child::after {
  display: none;
}

@media only screen and (max-width: 991px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.425em;
  }
}
@media only screen and (max-width: 767px) {
.search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}
@media only screen and (max-width: 575px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.125em;
  }
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}

.search-popup input[type="search"] {
  font-size: 24px;
  height: 60px;
  padding: 26px;
}
.search-popup .search-form button {
  top: 12px;
  right: 15px;
}
.search-popup .search-form button svg {
  height: 28px;
  width: 28px;
}

/* nav tabs */
.nav-tabs .nav-link{
  color: var(--black-color);
}
:focus-visible {
  outline: none;
}

/* 4.1 Header
/*----------------------------------------------*/
#header-nav {
  background-color: #000000;
}

.site-header {
  width: 100%;
  z-index: 10;
  transition: background 0.3s ease-out;
}
.navbar-toggler svg.navbar-icon {
  width: 50px;
  height: 50px;
  color: #ffffff;
}
.navbar-nav .nav-item a.nav-link {
  font-size: 0.7619em;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--white-color);
}
.navbar-nav .nav-item a.nav-link.active, 
.navbar-nav .nav-item a.nav-link:focus, 
.navbar-nav .nav-item a.nav-link:hover {
  color: var(--gold-color);
}
.navbar-brand img.logo {
  max-height: 70px; /* Adjust this value as needed */
  width: auto;
  object-fit: contain;
}

.navbar-toggler {
  color: white; /* Set the button text color to white */
}

.navbar-toggler .navbar-icon {
  fill: white; /* Set the SVG fill color to white */
}


.offcanvas-header .navbar-brand img.logo {
  max-height: 50px; /* Slightly smaller in mobile menu */
  width: auto;
  object-fit: contain;
}

/* Ensure logo container doesn't overflow */
.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
}

.modal {
  --bs-modal-zindex: 99999;
}
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}
.dropdown-menu{
  background-color: #000000;
  border: 1px solid rgba(255,255,255,0.1);
  --bs-dropdown-zindex: 99999;
  max-height: 70vh;
  overflow-y: auto;
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
}
.dropdown-item {
  color: #ffffff;
}
.dropdown-item:hover, 
.dropdown-item:focus {
  color: var(--gold-color);
  background-color: rgba(255,255,255,0.05);
}


.dropdown-header {
  color: var(--gold-color);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 8px 16px;
}

.dropdown-divider {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 8px 0;
}
/* CSS for multi-level dropdown menu */
/* .dropdown-submenu {
  position: relative;
} */


/* Show dropdown on hover for desktop */
@media (min-width: 992px) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
  
  .dropdown-submenu > .dropdown-item:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
  }
}


/* For mobile devices - enable click to open submenus */
@media (max-width: 991.98px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* Make menu items more compact for space */
.navbar-nav .nav-link {
  padding: 8px 0;
  font-size: 0.3rem;
}

@media (min-width: 992px) {
  /* Adjustments for desktop */
  .navbar-nav .nav-item .nav-link {
    padding: 10px 0;
    margin-right: 12px !important;
  }
}

.dropdown-submenu {
  position: relative;
  right: auto !important;
  bottom: auto !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  background: transparent;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.cart-dropdown .dropdown-menu,
.wishlist-dropdown .dropdown-menu{
  min-width: 21rem;
}
.cart-dropdown.dropdown a::after,
.wishlist-dropdown.dropdown a::after{
  display: none;
}
.cart-dropdown span.fs-6,
.wishlist-dropdown span.fs-6 {
  color: #ffffff;
}

@media only screen and (max-width: 500px) {
  .cart-dropdown .dropdown-menu,
  .wishlist-dropdown .dropdown-menu{
    min-width: fit-content;
  }
}

/* Dropdown menu styling */
/* .dropdown-menu {
  position: absolute;
  overflow: auto;
  width: auto;
  z-index: 99999;
  border: 0.8px solid rgb(227, 227, 227);
  box-shadow: none;
} */

/* Add this to your existing CSS file */

/* Fix submenu positioning for desktop */
@media (min-width: 992px) {
  .dropdown-submenu {
    position: relative !important;
  }
  
  .dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    border-radius: 0.25rem;
    z-index: 1001;
  }
  
  /* Add arrow indicator for items with submenus */
  .dropdown-submenu > .dropdown-item::after {
    display: block;
    content: "";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    margin-right: -10px;
  }
  
  /* Change arrow color on hover */
  .dropdown-submenu > .dropdown-item:hover::after {
    border-left-color: var(--gold-color);
  }
}

/* Ensure dropdowns don't get hidden by overflow */
.dropdown-menu {
  overflow: visible !important;
}

/* Fix mobile submenu appearance */
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 1rem;
  }
}

/*------------ Offcanvas -------------- */
#header-nav .navbar-toggler:focus {
  box-shadow: none;
}
#header-nav .offcanvas {
  transition: 0.5s ease-in-out;
}
#header-nav .offcanvas.show {
  z-index: 99999;
}
#header-nav .offcanvas-end {
  width: 500px;
}

.offcanvas {
  background-color: #000000 !important;
}


/* Mobile menu close button color */
.btn-close {
  filter: invert(1) !important;
}

/* Mobile menu text colors */
.offcanvas .navbar-nav .nav-link {
  color: #ffffff !important;
}

.offcanvas .navbar-nav .nav-link:hover,
.offcanvas .navbar-nav .nav-link:focus,
.offcanvas .navbar-nav .nav-link.active {
  color: var(--gold-color) !important;
}

/* Mobile dropdown menu */
.offcanvas .dropdown-menu {
  background-color: #000000 !important;
  border-color: rgba(255,255,255,0.1);
}

.offcanvas .dropdown-item {
  color: #ffffff !important;
}

.offcanvas .dropdown-item:hover,
.offcanvas .dropdown-item:focus {
  color: var(--gold-color) !important;
  background-color: rgba(255,255,255,0.05);
}

/* Logo container in mobile menu */
.offcanvas-header {
  background-color: #000000 !important;
}

/*------------ Top User Icons -----------*/
.site-header .user-items svg {
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: #ffffff;
}

@media only screen and (max-width: 991px) {
  #navbar .user-items {
    display: none;
  }
}

/* 4.2 Billboard
/*----------------------------------------------*/
/*------------Swiper Arrow -----------*/
.swiper-next,
.swiper-prev{
  color: var(--black-color);
  z-index: 9999;
}
.swiper-button-disabled{
  color: var(--gray-color-500);
}

@media only screen and (max-width: 765px) {
  section#billboard{
    height: 100vh !important;
  }
}

/* 4.3 Icon Box - Company Services
/*----------------------------------------------*/
.icon-box .icon-box-icon svg {
  /* width: 33px;
  height: 33px; */
  fill: var(--primary-color);
}
/* Enhanced service icon boxes */
#company-services .icon-box {
    /* background: white; */
    /* border-radius: 20px; */
    /* padding: 25px; */
    transition: all 0.4s ease;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
    height: 100%;
}

#company-services .icon-box:hover {
    transform: translateY(-8px);
    /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); */
}

#company-services .icon-box-icon {
    /* background: linear-gradient(135deg, #f8f9fa, #e9ecef); */
    /* border-radius: 15px; */
    /* width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center; */
    transition: all 0.3s ease;
}

#company-services .icon-box:hover .icon-box-icon {
    /* background: linear-gradient(135deg, var(--gold-color), #ffb400); */
}

#company-services .icon-box:hover svg {
    /* fill: white; */
    transform: scale(1.1);
}

#company-services svg {
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}

#company-services .icon-box-content h4 {
    transition: color 0.3s ease;
    margin-bottom: 10px;
}

#company-services .icon-box:hover .icon-box-content h4 {
    color: var(--gold-color);
}

/* Fixed icon box alignment issues */
#company-services .icon-box {
    background: white;
    border-radius: 20px;
    padding: 25px;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    align-items: flex-start;
}

#company-services .icon-box-icon {
    /* background: linear-gradient(135deg, #f8f9fa, #e9ecef); */
    border-radius: 15px;
    width: 70px;
    height: 70px;
    min-width: 70px; /* Ensure fixed width */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    margin-top: 5px;
    transition: all 0.3s ease;
}

#company-services .icon-box-content {
    flex: 1;
}

#company-services .icon-box svg {
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}
/* Image size constraints for various sections */


/* Main banner images */
.billboard .image-holder img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

/* Product images in cards */
.card img.img-fluid {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

/* Category images */
.categories .card img.img-fluid {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

/* Instagram feed images */
.instagram-item img.insta-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Blog post images */
.posts img.img-fluid {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Limited offer section image */
#limited-offer .image-holder img {
  max-width: 100%;
  height: 400px;
  object-fit: contain;
}

/* Enhanced category section with modern interaction */
#categories .card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

#categories .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

#categories .image-container {
    overflow: hidden;
}

#categories .image-container img {
    transition: transform 0.7s ease;
}

#categories .card:hover .image-container img {
    transform: scale(1.1);
}

#categories h6 {
    background: linear-gradient(135deg, var(--gold-color), rgba(235, 202, 64, 0.8)) !important;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1;
}

#categories .card:hover h6 {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Enhanced product cards with modern hover effects */
#best-selling-items .card {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    height: 100%;
}

#best-selling-items .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

#best-selling-items .card .position-absolute {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#best-selling-items .card:hover .position-absolute {
    transform: scale(1.05);
}

#best-selling-items .card h6 a {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em; /* Adjust line height if needed */
    max-height: calc(1.4em * 2); /* Ensure it doesn't exceed 2 lines */
}

#best-selling-items .card:hover h6 a {
    color: var(--gold-color);
}

#best-selling-items .card .price {
    transition: all 0.3s ease;
}

#best-selling-items .card:hover .price {
    transform: scale(1.05);
}


/* Fix inconsistent discount badge styling */
#best-selling-items .card .position-absolute {
    background: linear-gradient(135deg, var(--gold-color), #ffb400);
    border-radius: 15px;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
    font-weight: 600;
    padding: 8px 16px;
    top: 15px;
    left: 15px;
    z-index: 2;
    transition: all 0.3s ease;
    color: #fff;
}

/* Remove any other conflicting discount badge styles */
.bg-primary.py-1.px-3.fs-6.text-white.rounded-2 {
    background: linear-gradient(135deg, var(--gold-color), #ffb400) !important;
    border-radius: 15px !important;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

#best-selling-items .card .position-absolute p {
  background: linear-gradient(135deg, var(--gold-color), #ffb400) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: white !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  box-shadow: 0 3px 8px rgba(255, 180, 0, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 24px !important;
}

/* Add a subtle animation on hover */
#best-selling-items .card:hover .position-absolute p {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 12px rgba(255, 180, 0, 0.4) !important;
}

/* For maintaining aspect ratio on responsive images */
.image-holder {
  position: relative;
  overflow: hidden;
}


.swiper-pagination {
  position: absolute;
  bottom: 20px !important;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

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

/* Fade effect styles */
.swiper-fade .swiper-slide {
  opacity: 0 !important;
  transition: opacity 0.3s ease-in-out;
}

.swiper-fade .swiper-slide-active {
  opacity: 1 !important;
}


/* 4.4 Product
/*----------------------------------------------*/
.card-concern{
  text-align: center;
  bottom: 145px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease-out;
  opacity: 0;
}
.card-concern .btn{
  padding: 1.125rem;
}
.card-concern svg {
  width: 27px;
  height: 27px;
  cursor: pointer;
}
.card:hover .card-concern{
  bottom: 160px;
  opacity: 1;
}


/* 4.5 Items Listings
/*----------------------------------------------*/
#items-listing img{
  max-width: 80px;
  max-height: 90px;
}

/*------------Swiper Pagination -----------*/
.product-store .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 35px;
}
.swiper-pagination span.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}

/* Modern hero slider with enhanced animations */
.main-swiper .swiper-slide {
    opacity: 0;
    transition: opacity 1s ease, transform 1.2s ease;
    transform: scale(1.05);
}

.main-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.banner-content h2,
.banner-content p,
.banner-content .btn {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s ease;
    transition-delay: 0.3s;
}

.banner-content p {
    transition-delay: 0.5s;
}

.banner-content .btn {
    transition-delay: 0.7s;
}

.swiper-slide-active .banner-content h2,
.swiper-slide-active .banner-content p,
.swiper-slide-active .banner-content .btn {
    opacity: 1;
    transform: translateY(0);
}

/* Fix slider navigation buttons - make them context-aware */
/* Dark background sliders (main banner) */
.main-slider-button-next,
.main-slider-button-prev {
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main-slider-button-next:hover,
.main-slider-button-prev:hover {
    background: var(--gold-color);
    transform: scale(1.1);
}

.main-slider-button-next svg,
.main-slider-button-prev svg {
    fill: white;
    color: white;
}

/* Light background sliders (product sliders) */
.product-slider-button-next,
.product-slider-button-prev {
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-slider-button-next:hover,
.product-slider-button-prev:hover {
    background: var(--gold-color);
    transform: scale(1.1);
}

.product-slider-button-next svg,
.product-slider-button-prev svg {
    fill: #333;
    color: #333;
}

/* Testimonial slider buttons */
.testimonial-button-next,
.testimonial-button-prev {
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-button-next:hover,
.testimonial-button-prev:hover {
    background: var(--gold-color);
    transform: scale(1.1);
}

.testimonial-button-next svg,
.testimonial-button-prev svg {
    fill: #333;
    color: #333;
}

/* Fix slider button positioning */
.position-absolute.top-50.end-0,
.position-absolute.top-50.start-0 {
    transform: translateY(-50%);
    z-index: 10;
}

/* Ensure slider navigation is fully visible */
.swiper-next, 
.swiper-prev {
    margin: 0 15px;
}

/* 4.6 Testimonial
/*----------------------------------------------*/
.rating svg.star {
  width: 16px;
  height: 16px;
}

/* Enhanced testimonials with modern styling */
#customers-reviews .card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border: none;
    position: relative;
}

#customers-reviews .card::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 4rem;
    font-family: serif;
    color: rgba(235, 202, 64, 0.1);
    z-index: 0;
}

#customers-reviews blockquote {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

#customers-reviews .rating {
    margin: 1rem 0;
}

#customers-reviews h5 {
    font-weight: 600;
    color: var(--gold-color);
}

.testimonial-button-next,
.testimonial-button-prev {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonial-button-next:hover,
.testimonial-button-prev:hover {
    background: var(--gold-color);
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 4.7 Brands
/*----------------------------------------------*/
#brands .brand-images img{
  filter: grayscale(100%);
  opacity: 0.5;
  transition: 0.3s ease-in-out;
}
#brands .brand-images a.brand:hover img{
  filter: grayscale(0%);
  opacity: 1;
}

/* 4.8 Instagram
/*----------------------------------------------*/
.instagram-item .icon-overlay {
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
  color: var(--light-color);
  opacity: 0;
  transition: 0.9s ease-out;
}
.instagram-item:hover .icon-overlay {
  opacity: 1;
}

/* 4.9 Footer
/*----------------------------------------------*/
#footer {
  background-color: #000000;
}
#footer .menu-list .menu-item a{
  font-size: 0.7619em;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: var(--black-color);
}
#footer .menu-list .menu-item a:hover{
  color: var(--gold-color);
}

.social-links svg {
  width: 20px;
  height: 20px;
  transition: 0.3s ease-in-out;
  color: var(--light-gray-color);
}
.social-links svg:hover {
  color: var(--gold-color);
}
.social-links li {
  padding-right: 30px;
}

/*----------------------------------------------*/
/* 5. SITE STRUCTURE */
/*----------------------------------------------*/
/* ----------- Search Bar -----------*/
select#input-sort {
  border: none;
  padding: 0;
  text-align: right;
  cursor: pointer;
}

/* 5.1 Single Product Page
/*----------------------------------------------*/
.thumb-swiper .swiper-slide{
  height: auto;
}
.swiper-slide-thumb-active img{
  border: var(--bs-border-width) var(--bs-border-style) var(--primary-color) !important;
}
.product-info del{
  color: var(--gray-color-500);
}
.search-button svg {
  color: #ffffff;
}

/*---- Product Tabs ----------*/
.nav-tabs .nav-link {
  letter-spacing: 0.06em;
}
.nav-tabs .nav-link {
  background: none;
  border: none;
}
.nav-tabs button.nav-link.active {
  color: var(--primary-color);
  background: none;
}
.nav-tabs button.nav-link:hover {
  color: var(--primary-color);
}

@media screen and (max-width: 991px) {
  .product-tabs .review-item{
    width: 100%;
    flex-wrap: wrap;
  }
  .product-tabs .review-item .image-holder{
    margin-bottom: 10px;
  }
}

.image-holder img {
  max-height: 500px; /* Adjust this value as needed */
  width: auto;
  object-fit: contain;
}



.product-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  margin: 30px 0;
  padding: 30px;
}

.product-title {
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--primary-color);
}

.product-brand {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.original-price {
  text-decoration: line-through;
  color: #adb5bd;
  font-size: 1.5rem;
  margin-left: 10px;
}

.discount-badge {
  background-color: var(--secondary-color);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-left: 15px;
}

.product-rating {
  margin: 15px 0;
}

.rating-stars {
  color: #ffc107;
  font-size: 1.2rem;
  margin-right: 10px;
}

.rating-count {
  color: #6c757d;
}

.product-image-gallery {
  margin-bottom: 30px;
}

.main-image {
  width: 100%;
  height: 450px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 15px;
  background-color: var(--light-gray);
  padding: 10px;
}

.thumbnail-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.thumbnail.active {
  border-color: var(--accent-color);
}

.thumbnail:hover {
  transform: scale(1.05);
}

.product-details {
  margin-bottom: 30px;
}

.detail-item {
  margin-bottom: 15px;
}

.detail-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.detail-text {
  color: #6c757d;
}

.btn-add-cart {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 12px 25px;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s;
}

.btn-add-cart:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
}

.btn-wishlist {
  border: 1px solid #dee2e6;
  background-color: white;
  color: var(--dark-gray);
  padding: 12px 15px;
  border-radius: 50px;
  transition: all 0.3s;
}

.btn-wishlist:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.btn-wishlist i {
  margin-right: 5px;
}

.product-tabs {
  margin: 40px 0;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 20px;
}

.nav-tabs .nav-link {
  color: var(--dark-gray);
  font-weight: 600;
  border: none;
  padding: 15px 20px;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}

.nav-tabs .nav-link.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.tab-content {
  padding: 20px;
  background-color: white;
  border-radius: 0 0 10px 10px;
}

.related-products {
  margin: 40px 0;
}

.related-title {
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--primary-color);
  position: relative;
  padding-bottom: 10px;
}

.related-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.card {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}

.card-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.card-brand {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 10px;
}

.card-price {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 1.2rem;
}

.review-item {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.review-author {
  font-weight: 600;
}

.review-date {
  color: #6c757d;
  font-size: 0.9rem;
}

.review-text {
  margin-top: 10px;
  color: #6c757d;
}

.quantity-selector {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #dee2e6;
  background-color: white;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.quantity-btn:hover {
  background-color: var(--light-gray);
}

.quantity-input {
  width: 60px;
  height: 40px;
  border: 1px solid #dee2e6;
  text-align: center;
  font-weight: 600;
  margin: 0 5px;
}

.color-options {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.color-option.active {
  border-color: var(--accent-color);
  transform: scale(1.1);
}

.availability {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.in-stock {
  background-color: #e1f5e9;
  color: #198754;
}

.features-list {
  list-style: none;
  padding-left: 0;
}

.features-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.features-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: bold;
}

.social-share {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-gray);
  transition: all 0.3s;
}

.social-icon:hover {
  background-color: var(--accent-color);
  color: white;
}

.feature-item {
  text-align: center;
  margin-bottom: 20px;
}

.feature-icon {
  font-size: 2rem;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.feature-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.feature-text {
  color: #6c757d;
  font-size: 0.9rem;
}

@media (max-width: 767.98px) {
  .product-container {
      padding: 15px;
  }
  
  .main-image {
      height: 300px;
  }
  
  .price {
      font-size: 1.5rem;
  }
  
  .original-price {
      font-size: 1.2rem;
  }
}

/* Enhanced countdown timer */
#countdown-clock {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    display: inline-flex !important;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#countdown-clock .time {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 15px;
    padding: 10px 15px;
    text-align: center;
    min-width: 80px;
    transition: all 0.3s ease;
}

#countdown-clock:hover .time {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

#countdown-clock .time span {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gold-color);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#countdown-clock .time small {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    opacity: 0.9;
}

#limited-offer {
    position: relative;
}

#limited-offer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    z-index: 1;
}

#limited-offer .container {
    position: relative;
    z-index: 2;
}

#limited-offer h2 {
    color: white;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Page loading animations */
.animate-fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered loading for sections */
.animate-fade-in.delay-100 { animation-delay: 0.1s; }
.animate-fade-in.delay-200 { animation-delay: 0.2s; }
.animate-fade-in.delay-300 { animation-delay: 0.3s; }
.animate-fade-in.delay-400 { animation-delay: 0.4s; }
.animate-fade-in.delay-500 { animation-delay: 0.5s; }