html, body {
    background-color: white;
    margin: 0;
    padding: 0;
}
.explore-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.explore-container .kit-btn {
    width: 200px;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; /* center it */
}
.common-home div#content {
    padding-bottom: 0px!important;
}
div#content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom:0!important;
}
main .row {
     margin-bottom: 0px !important; 
}

nav#menu{
    border: none;
    border-radius: 5px;
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 30px 0;
}
/* Keep header/menu links always white */
footer a,
footer a:visited,
footer a:active {
    color: #ffffff !important;
}

/* Optional: hover color */
footer a:hover {
    color: #f0f0f0 !important;
}

/* cart/account styling */
header #cart,
header .dropdown > a,
header .dropdown-toggle {
  color: #fff !important;
  font-weight: 600;
}

/* dropdown menu */
header .dropdown-menu {
  background: #fff;
  color: #333;
  border-radius: 6px;
  padding: 6px 0;
}
header .dropdown-menu a {
  color: #333 !important;
}
header .dropdown-menu a:hover {
  background: #014D4D;
  color: #fff !important;
}
/* Art Supplies dropdown → text color change only */
#menu .nav-item.dropdown > .dropdown-menu .dropdown-item:hover {
  background-color: transparent !important; /* remove bg */
  color: #ff6600 !important;               /* orange text on hover */
}


/* push menu down */
#menu {
  z-index: 10;
}

/*my account css*/
a.dropdown-toggle{

    font-size: 1.1em;
    color: var(--bs-gray-600);
    line-height: 40px;
    vertical-align: middle;
    padding: 10px 0px 5px 0px;
}

#top {

    margin-bottom: 0;
    padding-bottom: 0;
}

h1 a {
    color: #fff;
    font-family: "poppins", Sans-Serif;
    font-size: 28px;
}
 /*Hero section bg-image css*/
 
 /* Hero Section Styles */
.hero-section {
    position: relative;
    width: 100%;
    height: 80vh;
    background-image: url("https://images.pexels.com/photos/1585325/pexels-photo-1585325.jpeg?cs=srgb&dl=pexels-steve-1585325.jpg&fm=jpg"); 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 20px;
    z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 1200px;
  padding: 20px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; 
    opacity: 0.7;
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px); 

}
.hero-overlay,
.hero-section::before {
    pointer-events: none; 
}

.hero-content h1 {
    font-size: 60px;
    font-weight: bold;
    font-family: "poppins", Sans-Serif;
    color:white;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-hero {
    padding: 12px 30px;
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-hero:hover {
    background-color: #e55b00;
}

.hero .hero-inner { 
    position: relative; 
    z-index: 2;
    }

/*explore products btn css*/
.button {
  height: 50px;
  width: 250px;
  padding: 10px 30px;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 2px solid white;
  overflow: hidden;
  border-radius: 30px;
  color: #333;
  transition: all 0.5s ease-in-out;
}

.btn-txt {
    color: white;
  z-index: 1;
  font-weight: 800;
  letter-spacing: 4px;
}

.type1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  background-color: #e55b00;
  border-radius: 30px;
  visibility: hidden;
  height: 10px;
  width: 10px;
  z-index: -1;
}

.button:hover {
  box-shadow: 1px 1px 200px white;
  color: #fff;
  border: none;
}

.type1:hover::after {
  visibility: visible;
  transform: scale(100) translateX(2px);
}


.hero.section-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); 
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

/* Menu links white */
header .navbar-menu ul li a {
  color: #fff !important;
  font-weight: 600;
  padding: 10px 15px;
}

#menu {
  width: 100%;
}

/*add to cart btn css*/
button.btn.btn-lg.btn-dark.d-block.dropdown-toggle {
    background-color: transparent !important;
    border: none;
    width: 95%;
}
.fa-solid.fa-cart-shopping i {
    margin-right: 10px;
}

/*search field*/
input.form-control.form-control-lg {
    border: 1px solid #d5c8c8;
    padding: 10px 15px;
}

