/*
Theme Name: Twenty Twenty-Five Child
Theme URI: http://example.com/twentytwentyfive-child/
Description: Child theme for the Twenty Twenty-Five WordPress theme
Author: Your Name
Author URI: http://example.com
Template: twentytwentyfive
Version: 1.0
Text Domain: twentytwentyfive-child
*/

/* Global Styles */
* {
  box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    background-color: #EDF0F7;
}

button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

.btn-red {
  background-color: #f80a45;
  color: #fff;
  width: auto;
  height: auto;
  border-radius: 100px;
  padding: 11px 22px;
  gap: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn-white {
  background-color: #fff;
  color: var(--Dark-grey, #3c4b6b);
  width: auto;
  height: auto;
  border-radius: 100px;
  padding: 11px 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn-icon {
  aspect-ratio: 1;
  object-fit: contain;
  width: 16px;
  height: 16px;
}

.btn-icon path {
  stroke: white;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%; /* Full width */
  padding: 10px 15px; /* Adjust padding for a modern look */
  border-radius: 8px; /* Round corners */
  font-size: 16px;
}

input:focus, select:focus, textarea:focus {
  outline: none; /* Remove default focus outline */
  border-color: #f80a45; /* Highlight border color */
  box-shadow: 0 0 5px rgba(248, 10, 69, 0.5); /* Optional focus glow */
}

/* Header Styles */
header {
    width: 100%;
    height: 360px;
    background: radial-gradient(56.18% 56.18% at 58.58% 59.31%, #F80A45 0%, #302C4F 53.33%);
    border-radius: 0 0 1em 1em;
    overflow: visible;
}

.header-content { display: flex; width: 100%; max-width: 1110px; flex-direction: column; margin: 0 auto; }
.header-top {height: 72px; width: 100%; display: flex; align-items: center;}
.top-nav { height: 39px; display: flex; width: 100%; gap: 25px; flex-wrap: wrap; }
.logo-wrapper { align-self: start; display: flex; gap: 12px; font-family: Quicksand, sans-serif; font-weight: 700; }
.logo-icon {
    width: auto;
    height: 100%; /* Or a specific value like 40px */
    max-height: 50px; /* Ensures it doesn’t stretch too much */
}
.logo-text { align-self: start; display: flex; gap: 3px; }
.logo-primary { color: #fff; font-size: 20px; letter-spacing: -0.6px; flex-grow: 1; }
.logo-accent { color: #f80a45; font-size: 13px; text-transform: uppercase; align-self: start; }
.nav-container {
    display: flex;
    gap: 40px 100px;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: center; /* Aligns children vertically */
    font: 14px Lato, sans-serif;
}
.buttons-container {
  display: flex;
  justify-content: flex-end; /* Align buttons to the right */
  gap: 10px; /* Space between buttons */
}
.main-nav { display: flex; align-items: center; gap: 30px; color: var(--Non-Active-Purple, #9490b0); margin: auto 0; flex: 1}
.main-nav, .main-nav ul {
  list-style: none; /* Removes bullets/dots */
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
}
.main-nav>li { align-self: stretch; margin: auto 0;}
.main-nav a {
  text-decoration: none; /* Removes underline */
}

/* Optional: Style the links (example) */
.main-nav a:hover {
  text-decoration: underline;
}
.nav-actions { display: flex; gap: 23px; color: #fff; text-align: center; justify-content: flex-end; }

.language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0;
  position: relative;
  background-color: rgba(49, 45, 80, 0.5);
  border-radius: 5px;
  cursor: pointer;
  min-width: 106px;
}

.lang-icon {
  width: 24px;
  height: 24px;
}

.lang-arrow {
  width: 16px; /* Adjust size of the arrow */
  height: 16px;
}

.lang-dropdown {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Align dropdown below the selector */
  left: 0;
  width: 100%; /* Match parent width */
  background-color: rgba(49, 45, 80, 0.5);
  border: 1px solid rgba(127, 122, 163, 0.5);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 5px 0;
  opacity: 0; /* Hidden visually */
  transform: scaleY(0); /* Collapse vertically */
  transform-origin: top;
  transition: all 0.2s ease-in-out; /* Smooth transition */
  min-width: 106px;
}

.lang-dropdown.visible {
  display: block; /* Make it visible */
  opacity: 1; /* Fully visible */
  transform: scaleY(1); /* Expand to full size */
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 8px;
  cursor: pointer;
  color: #9490B0; /* Not active */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.lang-dropdown-item:hover {
  background-color: rgba(49, 45, 80, 1); /* Full opacity on hover */
  color: #ffffff;
}

.lang-dropdown-icon {
  width: 24px;
  height: 24px;
}

.lang-icon { aspect-ratio: 1; object-fit: contain; width: 24px; }
.lang-text { align-self: stretch; margin: auto 0; }
.lang-arrow { aspect-ratio: 1; object-fit: contain; width: 18px; }
.btn-primary { border-radius: 100px; padding: 7px 22px; }
.mobile-buttons-container {
  display: none; /* Hidden by default */
}
.search-heading { color: #fff; margin-top: 47px; font: 32px Lato, sans-serif; }
.search-container { border-radius: 50px; background-color: #fff; display: flex; margin-top: 23px; gap: 20px; overflow: hidden; flex-wrap: wrap; justify-content: space-between; padding: 4px 6px 4px 27px; font: 16px Lato, sans-serif; }
.search-input { display: flex; align-items: center; gap: 10px; color: var(--Light-Grey, #77839a); line-height: 1; margin: auto 0; min-width: 300px; width: 58%; }
.search-input>input {border: none; width: 100%; box-sizing: border-box; height: 36px; font-size: 18px;}
.search-input>input:focus { border: none; outline: none;}
.search-icon { aspect-ratio: 1; object-fit: contain; }
.clear-input {
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #ccc;
  user-select: none;
}

.clear-input:hover {
  color: #000;
}
.category-selector { display: flex; gap: 26px; }
.divider { width: 0; height: 48px; margin: auto 0; border: 1px solid #d0d7e5; }
.search-btn { border-radius: 100px; background-color: #f80a45; display: flex; min-height: 52px; align-items: center; gap: 10px; overflow: hidden; color: #fff; text-align: center; justify-content: center; padding: 14px 22px; border:  none; }

.categories-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  line-height: 1;
  margin: auto 0;
  position: relative;
}

.categories-list {
  align-self: stretch;
  display: flex;
  box-shadow: none;
  gap: 16px;
  width: 198px;
  margin: auto 0;
  cursor: pointer;
  background-color: white;
  padding: 8px 12px;
  border-radius: 5px;
  color: #000;
}

.categories-list:hover {
  box-shadow: none;
}

#selected-category {
  padding: 0;
  margin-top: 4px;
  display: inline-block;
}

.dropdown, .categories-dropdown {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 5px;
  z-index: 9999; /* Ensure visibility above all */
  width: calc(100% - 24px); /* Match parent width with padding */
  max-width: 300px; /* Optional max-width */
  overflow: hidden; /* Prevent content overflow */
}

.categories-dropdown.hidden {
  display: none;
}

.categories-dropdown.visible {
  display: block;
  position: absolute;
  z-index: 10;
}

.dropdown-item, .category-dropdown-item {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  color: #000;
}

.dropdown-item:hover, .category-dropdown-item:hover {
  background-color: #f7f7f7;
}

.category-dropdown-icon, .category2-icon {
  width: 24px;
  height: 24px;
}

.category-count, .category2-count {
  margin-left: auto;
  font-size: 0.9em;
  color: #888;
}

.categories-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    margin-top: 25px;
    color: #fff;
    font: 12px Lato, sans-serif;
    position: relative;
    overflow: hidden;
  }
  .category-wrapper2 {
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
    scrollbar-width: none;
  }
  .category-wrapper2::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}
  .category-items {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    cursor: pointer;
  }

.category-item { 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
 }

.category-icon { 
    aspect-ratio: 1;
    object-fit: contain;
    width: 16px;
}

.category-scroll {
  min-width: fit-content;
}

  .scroll-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
  }

  .scroll-icon:hover {
    opacity: 1;
  }

  /*
  .scroll-icon:first-child {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

  .scroll-icon:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
    */

/* Default Styles: Hide both Hamburger and Sliding Menu */
.hamburger-menu, .sliding-menu {
  display: none;
}



/* Main Content Styles */
/* Container styles */
.container-main {
  display: grid;
  grid-template-columns: 255px 1fr 160px;
  gap: 16px;
  max-width: 1110px;
  margin: 0 auto 32px;
  box-sizing: border-box;
  align-items: start;
}

.custom-ad-form {
  margin: 0 auto 32px;
}

/* Column styles */
.column-main {
    box-sizing: border-box;
    border-radius: 8px;
}

.column-main-1 {
    padding: 20px;
    background-color: #fff;
    margin-top: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    display: inline-block;
    height: auto;
}

.column-main-2 {
    margin-top: 16px;
}

.ads-wall { 
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wall-content { display: flex; width: 100%; max-width: 1110px; flex-direction: column; margin: 0 auto; }
.main-content {
    max-width: 1110px;
    margin: 0 auto;
    padding: 20px;
}
.services-section {
    display: flex;
    align-items: start;
    overflow: hidden;
    justify-content: center;
    flex-wrap: wrap;
  }
  .categories-sidebar {
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    min-width: 240px;
    flex-direction: column;
    overflow: hidden;
    justify-content: start;
    flex-grow: 1;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .sidebar-title {
    color: #3c4b6b;
    font: 16px Lato, sans-serif;
  }
  
  .ad-button {
    border-radius: 100px;
    background-color: #f80a45;
    display: flex;
    margin-top: 20px;
    min-height: 32px;
    width: 100%;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    justify-content: center;
    padding: 8px 14px;
    font: 14px Lato, sans-serif;
    border: none;
  }
  
  .icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    padding-right: 4px;
}

.show-phone-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.show-phone {
    cursor: pointer;
    color: #3C4B6B;
}
.show-phone:hover {
    color: #3C4B6B;
}
  
  .category2-list {
    display: flex;
    margin-top: 20px;
    width: 100%;
    flex-direction: column;
    text-align: center;
    justify-content: start;
    font: 14px Lato, sans-serif;
  }
  
  .category2-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 215px;
    gap: 20px;
    margin-top: 12px;
}

.category2-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: #3c4b6b;
    padding: 8px 10px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.category2-link:hover {
    background-color: #f0f0f0;
    color: #3c3c3c;
}

.category2-link.active, .category-item.active {
    background-color: #e0e0e0;
    color: #2c2c2c;
}

.category2-name {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.category2-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
}

.category2-count {
    color: #77839a;
    white-space: nowrap;
}
  
  .main-content {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    justify-content: start;
    flex-grow: 1;
    width: 664px;
  }
  
  .service-card {
    border-radius: 10px; 
    background-color: #fff; 
    display: flex; 
    min-height: 279px; 
    align-items: start;
    gap: 10px;
    overflow: hidden;
    justify-content: start; 
    padding: 23px 24px;
    margin-bottom: 20px;
}
  
  .service-image {
    border-radius: 10px;
    background-color: #6d0f0f;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    overflow: hidden;
    width: 210px;
  }
  
  .service-details {
    display: flex;
    margin-top: 5px;
    width: 100%;
    flex-direction: column;
    font: 14px Lato, sans-serif;
  }
  
  .service-header {
    display: flex;
    width: 100%;
    gap: 35px;
    font-size: 12px;
  }
  
  .service-tags {
    gap: 10px;
    line-height: 1;
  }
  
  .service-tag {
    border-radius: 10px;
    background-color: #f2f4f7;
    min-height: 20px;
    overflow: hidden;
    color: #77839a;
    padding: 6px 10px;
  }
  
  .promoted-tag {
    border-radius: 10px;
    background-color: #f80a45;
    display: flex;
    min-height: 20px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #fff;
    justify-content: start;
    padding: 2px 10px;
  }
  
  .service-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #77839a;
    font-weight: 400;
    justify-content: end;
    flex: 1;
    margin: auto 0;
}
  
  .service-title {
    color: #3c4b6b;
    font-size: 18px;
  }
  
  .service-price {
    color: #f80a45;
    font-size: 18px;
    font-weight: 600;
  }
  
  .service-description {
    color: #77839a;
    font-weight: 400;
  }
  
  .service-link {
    color: #f80a45;
    font-weight: 600;
    text-decoration: none;
    padding-top: 10px;
  }

  .ad-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust spacing between thumbnails */
    margin-top: 10px;
  }

  .ad-images img {
      width: 100px; /* Set thumbnail width */
      height: auto; /* Maintain aspect ratio */
      border: 1px solid #ddd; /* Optional: Add a border */
      border-radius: 5px; /* Optional: Rounded corners */
      object-fit: cover; /* Ensure thumbnails fit neatly */
  }
  
  .service-provider {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    width: 100%;
    gap: 20px;
    padding: 7px 11px;
    font: 14px Lato, sans-serif;
    border: 1px solid #edf0f7;
}

/* Gallery Popup Styling */
#ad-gallery-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none; /* Hidden by default */
}

#ad-gallery-popup.show {
  display: flex; /* Visible when 'show' is added */
}

#ad-gallery-popup img {
  max-width: 90%;
  max-height: 80%;
}

#ad-gallery-popup .gallery-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

#ad-gallery-popup button {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

#ad-gallery-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 20px;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

/* Thumbnails Styling */
.ad-images {
  display: flex;
  gap: 10px;
}

.thumbnail img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.thumbnail img:hover {
  transform: scale(1.1);
}

.hidden {
  display: none !important;
}

/* End galery popup styling */

.provider-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.provider-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.show-phone-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    object-position: center;
}

.cta-button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background-color: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
}
  
  .provider-info {
    display: flex;
    gap: 9px;
    color: #3c4b6b;
    align-items: center;
  }
  
  .provider-avatar {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 32px;
  }
  
  .provider-actions {
    display: flex; 
    justify-content: flex-end;
    gap: 15px; 
    align-items: center;
  }
  
  .action-button {
    display: flex;
    gap: 10px;
    color: #3c4b6b;
    margin: auto 0;
  }
  
  .action-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 16px;
  }
  
  .cta-button {
    border-radius: 100px;
    background-color: #f80a45;
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: #fff;
    justify-content: center;
    padding: 8px 14px;
    border: none;
  }
  
  .ads-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    justify-content: start;
    flex-grow: 1;
    width: 160px;
  }
  
  .ad-banner {
    object-position: center;
    margin-top: 15px;
    max-width: 100%;
  }

  .ad-banner-left {width: 215px;}

  .ad-banner-right {width: 160px; aspect-ratio: 0.27; object-fit: contain;}

  .ad-banner img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .ad-banner img.loaded {
      opacity: 1;
  }
  
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  


