body {
  font-family: "Poppins", sans-serif;
  color: #0c0c0c;
  background-color: #ffffff;
}

.layout_padding {
  padding-top: 90px;
  padding-bottom: 90px;
}

.layout_padding2 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.layout_padding2-top {
  padding-top: 45px;
}

.layout_padding2-bottom {
  padding-bottom: 45px;
}

.layout_padding-top {
  padding-top: 90px;
}

.layout_padding-bottom {
  padding-bottom: 90px;
}
/* 1) Global safety net */
html, body { overflow-x: hidden; }

/* 2) Prefer small viewport width that plays nicer with scrollbars/OS UI */
@supports (width: 100svw) {
  #hero-1785 {
    width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
  .additional-bar::before,
  .additional-bar::after {
    width: 100svw;
  }
}

/* ---------------------------- */
/*        Hero Section          */
/* ---------------------------- */

/* ============ Basics ============ */
.heading_container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.heading_container h2 {
  position: center;
  font-weight: bold;
  margin-right: 10px;
}

/* Site header sits over hero (transparent header) */
.header_section {
  position: absolute;
  top: 0; left: 0; width: 100%;
  z-index: 10;
  background: transparent;
}
/* Optional readability gradient behind nav */
.header_section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6rem; /* match your nav height */
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  z-index: -1;
}

.hero_area {
  height: auto;            /* let #hero-1785 control height */
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #2C3539;
}
.sub_page .hero_area { height: auto; }

.header_section .container { padding: 0; }
.header_section .nav_container { margin: 0 auto; }

/* ============ HERO ============ */
/* Full-bleed hero that escapes container and fills viewport */
#hero-1785 {
  position: relative;
  /* Height */
  height: 100dvh;
  /* Full-bleed width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Layout */
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Padding (top equals header height) */
  padding: 6rem 1rem clamp(3rem, 6vw, 5rem);
  background-color: #2C3539; /* fallback under images */
  z-index: 1;
}
@supports (height: 100svh) {
  #hero-1785 { height: 100svh; }
}

/* Content above overlays/background */
#hero-1785 .cs-container {
  position: relative;
  z-index: 2;
  width: min(100%, 80rem);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#hero-1785 .cs-content {
  width: 100%;
  max-width: 46.875rem;
}

/* Headline & text (gold) */
#hero-1785 .cs-title {
  font-size: clamp(3.0625rem, 6vw, 5.25rem);
  font-weight: 700;
  color: #EBC900;
}
#hero-1785 .cs-text {
  color: #EBC900;
  margin-bottom: 2rem;
}

/* Button — glass + gold */
#hero-1785 .cs-button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#hero-1785 .cs-button-solid {
  font-size: 1rem;
  font-weight: 700;
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  min-width: 12.5rem;
  padding: 0 1.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;

  color: #EBC900;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(235,201,0,0.35);

  outline: none; box-shadow: none;
  -webkit-tap-highlight-color: rgba(235,201,0,0.25);
  transition: background-color .3s, border-color .3s, color .3s;
}
#hero-1785 .cs-button-solid::before {
  content: "";
  position: absolute; inset: 0;
  width: 0%;
  background: rgba(235,201,0,0.15);
  border-radius: inherit;
  z-index: -1;
  transition: width .3s;
}
#hero-1785 .cs-button-solid:hover::before { width: 100%; }
#hero-1785 .cs-button-solid:hover {
  background-color: rgba(0,0,0,0.55);
  border-color: rgba(235,201,0,0.5);
  color: #EBC900;
}
#hero-1785 .cs-button-solid:focus-visible {
  outline: 2px solid #EBC900;
  outline-offset: 3px;
}