.right-section .about-img {
    height: 350px;
    width: 700px;
    object-fit: contain;
}
button.btn.btn-lg.btn-dark.d-block.dropdown-toggle {
    background-color: #014D4D;
    color: white;
}
.info-section h5 {
    line-height: 1.5em;
    width: 50%;
    margin-left: 300px;
    margin-top: 20px;
}

.reasons .container-1{
    margin: 0;
}

/* product archive css*/

.col-sm h1 {
    font-size: 35px;
}
.col-12.text-center {
    display: none;
}

.description h4 a {
    color: black;
    font-size: 18px;
    font-family: "poppins", Sans-Serif;
}
.description p{
    font-size: 14px;
}
.price .price-new {
    font-weight: 700;
}
.product-thumb {
    border:none;
    
}
.product-thumb .button {
    display: none;
}


.input-group .input-group-text {
    margin-right: 10px;
}

.input-group button#button-cart {
    background-color: #104D4D;
    width: 50% !important;
    border-radius: 10px !important;
    margin-left: 90px !important;
}

.input-group button#button-cart:hover{
    background-color: #218f8f;
}

button#button-buy-now {
    width: 100%;
    background-color: #104D4D;
    border-radius: 10px;
    margin-top: 20px;
}
button#button-buy-now:hover{
   background-color: #218f8f;  
}


.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #218f8f;
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav .nav-tabs .nav-item .nav-link{
    color:black;
}

/*shopping cart css*/
a.btn.btn-primary {
    background-color: #014D4D;
}

button.btn.btn-primary {
    background-color: #014D4D;
}
/*Accordion css*/

#productAccordion .accordion-item {
    border-bottom: 1px solid #dee2e6;
}
.accordion-item button.accordion-button {
    background-color: transparent !important;
    border:transparent;
}

.accordion-item .accordion-button[aria-expanded="true"] {
    border: transparent !important;
}


/* make nav text white and style dropdown to match blue strip */
#menu.navbar { padding: 8px 0; }
#menu .nav-link { color: #fff !important; font-weight: 500; padding: 10px 16px; }
#menu .nav-link:hover { color: #fff !important; opacity: 0.9; }


/* dropdown menu css */
#menu .dropdown-menu {
  min-width: 220px;
  border-radius: 6px;
  padding: 6px 0;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* dropdown items */
#menu .dropdown-item { color: #333; padding: 8px 16px; }
#menu .dropdown-item:hover { background: #014D4D; color: #fff; }


/* Align dropdown toggle with other nav items */
.navbar .nav-item .nav-link,
.navbar .nav-item .dropdown-toggle {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.5; /* make them uniform */
}

/* Ensure dropdown menu doesn't push down */
.navbar .dropdown-menu {
    margin-top: 0; /* remove gap below toggle */
}

ul.navbar-nav.me-auto.mb-2.mb-lg-0 {
    margin:0 !important;
}

nav#menu {
  position: relative !important;
  border: none;
  margin-top: 70px !important;
  margin-left: -70px !important;
  margin-top: -45px !important;
}

div#carousel-banner-0 {
    display: none;
}
.product-category a{
    color: #014D4D !important;
}
.rating p a {
    color: #014D4D !important;
}
.text-start .text-wrap a {
    color: #014D4D !important;
}

/*shopping cart button css*/
a.btn.btn-danger {
    background-color: #fd7e14 !important;
}
a.btn.btn-light {
    background-color: #014D4D;
    COLOR: #fff;
}

/*success page css*/

div#content {
    padding-bottom: 500px;
}

div#common-success {
    margin: 10px 0px 100px 50px;
    background-image: url("https://kas.thecrimsonwizard.com//catalog/view/template/image/custom/background.png");
    background-size: 700px 500px;
    background-position: top right;
    background-repeat: no-repeat;
}
div#content.text-end a.btn.btn-primary{
    margin-left: 100px;
}

div#content p{
    margin-top: 10px !important;
}

/*category sidebar css*/

/* Active category link inside the main list-group */
.list-group.mb-3 .list-group-item.active {
    background-color: #014D4D; 
    color: #fff;              
    font-weight: bold;      
    border-radius: 4px;      
    text-decoration: none; 
}