/* Optional hover effect */
.service-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Slightly deeper shadow on hover */
}
  
    .ads-sidebar {
      display: none;
    }

  .no-more-ads-message {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-top: 20px;
}

.message-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  width: 90%;
  max-width: 500px; /* Limit modal width */
  max-height: 90vh; /* Ensure modal doesn't overflow */
  overflow-y: auto; /* Add scrolling for overflowing content */
  display: none; /* Initially hidden */
}

.message-modal.show {
  display: block; /* Make modal visible */
}

.modal-content {
  margin: 0 auto;
}

.close-modal {
  font-size: 24px;
  color: #000;
  cursor: pointer;
  float: right;
}

.search-highlight {
  background-color: yellow;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 3px;
}

.no-results-message {
  text-align: center;
  font-size: 1.2em;
  color: #666;
  margin-top: 20px;
}

/* Default: Hide mobile-only content on desktop */
.service-location.mobile-only {
  display: none;
}

/* Hide desktop-only content on mobile */
.service-location.desktop-only {
  display: block;
}

.banner-placeholder {
  width: 100%;
  height: 150px; /* Match the approximate banner height */
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
      background-position: 200% 0;
  }
  100% {
      background-position: -200% 0;
  }
}


/* RESPONSIVE */

@media (max-width: 1110px) {
  .header-content, 
  .main-content, 
  .footer-content, 
  .sliding-menu nav {
      padding-left: 10px;
      padding-right: 10px;
  }

  /* Optional: If specific sections need adjustments */
  .container-main {
    display: flex; /* Switch to flex layout if necessary */
    flex-direction: column; /* Stack items vertically */
    gap: 16px; /* Keep spacing between items */
    max-width: 100%; /* Ensure full width */
    margin: 0 auto; /* Center the container */
    padding: 0 10px; /* Add padding for spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    grid-template-columns: none;
  }

  .sliding-menu nav ul {
      padding-left: 0; /* Remove inner list padding if needed */
  }

    .column-main {
        width: 100%; /* Make columns take full width */
    }
    .column-side {
      display: none !important;
    }
}

