/* ========== Base tweaks over Bootstrap ========== */
:root {
  --iv-radius: 12px;
  --hero-h: calc(68vh);
}

.content p { margin-bottom: 1rem; }
.content img { max-width: 100%; height: auto; border-radius: var(--iv-radius); }
.content h1, .content h2, .content h3 { scroll-margin-top: 5rem; }

/* Header */
.navbar-brand { font-size: 1.15rem; }

/* Cards */
.card { border-radius: var(--iv-radius); }
.card .object-cover { object-fit: cover; height: 220px; }

/* Service card */
.service-card .card-title { line-height: 1.25; }

/* Hero */
.hero-block { min-height: 360px; }
.hero-block .hero-img { filter: brightness(0.9); }
.hero-block .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.4) 55%, rgba(255,255,255,0));
}

/* Footer */
footer { background: #fafafa; }

/* Utilities */
.text-body-secondary { color: #6c757d !important; }

/* Make lists in richtext nicer */
.content ul, .content ol { padding-left: 1.25rem; }

/* Settings preview area */
.bg-light-subtle { background-color: #f6f7f9; }



/* ========== Glass Effect ========== */
.glass-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0px 0px rgba(255, 255, 255, 0);
  position: relative;
}


.logo {
  height: 60px;
}

/* ========== End Glass Effect ========== */


.nova-color {
  color: #00dfff !important;
}
.nova-color-bg {
  background-color: #00dfff !important;
}

.nova-gray {
  color: #2D2D2D !important;
}

.nova-gray-bg {
  background-color: #2D2D2D !important;
}

.white {
  color: #ffffff !important;
}

.white-bg {
  background-color: #ffffff !important;
}

.black {
  color: #000000 !important;
}

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



/* ========== Fonts ========== */

.marcellus-regular {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}
/* ========== End Fonts ========== */


/* ========== Default Classes ========== */

* {
  outline: none !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Lato", sans-serif;
  color: #000000;
  font-size: 0.85rem;
}

body {
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  font-family: "Lato", sans-serif;
  color: #000000;
  font-size: 0.85rem;
  background: #f6f7f7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.nova-menu a {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-book {
  font-family: "Marcellus", serif;
  background-color: #00dfff;
  font-size: 0.8rem;
  color: #000;
}

.btn-book:hover {
  background-color: #2D2D2D;
  color: #00dfff;
}


.icon-bg {
  background-color: #2D2D2D;
  color: #00dfff;
  border-radius: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 20px;
  margin: auto;
}
.icon-bg:hover {
  background-color: #00dfff;
  color: #2D2D2D;
  border-radius: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 20px;
  margin: auto;
}


.btn-glass {
  color: #ffffff;
  font-family: "Marcellus", serif;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 40px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0px 0px rgba(255, 255, 255, 0);
}

.btn-glass:hover {
  color: #ffffff;
  font-family: "Marcellus", serif;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0px 0px rgba(255, 255, 255, 0);
}

.btn-nova-glass {
  color: #ffffff;
  background: #0dcaf05c;
  font-family: "Marcellus", serif;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border-radius: 40px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0px 0px rgba(255, 255, 255, 0);
}

.btn-nova-glass:hover {
  color: #ffffff;
  background: #0dcaf0c3;
  font-family: "Marcellus", serif;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0px 0px rgba(255, 255, 255, 0);
}

.btn-glass-icon-bg {
  background-color: #2d2d2d07;
  color: #00dfff;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  border-radius: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 20px;
  margin: auto;
}
.btn-glass-icon-bg:hover {
  background-color: #00dfff;
  color: #2D2D2D;
  border-radius: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 20px;
  margin: auto;
}





/* Контейнер мегаменю: центр под навбаром, не шире контейнера/экрана */
/* === Десктоп/планшет: центрированная панель, 3 колонки === */
.navbar .dropdown-mega {
  left: 50%;
  transform: translateX(-50%);
  width: clamp(720px, 70vw, 1100px);
  max-width: calc(100vw - 2rem);
  margin-top: .5rem;
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.dropdown-mega .row { --bs-gutter-x: .75rem; --bs-gutter-y: .5rem; }

.mega-link {
  padding: .75rem .9rem;
  gap: .65rem;
  display: flex; align-items: start;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mega-link:hover { background: rgba(0,0,0,.04); box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }

.mega-icon { width: 44px; height: 44px; background: #f5f7fa; color: #000; font-size: 18px; border-radius: 10px; display:flex; align-items:center; justify-content:center; }
.mega-title { color:#111827; line-height:1.15; }
.mega-text small { color:#6b7280!important; font-size:.65rem; line-height:1.2; font-family: "Lato", sans-serif; font-weight: 400; font-style: normal; }

/* === Мобильные: обычный dropdown, 1 колонка, без центрирования и без фиксированной ширины === */
@media (max-width: 991.98px) {
  /* Позиционируем как обычное меню под пунктом */
  .navbar .dropdown-mega {
    position: static;      /* главное: выходим из абсолютного позиционирования */
    left: auto; right: auto; transform: none;
    width: 100%; max-width: none;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Внутри — «плоский» список, без лишних отступов */
  .dropdown-mega .container { padding-left: 1rem; padding-right: 1rem; }
  .dropdown-mega .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }

  /* Всегда 1 колонка */
  .dropdown-mega .col-12 { width: 100%; }
  .dropdown-mega .col-md-6, .dropdown-mega .col-lg-4 { flex: 0 0 100%; max-width: 100%; }

  /* Компактнее элементы + нижняя граница как в списке */
  .mega-link { padding: .9rem 0; border-bottom: 1px solid rgba(0,0,0,.06); border-radius: 0; }
  .mega-link:last-child { border-bottom: 0; }

  /* Иконку оставим, но без «карточного» фона */
  .mega-icon { width: 36px; height: 36px; background: transparent; font-size: 18px; border-radius: 8px; }
}







  /* ограничиваем контейнер */
  .hero-carousel-wrap {
    position: relative;
    height: 70vh;
    width: 100%;
    z-index: 1000;
    overflow: hidden; /* обрежет лишнее */
    margin-top: 0;
    padding-top: 0;
  }
  
  /* Removed duplicate body/html styles - use base styles instead */
  /* прокидываем высоту внутрь */
  .hero-carousel-wrap .carousel,
  .hero-carousel-wrap .carousel-inner,
  .hero-carousel-wrap .carousel-item {
    height: 100%;
  }

  /* заставляем изображение вписаться */
  .hero-carousel-wrap .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;   /* заполняет 70vh без искажений, обрежет края */
    object-position: top;
  }

  .hero-category {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: "Marcellus", serif;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
  }

  .hero-title-1 {
    color: #FFF;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Marcellus", serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 98.438%;
    text-transform: capitalize;
  }

  .hero-title-2 {
    color: #00DFFF;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Marcellus", serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 98.438%;
    text-transform: capitalize;
  }

  .carousel-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 10%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--bs-carousel-caption-color);
    text-align: left;
  }

  .hero-description {
    color: #FFF;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    max-width: 600px;
  }



/* Навбар: плавное появление фона и тени при скролле вниз */
/* фон по умолчанию — прозрачный */
.navbar.fixed-top {
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* когда ушли ниже карусели */
.navbar.fixed-top.is-solid {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 255, 255, 0.157), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  color: #000000 !important;
  transition: all 0.3s ease;
}

.nova-menu.is-solid a {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #000000;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-media-icons {
  transition: all 0.3s ease;
  color: #ffffffff;
  font-size: 1.2rem;
}

.social-media-icons.is-solid {
  transition: all 0.3s ease;
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
}

.social-media-icons:hover {
  transition: all 0.3s ease;
  color: #00ddff;
  font-size: 1.2rem;
}

.dark-green {
  color: #132D2F !important;
}

.dark-green-bg {
  background-color: #132D2F !important;
}

.light-green {
  color: #33A9B1 !important;
}

.light-green-bg {
  background-color: #33A9B1 !important;
}

.title-medium {
  font-family: "Marcellus", serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  text-transform: capitalize; 
}

.text-body {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  line-height: normal;
}

.collage {
  border-radius: var(--iv-radius);
  background-color: #000000;
}

/* ========== Additional styles for new sections ========== */

/* About Us Section */
.about-us-section {
  background-color: #ffffff;
}

/* Categories Section */
.categories-section {
  background-color: #132d2f;
  position: relative;
}

.categories-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/placeholder-categories-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 1;
}

/* Category Text Items - Hover Effect */
.category-text-item {
  font-size: clamp(16px, 2.2vw, 28px);
  line-height: clamp(24px, 3.5vw, 50px);
  color: #f1f0f0;
  cursor: pointer;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  font-family: "Marcellus", serif;
  text-transform: capitalize;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  display: inline-block !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Categories text row - allow wrapping on all screen sizes */
.categories-text-row {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0 1.5rem;
}

/* Remove fixed widths - let items wrap naturally based on content */
.category-text-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* On desktop: keep horizontal layout with wrapping */
@media (min-width: 768px) {
  .categories-text-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center;
    gap: 0 2rem;
  }
}

/* Ensure parent containers don't clip text */
.category-tabs-container,
.category-tabs-container .row,
.category-tabs-container .col-12 {
  overflow: visible !important;
}

.category-text-item:hover {
  color: #00dfff !important;
}

.category-text-item.active {
  color: #00dfff;
  text-decoration: underline;
}

/* Category Cards */
.category-card {
  border-radius: 40px;
  overflow: visible;
  position: relative;
}

.category-card-wrapper {
  overflow: visible;
  padding-top: 5px; /* Add top padding for hover effect */
  position: relative;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* Add z-index and shadow to cards for layering effect */
.category-card-wrapper:nth-child(1) {
  z-index: 1;
}

.category-card-wrapper:nth-child(2) {
  z-index: 2;
}

.category-card-wrapper:nth-child(3) {
  z-index: 3;
}

.category-card-wrapper:nth-child(4) {
  z-index: 4;
}

.category-card-wrapper:nth-child(5) {
  z-index: 5;
}

.category-card-wrapper:nth-child(6) {
  z-index: 6;
}

.category-card-wrapper:nth-child(n+7) {
  z-index: 7;
}

/* Add shadow to cards for depth effect */
.category-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.category-cards-row .container-fluid {
  overflow: visible;
  width: 100%;
  max-width: 100%;
}

/* Ensure parent containers allow horizontal scroll */
#categoriesCarousel,
#categoriesCarousel .carousel-inner,
#categoriesCarousel .carousel-item {
  overflow-x: visible !important;
  overflow-y: visible !important;
  width: 100%;
  max-width: 100%;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  background: linear-gradient(135deg, 
    rgba(40, 61, 63, 0.1) 0%, 
    rgba(31, 61, 63, 0.1) 50%, 
    rgba(40, 61, 63, 0.1) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Card overlay - black transparent for inactive, blue on hover */
.category-card-overlay {
  background: rgba(0, 0, 0, 0.8); /* 80% black */
  z-index: 0;
}

.category-card:hover .category-card-overlay,
.category-card.category-card-active .category-card-overlay {
  background: rgba(0, 221, 255, 0.73); /* #00DFFF with 73% opacity */
}

/* Categories Carousel */
#categoriesCarousel {
  width: 100%;
}

#categoriesCarousel .carousel-inner {
  width: 100%;
}

#categoriesCarousel .carousel-item {
  width: 100%;
}

/* Category Cards - Responsive */
.category-card-wrapper {
  margin-bottom: 1rem;
}

.category-card {
}

/* Card Active - hover effect */
.category-card:hover,
.category-card.category-card-active {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Change text colors on hover - active state should be #132D2F */
.category-card:hover .card-body h3,
.category-card:hover .card-body p,
.category-card:hover .card-body span,
.category-card:hover .card-body li,
.category-card:hover .category-service-text {
  color: #132d2f !important;
}

/* Category service text - reduce font size on lg and xl */
.category-service-text {
  font-size: clamp(14px, 1.5vw, 18px) !important;
  line-height: clamp(20px, 2vw, 30px) !important;
}

/* lg: 992px - 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .category-service-text {
    font-size: clamp(12px, 1.2vw, 16px) !important;
    line-height: clamp(18px, 1.8vw, 26px) !important;
  }
}

/* xl: 1200px - 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .category-service-text {
    font-size: clamp(12px, 1.2vw, 16px) !important;
    line-height: clamp(18px, 1.8vw, 26px) !important;
  }
}

/* Service check icons - passive state: circle #00DFFF, checkmark white */
.category-service-check .service-check-circle {
  fill: #00dfff;
}

.category-service-check .service-check-mark {
  stroke: white;
}

/* Service check icons - active state (hover): circle #132D2F, checkmark #00DFFF */
.category-card:hover .category-service-check .service-check-circle {
  fill: #132d2f !important;
}

.category-card:hover .category-service-check .service-check-mark {
  stroke: #00dfff !important;
}

/* Book Now button - always visible */
/* Passive state: border #F1F0F0, text white, circle #00DFFF, arrow #132D2F */
.category-card-btn {
  opacity: 1 !important;
  display: flex !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 10 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  min-height: 48px !important;
  align-items: center !important;
  border-color: #f1f0f0 !important;
  background-color: transparent !important;
  color: #f1f0f0 !important;
}

.category-card-btn .btn-arrow-circle {
  background-color: #00dfff !important;
}

.category-card-btn .btn-arrow {
  stroke: #132d2f !important;
}

/* Active state (hover): border #132D2F, text #132D2F, circle #132D2F, arrow #00DFFF */
.category-card:hover .category-card-btn,
.category-card-btn:hover {
  border-color: #132d2f !important;
  color: #132d2f !important;
}

.category-card:hover .category-card-btn .btn-arrow-circle,
.category-card-btn:hover .btn-arrow-circle {
  background-color: #132d2f !important;
}

.category-card:hover .category-card-btn .btn-arrow,
.category-card-btn:hover .btn-arrow {
  stroke: #00dfff !important;
}

.category-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-bottom: 1rem !important;
}

/* Align service list to left */
.category-service-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-grow: 1 !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.category-card {
  /* Icon removed, no special padding needed */
}

/* Toggle buttons styling */
.toggle-btn {
  transition: all 0.3s ease;
}

.toggle-btn.active {
  color: #132d2f !important;
  background-color: #00dfff !important;
}

.toggle-btn:not(.active) {
  color: #f1f0f0 !important;
  background-color: transparent !important;
}

/* Hide category tabs in membership mode */
.category-tabs-container.membership-hidden {
  display: none !important;
}

/* Carousel Indicators - Dots */
.carousel-indicators-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Carousel indicator dots - checkmark style */
.carousel-indicator-dot {
  width: 22px;
  height: 22px;
  border: none;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Passive state: circle #00DFFF, checkmark white */
.carousel-indicator-dot svg {
  width: 22px;
  height: 22px;
  display: block;
}

.carousel-indicator-dot .indicator-circle {
  fill: #00dfff;
  transition: fill 0.3s ease;
}

.carousel-indicator-dot .indicator-checkmark {
  stroke: white !important;
  fill: none;
  transition: stroke 0.3s ease;
}

/* Active state: circle #132D2F, checkmark #00DFFF */
.carousel-indicator-dot.active .indicator-circle,
.carousel-indicator-dot:hover .indicator-circle {
  fill: #132d2f !important;
}

.carousel-indicator-dot.active .indicator-checkmark,
.carousel-indicator-dot:hover .indicator-checkmark {
  stroke: #00dfff !important;
}

#categoriesCarousel .carousel-control-prev,
#categoriesCarousel .carousel-control-next {
  display: none; /* Hide default controls, we use category tabs instead */
}

/* Responsive card columns - Bootstrap breakpoints: xs <576, sm >=576, md >=768, lg >=992, xl >=1200, xxl >=1400 */

/* Make cards row scrollable horizontally on all screens */
.category-cards-row {
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
  padding: 5px 0 0 1.5rem; /* Show left card slightly protruding, add top padding for hover */
  margin: 0;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Allow flex items to shrink */
}

/* First card wrapper should align to start */
.category-card-wrapper:first-child {
  scroll-snap-align: start;
}

.category-cards-row::-webkit-scrollbar {
  display: none;
}

.category-card-wrapper {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* xs: <576px - 1 card per row */
@media (max-width: 575.98px) {
  .category-card-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
    width: 100%;
  }
  
  .container-fluid.px-4.px-md-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* sm: 576px - 767.98px - 3 cards per row */
@media (min-width: 576px) and (max-width: 767.98px) {
  .category-card-wrapper {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* md: 768px - 991.98px - 3 cards per row */
@media (min-width: 768px) and (max-width: 991.98px) {
  .category-card-wrapper {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  /* Keep left padding on medium screens */
  .category-cards-row {
    padding-left: 1.5rem;
    padding-right: 0;
  }
}

/* lg: 992px - 1199.98px - 3 cards per row */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .category-card-wrapper {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  /* Keep left padding on large screens */
  .category-cards-row {
    padding-left: 1.5rem;
    padding-right: 0;
  }
}

/* xl: 1200px - 1399.98px - 4 cards per row (col-3 = 25%) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .category-card-wrapper {
    flex: 0 0 25%; /* 4 cards per row (col-3) */
    max-width: 25%;
  }
  
  /* Keep left padding on xl screens */
  .category-cards-row {
    padding-left: 1.5rem;
    padding-right: 0;
  }
}

/* xxl: >=1400px - 4 cards per row (col-3 = 25%) */
@media (min-width: 1400px) {
  .category-card-wrapper {
    flex: 0 0 25%; /* 4 cards per row (col-3) */
    max-width: 25%;
  }
  
  /* Keep left padding on xxl screens */
  .category-cards-row {
    padding-left: 1.5rem;
    padding-right: 0;
  }
}

/* Mobile First Responsive */
@media (max-width: 575.98px) {
  /* Keep dark background on mobile - same as desktop */
  .categories-section {
    background-color: #132d2f !important;
    background-image: url('assets/placeholder-categories-bg.jpg') !important;
    background-size: cover;
    background-position: center;
  }
  
  .categories-section::before {
    display: block;
    opacity: 0.1;
  }
  
  .category-title {
    color: #f1f0f0 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: clamp(40px, 5vw, 60px) !important;
  }
  
  .category-text-item {
    color: #f1f0f0 !important;
    font-size: clamp(16px, 2.2vw, 28px) !important;
    line-height: clamp(24px, 3.5vw, 50px) !important;
  }
  
  .category-text-item.active {
    color: #00dfff !important;
  }
  
  .categories-text-row {
    gap: 0.5rem !important;
  }
  
  /* Keep card design same as desktop - dark background, light text */
  .category-card {
    height: auto !important;
    min-height: 500px;
    background-color: transparent !important;
  }
  
  .category-card img {
    display: block !important;
  }
  
  .category-card-overlay {
    display: block !important;
  }
  
  .category-card .card-body h3,
  .category-card .card-body p,
  .category-card .card-body span,
  .category-card .card-body li {
    color: #f1f0f0 !important;
  }
  
  .category-card-btn {
    border-color: #f1f0f0 !important;
    color: #f1f0f0 !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  
  #categoriesCarousel .carousel-control-prev {
    left: 10px;
  }
  
  #categoriesCarousel .carousel-control-next {
    right: 10px;
  }
}

/* sm: 576px - 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .category-text-item {
    font-size: clamp(16px, 2.2vw, 26px);
    line-height: clamp(24px, 3.5vw, 48px);
  }
}

/* md: 768px - 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .category-text-item {
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: clamp(28px, 4vw, 50px);
  }
}

/* lg: 992px - 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .category-text-item {
    font-size: clamp(20px, 2.8vw, 28px);
    line-height: clamp(32px, 4.5vw, 50px);
  }
}

/* xl: 1200px - 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .category-text-item {
    font-size: clamp(22px, 3vw, 28px);
    line-height: clamp(40px, 5vw, 50px);
  }
}

/* xxl: >=1400px */
@media (min-width: 1400px) {
  .category-text-item {
    font-size: clamp(24px, 3.2vw, 28px);
    line-height: clamp(45px, 5.5vw, 50px);
  }
}

/* Pricing Cards Section */
.pricing-cards-section .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-cards-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Services Section */
.service-item {
  transition: all 0.3s ease;
}

.service-item:hover {
  transform: translateX(5px);
}

/* Schedule Visit Section */
.schedule-visit-section input::placeholder,
.schedule-visit-section textarea::placeholder {
  color: #4d4d4d;
  opacity: 0.7;
}

/* Footer Section */
.footer-section {
  background-color: #1f3d3f;
  position: relative;
}

.footer-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/placeholder-footer-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 1;
}

.footer-section .social-icon {
  transition: all 0.3s ease;
}

.footer-section .social-icon:hover {
  color: #00dfff !important;
  transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .about-us-section .position-absolute {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 2rem;
  }
  
  .pricing-cards-section .card {
    margin-bottom: 2rem;
  }
  
  .schedule-visit-section .position-absolute {
    position: relative !important;
    margin-top: 0 !important;
  }
}