/* Hover effect for all links */
.list-group.mb-3 .list-group-item:hover {
    /*background-color: #097575;*/
    color: #fff;               
    cursor: pointer;
}

button.kit-btn {
    border: none;
}

.footer-newsletter {
    padding: 0 !important;
}

/*breadcrumbs css*/

ul.breadcrumb {
    /*background-color: #014D4D;*/
    padding: 10px 15px;
    margin: 0;
    border-radius: 5px;
    margin-top: 250px;
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    width: 95% !important;
}

ul.breadcrumb li {
    margin-right: 5px;
    font-size: 14px;
}

ul.breadcrumb li a {
    color: #014D4D !important;          
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    text-decoration: underline;
}

ul.breadcrumb li::after {
    content: "›";           
    margin-left: 5px;
    color: #fff !important;
}

ul.breadcrumb li:last-child::after {
    content: "";            
}
div#carousel-banner-1 {
    height: 150px !important;
}
#logo {
    margin-bottom: 30px;
}
.review-form{
    margin:0 auto 50px 30px !important;
}

/*Responsiveness*/

@media only screen and (max-width:1000px){
    nav#menu {
      position: relative !important;
      border: none;
      margin-left: -100px !important;
      margin-top: -65px !important;
    }
    ul.navbar-nav.me-auto.mb-2.mb-lg-0 {
    margin-bottom: 20px !important;
    }
    .navbar-toggler {
    margin-left: 0;
    z-index: 1001;
    position: absolute;
    top: -30px;
    }
    div#navbar-menu {
    margin-top: -40px !important;
    }
    
    .hero-content h1 {
    font-size: 40px;
    }
    div#container {
        width: 50% !important;
    }
    .bg-image {
    width: 95vw!important;
    }
    .bg-image .text-container {
    height: fit-content !important;
    }
    section.hero-section {
        height: 400px;
        width: 100vw;
    }
    .container {
        width: 100vw !important;
    }
    #logo h1 a{
        font-size: 20px !important;
    }
    .hero-content.text-center {
        width: 100vw;
        padding: 10px;
    }
    .hero-content .text-center h1{
        font-size: 18px !important;
    }
    .hero-content .text-center p.lead {
        font-size: 12px;
    }
    button.button.type1 {
        padding: 10px !important;
        font-size: 12px;
        width: 220px;
    }
    .info-section {
        padding:0;
        margin: 0;
    }
    .info-section h5 {
        margin-left: 0  !important;
        font-size: 14px;
        font-weight: 400;
        width: 100% !important;
    }
    .info-section h1{
        font-size: 25px !important;
    }
    .bg-image {
        width: 100vw;
        height: 350px;
        padding: 20px;
    }
    .bg-image .text-container {
        height: 200px;
        width: 60%;
        padding: 20px;
        margin-top: 100px;
    }
    .bg-image .text-container h3 {
        font-size: 15px;
    }
    .bg-image .text-container h1 {
        font-size: 16px !important;
    }
    .text-container p {
        font-size: 12px;
        line-height: 18px;
    }
    .text-container a.my-button {
        padding: 10px 20px;
        font-size: 12px;
    }
    .explore-main {
        display: flex;
        margin-top: 50px;
        flex-direction: column;
    }
    .explore-main img {
        display: none;
    }
    
    .explore-container {
        height: 450px !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .explore-container.kit-btn {
        padding: 10px 20px;
        font-size: 12px;
        width: 200px;
    }

    .explore-container p {
        margin-bottom: 30px !important;
    }
    .why-here{
        padding: 30px 10px;
    }
    .reasons{
        flex-direction: row !important;
    }
    .reasons .container-1, .reasons .container-2, .reasons .container-3 {
        margin: 10px !important;
        width: 40vw;
    }
    .reasons .container-1 h5, .reasons .container-2 h5, .reasons .container-3 h5{
        font-size:12px;
    }
    .review-slider button.slider-btn.prev{
        top: 90%;
        left: 10px;
    }
    .review-slider button.slider-btn.next{
        top: 90%;
        right: 50px;
    }
    .review-container .prev {
        left: 30px;
        top: 80%;
    }
    .review-container .next {
        right: 30px;
        top: 78%;
    }
    .review-form button {
        width: 200px !important;
    }
    section.milan-hero-slider {
        width: 45vw;
        height: 250px;
        margin-bottom: 30px;
    }
    .milan-slides .milan-slide {
        height: 220px;
    }
    .about-container {
        width: 90vw !important;
    }
    footer{
        width: 100vw;
    }
    div#content {
        padding-bottom: 400px;
        width:90vw !important;
    }

    .review-container {
        width: 100vw !important;
        flex-direction: column !important;
    }
    .review-container .slideshow-container {
        width: 90%;
    }
    .review-container .slideshow-container .button.prev {
        top: 80% !important;
    }
     .review-container .slideshow-container .button.next{
        top: 80% !important;  
    }
     .review-form {
        width: 90vw !important;
        max-width: 90vw !important;
        margin-bottom: 30px;
    }
    .main-container {
        width: 100vw!important;
        margin-bottom: 0 !important;
    }
    .contact-us {
        width: 90vw;
        padding: 0;
    }
    .contact-form {
        width: 80vw;
    }
}

