:root {
  --theme-color: #0e3f89;
  --theme-color-contrast: #0a2f66;
}

@theme {
  --color-primary: var(--theme-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #ffffff;
    --foreground: #000000;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Poppins", sans-serif !important;
  font-size: 18px;
}

.carousel p {
  color: #fff;
}

.cta-btn {
  background-color: var(--theme-color);
  color: #ffffff;
  border-radius: 16px;
  padding: 7px 16px;
  /* horizontal padding helps look nicer */
  display: inline-block;
  /* enable transform on inline elements */
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* hint for smoother animation */
}

.cta-btn:hover,
.cta-btn:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.expert-section {
  background-color: #f0f8ff;
}

.expert-section img {
  height: 250px;
}

img {
  position: relative !important;
}

.top-header {
  background-color: var(--theme-color);

}

.top-header a {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

.data-section {
  min-height: calc(80vh);
}

.select-category {
  flex-direction: row-reverse;
  width: 100%;
  font-size: 16px;
  display: flex;
}

.main-menu li a {
  padding: 15px;
}

.main-menu li {
  list-style: none;
}

.main-menu li a:hover {
  background-color: var(--theme-color);
  color: #ffffff;
}

.main-menu .sub-menu {
  position: absolute;
  left: 70%;
}

ol,
li {
  list-style: disc;
}

.product h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;

}

.product span {
  font-size: 14px;
  color: var(--theme-color);
  display: block;
}

.product-box:hover span,
.product-box:focus span {
  color: #ffffff;
}

.related-property {
  height: calc(100vh);
  /* Full screen height */
  position: sticky;
  /* Stick on scroll */
  top: 67px;
  /* Stick to top */
  background: #ffffff;
  /* Optional: avoid transparent issues */
  padding: 0 10px;
  /* Optional */
}

.related-scroll {
  scrollbar-width: 5px;
  overflow-y: auto;
  height: calc(100vh - 280px);
}

/* On hover → show blue scrollbar */
.related-scroll::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.related-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
.related-scroll::-webkit-scrollbar-thumb {
  background: var(--theme-color);
  border-radius: 10px;
}

.related-property h2,
.related-blog h2 {
  background: var(--theme-color);
  color: #fff;
  padding: 10px;
  margin: 0;
  flex-shrink: 0;
  /* prevent shrinking */
}

.related-blog li {
  border-bottom: #0a0a0a 1px solid;
  overflow: hidden;
  font-size: 16px;
  margin: 0;
}

.related-blog li a {
  display: block;
  padding: 10px 5px;
  cursor: pointer;
}

.related-blog li button {
  transition: all 0.3s ease;
  padding: 8px 10px;
  border-radius: 8px;
}

.related-blog li button:hover {
  background: linear-gradient(135deg, var(--theme-color), var(--theme-color));
  color: white;
  box-shadow: 0 4px 12px rgba(12, 140, 233, 0.3);
  transform: translateY(-2px);
}

/* Disable default swiper bullet styling so thumbnails show correctly */
.product-slider .swiper-pagination-bullet {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  opacity: 1 !important;
  margin: 0 4px !important;
  border-radius: 0 !important;
}

.product-slider .swiper-pagination-bullet img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: 0.3s;
}

.product-slider .swiper-pagination-bullet-active img {
  border-color: #2563eb;
  /* blue-600 */
  transform: scale(1.05);
}

.current-product {
  font-weight: bold;
  color: var(--theme-color);
  /* example */
  background: #f0f8ff;
  border-radius: 4px;
  padding: 6px;
}

.product-slider .swiper-wrapper {
  padding: 0 0 85px 0;
}

/* Remove bullets for all li inside header-menu */
.header-menu li {
  list-style: none;
}

/* Base link style (main + submenu) */
.header-menu a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

/* Underline style */
.header-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--theme-color);
  transition: width 0.3s ease;
}

/* Hover + Active underline */
.header-menu a:hover::after,
.header-menu a.active::after {
  width: 100%;
}

/* Submenu smaller underline */
.header-menu .submenu-link::after {
  height: 1px;
  bottom: -1px;
}

.product-zoom-box {
  width: 350px;
  height: 350px;
  position: absolute;
  z-index: 99999;
  right: -350px;
}

.product-slide {
  width: 100% !important;
}

@keyframes fadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeZoom {
  animation: fadeZoom 0.35s ease-out;
}

.product-details-page h1 {
  font-size: 20px;
}

.related-product,
.product-details-page {
  margin-top: 20px;
}

@media (max-width: 767px) {

  .related-product,
  .product-details-page {
    margin-top: 10px;
    /* change for mobile */
  }

  .property-slider .swiper-pagination-bullet img {
    border-color: var(--theme-color);
    width: 30px;
    height: 30px;
  }
}

