/* Hero and header adjustments: reduce banner height and ensure image covers container */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.site-header .site-logo,
.site-header .logo img {
  display: block !important;
  width: auto !important;
  max-width: 160px !important;
  height: 2.5rem !important;
  max-height: 2.5rem !important;
  object-fit: contain !important;
  filter: none !important;
}

@media (min-width: 768px) {
  .site-header .site-logo,
  .site-header .logo img {
    max-width: 200px !important;
    height: 3.5rem !important;
    max-height: 3.5rem !important;
  }
}

@media (min-width: 1024px) {
  .site-header .site-logo,
  .site-header .logo img {
    height: 4rem !important;
    max-height: 4rem !important;
  }
}

#mobileMenu {
  will-change: max-height;
}

/* Ensure hero section images fill container and are cropped rather than stretched */
.hero-section .w-full{max-height: 100vh;overflow:hidden}
.hero-section .w-full img.img-fluid{width:100%;height:100%;object-fit: fill;display:block}

/* Slightly smaller on large screens to avoid pushing below the fold */
@media (min-width:1024px){
  .hero-section .w-full{max-height:100vh}
}

/* Mobile: reduce height further */
@media (max-width:768px){
  .hero-section .w-full{max-height:100vh}
}

/* If header becomes fixed elsewhere, ensure main content isn't hidden under it */
.site-header.fixed + main,
.site-header.fixed ~ main{
  padding-top:70px; /* adjust if your header height differs */
}

/* CTA color overrides - replace pink tones with requested blue/gold */
/* Replace Tailwind utility classes (escaped) */
.bg-\[\#ff0b55\] {
  background-color: #141937 !important;
  color: #D8B15B !important;
}
.border-\[\#ff0b55\] {
  border-color: #141937 !important;
}
.text-\[\#ff0b55\] {
  color: #D8B15B !important;
}
.hover\:text-\[\#ff0b55\]:hover {
  color: #D8B15B !important;
}
.hover\:bg-\[\#ff0b55\]:hover {
  background-color: #141937 !important;
}

/* CTA hover animation for pink CTA buttons */
.a-cta, .btn-cta, .cta-invert, a[class*="bg-[#ff0b55]"], button[class*="bg-[#ff0b55]"], a[class*="border-[#ff0b55]"], button[class*="border-[#ff0b55]"] {
  transition: all 0.3s ease;
}

a[class*="bg-[#ff0b55]"], button[class*="bg-[#ff0b55]"], a[class*="border-[#ff0b55]"], button[class*="border-[#ff0b55]"] {
  transition: all 0.3s ease;
}

a[class*="bg-[#ff0b55]"]:hover, a[class*="border-[#ff0b55]"]:hover,
button[class*="bg-[#ff0b55]"]:hover, button[class*="border-[#ff0b55]"]:hover,
.a-cta:hover, .btn-cta:hover {
  background-color: transparent !important;
  border-color: #D8B15B !important;
  color: #141937 !important;
}

/* Inverted navbar Call Now CTA default/hover states */
.cta-invert {
  background-color: transparent !important;
  color: #141937 !important;
  border-color: #D8B15B !important;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease !important;
}

.cta-invert:hover,
.cta-invert:focus {
  background-color: #141937 !important;
  color: #D8B15B !important;
  /* visually remove border on hover while keeping layout stable */
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Light pink backgrounds used for sections/icons are kept light to match the page background */
.bg-\[\#FFEFF1\], .border-\[\#FFEFF1\] {
  background-color: #F7F7F7 !important;
  border-color: #F7F7F7 !important;
  color: #141937 !important;
}
.bg-\[\#FFF6F8\] {
  background-color: #F7F7F7 !important;
  color: #141937 !important;
}

/* Ensure CTA buttons that used text-white now use gold text */
.bg-\[\#ff0b55\] .text-white,
.bg-\[\#FFEFF1\] .text-white {
  color: #D8B15B !important;
}

/* Swiper buttons override if they used pink */
.swiper-button-prev, .swiper-button-next {
  background-color: #D8B15B !important;
  color: #141937 !important;
}

/* Single transformation image: centered and larger */
.transform-section--single .transform-swiper {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.transform-section--single .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.transform-section--single .swiper-slide img {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .transform-section--single .swiper-slide img {
    max-width: 820px;
  }
}

@media (min-width: 1024px) {
  .transform-section--single .swiper-slide img {
    max-width: 900px;
  }
}