@media only screen and (max-width:480px){
    #logo h1 a {
    font-size: 16px !important;
    }
    #cart .btn-lg {
        padding: 14px 10px 0 10px !important;
    }

    button.navbar-toggler {
        position: absolute;
        top: 12px;        /* normal positive value */
        right: 12px;
        transform: none;  /* remove translateY entirely */
        margin: 0;
    }
    button.navbar-toggler:hover,
    button.navbar-toggler:focus,
    button.navbar-toggler:active {
        transform: translateY(-50%) !important;
    }

    .navbar-toggler:focus {
          box-shadow: none !important;
          outline: none;
    }
    ul.breadcrumb li, ul.breadcrumb li a {
    overflow: auto !important;
    font-size: 10px !important;
    }
    .col-sm h1 {
    font-size: 20px !important;
    }
    div#carousel-banner-1 {
        height: 80px !important;
    }
    body:not(.common-home) #site-header {
        height: 180px !important;
    }
    div#content {
        padding-bottom: 0 !important;
    }
    .container span.navbar-toggler-icon {
        color: white !important;
    }
    .hero-content h1 {
    font-size: 24px !important;
    }
    .hero-content p {
    font-size: 14px !important;
}
    .hero-content .text-center h1{
        font-size: 28px !important;
        margin-top: 50px !important;
    }
    .hero-content .text-center p.lead {
        font-size: 14px;
        padding: 15px;
    }
    .section-title {
        font-size: 26px !important;
    }
    /*.info-section {*/
    /*    padding: 30px 0 0 0 !important;*/
    /*    margin-bottom: 30px !important;*/
    /*}*/
    .bg-image {
        height: 350px !important;
    }
    .text-container {
        margin: 0 !important;
        height: 300px !important;
    }
    .bg-image .text-container {
        width: 80% !important;
    }
    button.navbar-toggler {
        position: absolute;
        top: -10px;
        right: 12px;
        transform: translateY(-50%);
        margin: 0;
    }
    div#content p {
        margin: 20px !important;
    }

    .about-container {
        padding: 10px 10px 30px 0 !important;
    }
    .explore-main {
        margin-top: 30px !important;
    } 
    .explore-container {
        width: 90vw;
        margin-left: 5px;
        height: 500px !important;
    }
    .why-here {
        padding: 30px 10px !important;
    }
    .reasons{
        display: flex;
        flex-direction: column !important;
    }
    .reasons .container-1, .reasons .container-2, .reasons .container-3 {
        width: 85vw !important;
        margin-top: 20px !important;
    }
    .info-section p{
        margin-bottom: 0 !important;
    }
    .review-card {
        padding: 30px 20px !important;
    }
    button.prev, button.next {
        top: 90% !important;
    }
    .review-form {
        margin: 0 auto 0 0 !important;
    }
    .main-container {
        padding: 0 !important;
        width: 100vw !important;
    }
    .accordion-button::after {
        right: 0px !important;
    }
    .contact-us {
        padding: 10px !important;
    }
    .contact-form-container {
        padding: 10px !important;
    }
    .contact-form-container button{
        width: 100% !important;
    }

    #navbar-menu {
        position: absolute !important;
        left: 150px !important;
        right: 0 !important;
        top: 48px !important;
        width: 260px;
        background: #000 !important;
        border-radius: 8px;
        margin: 0 !important;
        padding: 8px 0;
        z-index: 999999;
    }
    section.review-section {
    margin-bottom: 0 !important;
    }
}