/* Background image layer */
#hero-1785 .cs-background {
  position: absolute;
  inset: 0;
  z-index: -2;
}
#hero-1785 .cs-background::before {
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: 0.7;          /* darken overall hero bg */
  pointer-events: none;
  z-index: 1;
}
#hero-1785 .cs-background img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Decorative bottom graphic (sits above bg, below overlays) */
/* Make it black & semi-transparent; tweak these two values */
#hero-1785 .cs-graphic {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 0;
  height: auto;
  object-fit: cover;
  z-index: 0;

  filter: brightness(0);  /* turns it black */
  opacity: 0.45;          /* <-- adjust overall strength (0–1) */
}
#hero-1785 .cs-graphic-dark { display: none; }

/* Fades (overlay layers) */
/* Top fade: hero image -> header color */
#hero-1785::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: clamp(4rem, 8vw, 12rem);
  background: linear-gradient(to top, transparent, #2C3539);
  z-index: 1;                /* above bg & .cs-graphic, below content */
  pointer-events: none;
}
/* Bottom dark fade over .cs-graphic to blend into next section */
/* Bottom fade: hero -> services color */
#hero-1785::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(6rem, 12vw, 18rem);                 /* responsive */
  background: linear-gradient(to bottom, transparent, #2C3539);
  z-index: 1;                                        /* above bg/.cs-graphic, below content */
  pointer-events: none;
}


/* Large Desktop extra bottom padding for any decorative SVG scaling */
@media (min-width: 120rem) {
  #hero-1785 { padding-bottom: 14vw; }
}





.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 7px 20px;
  margin: 10px 15px;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 15px;
}

.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
  background-color: #765D13;
  color: #ffffff;
}

.custom_nav-container .navbar-nav .nav-item.dropdown:hover .nav-link,
.custom_nav-container .navbar-nav .nav-item.dropdown:focus .nav-link {
  background-color: #765D13;
  color: #ffffff;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
}

.navbar-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-brand img {
  margin-right: 10px;
  margin-top: 30px;
  width: 300px;
}

.navbar-brand span {
  font-size: 22px;
  font-weight: 700;
  color: #765D13;
}

.custom_nav-container {
  z-index: 99999;
}

.navbar-expand-lg .navbar-collapse {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.custom_nav-container .navbar-toggler {
  outline: none;
  padding: 0;
  width: 37px;
  height: 42px;
}

.custom_nav-container .navbar-toggler span {
  display: block;
  width: 35px;
  height: 4px;
  background-color: #765D13;
  margin: 7px 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 0;
  margin-bottom: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
  display: none;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: 0;
  margin-top: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
  -webkit-transform: none;
  transform: none;
}

/* Additional styles for extending the active page's background downwards */

.custom_nav-container .navbar-nav .nav-link {
  position: relative;
  z-index: 1;
}

/* Styles for dropdown menu */
.custom_nav-container .navbar-nav .nav-link.dropdown-toggle {
  color: #ffffff;
}

.custom_nav-container .navbar-nav .nav-link.dropdown-toggle:hover,
.custom_nav-container .navbar-nav .nav-link.dropdown-toggle:focus {
  color: #ffffff;
}

.custom_nav-container .navbar-nav .dropdown-menu {
  background-color: #ffffff; /* Background color for the dropdown menu */
  border-radius: 5px; /* Adjust border-radius for more rounded corners */
  padding: 0px 0px; /* Adjust padding to make it smaller */
  margin-top: 0px; /* Adjust margin-top to align with the nav elements */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.custom_nav-container .navbar-nav .dropdown-item {
  color: #765D13;
  text-align: center; /* Center-align the text */
  width: 100%; /* Take up the full width of the container */
  height: 30px; /* Adjust height to make it smaller */
  line-height: 20px;
  display: flex; /* Use flexbox */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  text-transform: uppercase;
  font-size: 14px; /* Adjust font size */
}

.custom_nav-container .navbar-nav .dropdown-item:hover,
.custom_nav-container .navbar-nav .dropdown-item:focus {
  background-color: #EBC900;
  color: #ffffff;
  border-radius: 5px;
}

.custom_nav-container .navbar-nav .dropdown-menu::before {
  border-bottom-color: #ffffff;
}


.additional-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

.additional-bar::before,
.additional-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  /* Gold in the center → transparent at edges */
  background: linear-gradient(
    to right,
    transparent 0%,
    #EBC900 15%,
    #765D13 85%,
    transparent 100%
  );
  z-index: -1;
}


.additional-bar::before {
  top: 0;
}

.additional-bar::after {
  bottom: 0;
}

.additional-bar img {
  max-width: 65px;
  height: auto;
}

.text-content {
  margin-left: 10px;
  color: #ffffff;
}

.text-content p {
  margin: 0;
}




/*end header section*/
/* slider section */
.slider_section {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
  color: #EBC900;

}

.slider_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider_section .detail_box {
  color: #ffffff;
}


.slider_section .detail_box h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size:38px;
}

