/* General Body and Main Container Styles */
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f7f6; /* Light background for the entire page */
    color: #333;
}

/* --- Navbar Layout --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar-left .logo-link {
  height: 85px; /* Fixed height for the logo container */
  display: flex; /* Ensures image inside behaves */
  align-items: center; /* Vertically center logo */
}

.navbar-logo {
  max-height: 100%; /* Ensure logo scales within its container */
  width: auto; /* Maintains aspect ratio */
}

.navbar-center .nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  align-items: center; /* Align search and translate elements */
}

.navbar-center .nav-links li a {
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
  transition: color 0.3s ease;
  white-space: nowrap; /* Prevent nav links from breaking */
}

.navbar-center .nav-links li a:hover {
  color: #2563eb;
}

.navbar-right {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.icon-small {
  height: 60px; /* Fixed height, will be adjusted in media queries */
  width: 60px; /* Fixed width, will be adjusted in media queries */
  object-fit: contain;
}

/* Services/Businesses Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none; /* Crucial: Hidden by default for all sizes */
  position: absolute; /* Default for desktop */
  top: 100%;
  left: 0;
  background: white;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  z-index: 999;
  list-style: none;
  padding: 0;
  margin-top: 5px;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 18px;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s, color 0.3s;
  font-weight: 400;
  white-space: nowrap;
}

.dropdown-menu li:last-child a {
  border-bottom: none;
}

.dropdown-menu li a:hover {
  background-color: #f0f0f0;
  color: #25d366;
}

/* Desktop Specific Dropdown Behavior */
@media (min-width: 992px) { /* Desktop breakpoint */
  .dropdown:hover .dropdown-menu, /* Show on hover of parent */
  .dropdown-menu.open { /* Also show if JS adds 'open' class (for click-then-hover persistence) */
    display: block;
  }
}

/* Mobile Specific Dropdown Behavior (and general mobile nav rules) */
@media (max-width: 991px) { /* Tablets and smaller laptops */
  .dropdown-menu {
    position: static; /* Stack on mobile */
    box-shadow: none;
    background: #f8f8f8; /* Slightly different background for sub-menu */
    border: none;
    border-radius: 0;
    margin-top: 0;
    padding-left: 20px; /* Indent sub-items */
    width: 100%;
    /* Display is controlled purely by JS .open class on mobile */
  }

  /* Only show dropdown on mobile when 'open' class is present */
  .dropdown.open .dropdown-menu {
    display: block;
  }

  /* Hamburger Menu and Main Nav Mobile Styles */
  .navbar {
    padding: 1rem 1.5rem;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    align-items: center; /* Center items vertically */
  }

  .navbar-left {
    order: 1; /* Logo first */
    flex-grow: 1; /* Allow logo area to grow */
  }

  .navbar-left .logo-link {
    height: 70px; /* Smaller logo on mobile */
  }

  .navbar-right {
    order: 2; /* Badges next */
    margin-left: auto; /* Push badges to the right */
    gap: 0.5rem;
  }

  .icon-small {
    height: 50px; /* Smaller badges */
    width: 50px;
  }

  .hamburger {
    display: block; /* Show hamburger */
    order: 3; /* Hamburger last */
    position: static; /* Remove absolute positioning */
    margin-left: 15px; /* Space from badges */
  }

  .navbar-center {
    display: none; /* Hidden by default on mobile */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 90px; /* Below the logo/right icons. Adjust if header height changes */
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1rem 0;
    border-top: 1px solid #eee;
    height: calc(100vh - 90px); /* Take full remaining viewport height */
    overflow-y: auto; /* Enable scrolling for long menus */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .navbar-center.open {
    display: flex; /* Show when 'open' class is added by JS */
  }

  .nav-links {
    flex-direction: column;
    gap: 0; /* Remove gap, use padding on list items */
    width: 100%;
    align-items: flex-start; /* Align menu items to the left */
  }

  .nav-links li {
    width: 100%;
    padding: 10px 1.5rem; /* Padding for click area */
    border-bottom: 1px solid #f0f0f0;
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links li a {
    width: 100%;
    padding: 0; /* Remove padding from link, as it's on li */
    text-align: left;
  }

  /* Search and Translate in mobile menu */
  .search-wrapper, .translate-wrapper {
    justify-content: flex-start; /* Align content to the left */
    padding: 10px 1.5rem; /* Match li padding */
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }
  .translate-wrapper:last-child {
      border-bottom: none;
  }

  #navbar-search {
    width: 80%; /* Smaller width for search input on mobile */
    max-width: 250px;
  }
}

@media (max-width: 576px) { /* Smaller phones */
  .navbar {
    padding: 0.8rem 1rem;
    /* Remove flex-wrap here if it causes issues, let it stack naturally */
  }

  .navbar-left {
    width: auto; /* Allow logo to take natural width */
    margin-bottom: 0;
  }
  .navbar-left .logo-link {
    height: 60px; /* Even smaller logo */
  }

  .navbar-right {
    width: auto; /* Allow badges to take natural width */
    margin-bottom: 0;
  }
  .icon-small {
    height: 40px;
    width: 40px;
  }

  .hamburger {
    top: 10px; /* Adjust position for smaller header */
    right: 10px;
    margin-left: 10px;
  }

  .navbar-center {
    top: 80px; /* Adjust based on new header height */
    height: calc(100vh - 80px); /* Adjust based on new header height */
  }

  .nav-links li, .search-wrapper, .translate-wrapper {
    padding: 8px 1rem; /* Adjust padding for smaller screens */
  }

  #navbar-search {
    width: 100%; /* Full width search on small phones */
    max-width: none;
  }
}