/* ================= HAMBURGER MENU – BLACK THEME (TABLET + MOBILE) ================= */
@media (max-width: 1000px) {
      /* remove transform that breaks fixed header */
      #container,
      body,
      html {
          transform: none !important;
      }

    /* Fix header only on tablet & mobile */
  #site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
  }
   .common-home #site-header {
    background: transparent !important;
    transition: background 0.35s ease;
  }

  /* After scroll past hero → green */
  .common-home #site-header.scrolled {
    background: #014D4D !important;
  }

  /* Inner pages green */
  body:not(.common-home) #site-header {
      background: #014D4D;
  }

  /* Push page content below fixed header */
  #container {
      padding-top: 230px;   /* header height */
  }

  /* Homepage hero should touch top */
  .common-home #container {
      padding-top: 0;
  }
  ul.breadcrumb {
    margin-top: 0 !important;
    }
    
  
  /* Background of the opened hamburger menu */
  body:not(.common-home) #navbar-menu {
    background-color: #000000; /* black background */
    padding: 8px 0;            /* compact vertical spacing */
  }

  /* Hamburger menu items */
  body:not(.common-home) #navbar-menu .nav-link {
    color: #ffffff !important;        /* white text */
    padding: 8px 16px !important;     /* reduce spacing */
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Hover / tap state */
  body:not(.common-home) #navbar-menu .nav-link:hover,
  body:not(.common-home) #navbar-menu .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(1, 77, 77, 0.6) !important; /* lighter shade of #014D4D */
  }

  /* Remove extra gaps between items */
  body:not(.common-home) #navbar-menu .nav-item {
    margin: 0 !important;
  }
    /* Limit hamburger menu width */
  body:not(.common-home) #navbar-menu {
    max-width: 260px;          /* change width here */
    margin-left: auto;         /* align to right */
    margin-right: 12px;        /* small gap from edge */
    border-radius: 6px;
  }

  #menu {
    position: relative;
  }
    /* Make the SAME parent for icon + menu positioning */
  #menu .container {
    position: relative;
  }

  /* Keep hamburger aligned */
  .navbar-toggler {
    margin-left: 0; 
    z-index: 1001;
  }

  /* Dropdown panel opens BELOW icon */
  #navbar-menu {
    position: absolute;
    top: 48px;               /* height of header row under icon */
    left: 0;                 /* align with icon on left */
    width: 260px;
    background: #000;
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
  }

  /* Menu links */
  #navbar-menu .nav-link,
  #navbar-menu .dropdown-item {
    color: #ffffff !important;
    padding: 8px 14px;        /* reduced spacing */
    font-weight: 500;
  }

  /* Hover effect */
  #navbar-menu .nav-link:hover,
  #navbar-menu .dropdown-item:hover {
    background-color: #014D4D;
    color: #ffffff !important;
  }

  /* Prevent full-width collapse */
  .navbar-collapse {
    flex-grow: 0 !important;
  }
  #navbar-menu .dropdown-menu {
    background-color: #000 !important;
    border: none;
    box-shadow: none;
    padding: 6px 0;
    margin-left: 0;
  }

  /* Submenu items */
  #navbar-menu .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    padding: 8px 14px;
    font-weight: 500;
  }

  #navbar-menu .dropdown-menu .dropdown-item:hover {
    background-color: #014D4D !important;
    color: #ffffff !important;
  }

  /* Prevent full-width collapse */
  .navbar-collapse {
    flex-grow: 0 !important;
  }
    /* Hamburger button */
  .navbar-toggler {
    border-color: #ffffff;
  }

  /* Default Bootstrap icon */
  .navbar-toggler-icon {
    filter: invert(1); /* turns it white */
  }
    /* Prevent transparent flash */
  #navbar-menu.navbar-collapse {
    background-color: #000 !important;
    will-change: height;
  }

  /* Open state */
  #navbar-menu.navbar-collapse.show {
    background-color: #000 !important;
  }
    /* closed state */
  #navbar-menu.navbar-collapse {
    background-color: #000 !important;
    transition: none !important;   /* stop fade/paint delay */
  }

  /* opening + open state */
  #navbar-menu.navbar-collapse.collapsing,
  #navbar-menu.navbar-collapse.show {
    background-color: #000 !important;
  }
    #navbar-menu.collapsing {
    transition: none !important;
  }
    /* keep navbar as positioning parent */
  #menu {
    position: relative;
  }

  /* dropdown panel */
  #navbar-menu {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 48px !important;
    width: 260px;
    background: #000 !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 8px 0;
    z-index: 999999;
  }
    #menu .container {
    display: flex;
    justify-content: flex-end;
    position: relative;
  }

}

