/* =========================================================
   Custom Overrides - Maitreyee Hydro Systems
   (kept separate from main.css so template updates are easy)
========================================================= */

/* ---- Our Products submenu: full width, no text break ---- */
.header-main .main-menu ul li .submenu.submenu-products {
  min-width: max-content;
  width: max-content;
  white-space: nowrap;
}

.header-main .main-menu ul li .submenu.submenu-products li a {
  white-space: nowrap;
  padding-right: 32px;
}

/* Nested Steam Bath flyout (Luxury / InstaEasy) */
.header-main .main-menu ul li .submenu.submenu-products li .submenu {
  min-width: 180px;
  width: max-content;
  white-space: nowrap;
}

.header-main .main-menu ul li .submenu.submenu-products li .submenu li a {
  padding-right: 22px;
}

/* =========================================================
   Gallery Sections (Home Page + Gallery Page)
   Bootstrap grid with dark hover overlay + custom lightbox
========================================================= */
#gallery {
  padding-top: 0;
}

#gallery .section-title {
  margin-bottom: 40px;
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: rgba(30, 30, 30, 0.08) 0px 4px 16px 0px;
  transition: box-shadow 0.35s ease-in-out, transform 0.35s ease-in-out;
}

.img-wrapper:hover {
  box-shadow: rgba(30, 30, 30, 0.18) 0px 12px 28px 0px;
  transform: translateY(-4px);
}

.img-wrapper img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease-in-out;
}

.img-wrapper:hover img {
  transform: scale(1.08);
}

.img-overlay {
  background: rgba(15, 20, 15, 0.55);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s ease-in-out;
}

.img-overlay i {
  color: #fff;
  font-size: 2.2em;
  transform: scale(0.6);
  transition: transform 0.4s ease-in-out;
}

.img-wrapper:hover .img-overlay i {
  transform: scale(1);
}

/* Lightbox overlay (shared styling for both gallery-home.js and gallery-page.js) */
.gallery-lightbox-overlay {
  background: rgba(10, 12, 10, 0.92);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery-lightbox-overlay img {
  margin: 0;
  width: 86%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  padding: 0;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 40px 0px;
}

@media screen and (min-width: 768px) {
  .gallery-lightbox-overlay img {
    width: 64%;
  }
}

@media screen and (min-width: 1200px) {
  .gallery-lightbox-overlay img {
    width: 52%;
  }
}

.gallery-lightbox-nav,
.gallery-lightbox-exit {
  color: #fff;
  font-size: 1.4em;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-exit:hover {
  background: var(--theme);
}

.gallery-lightbox-nav:first-child {
  margin-right: 14px;
}

.gallery-lightbox-nav:nth-child(3) {
  margin-left: 14px;
}

@media screen and (min-width: 768px) {
  .gallery-lightbox-nav {
    width: 56px;
    height: 56px;
    font-size: 1.7em;
  }
}

.gallery-lightbox-exit {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.2em;
  z-index: 2;
}

@media (max-width: 991px) {
  .gallery-lightbox-nav:first-child {
    position: absolute;
    left: 10px;
    margin-right: 0;
  }

  .gallery-lightbox-nav:nth-child(3) {
    position: absolute;
    right: 10px;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .img-wrapper img {
    height: 200px;
  }

  /* touch devices don't hover: show the overlay icon softly at all times */
  .img-overlay {
    opacity: 1;
    background: rgba(15, 20, 15, 0.18);
  }

  .img-overlay i {
    transform: scale(0.75);
    font-size: 1.8em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }
}

/* =========================================================
   Uniform, responsive product card / image sizing
   Every product photo (hero images + portfolio cards) keeps
   the same width:height ratio so cards line up evenly,
   regardless of the original photo's dimensions.
========================================================= */

/* Product detail page hero image (Sauna, Hydro Pneumatic, Steam Bath, etc.) */
.service-details-content .service-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
}

.service-details-content .service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}

/* Homepage / About "Our Projects" portfolio cards */
.project-thumb-box-items-style-1 {
  aspect-ratio: 4 / 3;
  height: auto;
}

.project-thumb-box-items-style-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 991px) {
  .project-thumb-box-items-style-1 {
    aspect-ratio: unset;
    height: 320px;
  }
}

