/*
---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */


/* Typography */
body,
ul,
li,
p,
a,
label,
input,
div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}

.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 500 !important;
}

.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}

.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}

/* General */
.logo {
  font-weight: 500 !important;
}

.text-warning {
  color: #ede861 !important;
}

.text-muted {
  color: #bcbcbc !important;
}

.text-success {
  color: #212934 !important;
}

.text-light {
  color: #cfd6e1 !important;
}

.bg-dark {
  background-color: #212934 !important;
}

.bg-light {
  background-color: #fff !important;
}

.bg-black {
  background-color: #1d242d !important;
}

.bg-success {
  background-color: #212934 !important;
}

.btn-success {
  background-color: #212934 !important;
  border-color: #212934 !important;
}

.pagination .page-link:hover {
  color: #000;
}

.pagination .page-link:hover,
.pagination .page-link.active {
  background-color: #212934;
  color: #fff;
}

/* Nav */
#templatemo_nav_top {
  min-height: 40px;
}

#templatemo_nav_top * {
  font-size: .9em !important;
}

#templatemo_main_nav a {
  color: #212934;
}

#templatemo_main_nav a:hover {
  color: #212934;
}

#templatemo_main_nav .navbar .nav-icon {
  margin-right: 20px;
}

/* Hero Carousel */
#template-mo-zay-hero-carousel {
  background: #efefef !important;
}

/* Accordion */
.templatemo-accordion a {
  color: #000;
}

.templatemo-accordion a:hover {
  color: #333d4a;
}

/* Shop */
.shop-top-menu a:hover {
  color: #212934 !important;
}

/* Product */
.product-wap {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
}

.product-wap .product-color-dot.color-dot-red {
  background: #f71515;
}

.product-wap .product-color-dot.color-dot-blue {
  background: #6db4fe;
}

.product-wap .product-color-dot.color-dot-black {
  background: #000000;
}

.product-wap .product-color-dot.color-dot-light {
  background: #e0e0e0;
}

.product-wap .product-color-dot.color-dot-green {
  background: #212934;
}

.card.product-wap .card .product-overlay {
  background: rgba(0, 0, 0, .2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}

.card.product-wap a {
  color: #000;
}

#carousel-related-product .slick-slide:focus {
  outline: none !important;
}

#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}

.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #212934;
}

#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #212934 !important;
  font-size: 2.8em !important;
}

/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}

/* Services */
.services-icon-wap {
  transition: .3s;
}

.services-icon-wap:hover,
.services-icon-wap:hover i {
  color: #fff;
}

.services-icon-wap:hover {
  background: #212934;
}

/* Contact map */
.leaflet-control a,
.leaflet-control {
  font-size: 10px !important;
}

.form-control {
  border: 1px solid #e8e8e8;
}

/* Footer */
#tempaltemo_footer a {
  color: #dcdde1;
  text-decoration: none;
}

#tempaltemo_footer a:hover {
  color: #dcdde1;
  text-decoration: underline;
}

#tempaltemo_footer ul.footer-link-list li {
  padding-top: 10px;
}

#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}

#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}

#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}

#tempaltemo_footer .border-light {
  border-color: #2d343f !important;
}

/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3,
.product-wap li,
.product-wap i,
.product-wap p {
  font-size: 12px !important;
}

.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

.marquee-container {
  flex: 1;
  margin-left: 20px;
}

.header-logo {
  height: 50px;
  width: auto;
}

.header-title {
  font-size: 20px !important;
  font-weight: 400 !important;
  font-family: 'Roboto', sans-serif;
  color: #212934;
  text-decoration: none;
  margin-left: 0 !important;

}

.header-title:hover {
  color: #212934;

}

.header-search input {
  min-width: 0;
}

.header-search button {
  width: 45px;
  /* fixed button width */
  background: #212934;
  color: #fff;
  border: none;
}

/* Mobile centering */
.header-mobile {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* Desktop Search Box */
.desktop-search {
  max-width: 400px;
  /* keeps search compact */
  width: 100%;
}

/* Make sure the top header stays at the very top */
#templatemo_nav_top {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Default sticky header (mobile view, no offset) */
.navbar.shadow.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 185px;
}

#templatemo_nav_top {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 50px; /* Example fixed height */
  vertical-align: center;
}