.slider_section .detail_box p {
  margin-top: 20px;
  font-size:20px;
}

.slider_section .detail_box a {
  display: inline-block;
  padding: 10px 40px; /* Adjust values as needed */
  background-color: #765D13;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 35px; /* Adjust values as needed */
}

.slider_section .detail_box a:hover {
  background-color: #EBC900;
}

.slider_section .img_container {
  border: 7px solid #765D13;
  border-radius: 100%;
  overflow: hidden;
}

.slider_section .img_container div#carouselExampleContarols {
  width: 100%;
  position: unset;
}

.slider_section .img_container .img-box img {
  width: 100%;
}

.slider_section .carousel-control-prev,
.slider_section .carousel-control-next {
  top: initial;
  left: initial;
  bottom: 5%;
  right: 10%;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: center;
}

.slider_section .carousel-control-prev {
  background-image: url(../images/prev.png);
  background-color: #ffffff;
  -webkit-transform: translate(-85px, 30px);
          transform: translate(-85px, 30px);
}

.slider_section .carousel-control-next {
  background-image: url(../images/next.png);
  background-color: #725443;
  -webkit-transform: translate(-45px, 0);
          transform: translate(-45px, 0);
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-2437 {
    padding: 2rem 1rem 2rem 1rem;
    background-color: #2C3539;
    position: relative;
    z-index: 1;
  }
  #services-2437 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 26.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-2437 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  
  #services-2437 .cs-title {
    font-weight: 550;
    margin-top: 5rem;
    width: 100%;
    max-width: 25ch;
    margin: 0;
    color: #EBC900;
  }
  #services-2437 .cs-text {
    margin-top: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #services-2437 .cs-button-solid {
    margin-bottom: 2rem;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #services-2437 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #services-2437 .cs-button-solid:hover:before {
    width: 100%;
  }
  #services-2437 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.9vw, 1.25rem);
  }
  #services-2437 .cs-item {
    list-style: none;
    width: 100%;
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #services-2437 .cs-item:hover .cs-border {
    opacity: 1;
  }
  /* Glassy dark card */
/* Glassy dark card */
/* Glassy dark card */
/* === Glassy Dark Cards with Gold Text === */

/* === Force this section to use gold instead of blue === */
#services-2437 { --primary: #EBC900; }

/* === Glassy Dark Cards with Gold Text === */
#services-2437 .cs-link {
  width: 100%;
  height: 100%;
  text-decoration: none;
  padding: 1.5rem clamp(1rem, 2.6vw, 1.25rem);

  /* Glass effect background */
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  z-index: 2;

  /* Style */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;

  /* Text + interaction resets */
  color: #EBC900;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: rgba(235, 201, 0, 0.25);
}

#services-2437 .cs-link .cs-h3,
#services-2437 .cs-link .cs-item-text {
  color: #EBC900;
  transition: opacity 0.3s, color 0.3s;
}

/* Hover: background darkens, text fades slightly */
#services-2437 .cs-link:hover {
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
}
#services-2437 .cs-item:hover .cs-h3,
#services-2437 .cs-item:hover .cs-item-text {
  color: #EBC900 !important;
  opacity: 0.7;
}

