/* Prevent horizontal scrolling at the root */
html {
  overflow-x: hidden;
  width: 100vw;
  margin: 0;
  padding: 0;
  scroll-padding-top: 80px; /* Adjust as needed for your header height */
}

/* Allow vertical scrolling for sticky header */
body {
  overflow-y: auto;
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* Prevent any element from exceeding viewport width, except where needed */
* {
  max-width: 100vw; /* No element can exceed viewport width */
  box-sizing: border-box; /* Include padding/borders in width calculations */
}

/* Ensure containers and sections stay within bounds */
.container {
  max-width: 100%; /* Override Tailwind's container if needed */
  padding-left: 1rem;
  padding-right: 1rem;
}

section {
  max-width: 100vw;
  overflow-x: hidden; /* Extra safety for section-level overflow */
}

/* Fix hero section image */
#hero img {
  max-width: 100%; /* Ensure image doesn't exceed container */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure header is sticky */
.header-scale {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible; /* Keep if needed */
}

/* Ensure announcement bar is not sticky */
#announcement-bar {
  position: relative;
  z-index: 40; /* Below header */
}

/* Fix Glide carousel for testimonials */
.glide {
  overflow: hidden; /* Contain the carousel itself */
}

.glide__track {
  overflow: visible; /* Allow slides to move freely */
}

.glide__slides {
  display: flex; /* Ensure slides align horizontally */
  max-width: none; /* Exempt from global max-width */
  overflow: visible; /* Allow sliding effect */
}

.glide__slide {
  max-width: 100vw; /* Each slide fits container width */
  flex-shrink: 0; /* Prevent shrinking */
}

.logo img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* Add hero-gradient class to match the hero section ID */
#hero .hero-gradient,
#hero {
  /* This ensures backwards compatibility with any GSAP animations targeting .hero-gradient */
  position: relative;
  z-index: 30;
}

/* Make sure all flex containers in the hero section are properly linked */
#hero .flex,
.hero-gradient .flex {
  display: flex;
  opacity: 1 !important; /* Ensure flex container is always visible */
}

/* Force buttons in hero section to remain visible */
#hero .flex a,
.hero-gradient .flex a,
#hero a,
.hero-gradient a {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Any additional styles required for the hero gradient section */
.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  border-radius: 0.5rem;
  padding: 2rem;
  opacity: 1 !important; /* Ensure the gradient container is always visible */
}

.hero-gradient h1,
.hero-gradient h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Improve readability */
}

/* Move hero-gradient down by 20% on screens below 768px */
@media (max-width: 767px) {
  .hero-gradient {
    margin-top: 20vh; /* Shift down by 20% of viewport height */
    margin-right: 0; /* Reset incorrect margin-right */
    padding: 4rem 2rem; /* Reduce padding slightly */
  }
  .hero-gradient h1 {
    font-size: 2.5rem; /* Smaller h1 for mobile */
  }
  .hero-gradient h2 {
    font-size: 1.25rem; /* Smaller h2 for mobile */
  }
}

/* Service Card Styles */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Connect service cards with their actual HTML structure */
#services .bg-white.rounded-lg,
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services .bg-white.rounded-lg:hover,
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Navigation Link Styles */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #d4a373;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Scroll Indicator Animation */
.scroll-indicator {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* Subtle Background Gradient */
.bg-gradient-to-b.from-light.to-white {
  background: linear-gradient(to bottom, #f8f5f2, #ffffff);
}

.bg-gradient-to-t.from-white.to-light {
  background: linear-gradient(to top, #ffffff, #f8f5f2);
}

/* Enhance Card Contrast */
.bg-white.bg-opacity-90 {
  background-color: rgba(255, 255, 255, 0.9);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Ensure text remains readable on new backgrounds */
.text-dark {
  color: #333333;
}

/* Subtle texture for sections */
.bg-gray-50.bg-opacity-75 {
  background-color: rgba(249, 250, 251, 0.75);
  background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23e9ecef" fill-opacity="0.1"%3E%3Cpath d="M0 0h1v1H0zM19 19h1v1h-1zM0 19h1v1H0zM19 0h1v1h-1z"/%3E%3C/g%3E%3C/svg%3E');
}

/* FAQ Accordion Styles */
.faq-item {
  background-color: #ffffff;
}

.faq-item button {
  background: none;
  border: none;
}

.faq-content {
  background-color: #f9fafb;
}

.faq-item button:hover {
  background-color: #f8f5f2;
}

.faq-item button svg {
  flex-shrink: 0;
}

.faq-item button:focus {
  outline: 2px solid #d4a373;
  outline-offset: -2px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .faq-item button {
    padding: 1rem;
  }

  .faq-content {
    font-size: 0.9rem;
  }

  .faq-category h4 {
    font-size: 1.125rem;
  }
}