#secondary-nav {
  position: sticky;
  top: calc(80px + 100px); /* Sum of the two above heights */
  z-index: 1000;
  background: #212934;
  padding: 0;
}

.marquee-container {
  display: flex;
  align-items: center;
  height: 50px;
}

.marquee-container marquee {
  width: 100%;
}


.flip {
  transform: scaleX(-1);
}

/* Style Add to Cart button */
.card-body button {
  background-color: #f0f0f0;
  /* primary blue */
  color: #000;
  /* white text */
  border: none;
  /* remove border */
  padding: 10px 18px;
  /* spacing */
  border-radius: 6px;
  /* rounded corners */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  width: 150px;
}

/* Hover effect */
.card-body button:hover {
  background-color: #212934;
  color: white;
  /* darker blue */
  transform: translateY(-2px);
  /* subtle lift */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Active (when clicked) */
.card-body button:active {
  transform: translateY(0);
  box-shadow: none;
}

.banner-section {
  width: 100%;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically if section has height */
  overflow: hidden;
}

.banner-img {
  display: block;
  max-width: 100%; /* Prevents overflow on small screens */
  height: auto;    /* Maintain aspect ratio */
  object-fit: contain; /* Keep full image visible */
  margin: 0 auto;  /* Extra centering fallback */
}


/* Card hover effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  /* enlarges the card */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  /* optional shadow */
  z-index: 2;
  /* ensure hovered card stays above others */
}

iframe[src*="google.com/maps"] {
  width: 100% !important;
  /* full width */
  height: 230px !important;
  /* adjust height as needed */
  border: none;
  /* optional */
  display: block;
  border-radius: 15px;
}

#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #2ecc71;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  display: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.checkout-icon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.checkout-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.checkout-icon .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 12px;
  background: #e74c3c;
  color: #fff;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Default (mobile first) */
.list-group-item {
  width: 343px;          /* full width on small screens */
  font-size: 14px;      /* smaller text for mobile */
  padding: 8px 12px;    /* tighter spacing for mobile */
}

/* Wrap icon + text together and allow wrapping */
#templatemo_nav_top .address-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  white-space: normal !important;
  flex-wrap: wrap !important;
}

#templatemo_nav_top .address {
  display: inline !important;
  max-width: calc(100% - 20px) !important; /* leaves space for icon */
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}


/* Tablet & Desktop screens (≥ 768px) */
@media (min-width: 768px) {
  .list-group-item {
    width: 355px;       /* fixed width for larger screens */
    font-size: 16px;    /* larger text for desktop */
    padding: 12px 20px; /* more breathing room */
  }
}


/* Desktop only */
@media (min-width: 992px) {
  .header-title {
    margin-left: 2.6rem !important;
  }
}

/* Desktop view: push header down below top header */
@media (min-width: 992px) {
  .navbar.shadow.sticky-top {
    top: 50px;
    /* match height of top header */
    height: 100px;
  }
  
#secondary-nav {
  position: sticky;
  top: calc(50px + 100px); /* Sum of the two above heights */
  z-index: 1000;
  background: #212934;
  padding: 0;
}
}


@media (min-width: 576px) {
  .tempaltemo-carousel .h1 {
    font-size: 1em !important;
  }

}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {
    max-width: 450px;
  }

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {
    max-width: 550px;
  }

  #template-mo-zay-hero-carousel .carousel-item {
    min-height: 30rem !important;
  }

  .product-wap .h3,
  .product-wap li,
  .product-wap i,
  .product-wap p {
    font-size: 18px !important;
  }

  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/* Default (mobile first) */
.terms,
.copyright {
  text-align: center;
  /* Both centered in mobile */
}

.footer-column {
  padding-top: 30px;
}

.footer-container {
  padding-bottom: 30px !important;
}


/* Desktop view */
@media (min-width: 768px) {
  .terms {
    text-align: right !important;
  }

  .copyright {
    text-align: left !important;
  }


  .footer-column {
    padding-top: 50px !important;
  }


}

/* Center the LOGO when the navbar is collapsed (below lg) */
@media (max-width: 991.98px) {
  .navbar .container {
    position: relative;
    /* anchor for absolute centering */
  }

  .navbar .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* perfectly center in the bar */
    z-index: 2;
  }

  /* Optional: hide the text brand on mobile so only the image shows */
  .navbar .navbar-brand {
    display: none !important;
  }
}