/* Focus: gold outline instead of blue */
#services-2437 .cs-link:focus,
#services-2437 .cs-link:active {
  outline: none;
  box-shadow: none;
}
#services-2437 .cs-link:focus-visible {
  outline: 2px solid #EBC900;
  outline-offset: 3px;
}

/* Border accent lines -> switch gradients to gold */
#services-2437 .cs-border1:before {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #EBC900 0%, rgba(0,0,0,0) 78%);
}
#services-2437 .cs-border1:after {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, #EBC900 0%, rgba(0,0,0,0) 78%);
}
#services-2437 .cs-border2:before {
  width: 100%;
  height: 1px;
  top: auto; bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0) 22%, #EBC900 100%);
}
#services-2437 .cs-border2:after {
  width: 1px;
  height: 100%;
  left: auto; right: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 22%, #EBC900 100%);
}

/* === Button: gold + glass to match cards === */
#services-2437 .cs-button-solid {
  font-size: 1rem;
  line-height: clamp(2.875em, 5.5vw, 3.5em);
  font-weight: 700;
  text-align: center;
  min-width: 9.375rem;
  padding: 0 1.5rem;
  border-radius: 0.5rem;

  color: #EBC900;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(235, 201, 0, 0.35);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  text-decoration: none;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: rgba(235, 201, 0, 0.25);
}

/* Button hover fill (use subtle gold film) */
#services-2437 .cs-button-solid:before {
  content: '';
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(235, 201, 0, 0.15);
  border-radius: inherit;
  z-index: -1;
  transition: width 0.3s;
}
#services-2437 .cs-button-solid:hover:before {
  width: 100%;
}
#services-2437 .cs-button-solid:hover {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: rgba(235, 201, 0, 0.5);
  color: #EBC900;
}

/* Button focus ring */
#services-2437 .cs-button-solid:focus-visible {
  outline: 2px solid #EBC900;
  outline-offset: 3px;
}



  #services-2437 .cs-picture {
    width: 100%;
    height: 100vw;
    max-height: 26.25rem;
    display: block;
    position: relative;
  }
  #services-2437 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #services-2437 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #services-2437 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #services-2437 .cs-border {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #services-2437 .cs-border:before {
    content: '';
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-2437 .cs-border:after {
    content: '';
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #services-2437 .cs-border1:before {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--primary) 0%, rgba(0, 0, 0, 0) 78%);
  }
  #services-2437 .cs-border1:after {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary) 0%, rgba(0, 0, 0, 0) 78%);
  }
  #services-2437 .cs-border2:before {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 22%, var(--primary) 100%);
    top: auto;
    bottom: 0;
  }
  #services-2437 .cs-border2:after {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, var(--primary) 100%);
    left: auto;
    right: 0;
  }
  #services-2437 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-2437 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.08;
    /* Makes img tag act as a background image */
    object-fit: cover;
    z-index: -2;
  }
  /* Fade at the top of the services section */
/* Ensure stacking order: background < fade < content */
#services-2437 { position: relative; z-index: 0; }

/* Your existing background image should be behind everything */
#services-2437 .cs-background {
  position: absolute;
  inset: 0;
  z-index: -2;         /* lowest */
}

/* Put the fade on the BACKGROUND layer, not over content */
#services-2437 .cs-background::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(4rem, 8vw, 12rem); /* responsive fade height */
  background: linear-gradient(to top, transparent, #2C3539);
  z-index: -1;         /* above bg image, below content */
  pointer-events: none;
}

/* Make sure content sits above the fade */
#services-2437 .cs-content,
#services-2437 .cs-card-group {
  position: relative;
  z-index: 1;
}


}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-2437 .cs-container {
    max-width: 80rem;
  }
  #services-2437 .cs-item {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-2437 .cs-item {
    grid-column: span 3;
  }
  #services-2437 .cs-item:hover:before {
    opacity: 1;
  }
  #services-2437 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
}
/* === Services bottom fade into About === */
#services-2437 {
  position: relative;
  z-index: 0; /* so the fade sits behind content */
}