@media (max-width: 986px) {
  header {
    height: 287px; /* Or whatever height is specified */
    padding-bottom: 20px;
    position: relative;
  }
  .header-content {
    position: relative;
    align-items: flex-start;
  }

  .buttons-container {
    display: none; /* Hide desktop button on mobile */
}
  .nav-container {
    display: block;
  }

  .mobile-buttons-container {
    display: flex; /* Show mobile button */
    justify-content: center;
    margin: 20px auto;
}

  .search-heading {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .categories-wrapper {
    display: none;
  }
  .search-container {
    flex-wrap: nowrap;
    width: 100%;
  }
  .search-input {
    min-width: 300px;
  }
  .search-input>input {
    font-size: 16px;
  }

  .hamburger-menu {
      /* display: flex; */
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-color: transparent;
      border-radius: 50%;
  }

  .hamburger-menu span {
      display: block;
      width: 36px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
      border-radius: 2px;
      transition: all 0.3s ease;
  }

  .hamburger-menu.open span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }

  .hamburger-menu.open span:nth-child(2) {
      opacity: 0;
  }

  .hamburger-menu.open span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }

  .sliding-menu {
      display: block; /* Make the sliding menu accessible */
      position: fixed;
      top: 0;
      right: -238px; /* Initially hidden off-screen */
      width: 238px;
      height: 100vh;
      background-color: #312D50;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
      transition: right 0.3s ease;
      z-index: 1000;
      color: white;
      overflow-y: auto;
  }

  .sliding-menu.open {
      right: 0; /* Slide into view */
  }

  .close-menu {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
  }

  .close-menu:hover {
      color: #f80a45; /* Optional hover color */
  }

  .sliding-menu nav {
      position: absolute;
      top: 96px; /* From Figma design */
      left: 40px; /* From Figma design */
  }

  .sliding-menu nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .sliding-menu nav ul li {
      margin-bottom: 16px;
  }

  .sliding-menu nav ul li a {
      text-decoration: none;
      font-size: 18px;
      color: #9490B0; /* Inactive menu item color */
      transition: color 0.3s ease;
  }

  .sliding-menu nav ul li a:hover,
  .sliding-menu nav ul li a.active {
      color: white; /* Active menu item color */
  }

  .sliding-menu nav ul li a:hover {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  }
    .ads-wall {
        display: flex;
        flex-direction: column;
        width: 100%; /* Ensure full width */
        margin: 0 auto; /* Center the element if needed */
        padding: 0 10px; /* Optional: Add padding for spacing */
        box-sizing: border-box; /* Ensure padding doesn't affect total width */
    }

    .message-modal {
      width: 95%; /* Slightly narrower modal for small screens */
      max-height: 85vh; /* Adjust max height for mobile */
      padding: 15px; /* Adjust padding for mobile devices */
    }
  
    .modal-content {
      margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
  .service-location.desktop-only {
      display: none; /* Hide desktop-only on mobile */
  }
  
  .service-location.mobile-only {
      display: block; /* Show mobile-only on mobile */
      color: #77839a;
      font-weight: 400;
      padding: 20px 0;
  }
}

@media (max-width: 430px) {
  .search-input {
      min-width: 210px;
  }
  .provider-info span {
    display: inline-block;
    max-width: 5ch; /* Limit the width to 9 characters */
    white-space: nowrap; /* Prevent wrapping to the next line */
    overflow: hidden; /* Hide any overflow text */
    text-overflow: ellipsis; /* Add the ellipsis */
}
.footer-container {
  padding: 0 0;
}
.category-selector {
  gap: 5px;
}
.button-group {
  min-width: 305px;
}
.footer-base {
  padding: 38px 60px 61px;
}
}