/* MAIN HEADER */
#site-header {
    background: #014D4D;
    z-index: 9999;
    padding: 30px 0!important;
    transition: background 0.35s ease;
}
header#site-header {
    background-color: #014D4D;
}
/* Homepage → transparent */
.common-home #site-header {
    top: 0;
    left: 0;
    background: transparent;
    width: 100%;
}

/* Inner pages → green */
body:not(.common-home) #site-header {
    background: #014D4D;
    padding-bottom: 0px !important;
}
body:not(.common-home) #content {
    padding-top: 40px;
}

/* Ensure header content visible */
#site-header a,
#site-header i {
    color: #fff !important;
}
#menu {
    background: transparent;
    margin: 0;
    padding: 0;
    z-index: 9999;
}
/* Logo text */
#logo h1 a {
    color: #fff !important;
}

/* Menu links */
#menu .nav-link,
#menu .dropdown-toggle {
    color: #fff !important;
    font-weight: 500;
}

/* Cart & account icons */
header #cart,
header .dropdown > a,
header i {
    color: #fff !important;
}

/* Remove unwanted spacing */
#menu,
.navbar {
    margin: 0 !important;
}

/* Logo + Menu + Icons */
#site-header .dropdown-menu a,
#site-header .dropdown-menu i{

    color: #014D4D !important;
}
#site-header .dropdown-menu a:hover,
#site-header .dropdown-menu i:hover {
    color: #fff !important;
}

ul.breadcrumb li,
ul.breadcrumb li a {
    color: #fff;
    font-size: 14px;
}

a.list-group-item.active{
    color: #fff !important;
}
a.list-group-item{
    color: #014D4D !important;
}
i.fa-solid.fa-arrow-right-arrow-left {
    color: #fff;
}
span.d-none.d-xl-inline {
    color: #fff !important;
    display: block !important;
}

a#compare-total {
    display: flex;
    flex-direction: row!important;
}
ul.navbar-nav.me-auto.mb-2.mb-lg-0 {
    /*margin-top: 80px !important;*/
    margin-bottom:20px !important;
}
.hero-section::before,
.hero-overlay {
    pointer-events: none !important;
}
/* Content must stay below header */
#content,
.hero-section {
    position: relative;
    z-index: 1;
}

/* Ensure dropdown becomes visible when open */
.dropdown.open > .dropdown-menu {
    display: block;
}
/* FIX: allow dropdowns to be clickable */
.navbar-collapse {
    overflow: visible !important;
}

/* Re-enable clicks ONLY for actual menu items */
#navbar-menu a,
#navbar-menu button,
#navbar-menu .dropdown-menu {
    pointer-events: auto;
}
/* FINAL FIX – allow dropdown clicks */
.navbar-collapse {
    overflow: visible !important;
}

  /* Re-enable clicks only where needed */
  #navbar-menu a,
  #navbar-menu button,
  #navbar-menu .dropdown-menu {
    pointer-events: auto;
  }
  .hero-content.text-center {
    padding-top: 100px;
}
#cart .btn-lg {
    padding-bottom: 0;
}
.shop-category {
    padding: 0 !important;
    text-align: center;
}