#services-2437::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: clamp(4rem, 10vw, 12rem); /* responsive fade height */
  background: linear-gradient(to bottom, transparent, #2C3539);
  z-index: -1;          /* behind cards/text, above background image */
  pointer-events: none; /* doesn’t block clicks */
}

                                




/* ============================= */
/*   About Section - Centered    */
/* ============================= */

/* Remove/hide old image container */
.about_section .img_container {
  display: none !important;
}

/* Section background */
/* About uses the same paint background as Services (fixed stacking) */
.about_section {
  position: relative;         /* create stacking context */
  z-index: 0;                 /* base layer */
  background-color: #2C3539;
  overflow: hidden;
}

/* The image layer sits ABOVE the background color, BELOW content */
.about_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/paint.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;              /* adjust strength */
  z-index: 0;                 /* <-- not negative */
  pointer-events: none;
}
/* Top fade for About section */
.about_section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: clamp(4rem, 8vw, 12rem); /* responsive height */
  background: linear-gradient(to top, transparent, #2C3539);
  z-index: 1;                /* sits above background image, below content */
  pointer-events: none;      /* don’t block clicks */
}


/* Ensure content is painted above the image layer */
.about_section .heading_container,
.about_section .heading_text,
.about_section .detail-box,
.about_section a {
  position: relative;
  z-index: 1;
}


/* Text container */
.about_section .detail-box {
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: 60rem;       /* keep text nicely readable */
  padding: 0 1rem;        /* side breathing space */
  text-align: center;
}

/* Headings inside About */
.about_section .detail-box h1,
.about_section .detail-box h2,
.about_section .detail-box h3,
.about_section .detail-box h4,
.about_section .detail-box h5,
.about_section .detail-box h6 {
  color: #EBC900;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

/* Paragraphs inside About */
.about_section .detail-box p {
  margin-top: 1rem;
  color: #EBC900;
  opacity: 0.9;
  line-height: 1.6;
  text-align: center;
}

/* Button - glass + gold style */
.about_section .detail-box a {
  display: inline-block;
  min-width: 12.5rem;
  padding: 0 1.5rem;
  margin: 2rem auto 0 auto; /* center with space above */
  font-weight: 700;
  line-height: 3.25rem;
  text-decoration: none;
  text-align: center;
  border-radius: 0.5rem;
  position: relative;
  z-index: 1;

  color: #EBC900;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(235, 201, 0, 0.35);

  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: rgba(235, 201, 0, 0.25);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Hover film effect */
.about_section .detail-box a::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(235, 201, 0, 0.15);
  border-radius: inherit;
  z-index: -1;
  transition: width 0.3s;
}
.about_section .detail-box a:hover::before { width: 100%; }
.about_section .detail-box a:hover {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: rgba(235, 201, 0, 0.5);
  color: #EBC900;
}

/* Focus ring (gold) */
.about_section .detail-box a:focus-visible {
  outline: 2px solid #EBC900;
  outline-offset: 3px;
}
/* ==== About: match Hero/Services center geometry ==== */

/* Use the same site container width and centering */
.about_section .container,
.about_section .row {
  width: 100%;
  max-width: 80rem;         /* same as #hero-1785 .cs-container & #services-2437 .cs-container */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;       /* same side padding rhythm */
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Kill Bootstrap row gutters that skew centering */
.about_section .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex;
  justify-content: center;  /* center the only column */
  align-items: center;
}

/* Force the column to full width inside the site container */
.about_section .row > * {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Center the actual text block; keep readable line-length */
.about_section .detail-box {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 60rem;         /* readable; feel free to bump to 66–72rem */
  padding: 0 0;             /* section handles the 1rem side padding */
  text-align: center;
}

/* In case any col- offsets remain anywhere */
.about_section [class*="offset-"] {
  margin-left: 0 !important;
}
/* === About: perfectly center the "About us" heading === */

/* Center the heading container in this section */
.about_section .heading_container {
  display: flex;
  justify-content: center;   /* was flex-start */
  align-items: center;
  text-align: center;         /* ensure inline content is centered */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 80rem;           /* match site container width */
  padding: 0 1rem;            /* match side padding rhythm */
  box-sizing: border-box;
}

/* Remove stray side offset on the H2 */
.about_section .heading_container h2 {
  margin: 0 0 1rem 0;         /* no margin-right */
  padding: 0;
}

/* If you have a decorative line via ::before, center it */
.about_section .heading_container h2::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

/* Kill any leftover Bootstrap column offsets around the heading */
.about_section .heading_container [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* About uses the same paint background as Services */
.about_section {
  position: relative;                 /* create a stacking context */
  background-color: #2C3539;          /* your base */
  overflow: hidden;                    /* hide any overflow */
}

/* background layer */
.about_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/paint.png");
  background-size: cover;             /* fill & crop similar to object-fit: cover */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;                       /* match Services’ subtlety */
  z-index: -1;                         /* behind content */
  pointer-events: none;
}





/* =============================== */
/*        Contact – Unified        */
/* =============================== */

#contact-1750 {
  --primary: #EBC900;
  position: relative;
  z-index: 0;
  background-color: #2C3539;
  border-top: 5px solid var(--primary);
  overflow: hidden; /* keeps fades tidy */
}

/* Section fades (behind content and map) */
#contact-1750::before,
#contact-1750::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(2rem, 6vw, 6rem);
  pointer-events: none;
  z-index: -1; /* ensure fades never cover content/map */
}
#contact-1750::before { top: 0;    background: linear-gradient(to bottom, #2C3539, transparent); }
#contact-1750::after  { bottom: 0; background: linear-gradient(to top,    #2C3539, transparent); }