/* --- Hero Section --- */
.hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

/* Responsive adjustments for Hero section text (if you add text) */
@media (max-width: 768px) {
  .hero-text h1 { /* If you add text overlay */
    font-size: 2.5rem;
  }
  .hero-text p {
    font-size: 1.1rem;
  }
}
@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 2rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
}





/* Terms of Use Specific Styles (similar to Privacy Policy for consistency) */
.terms-content {
    max-width: 900px; /* Max width for content readability */
    margin: 60px auto 40px auto; /* Top, right, bottom, left margins */
    padding: 20px;
    background-color: #fff; /* White background for the content box */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.terms-content h1 {
    color: #2c3e50; /* Dark blue heading */
    font-size: 2.5em; /* Larger main title */
    margin-bottom: 25px;
    text-align: center;
}

.terms-content h2 {
    color: #34495e; /* Slightly lighter blue for section headings */
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #e0e0e0; /* Light gray line under headings */
    padding-bottom: 8px;
}

.terms-content h3 {
    color: #34495e;
    font-size: 1.4em;
    margin-top: 25px;
    margin-bottom: 10px;
}

.terms-content p {
    font-size: 1.1em; /* Readable paragraph text size */
    line-height: 1.8; /* Good line spacing for readability */
    color: #555; /* Soft black text */
    margin-bottom: 15px;
}

.terms-content ul {
    list-style-type: disc; /* Standard bullet points */
    margin-left: 25px; /* Indent for list */
    margin-bottom: 15px;
}

.terms-content ul li {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    margin-bottom: 8px;
}

.terms-content ul li::marker {
    color: #25d366; /* Green color for list bullets */
}

.terms-content a {
    color: #25d366; /* Your brand's green for links */
    text-decoration: none;
}

.terms-content a:hover {
    text-decoration: underline;
}

/* Specific styling for the end of policy line */
.terms-content .end-of-policy {
    text-align: center;
    font-style: italic;
    margin-top: 30px;
    color: #777;
}

/* Footer Styling (from your previous request - ensure this is in your main styles.css) */
.site-footer {
  position: relative;
  background: url('footerbg.jpeg') no-repeat center center/cover;
  color: #fff;
  padding: 60px 20px 30px;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75); /* Dark overlay */
  z-index: 0;
}

.footer-container,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-col h3,
.footer-col h4 {
  color: #fff;
  margin-bottom: 15px;
}

.footer-col p,
.footer-col ul li a,
.footer-bottom p {
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.6;
}

.footer-col ul li a:hover {
  color: #25d366;
}

/* New style for the phone number with icon */
.footer-phone {
  display: flex; /* Use flexbox to align icon and text */
  align-items: center; /* Vertically center items */
  margin-bottom: 15px; /* Spacing below the phone number */
}

.footer-phone a {
  color: #e0e0e0;
  text-decoration: none;
  font-size: 14px;
}

.footer-phone a:hover {
  color: #25d366;
}


/* Social Icons */
/* Social Media Wrapper */
.footer-socials {
  display: flex;
  gap: 15px; /* Equal spacing between icons */
  flex-wrap: wrap;
  align-items: center;
}

/* Icon Container */
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff; /* Background behind icons */
  border-radius: 50%; /* Circle shape */
  width: 42px;
  height: 42px;
  transition: background-color 0.3s, transform 0.3s;
}

/* Icon Inside */
.footer-socials img {
  width: 22px;
  height: 22px;
  filter: invert(0); /* Ensure visibility on light bg */
  transition: filter 0.3s, transform 0.3s;
}

/* Hover Effect */
.footer-socials a:hover {
  background-color: #25d366; /* WhatsApp green highlight */
  transform: scale(1.1);
}

.footer-socials a:hover img {
  filter: invert(1);
}


/* Footer layout */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.footer-col {
  flex: 1 1 250px;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  color: #ccc;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #bbb;
  text-decoration: none;
  margin: 0 5px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #25d366;
}

.footer-links span {
  color: #888;
}


/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .footer-socials {
    justify-content: center;
  }
}