/* ================= HAMBURGER TOGGLE CLOSE ================= */

/* Ensure button always receives clicks */
.navbar-toggler {
  pointer-events: auto !important;
}

/* Allow icon to pass click to button */
.navbar-toggler-icon {
  pointer-events: none;
}

/* ===== ON MENU HOVER, ORANGE UNDERLINE (ALL DEVICES) ===== */

/* remove background hover everywhere */
#menu .nav-link:hover,
#menu .dropdown-item:hover {
  background: transparent !important;
  color: #fff !important;
}

/* prepare underline positioning */
#menu .nav-link,
#menu .dropdown-item {
  position: relative;
}

/* Ensure positioning context */
#menu .nav-link,
#menu .dropdown-item {
  position: relative;
}


/* Smooth underline using background — no pseudo-elements */
#menu .nav-link,
#menu .dropdown-item {
  background-image: linear-gradient(#ff6600, #ff6600);
  background-size: 0% 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

/* Hover effect */
#menu .nav-link:hover,
#menu .dropdown-item:hover {
  background-size: 100% 2px;
}

/* Inner pages → green */
body:not(.common-home) #site-header {
    background: #014D4D !important;
    padding-bottom: 0px !important;
}

.product-benefits-top {
    margin: 12px 0 18px;
    padding: 12px 14px;
    background: #f8faf9;
    border-radius: 8px;
}

.product-benefits-top ul {
    padding-left: 18px;
    margin: 0;
}

.product-benefits-top li {
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}
.key-features-title {
  font-size: 18px;
  font-weight: 600;
  color: #014d4d;   /* your theme teal */
  margin-bottom: 8px;
  margin-top: 12px;
}

.product-benefits-top ul {
  padding-left: 18px;
  margin-bottom: 0;
}

.product-benefits-top li {
  margin-bottom: 4px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  background: #f7faf9;
  border-radius: 8px;
  font-size: 14px;
}

.trust-item {
  color: #014d4d;
  font-weight: 500;
}
.product-title-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
  font-size: 14px;
}

.product-title-rating i {
  color: #ffb400; /* star gold color */
  font-size: 14px;
}

.rating-text {
  color: #666;
  font-size: 13px;
}
body {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: #222;
  line-height: 1.6;
  background: #f7f8fa;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #111;
}

h1 { font-size: 34px; }
h2 { font-size: 26px; margin-bottom: 18px; }
h3 { font-size: 20px; }

section,
.container > .row {
  margin-bottom: 60px;
}

.card,
.product-card,
.category-card,
.best-sellers .product-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover,
.product-card:hover,
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}
.product-name {
    text-align: center;
}