/* Container aligned with other sections */
#contact-1750 .cs-container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) 1rem;
  background: transparent;
  transform: none !important; /* kill old shift */
}

/* Headings */
#contact-1750 .cs-content { text-align: center; align-items: center; }
#contact-1750 .cs-topper { color: #EBC900; opacity: .85; }
#contact-1750 .cs-title  { color: #EBC900; font-weight: 700; margin: 0 0 1.25rem; }

/* Two-column at tablet+ */
@media (min-width: 48rem) {
  #contact-1750 .cs-container {
    display: flex;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: flex-start;
  }
  #contact-1750 .cs-form-group { flex: 1; }
  #contact-1750 .cs-info-group { flex: 1; }
}

/* Info text theme */
#contact-1750 .cs-info-group { display: flex; flex-direction: column; gap: 1.25rem; }
#contact-1750 .cs-detail     { color: #EBC900; }

/* Form grid */
#contact-1750 .cs-form {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* Labels above inputs with consistent gap */
#contact-1750 .cs-label {
  grid-column: span 12;
  color: #EBC900;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.2;
  margin: 0;
}

/* Inputs – glass + gold */
#contact-1750 .cs-input {
  font-size: 1rem;
  width: 100%;
  height: clamp(2.875rem, 4.5vw, 3.5rem);
  box-sizing: border-box;
  padding: 0 1rem;
  color: #EBC900;
  background-color: rgba(0,0,0,.4);
  border: 1px solid rgba(235,201,0,.35);
  border-radius: .5rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#contact-1750 .cs-input::placeholder { color: rgba(235,201,0,.7); }
#contact-1750 .cs-textarea { min-height: 8rem; padding: .75rem 1rem; resize: vertical; }
#contact-1750 .cs-input:focus,
#contact-1750 .cs-textarea:focus {
  border-color: rgba(235,201,0,.6);
  box-shadow: 0 0 0 3px rgba(235,201,0,.2);
}

