/* =============================
   SERVICES PAGE STYLES
   ============================= */

/* Hero / Heading */
#services-hero {
    background-color: #f0f0f0; /* Light gray to contrast the nav bar */
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 2px solid #1A3C8D; /* Blue accent line (optional) */
  }
  #services-hero h2 {
    font-size: 2.7rem;
    margin: 0;
    color: #0D1F47; /* Darker blue for headings */
    font-family: 'Libre Baskerville', serif;
  }
  
  /* Services List Section */
  #services-list {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  /* Each Service Card (horizontal layout) */
  .service-card {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    border-radius: 8px;        /* Soft edges */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;          /* Ensure no child elements overflow the card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }
  
  /* Left side image */
  .service-image {
    flex: 1;
    min-width: 300px;
    max-width: 500px; /* Adjust if needed for your images */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa; /* Subtle background if image doesn’t fill */
  }
  
  .service-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Additional softness on the actual image */
  }
  
  /* Right side text + button */
  .service-info {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
  }
  
  .service-info h3 {
    margin: 0;
    font-size: 1.75rem;
    color: #1A3C8D;
    text-align: center;
  }
  
  .service-info p {
    margin: 0;
    line-height: 1.5;
    color: #333333;
    font-size: 1.23rem;
    text-align: center;
  }
  
  /* Updated selector for the custom tag */
  .service-info p2.service-duration {
    font-weight: 600;
    color: #666666;
    font-size: 1.23rem;
    margin-right: auto;
    text-align: auto;
  }
  
  /* Book Now button */
  .btn-book {
    align-self: flex-start; /* keep button to the left */
    background-color: #0D1F47;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-left: auto;
    margin-right: auto;
  }
  
  .btn-book:hover {
    background-color: #000000;
    transform: translateY(-2px);
  }

  /* Popup Form Styling */
  .popup-form {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Black with opacity for overlay */
    pointer-events: none; /* Allow clicks to pass through to enable scrolling */
  }

  .popup-content {
    background-color: #0D1F47;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 85%;
    max-width: 450px;
    color: white;
    border-radius: 10px;
    text-align: left;
    position: absolute;
    top: 50%; /* Adjust this value to move the form up (decrease to move up, increase to move down) */
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); /* Subtle shadow around the form */
    pointer-events: all; /* Allow interaction with pop-up content */
    cursor: default !important;
    z-index: 1100; /* Ensure it stays on top */
  }

  /* Style for the tree image */
  .popup-tree-image {
    position: absolute;
    top: 114px;
    right: 48px;
    width: 100px;
    height: auto;
    border-radius: 5px;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
    backface-visibility: hidden;
  }

  /* Hover effect to make the tree image float */
    .popup-tree-image:hover {
    transform: translateY(-3px); /* Moves the image up by 10px to simulate floating */
    box-shadow: none; /* Remove the box shadow if it's outlining a square */
  }

  .close-btn {
    color: #aaaaaa;
    float: right;
    font-size: 34px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 15px; /* Increase this value to move it farther left */
    margin-top: 2px; /* Decrease this value to move it closer to the top */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
    position: relative; /* Optional: Ensures positioning for transform to work */
  }

  .close-btn:hover,
  .close-btn:focus {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px); /* Moves the button up by 5px to simulate floating */
    cursor: pointer;
  }

  .popup-content h2 {
    text-align: center !important;
    margin-bottom: 8px; /* Adjust as needed */
    font-size: 26px; /* Increase font size for the heading */
    font-weight: bold;
    color: white; /* Ensure the color is white for visibility */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); /* Subtle shadow for a lifted effect */
  }

  .popup-content label {
    font-weight: 600;
    display: block;
    margin: 8px 0 4px; /* Reduce margins for smaller size */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); /* Subtle shadow for a lifted effect */
  }

  /* General styling for all input fields */
  .popup-content input,
  .popup-content select,
  .popup-content textarea {
    width: 100%;
    padding: 8px; /* Adjust padding */
    border: none;
    border-radius: 5px;
    background-color: #333333;
    color: white;
    margin-bottom: 0px; /* Space between inputs */
  }

  /* Group specific styling */
  /* Contact Details Group (Name, Phone, Email) */
  .contact-details-group {
    font-size: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 6px; /* Consistent space below the group */
    align-items: flex-start; /* Align the group to the left */
  }

  .contact-details-group input {
    width: 60%; /* Adjust this value to control the width of the text boxes */
    padding: 8px; /* Keep padding for better UX */
    margin-bottom: 3px; /* Consistent space between inputs */
    border: none;
    border-radius: 5px;
    background-color: #ffffff;
    color: black;
    font-size: 14px; /* Optional: increase input text size as well */
  }

  /* Service Details Group (Type of Service) */
  .service-details-group {
    text-align: left; /* Align the label to the left */
    margin-bottom: 8px; /* Consistent space below the group */
    margin-top: 0; /* Remove any extra margin on top */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align the select box */
  }

  .service-details-group label {
    width: 100%;
    text-align: left; /* Ensure the label is aligned to the left */
    margin-bottom: 6px; /* Space between label and dropdown */
    font-size: 20px; /* Increased font size for better readability */
    font-weight: bold;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); /* Subtle shadow for a lifted effect */
  }

  .service-details-group select {
    width: 60%; /* Adjust the width of the dropdown */
    padding: 10px; /* Increase padding slightly for a bigger dropdown box */
    border: none;
    border-radius: 5px;
    background-color: #ffffff;
    color: black;
    font-size: 16px; /* Slightly increase font size inside the dropdown */
    text-align: left; /* Align the text inside the dropdown to the left */
    margin-bottom: 0px; /* Ensure consistent spacing below the dropdown */
  }

  /* Job Description Group */
  .job-description-group {
    text-align: left; /* Align the label to the left */
    margin-bottom: 8px; /* Consistent space below the group */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align the textarea */
  }

  .job-description-group label {
    width: 100%;
    text-align: left; /* Ensure the label is aligned to the left */
    margin-bottom: 4px; /* Space between label and textarea */
    font-size: 20px; /* Increased font size for better readability */
    font-weight: bold;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); /* Subtle shadow for a lifted effect */
  }

  .job-description-group textarea {
    width: 95%; /* Increase the width of the textarea */
    padding: 12px; /* Adjust padding for better UX */
    border: none;
    border-radius: 5px;
    background-color: #ffffff;
    color: black;
    font-size: 16.5px; /* Slightly increase font size inside the textarea */
    text-align: left; /* Align text inside the textarea to the left */
    margin-bottom: 6px; /* Consistent spacing below the textarea */
    height: 120px; /* Increase height to fit all 250 characters */
    resize: none; /* Prevent manual resizing by the user */
  }

  /* Submit Button Styling */
  .popup-submit {
    background-color: #DAA520; /* Gold color */
    color: white;
    padding: 12px 18px; /* Increase padding to make the button larger */
    font-size: 16px; /* Increase font size for better readability */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    width: auto;
    display: block;
    margin: 15px auto 0 auto; /* Center align the button */
  }

  .popup-submit:hover {
    background-color: #cda117; /* Slightly darker gold on hover */
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3); /* Add subtle shadow */
  }

  .date-time-button {
    position: absolute;
    top: 242px;   /* Increase this value to move it further down */
    right: 20px;  /* Adjust this to move it left/right */
    background-color: #DAA520; /* Gold color */
    color: white;
    padding: 8px 14px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    margin: 0; /* Remove auto margins so it doesn't center itself */
    z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
  }
  
  .date-time-button:hover {
    background-color: #cda117;
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3);
  }

  .close-dateTimePopup-btn {
    color: #aaaaaa;
    float: right;
    font-size: 34px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 15px; /* Increase this value to move it farther left */
    margin-top: 2px; /* Decrease this value to move it closer to the top */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
    position: relative; /* Optional: Ensures positioning for transform to work */
  }

  .close-dateTimePopup-btn:hover,
  .close-btn:focus {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px); /* Moves the button up by 5px to simulate floating */
    cursor: pointer;
  }

  .custom-notification {
    position: fixed;
    top: 337px;
    right: 727px;
    background: #002b47;  /* Navy background */
    color: #fff;         /* White text */
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.75);
  }
  
  .custom-notification.fade-out {
    opacity: 0;
  }

  /* ─────────────────────────────────────────────
   Form Legal Notice (Popup Scheduling Form)
  ───────────────────────────────────────────── */

  .popup-form .form-legal {
    width: 100%;
    text-align: center;
    margin: 0.4rem 0 0.25rem;
    font-size: clamp(0.90rem, 1.2vw, 0.97rem);
    line-height: 1.35;
    color: #ccc;                /* light gray for contrast on dark popup */
  }

  .popup-form .form-legal__line1,
  .popup-form .form-legal__line2 {
    display: block;
    white-space: nowrap;
  }

  .popup-form .form-legal a {
    color: #DAA520;             /* match your gold accent color */
    text-decoration: underline;
  }

  .popup-form .form-legal a:hover {
    color: #fff;                /* brighten on hover */
  }

  @media (min-width: 1101px) and (max-width: 1926px) {
    .custom-notification {
      position: fixed;
      top: 337px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.55);
    }
  }
  
  @media (min-width: 900px) and (max-width: 1100px) {
    .custom-notification {
      position: fixed;
      top: 437px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.35);
    }
  }
  
  @media (min-width: 850px) and (max-width: 900px) {
    .custom-notification {
      position: fixed;
      top: 400px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.15);
    }
  }
  
  @media (min-width: 800px) and (max-width: 851px) {
    .custom-notification {
      position: fixed;
      top: 400px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.15);
    }
  }
  
  @media (min-width: 750px) and (max-width: 800px) {
    .custom-notification {
      position: fixed;
      top: 345px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.10);
    }
  }
  
  @media (min-width: 710px) and (max-width: 750px) {
    .custom-notification {
      position: fixed;
      top: 325px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.10);
    }
  }
  
  @media (min-width: 707px) and (max-width: 710px) {
    .custom-notification {
      position: fixed;
      top: 325px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.10);
    }
  }
  
  @media (min-width: 694px) and (max-width: 707px) {
    .custom-notification {
      position: fixed;
      top: 315px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.10);
    }
  }
  
  @media (min-width: 650px) and (max-width: 694px) {
    .custom-notification {
      position: fixed;
      top: 290px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.00);
    }
  }
  
  @media (min-width: 600px) and (max-width: 650px) {
    .custom-notification {
      position: fixed;
      top: 290px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.00);
    }
  }
  
  @media (min-width: 549px) and (max-width: 600px) {
    .custom-notification {
      position: fixed;
      top: 287px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.00);
    }
  }
  
  @media (min-width: 500px) and (max-width: 549px) {
    .custom-notification {
      position: fixed;
      top: 275px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(1.00);
    }
  }
  
  @media (min-width: 450px) and (max-width: 500px) {
    .custom-notification {
      position: fixed;
      top: 280px;
      right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(0.95);
    }
  }
  
  @media (min-width: 408px) and (max-width: 450px) {
    .custom-notification {
      position: fixed;
      top: 255px;
      right: calc(50% - 199px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(0.95);
      /* New additions */
      text-align: center;
      font-size: 14px;
    }
  }
  
  @media (min-width: 380px) and (max-width: 407px) {
    .custom-notification {
      position: fixed;
      top: 255px;
      right: calc(50% - 199px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(0.85);
      /* New additions */
      text-align: center;
      font-size: 14px;
    }
  }
  
  @media (min-width: 350px) and (max-width: 380px) {
    .custom-notification {
      position: fixed;
      top: 240px;
      right: calc(50% - 189px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(0.85);
      /* New additions */
      text-align: center;
      font-size: 14px;
    }
  }
  
  @media (min-width: 300px) and (max-width: 350px) {
    .custom-notification {
      position: fixed;
      top: 255px;
      right: calc(50% - 161px); /* Adjusted to match your right: 530px at your target resolution */
      background: #002b47;
      color: #fff;
      padding: 15px 25px;
      border-radius: 5px;
      z-index: 1000;
      opacity: 1;
      transition: opacity 1s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transform: scale(0.85);
      /* New additions */
      text-align: center;
      font-size: 14px;
    }
  }
  
  .submission-fingerprint {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }
  
  .input-protocol-check {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
  }
  
  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
  }
  
  /* Responsive Adjustments for 300px - 375px */
  @media (min-width: 300px) and (max-width: 375px) {
    .service-card {
        flex-direction: column; /* Stack elements vertically */
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%; /* Ensure image fills container */
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%; /* Ensure text does not overflow */
        padding: 1rem;
    }

    .service-info h3 {
        font-size: 1.5rem; /* Adjust heading size */
    }

    .service-info p {
        font-size: 1.1rem; /* Reduce paragraph size slightly */
    }

    .service-info p2.service-duration {
        font-size: 1rem;
        margin-bottom: -1.5rem;
        margin-top: 1.5rem;
        text-align: left; /* Align time duration to the left */
    }

    /* Book Now button */
    .btn-book {
      margin-bottom: 1.5rem;
      margin-top: -1.5rem;
    }

    .service-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.5rem 1rem;
    }
  }
  
  @media (min-width: 300px) and (max-width: 316px) {
    .popup-tree-image {
      position: absolute;
      top: 162px;
      right: 4px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.66);
    }

    .date-time-button {
      position: absolute;
      top: 263px;   /* Increase this value to move it further down */
      right: -24px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.60);
    }

    .close-dateTimePopup-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 0px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 316px) and (max-width: 324px) {
    .popup-tree-image {
      position: absolute;
      top: 128px;
      right: 9px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.70);
    }

    .date-time-button {
      position: absolute;
      top: 233px;   /* Increase this value to move it further down */
      right: -19px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.63);
    }
  }

  @media (min-width: 324px) and (max-width: 340px) {
    .popup-tree-image {
      position: absolute;
      top: 128px;
      right: 12px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.70);
    }

    .date-time-button {
      position: absolute;
      top: 233px;   /* Increase this value to move it further down */
      right: -16px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.63);
    }

    .close-dateTimePopup-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 0px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 341px) and (max-width: 359px) {
    .popup-tree-image {
      position: absolute;
      top: 122px;
      right: 20px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.75);
    }

    .date-time-button {
      position: absolute;
      top: 233px;   /* Increase this value to move it further down */
      right: -8px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.70);
    }

    .close-dateTimePopup-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 0px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 360px) and (max-width: 370px) {
    .popup-tree-image {
      position: absolute;
      top: 120px;
      right: 22px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.80);
    }

    .date-time-button {
      position: absolute;
      top: 235px;   /* Increase this value to move it further down */
      right: -6px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.76);
    }
  }

  @media (min-width: 371px) and (max-width: 399px) {
    .popup-tree-image {
      position: absolute;
      top: 120px;
      right: 28px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.80);
    }

    .date-time-button {
      position: absolute;
      top: 235px;   /* Increase this value to move it further down */
      right: 0px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.76);
    }

    .close-dateTimePopup-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: -13px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 315px) and (max-width: 329px) {
    .close-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: -8px; /* Increase this value to move it farther left */
      margin-top: -26px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 330px) and (max-width: 344px) {
    .close-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: -4px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 345px) and (max-width: 415px) {
    .close-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 0px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 400px) and (max-width: 410px) {
    .popup-tree-image {
      position: absolute;
      top: 114px;
      right: 27px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.90);
    }

    .date-time-button {
      position: absolute;
      top: 242px;   /* Increase this value to move it further down */
      right: -1px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.86);
    }

    .close-dateTimePopup-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 0px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 411px) and (max-width: 430px) {
    .popup-tree-image {
      position: absolute;
      top: 114px;
      right: 36px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.90);
    }

    .date-time-button {
      position: absolute;
      top: 242px;   /* Increase this value to move it further down */
      right: 8px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.86);
    }

    .close-dateTimePopup-btn {
      color: #aaaaaa;
      float: right;
      font-size: 34px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 0px; /* Increase this value to move it farther left */
      margin-top: 2px; /* Decrease this value to move it closer to the top */
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for hover effects */
      position: relative; /* Optional: Ensures positioning for transform to work */
    }
  }

  @media (min-width: 431px) and (max-width: 488px) {
    .popup-tree-image {
      position: absolute;
      top: 114px;
      right: 45px;
      width: 100px;
      height: auto;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for hover effect */
      backface-visibility: hidden;
      transform: scale(0.90);
    }

    .date-time-button {
      position: absolute;
      top: 242px;   /* Increase this value to move it further down */
      right: 17px;  /* Adjust this to move it left/right */
      background-color: #DAA520; /* Gold color */
      color: white;
      padding: 8px 14px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      margin: 0; /* Remove auto margins so it doesn't center itself */
      z-index: 1101; /* (Optional) ensure it stays above other elements if needed */
      transform: scale(0.86);
    }
  }

  /* Responsive Adjustments for 376px - 450px */
  @media (min-width: 376px) and (max-width: 450px) {
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%;
        padding: 1.2rem;
    }

    .service-info h3 {
        font-size: 1.65rem;
    }

    .service-info p {
        font-size: 1.15rem;
    }

    .service-info p2.service-duration {
        font-size: 1.05rem;
        margin-bottom: -1.4rem;
        margin-top: 1.4rem;
        text-align: left;
    }

    .btn-book {
        margin-bottom: 1.4rem;
        margin-top: -1.4rem;
    }

    .service-footer {
        padding: 0.6rem 1rem;
    }
  }

  /* Responsive Adjustments for 451px - 525px */
  @media (min-width: 451px) and (max-width: 525px) {
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%;
        padding: 1.4rem;
    }

    .service-info h3 {
        font-size: 1.8rem;
    }

    .service-info p {
        font-size: 1.2rem;
    }

    .service-info p2.service-duration {
        font-size: 1.1rem;
        margin-bottom: -1.3rem;
        margin-top: 1.3rem;
        text-align: left;
    }

    .btn-book {
        margin-bottom: 1.3rem;
        margin-top: -1.3rem;
    }

    .service-footer {
        padding: 0.7rem 1rem;
    }
  }

  /* Responsive Adjustments for 526px - 600px */
  @media (min-width: 526px) and (max-width: 600px) {
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%;
        padding: 1.5rem;
    }

    .service-info h3 {
        font-size: 1.9rem;
    }

    .service-info p {
        font-size: 1.25rem;
    }

    .service-info p2.service-duration {
        font-size: 1.15rem;
        margin-bottom: -1.2rem;
        margin-top: 1.2rem;
        text-align: left;
    }

    .btn-book {
        margin-bottom: 1.2rem;
        margin-top: -1.2rem;
    }

    .service-footer {
        padding: 0.8rem 1rem;
    }
  }

  /* Responsive Adjustments for 601px - 675px */
  @media (min-width: 601px) and (max-width: 675px) {
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%;
        padding: 1.6rem;
    }

    .service-info h3 {
        font-size: 2rem;
    }

    .service-info p {
        font-size: 1.3rem;
    }

    .service-info p2.service-duration {
        font-size: 1.2rem;
        margin-bottom: -1.1rem;
        margin-top: 1.1rem;
        text-align: left;
    }

    .btn-book {
        margin-bottom: 1.1rem;
        margin-top: -1.1rem;
    }

    .service-footer {
        padding: 0.9rem 1rem;
    }
  }

  /* Responsive Adjustments for 676px - 750px */
  @media (min-width: 676px) and (max-width: 750px) {
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%;
        padding: 1.8rem;
    }

    .service-info h3 {
        font-size: 2.1rem;
    }

    .service-info p {
        font-size: 1.35rem;
    }

    .service-info p2.service-duration {
        font-size: 1.25rem;
        margin-bottom: -1rem;
        margin-top: 1rem;
        text-align: left;
    }

    .btn-book {
        margin-bottom: 1rem;
        margin-top: -1rem;
    }

    .service-footer {
        padding: 1rem 1rem;
    }
  }

  /* Responsive Adjustments for 751px - 800px */
  @media (min-width: 751px) and (max-width: 775px) {
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }

    .service-info {
        width: 100%;
        padding: 2rem;
    }

    .service-info h3 {
        font-size: 2.2rem;
    }

    .service-info p {
        font-size: 1.4rem;
    }

    .service-info p2.service-duration {
        font-size: 1.3rem;
        margin-bottom: -0.9rem;
        margin-top: 0.9
    }
  }

  .field-hint{
    display:block;
    margin-top:.35rem;
    font-size:.85rem;
    opacity:.9;
    white-space: pre-line; /* ✅ this is what makes \n become a new line */
  }
  .field-hint.is-error{ opacity:1; }
  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"]{
    outline: 2px solid rgba(220, 38, 38, 0.637);
    outline-offset: 2px;
  }

  /* ✅ Under 475px — shorten width & wrap long phrases instead of full pre-line */
  @media (max-width: 474px) {
    #popupNameHint,
    #popupPhoneHint,
    #popupEmailHint {
      display: inline-block;
      max-width: 25ch;       /* wraps at roughly "Please enter your phone" */
      white-space: normal;   /* ⛔ disable \n logic, allow natural wrapping */
      overflow-wrap: anywhere;
    }
    #popupMessageHint {
      display: inline-block;
      max-width: 34ch;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  /* ✅ 475px+ — restore normal pre-line (\n) behavior */
  @media (min-width: 475px) {
    #popupNameHint,
    #popupPhoneHint,
    #popupEmailHint,
    #popupMessageHint {
      display: block;
      max-width: none;
      white-space: pre-line;
    }
  }

  /* ✅ Under 375px — shorten width & wrap long phrases instead of full pre-line */
  @media (max-width: 375px) {
    #popupNameHint,
    #popupPhoneHint,
    #popupEmailHint {
      display: inline-block;
      max-width: 20ch;       /* wraps at roughly "Please enter your phone" */
      white-space: normal;   /* ⛔ disable \n logic, allow natural wrapping */
      overflow-wrap: anywhere;
    }
    #popupMessageHint {
      display: inline-block;
      max-width: 28ch;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  /* ✅ Under 420px — force “and acknowledge” to stay together */
  @media (max-width: 420px) {
    .popup-form .form-legal {
      text-align: center;
      line-height: 1.4;
    }

    .popup-form .form-legal__line1 {
      display: inline;                /* ✅ inline keeps “and” connected */
      white-space: normal !important; /* allow wrap before */
    }

    .popup-form .form-legal__line2 {
      display: inline;                /* ✅ inline ensures “and acknowledge” stay together */
      margin-left: 0.25ch;            /* tiny gap between “and” + “acknowledge” */
    }
  }

  /* ✅ 369px and under — exact 3-line layout (break after "Terms of", then before "Privacy Policy") */
  @media (max-width: 369px) {
    .popup-form .form-legal {
      text-align: center;
      line-height: 1.4;
      max-width: 30ch;
      margin: 0 auto;
    }

    .popup-form .form-legal__line1,
    .popup-form .form-legal__line2 {
      display: inline;
      white-space: normal !important;
    }

    /* 1️⃣ Insert a line break after “Terms of” */
    .popup-form .form-legal__line1 a[href*="tos-4"]::after {
      content: "\A";           /* line break */
      white-space: pre;
    }

    /* 2️⃣ Insert another break before “Privacy Policy” */
    .popup-form .form-legal__line2 a[href*="privacy-2"]::before {
      content: "\A";           /* new line before link */
      white-space: pre;
    }
  }

  /* Tooltip wrappers */
  .popup-form .field-wrap {
    position: relative;
    margin-bottom: 14px; /* gives room so tooltip doesn't cover next field */
  }

  .popup-form .field-wrap--narrow { width: 60%; }
  .popup-form .field-wrap--wide   { width: 95%; }

  /* make inputs fill the wrapper now */
  .popup-form .field-wrap input,
  .popup-form .field-wrap select,
  .popup-form .field-wrap textarea {
    width: 100%;
  }

  /* Tooltip bubble */
  .popup-form .field-hint {
    position: absolute;
    left: 0;
    top: calc(100% + -2px);

    max-width: min(34ch, 80vw);
    white-space: pre-line;

    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.25;
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;

    pointer-events: none;
    z-index: 1205;
  }

  /* little arrow */
  .popup-form .field-hint::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.88);
  }

  /* show when JS toggles is-error */
  .popup-form .field-hint.is-error {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
  }

  /* center tooltip under the wide (textarea) field */
  .popup-form .field-wrap--center .field-hint{
    left: 50%;
    transform: translate(-50%, -4px); /* keep your “lift” */
  }

  .popup-form .field-wrap--center .field-hint.is-error{
    transform: translate(-50%, -11px);
  }

  /* center the arrow too */
  .popup-form .field-wrap--center .field-hint::before{
    left: 50%;
    transform: translateX(-50%);
  }

  /* small screens: tighter tooltip width */
  @media (max-width: 474px) {
    .popup-form .field-hint { max-width: 40ch; }
  }
  @media (max-width: 375px) {
    .popup-form .field-hint { max-width: 30ch; }
  }

  /* ✅ Job Description tooltip: wider line length (wins over the 25ch clamp) */
  .popup-form #popupMessageHint.field-hint{
    width: min(50ch, 68vw) !important;
    max-width: min(50ch, 68vw) !important;
  }

  /* keep your other tooltips tight, but NOT this one */
  @media (max-width: 474px){
    .popup-form #popupMessageHint.field-hint{
      width: min(40ch, 75vw) !important;
      max-width: min(40ch, 75vw) !important;
    }
  }

  @media (max-width: 420px){
    .popup-form #popupMessageHint.field-hint{
      width: min(35ch, 70vw) !important;
      max-width: min(35ch, 70vw) !important;
    }
  }

  @media (max-width: 375px){
    .popup-form #popupMessageHint.field-hint{
      width: min(28ch, 65vw) !important;
      max-width: min(28ch, 65vw) !important;
    }
  }
  
  /* ✅ Under 475px — widen ONLY the Email tooltip, but keep LEFT edge aligned to input */
  @media (max-width: 474px) {
    #popupEmailHint.field-hint {
      left: 0 !important;                 /* ✅ lock to input/field-wrap left edge */
      right: auto !important;
      transform: translateY(-4px) !important;

      width: auto !important;             /* ✅ don't use max-content (prevents weird sizing) */
      max-width: min(54ch, 92vw) !important;

      white-space: normal;
      overflow-wrap: anywhere;
    }

    #popupEmailHint.field-hint.is-error {
      transform: translateY(0) !important;
    }

    /* arrow can stay default (left:14px) or use this if you want it centered */
    /* #popupEmailHint.field-hint::before { left: 50%; transform: translateX(-50%); } */
  }

  /* ✅ Clamp again under ~420px */
  @media (max-width: 420px) {
    #popupEmailHint.field-hint {
      max-width: min(46ch, 88vw) !important;
    }
  }

  /* ✅ Clamp again under ~375px */
  @media (max-width: 375px) {
    #popupEmailHint.field-hint {
      max-width: min(38ch, 84vw) !important;
    }
  }


  /* ✅ <=388px — prettier wraps (no breaking inside link text) */
  @media (max-width: 388px) {
    .popup-form .form-legal{
      max-width: 28ch;          /* tweak 26–32ch to taste */
      margin: -.15rem auto 0.15rem;
      text-wrap: balance;       /* modern Chrome: nicer line balancing (safe if ignored) */
    }

    /* Prevent: "Terms of" / "Service" splitting */
    .popup-form .form-legal a{
      white-space: nowrap;
    }

    /* Make sure your small-screen inline/wrap behavior stays enabled */
    .popup-form .form-legal__line1,
    .popup-form .form-legal__line2{
      display: inline;
      white-space: normal !important;
    }
  }