.btn-primary,
.add-to-cart-btn {
  background: linear-gradient(135deg, #014d4d, #0a7f7f);
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.btn-primary:hover,
.add-to-cart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  background: linear-gradient(135deg, #0a7f7f, #014d4d);
}

.price-new {
  font-size: 28px;
  font-weight: 700;
  color: #014d4d;
}

.product-benefits-top ul {
  padding-left: 18px;
  margin-bottom: 18px;
}

.product-benefits-top li {
  margin-bottom: 6px;
}
.container {
  max-width: 1200px;
}
p {
  margin-bottom: 14px;
}
/* ===== Scroll reveal base ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
}

/* When visible */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }
.reveal.delay-6 { transition-delay: 0.6s; }
.reveal.delay-7 { transition-delay: 0.7s; }
.reveal.delay-8 { transition-delay: 0.8s; }
.reveal.delay-9 { transition-delay: 0.9s; }
.reveal.delay-10 { transition-delay: 0.10s; }
.reveal.delay-11 { transition-delay: 0.11s; }
.reveal.delay-12 { transition-delay: 0.12s; }

/* ===== Premium hover micro-interaction ===== */
.product-card,
.category-card,
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover,
.category-card:hover,
.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* ===== Smooth button feel ===== */
button,
.btn {
  transition: all 0.25s ease;
}

button:hover,
.btn:hover {
  transform: translateY(-2px);
}
/* ===== Global page entrance ===== */

/*.page-enter {*/
/*  opacity: 0;*/
/*  animation: pageFade 0.6s ease forwards;*/
/*}*/

/* Smooth fade animation */
@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(8px); 
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  Best sellers nav arrows hover fix */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-btn:hover,
.carousel-btn:focus {
  transform: translateY(-50%) !important;
}

/* Remove hover lift from testimonial slider arrows */

.slider-btn:hover,
.slider-btn:focus {
  transform: translateY(-50%) !important;
}

/* reviews page - nav arrows hover fix*/
.prev:hover,
.next:hover {
  transform: translateY(-50%) !important;
}

/* Pagination Container */
.pagination {
    justify-content: center;
    margin-top: 30px;
}

/* Pagination Buttons */
.pagination li a,
.pagination li span {
    padding: 8px 14px;
    margin: 0 4px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-weight: 500;
}

/* Hover */
.pagination li a:hover {
    background: #fff;
    color: #fff;
    border-color: #014D4D   ;
}

/* Active Page */
.pagination li.active span {
    background: #014D4D;
    color: #fff;
    border-color: #014D4D;
}

/* Next Previous */
.pagination li a[rel="next"],
.pagination li a[rel="prev"] {
    font-weight: bold;
}
/* Remove Button (Cross) */

#cart .dropdown-menu .btn.btn-danger {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

#cart .dropdown-menu .btn.btn-danger:hover {
    background-color: #e56a00 !important;
    border-color: #e56a00 !important;
}
.dropdown-menu p a {
    padding: 6px 12px;
    border-radius: 6px;
    margin-left: 5px;
}
.text-end a:hover i::before{
color: #fff !important;
}
/* GLOBAL GREEN BUTTON STYLE */

.btn-primary, .btn-light {
    background-color: linear-gradient(135deg, #014d4d, #0a7f7f) !important;
    border-color: #014D4D !important;
    color: #ffffff !important;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
}

/* Hover */
.btn-primary:hover, .btn-light:hover {
    background-color: linear-gradient(135deg, #0a7f7f, #014d4d);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    border-color: #e55b00 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Click */
.btn-primary:active, .btn-light:active {
    background-color: #013737 !important;
    border-color: #013737 !important;
}

/* Focus */
.btn-primary:focus, .btn-light:focus {
    box-shadow: none !important;
}

/* GLOBAL LINK COLOR - THEME GREEN */

/*body.product-product a,*/
/*body.product-category a,*/

/* Cart Page */
/*body.checkout-cart a,*/

/* Checkout Page */
/*body.checkout-checkout a {*/
/*    color: #014D4D !important;*/
/*    text-decoration: none;*/
/*}*/

/* Hover */
/*body.product-product a:hover,*/
/*body.product-category a:hover,*/
/*body.checkout-cart a:hover,*/
/*body.checkout-checkout a:hover  {*/
/*    color: #e55b00 !important;*/
/*    text-decoration: none;*/
/*}*/

/* Active */
/*body.product-product a:active,*/
/*body.product-category a:active,*/
/*body.checkout-cart a:active,*/
/*body.checkout-checkout a:active {*/
/*    color: #013737 !important;*/
/*}*/
/* Accordion Focus Border - Theme Green */

.accordion-button:focus {
    border-color: #014D4D !important;
    box-shadow: 0 0 0 0.2rem rgba(1,77,77,0.25) !important;
}

/* When Accordion is Open */

.accordion-button:not(.collapsed) {
    border-color: #014D4D !important;
    box-shadow: none !important;
}
button.btn.btn-light.btn-lg {
     border-color: 1px solid #2222224d !important; 

}
.account-modern-sidebar a.list-group-item:hover,
.account-modern-sidebar a.list-group-item:focus {
    color: #fff !important;
}