/* Submit button – glass + gold */
#contact-1750 .cs-button-solid {
  font-size: 1rem;
  font-weight: 700;
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  min-width: 12rem;
  padding: 0 1.5rem;
  border-radius: .5rem;
  display: inline-block;
  position: relative;
  z-index: 1;
  color: #EBC900;
  background-color: rgba(0,0,0,.4);
  border: 1px solid rgba(235,201,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .3s, border-color .3s, color .3s;
  outline: none; box-shadow: none;
}
#contact-1750 .cs-button-solid::before {
  content: "";
  position: absolute; inset: 0;
  width: 0%;
  background: rgba(235,201,0,.15);
  border-radius: inherit;
  z-index: -1;
  transition: width .3s;
}
#contact-1750 .cs-button-solid:hover::before { width: 100%; }
#contact-1750 .cs-button-solid:hover {
  background-color: rgba(0,0,0,.55);
  border-color: rgba(235,201,0,.5);
  color: #EBC900;
}
#contact-1750 .cs-button-solid:focus-visible { outline: 2px solid #EBC900; outline-offset: 3px; }

/* ===== Map block directly under the contact content ===== */

/* Neutralize ALL legacy picture-group desktop hacks */
@media (min-width: 64rem) {
  #contact-1750 .cs-picture-group {
    position: static !important;
    width: 100% !important;
    height: auto !important;  /* height is defined on .cs-map-group */
    max-height: none !important;
    left: auto !important; right: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 0 !important;
  }
}

/* Full-bleed breakout utility */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100svw) {
  .full-bleed {
    width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}

/* Map group: block in normal flow, directly after .cs-container */
#contact-1750 .cs-map-group {
  display: block;
  position: relative;   /* creates containing block for iframe */
  z-index: 0;
  height: clamp(24rem, 60vh, 44rem); /* give it real height */
  margin-top: clamp(2rem, 5vw, 4rem); /* space above map */
}

/* Make the iframe fill */
#contact-1750 .cs-map-group .cs-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 0;
}

/* Decorative graphics sit above the map without blocking interactions */
#contact-1750 .cs-map-group .cs-graphic {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* Safety: avoid accidental horizontal scrollbar */
html, body { margin: 0; overflow-x: hidden; }

/* ===== Fix map overlapping contact content ===== */

/* 1) Make the content a positioned layer above the map */
#contact-1750 .cs-container {
  position: relative !important;
  z-index: 2 !important;   /* content above */
}

/* 2) Map block sits below content, in normal flow, with spacing */
#contact-1750 .cs-map-group {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;   /* below content, above section fades */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  /* ensure it doesn't overlap upward */
  margin-top: clamp(2rem, 5vw, 4rem) !important;

  /* real height so the iframe can fill it */
  height: clamp(24rem, 60vh, 44rem) !important;
}

/* 3) The iframe fills only its own container */
#contact-1750 .cs-map-group .cs-map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  z-index: 0 !important;
}

/* 4) Neutralize ANY legacy rules on picture group at all breakpoints */
#contact-1750 .cs-picture-group {
  position: static !important;   /* not absolute */
  width: 100% !important;
  height: auto !important;       /* height is on .cs-map-group */
  max-height: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 0 !important;
}

/* 5) Button can keep its z-index, but other content no longer needs it */
#contact-1750 .cs-button-solid { z-index: 3; } /* harmless; above both */

/* 6) Keep full-bleed horizontally without affecting vertical stacking */
.cs-map-group.full-bleed {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
@supports (width: 100svw) {
  .cs-map-group.full-bleed {
    width: 100svw !important;
    margin-left: calc(50% - 50svw) !important;
    margin-right: calc(50% - 50svw) !important;
  }
}
/* ===== Contact form + info blocks with glass backgrounds ===== */

/* Wrap each main content group in a glass card */
#contact-1750 .cs-form-group,
#contact-1750 .cs-info-group {
  background-color: rgba(0, 0, 0, 0.75); /* semi-transparent dark */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(235,201,0,0.35); /* subtle gold outline */
  border-radius: 0.75rem;

  padding: 2rem;
  z-index: 2; /* above map */
  position: relative;
}