footer {
  mask:
    linear-gradient(180deg, #0000 10px, #000 0),
    radial-gradient(10px, #000 calc(100% - 1px), #0000) top/18.5px 20px
}

footer ol,
li {
  list-style: none;
}

.property-slider .swiper-wrapper {
  padding: 0 0 67px 0;
}

.property-slider .swiper-pagination-bullet {
  opacity: 1 !important;
  background: 0 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 4px !important;
}

.property-slider .swiper-pagination-bullet img {
  border-color: var(--theme-color);
}

.property-slider .swiper-pagination-bullet-active img {
  border: var(--theme-color) 3px solid;
  transform: scale(1.05);
}

.property-slider-img {
  width: 100%;
}

.property-slider .swiper {
  position: static;
}

.dynamic_form input,
select {
  color: #000;
}

/* ---------------------------------------------------- */
/* ACCESSIBILITY & COLOR CONTRAST FIXES */
/* ---------------------------------------------------- */

/* 1. Expand Swiper pagination bullet hit area to 36x36px for touch targets, keeping the visual dot at 8px */
.swiper-pagination-bullet:not(.product-slider *):not(.property-slider *) {
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.swiper-pagination-bullet:not(.product-slider *):not(.property-slider *)::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
  opacity: 0.3 !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active:not(.product-slider *):not(.property-slider *)::before {
  background-color: #133E1A !important;
  /* Brand forest green */
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

/* 2. Improve contrast of gray texts on light backgrounds (restricted to data-section so it doesn't affect footer) */
.data-section .text-gray-400 {
  color: #4b5563 !important;
  /* Tailwind gray-600, contrast 6.9:1 on white */
}

.data-section .text-gray-500 {
  color: #374151 !important;
  /* Tailwind gray-700, contrast 9.0:1 on white */
}

/* 3. Override light green text headers to dark forest green for color contrast */
h1.text-\[\#40B93C\],
h2.text-\[\#40B93C\],
h3.text-\[\#40B93C\],
h4.text-\[\#40B93C\],
.product span {
  color: var(--theme-color-contrast) !important;
  /* Brand forest green, contrast 11:1 on white */
}

/* 4. Fix buttons with light green background and white text for color contrast */
.bg-\[\#40B93C\]:not(.text-black):not(.text-gray-800) {
  background-color: var(--theme-color-contrast) !important;
  /* Brand forest green */
}

/* Ensure hover transitions are smooth and high contrast */
.hover\:bg-\[\#40B93C\]:hover {
  background-color: var(--theme-color-contrast) !important;
}

.hover\:text-\[\#40B93C\]:hover {
  color: var(--theme-color-contrast) !important;
}

/* Tailwind Arbitrary Value Utility Overrides for Dynamic Theme Color */
.text-\[\#40B93C\] {
  color: var(--theme-color) !important;
}

.bg-\[\#40B93C\] {
  background-color: var(--theme-color) !important;
}

.border-\[\#40B93C\] {
  border-color: var(--theme-color) !important;
}

.from-\[\#40B93C\] {
  --tw-gradient-from: var(--theme-color) !important;
  --tw-gradient-stops: var(--theme-color), var(--tw-gradient-to, rgba(64, 185, 60, 0)) !important;
}

.via-\[\#40B93C\] {
  --tw-gradient-via: var(--theme-color) !important;
  --tw-gradient-stops: var(--tw-gradient-from, #0000), var(--theme-color), var(--tw-gradient-to, rgba(64, 185, 60, 0)) !important;
}

.to-\[\#40B93C\] {
  --tw-gradient-to: var(--theme-color) !important;
}

.hover\:text-\[\#40B93C\]:hover {
  color: var(--theme-color) !important;
}

.hover\:bg-\[\#40B93C\]:hover {
  background-color: var(--theme-color) !important;
}

.hover\:border-\[\#40B93C\]:hover {
  border-color: var(--theme-color) !important;
}

.bg-\[\#40B93C\]\/10 {
  background-color: color-mix(in srgb, var(--theme-color) 10%, transparent) !important;
}

.bg-\[\#40B93C\]\/20 {
  background-color: color-mix(in srgb, var(--theme-color) 20%, transparent) !important;
}

.shadow-\[0_0_15px_rgba\(64\,185\,60\,0\.3\)\] {
  box-shadow: 0 0 15px color-mix(in srgb, var(--theme-color) 30%, transparent) !important;
}

.shadow-\[0_0_20px_rgba\(64\,185\,60\,0\.4\)\] {
  box-shadow: 0 0 20px color-mix(in srgb, var(--theme-color) 40%, transparent) !important;
}

.shadow-\[12px_12px_0px_0px_\#40B93C\] {
  box-shadow: 12px 12px 0px 0px var(--theme-color) !important;
}

.shadow-\[12px_12px_0px_0px_rgba\(64\,185\,60\,1\)\] {
  box-shadow: 12px 12px 0px 0px var(--theme-color) !important;
}

/* 5. Fix "What We Offer" card-info overlay background color contrast against white text */
.what-we-offer .card-info {
  background: #fe5151cc;
  border-radius: 20px;
  padding: 10px;
  position: relative;
  top: -68px;
  color: #ffffff !important;
}