@media (max-width: 575px) {
  .project-thumb-box-items-style-1 {
    height: 240px;
  }
}

/* =========================================================
   Gallery Page - Per-Category Carousels
   Each product category gets its own Swiper carousel with
   arrow navigation + pagination dots, using the same
   .img-wrapper / .img-overlay card styling as before.
========================================================= */
.gallery-cat-block {
  margin-bottom: 55px;
}

.gallery-cat-block:last-child {
  margin-bottom: 0;
}

.gallery-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.gallery-cat-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--header);
  position: relative;
  padding-left: 18px;
}

.gallery-cat-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--theme);
}

.gallery-cat-arrows {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.gallery-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--header);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.gallery-arrow:hover {
  background: var(--theme);
  border-color: var(--theme);
  color: #fff;
}

.gallery-swiper {
  padding-bottom: 6px;
  overflow: hidden;
}

.gallery-swiper .swiper-slide {
  height: auto;
}

.gallery-swiper .img-wrapper {
  margin-top: 15px;
  margin-bottom: 0;
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.gallery-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  opacity: 1;
  transition: background 0.3s ease-in-out, width 0.3s ease-in-out;
}

.gallery-dots .swiper-pagination-bullet-active {
  background: var(--theme);
  width: 22px;
  border-radius: 5px;
}

@media (max-width: 575px) {
  .gallery-cat-head {
    flex-wrap: wrap;
  }

  .gallery-cat-title {
    font-size: 20px;
  }

  .gallery-arrow {
    width: 36px;
    height: 36px;
  }
}

/* =========================================================
   Testimonial Slider - Left/Right Arrows
   (added alongside the existing pagination dots)
========================================================= */
.testimonial-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}

.testimonial-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--header);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.testimonial-arrow:hover {
  background: var(--theme);
  border-color: var(--theme);
  color: #fff;
}

.testimonial-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 575px) {
  .testimonial-arrow {
    width: 36px;
    height: 36px;
  }
}

/* =========================================================
   Sidebar "Start Your Project" image box (product pages)
   Real product photos vary in aspect ratio (some portrait,
   some landscape) - force a consistent box height so the
   layout and the overlay content-box position stay uniform.
========================================================= */
.main-sideber .sideber-image {
  height: 420px;
  overflow: hidden;
  border-radius: 12px;
}

.main-sideber .sideber-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}

@media (max-width: 575px) {
  .main-sideber .sideber-image {
    height: 320px;
  }
}

/* =========================================================
   "Our Product Range" cards - equal height
   Different description lengths were making cards different
   heights with the "View Details" button landing at different
   vertical positions. Stretch every card to the row's tallest
   and pin the button to the bottom of each card.
========================================================= */
.service-box-items-style-2 {
  height: calc(100% - 30px);
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.service-box-items-style-2 .top-box-items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.service-box-items-style-2 .top-box-items .icon {
  flex-shrink: 0;
}

.service-box-items-style-2 .top-box-items .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.service-box-items-style-2 .top-box-items .content p {
  flex: 1 1 auto;
}

.service-box-items-style-2 .link-btns {
  margin-top: auto;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .service-box-items-style-2 .top-box-items {
    padding: 35px 22px;
  }
}

/* ===== Product Gallery (main image + thumbnail slider) ===== */
.product-gallery {
  margin-bottom: 25px;
  max-width: 720px;
}

.product-gallery-main {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}

.product-gallery-main {
  background: var(--bg-2);
}

.product-gallery-main .swiper-slide img {
  width: 100%;
  height: 420px;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: var(--bg-2);
}

.product-gallery-main .swiper-button-next,
.product-gallery-main .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.product-gallery-main .swiper-button-next:after,
.product-gallery-main .swiper-button-prev:after {
  font-size: 15px;
  font-weight: 700;
}

.product-gallery-thumbs {
  padding: 4px 2px;
}

.product-gallery-thumbs .swiper-slide {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.product-gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.product-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--theme);
}

@media (max-width: 575px) {
  .product-gallery-main .swiper-slide img {
    height: 260px;
  }

  .product-gallery-thumbs .swiper-slide img {
    height: 65px;
  }
}