/* Make text inside pop against the background */
#contact-1750 .cs-form-group,
#contact-1750 .cs-info-group,
#contact-1750 .cs-form-group label,
#contact-1750 .cs-info-group .cs-detail,
#contact-1750 .cs-info-group .cs-topper {
  color: #EBC900 !important;
}

/* Adjust spacing between blocks at tablet+ */
@media (min-width: 48rem) {
  #contact-1750 .cs-container {
    align-items: flex-start;
  }
  #contact-1750 .cs-form-group,
  #contact-1750 .cs-info-group {
    flex: 1;
  }
}
/* Make sure the map container hides overflow */
#contact-1750 .cs-map-group {
  overflow: hidden !important;
}

/* Default: no shift on small screens (map centered) */
#contact-1750 .cs-map-group .cs-map {
  transform: none !important;
  width: 100% !important;
  left: 0 !important;
}

/* Desktop: shift map content so the pin appears to the right */
@media (min-width: 64rem) {
  #contact-1750 .cs-map-group .cs-map {
    /* expand canvas and slide it left */
    width: 120% !important;          /* show extra map on the right */
    left: -10% !important;           /* OR: transform: translateX(-10%); */
    transform: none !important;      /* use left offset for clarity */
  }
}

/* If the pin still sits under your cards, nudge a bit more: -12% / width:124%, etc. */
/* Example fine-tunes:
@media (min-width: 64rem) {
  #contact-1750 .cs-map-group .cs-map { width: 125% !important; left: -12.5% !important; }
}
*/












.footer_bg {
  background-image: url(../images/footer-bg.png);
  background-size: cover;
  background-position: top;
}

/* info section */
.info_section {
  background-color: #2C3539;
  color: #ffffff;
  border-top:5px solid#EBC900;
}

.info_section h6 {
  font-weight: bold;
}

.info_section .info_contact {
  margin-top: 5px;
  margin-bottom: 5px;
}

.info_section .info_contact .col-md-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.info_section .info_contact a {
  color: #ffffff;
}

.info_section .info_contact img {
  max-width: 100%;
  margin-right: 10px;
}

.info_section .info_form {
  margin: 0 auto;
  margin-bottom: 45px;
}

.info_section .info_form h4 {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.info_section .info_social {
  display: flex;
  justify-content: left;
  align-items: center;
}

.info_section .info_social img {
  width: 35px;
  margin-right: 8px;
}


/* end info section */
/* footer section*/
.footer_section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.footer_section p {
  color: #222222;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.footer_section p a {
  color: #222222;
}
/*# sourceMappingURL=style.css.map */

#cookieBanner {
  display: none;               /* hidden until triggered */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #765D13;         /* banner background */
  color: #fff;                 /* text color */
  padding: 10px;
  text-align: center;
  z-index: 9999;
  font-size: 0.95rem;
}

#cookieBanner a {
  color: #EBC900;                 /* link color */
  font-weight: bold;
  text-decoration: underline;
}

#cookieBanner a:hover {
  color: #EBC900;              /* hover effect to match your gold accent */
}

/* ========= Shared: set a single source of truth for header height ========= */
:root { --headerH: 6rem; } /* match your real nav height */

/* Hero page uses transparent header over the image */
#hero-1785 { padding-top: var(--headerH); }
.header_section::before { height: var(--headerH); }

/* ========= Sub pages (no hero under the header) ========= */
/* Make header normal (not absolute) + give it a solid background */
.sub_page .header_section {
  position: sticky;   /* or 'relative' if you prefer */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: #2C3539;          /* solid header so text is readable */
}

/* Remove the transparent-header gradient strip on sub pages */
.sub_page .header_section::before {
  content: none !important;
}

/* Push page content below the header on sub pages */
.sub_page main { padding-top: var(--headerH); }

/* If you don't use <main>, target your first section instead: */
.sub_page #services-2437 { padding-top: var(--headerH); }  /* keep if needed */

/* Optional: if you added a tiny negative margin to hide seams, undo it here */
.sub_page #services-2437 { margin-top: 0; }