body {
    background-image: url('https://25146181.fs1.hubspotusercontent-eu1.net/hubfs/25146181/Title-%281%29.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
      background-repeat: repeat; /* Or repeat-x/repeat-y as needed */
}

/* Hide the white box and arrow */
.header__menu-child-toggle {
    display: none !important;
}

/* Hide the submenu by default */
.header__menu-submenu {
    display: none;
}

/* Show the submenu when hovering over the "Our Services" link */
.header__menu-item:hover .header__menu-submenu {
    display: block;
}

/* Increase the width of the submenu */
.header__menu-submenu {
    width: auto; /* Set to 'auto' to allow the submenu to expand as needed */
    white-space: nowrap; /* Prevent line breaks for menu items */
}

/* Ensure that menu items stay on a single line in a vertical list */
.header__menu-submenu li {
    display: block; /* Display items in a vertical list */
    margin-bottom: 5px; /* Adjust the spacing between menu items as needed */
}


@media (max-width: 767px) {
    /* Ensure hamburger menu is visible */
    .header__menu-toggle--open {
        display: block !important;
        background: none;
        border: none;
    }

    /* Style for the hamburger icon (if it's an SVG or similar) */
    .header__menu-toggle--open svg {
        fill: white; /* Change this if you want a different color */
    }

    /* Mobile navigation menu (hidden initially) */
    .header__menu--mobile {
        display: none;
        /* Other styles as previously mentioned */
    }

    /* Other styles for close button, menu links, etc., as previously mentioned */
}

@media (max-width: 767px) {
    /* Hamburger menu style */
    .header__menu-toggle--open {
        display: block;
        background: none;
        border: none;
    }

    /* Close button style */
    .header__menu-toggle--close {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        z-index: 1001;
    }

    /* Mobile navigation menu style */
    .header__menu--mobile {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        padding-top: 60px; /* Adjust based on header height */
    }

    /* Style for the menu links */
    .header__menu-wrapper a {
        color: white;
        padding: 15px;
        display: block;
        text-decoration: none;
        font-family: 'Barlow Condensed', sans-serif;
    }

    /* Adjustments for active and hover states */
    .header__menu-link--active-link, .header__menu-wrapper a:hover {
        background-color: #333; /* Darker background for active/hover state */
    }
  @media (max-width: 767px) {
    /* Toggle menu display on clicking hamburger icon */
    .header__menu-toggle--open:checked ~ .header__menu--mobile {
        display: block;
        background-color: black; /* Solid black background */
        color: white; /* White text for menu items */
        position: absolute;
        width: 100%; /* Adjust as needed */
        top: 100%; /* Adjust if needed */
        left: 0;
        z-index: 10; /* Ensure it's above other content */
    }

    /* Menu item styling */
    .header__menu--mobile a {
        color: white; /* White text for links */
        /* Add other styles for padding, margins, etc. */
    }

    /* Pink dot (bullet) accents */
    .header__menu--mobile a:before {
        content: "●"; /* Unicode for bullet point */
        color: var(--bullet-color, var(--accent-color)); /* Pink color */
        margin-right: 10px;
    }

    /* Ensure cross icon appears when menu is open */
    .header__menu-toggle--open:checked ~ .header__menu-toggle--close {
        display: block !important; /* Show the close button */
    }
}
  
  /* General Styles for the Hamburger Icon */
.header__menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.header__menu-toggle--open,
.header__menu-toggle--close {
  display: block;
}

/* Display Toggle for the Mobile Menu */
.header__menu--mobile {
  display: none;
}

.header__menu--mobile.header__menu--show {
  display: block;
}

/* Additional Styling */
/* Add here any additional styling that is required */

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  /* Styles for mobile view */
  .header__menu-toggle {
    display: block; /* Show hamburger icon */
  }

  /* Hide Desktop Menu */
  .header__menu--desktop {
    display: none;
  }

  /* Add other responsive styles as needed */
}

@media screen and (min-width: 769px) {
  /* Styles for desktop view */
  .header__menu-toggle--open,
  .header__menu-toggle--close {
    display: none; /* Hide hamburger icon */
  }

  .header__menu--mobile {
    display: none; /* Hide mobile menu */
  }

  /* Display Desktop Menu */
  .header__menu--desktop {
    display: block;
  }

  /* Add other responsive styles as needed */
}
  ol li:before, ul li:before {
  color: transparent; /* This will make the bullet color transparent */
  content: ""; /* This removes the bullet content */
  /* Keep the rest of the properties as they are, or adjust as needed */
}
  .header__menu-toggle--close {
  display: block; /* Ensure the close button is displayed */
  /* Add any additional styling here, such as position, size, color, etc. */
}

/* Or, if the SVG is inside a specific container with a class, use that class for more specificity */
.header__menu-toggle--close svg {
    fill: white;
    width: 24px;
    height: auto;
}
  /* Hide the close button by default */
.header__menu-toggle--close {
    display: none;
}

/* Show the close button only when the menu is open */
.header__menu-toggle--close.header__menu-toggle--show {
    display: block;
    color: white; /* Set the color of the SVG icon */
}

  .show-for-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Ensures text is not visually shown but is still readable by screen readers */
  
/* Make the submenu scrollable on mobile */
@media (max-width: 768px) { /* You can adjust the breakpoint as needed */
    .header__menu-submenu {
        max-height: 400px; /* Adjust the maximum height as needed */
        overflow-y: auto; /* Enable vertical scrolling if content overflows */
    }
}