.rooms1-img {
  width: 100%;
  max-width: 700px; /* Adjust as needed */
  height: 400px;     /* Set desired height */
  overflow: hidden;
}

.rooms1-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or use 'contain' if you want the whole image to fit */
  display: block;
}

.owl-theme .owl-dots .owl-dot span {
    width: 22px;
    height: 22px;
    margin: 0 3px;
    border-radius: 20%;
}
.board-img-card {
  background-color: #fff !important;
}

/* Increase spacing between the two columns */
.footer .top .row .col-6 {
  padding-right: 90px; /* optional on left column */
}

.footer .top .row .col-6:last-child {
  padding-left: 30px; /* adds gap between columns */
}

.footer-explore-list {
  padding: 0;
  margin: 0;
}

.footer-explore-list li {
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
}

.footer-explore-list .day {
  flex: 1 1 auto;
  min-width: 100px;
}

.footer-explore-list .hours {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.footer-explore-list .hours.closed {
  color: #bf9866;
}
.footer .top .item .social a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #bf9866;
    color: #fff;
    border-radius: 20%;
    margin-right: 3px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    display: inline-block;
}
.footer-hours li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.footer-hours .day {
  flex: 1;
  min-width: 90px;
}

.footer-hours .hours {
  flex: 1;
  text-align: right;
  white-space: nowrap;
}

.footer-hours .hours.closed {
  color: #bf9866;
}
.social-icons i {
  transition: color 0.3s ease;
}

.social-icons a:hover i {
  color: #cbdef5 !important;
}

.nav-scroll .dropdown .nav-link i {
    color: #6c757d;
}
.grecaptcha-badge {
  display: none !important;
}

.circled-price {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-weight: bold;
}

.circled-price::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* slightly larger than text */
  height: 160%;
  transform: translate(-50%, -50%);
  background: url('../img/circle.png') center center no-repeat;
  background-size: contain;
  z-index: -1;
  pointer-events: none;
}
.bg-vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* this is like data-overlay-dark="5" */
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

.banner-header.full-height h4 {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 40px;
    margin-top: 20px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    text-transform: none;
    font-family: 'Libre Caslon Display', serif;
}
.social a {
  font-size: 20px;
  color: #fff;
  margin-right: 15px;
  transition: color 0.3s;
}

.social a:hover {
  color: #bf9866;
}
.nav-scroll .logo-img {
    width: 320px;
}
.services4 {
  position: relative;
  overflow: hidden;
  height: 475px;
  width: 356px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.service-img {
  position: relative;
  height: 100%;
  width: 100%;
}

.service-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.service-img .img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}
.btn {
  display: inline-block;
  font-size: 16px;
  padding: 10px 22px;
  background: #004f59;
  border: 1px solid #282828;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 1px !important;
  color: #fff;
  letter-spacing: .5px;
  line-height: inherit;
  width: auto;
  font-family: "Work Sans", serif;
  font-weight: 400;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  text-shadow: 0px 0px #151616 !important;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px !important;
}

.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible {
  background: #fff;
  color: #2222229e;
  border-color: #415d56;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 3px 8px !important;
}
button.btn:hover,
button.btn:active,
button.btn:focus,
button.btn:focus-visible {
  background: #ebf5f5;
  color: #2222229e;
  border-color: #415d56;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 3px 8px !important;
}

/* Ensure the span inside the button changes color on hover */
.btn:hover span, 
.btn:active span {
  color: #232323 !important;
  text-shadow: 0px 0px #151616 !important;
}

.btn:focus {
  background: #ebf5f5;
  color: #2222229e !important;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px !important;
  border-color: #415d56 !important;
  text-shadow: 0px 0px #151616 !important;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 3px 8px !important;
}

.btn span {
  color: #fff;
  text-shadow: 0px 0px #151616 !important;
}
.text-muted {
    --bs-text-opacity: 1;
    color: #232323 !important;
    font-size: .95rem;
    font-weight: 400;
}
.service-header,
.service-wrap {
  position: relative;
  z-index: 3;
  padding: 10px 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}
.service-title.border-bot-light {
    position: relative;
    border-bottom: 1px solid #bf9866;
    padding: 8px 0px 15px 15px;
    margin-bottom: 35px;
}
.bg-timeline-section {
    --bs-bg-opacity: 1;
    background-color: #fafbfd !important;
}
.h5-dark {
  font-size: 1.55rem; /* equivalent to h5 */
  font-weight: 400;
  color: #222;
  margin-bottom: 1.5rem;
}
.h4-dark {
font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    line-height: 1.2em;
    margin: 0 0 15px 0;
    color: #222;

}
.h6-dark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    line-height: 1.2em;
    margin: 0 0 15px 0;
    color: #fff;
}
p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75em;
    color: #222222db;
    margin-bottom: 15px;
}
p-left {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.75em;
    color: #222222db;
    margin-bottom: 15px;
    text-align: left;
}
.bg-timeline-section {
    --bs-bg-opacity: 1;
    background-color: #105ea3 !important
}
.timeline {
  position: relative;
  margin: 0 auto;
  padding: 2rem 0;
  max-width: 960px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #ccc;
  transform: translateX(-50%);
}

.timeline-item {
  padding: 1rem 2rem;
  position: relative;
  width: 50%;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 1rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #222;
  border: 2px solid white;
  z-index: 1;
}

.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.left::before {
  right: -7px;
}

.timeline-item.right {
  left: 50%;
  text-align: left;
}

.timeline-item.right::before {
  left: -7px;
}

.timeline-content {
  background: #fafbfd !important;
  padding: 1.2rem;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.timeline-date {
  font-size: 2.0rem;
  color: #2272b9 !important;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.banner-header.full-height h1 {
    position: relative;
    margin-bottom: 15px;
    font-family: 'Libre Caslon Display', serif;
    font-size: 75px;
    line-height: 1.1em;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    color: #fff;
    font-weight: 400;
    text-shadow: 2px 2px #1b1b1b;
}
.header .caption h4 {
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 4px;
    color: #f2f3f5;
    margin-bottom: 15px;
    margin-top: 10px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    text-shadow: 2px 2px #000;
}
.header .caption p {
    font-family: 'Verdana', serif;
    font-size: 22px !important;
    line-height: 1.75em;
    margin-bottom: 0;
    color: #fff;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    margin-right: 15px;
    text-shadow: 1px 1px #000 !important;
}
.header .caption h1 {
    position: relative;
    margin-bottom: 15px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 50px !important;
    line-height: 1.2em;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    color: #fff;
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: 2px 2px #000;
}
.footer-powered-by {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.powered-link {
  display: inline-block;
  opacity: 0.5;
  background-color: transparent;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  max-width: 160px;
  width: auto;
}

.powered-link span {
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #598a87;
  font-size: 10px;
  display: block;
  line-height: 1;
}

.powered-link img {
  max-height: 30px;
  width: auto;
  height: auto;
  margin-top: 5px;
  display: block;
}
.membership-logos {
  background-color: #f3ece4;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.volunteer-icon {
    width: 95px;
    height: 83px;
    z-index: 2;
    margin-bottom: 10px;
    position: relative;
}

.membership-logo {
  width: 100%;
  max-width: 161px;
  height: auto;
  border: 1px solid #bf9866;
  border-radius: 10%;
  padding: 10px;
  transition: transform 0.3s ease;
}

.dropdown-toggle-bars {
  position: relative;
  width: 40px;
  height: 16px;
  display: inline-block;
  cursor: pointer;
  z-index: 1101;
}

.dropdown-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Top bar */
.dropdown-toggle-bars span:nth-child(1) {
  top: 0;
}

/* Middle bar */
.dropdown-toggle-bars span:nth-child(2) {
  top: 9px;
}

/* Bottom bar */
.dropdown-toggle-bars span:nth-child(3) {
  top: 18px;
}

/* Animate to X when .open is added */
.custom-dropdown.open .dropdown-toggle-bars span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
.find-home-btn-shift {
  margin-right: 20px; 
}

.custom-dropdown.open .dropdown-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.custom-dropdown.open .dropdown-toggle-bars span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}
.nav-scroll .navbar-nav .nav-link {
    color: #1b1b1b1b !important;
    text-shadow: 0px 0px #1b1b1b !important;
}
.nav-scroll .navbar-nav .nav-link:hover {
  color: #2e78bb !important;
}
.navbar .navbar-nav .nav-link {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #fff;
    margin: 6px;
    -webkit-transition: all .4s;
    transition: all .4s;
    padding-right: 12px;
    padding-left: 12px;
    letter-spacing: 1.5px;
    text-shadow: 0 0 #1b1b1b;
}
/* Match toggle height and spacing */
.phone-toggle-wrapper {
  height: 24px;
  column-gap: 24px;
}

/* Style phone icon like the toggler */
.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: 2px solid #fff;       /* white border */
  border-radius: 4px;            /* square with slightly rounded corners */
  color: #fff;                   /* white phone icon */
  background: transparent;       /* transparent background */
  text-decoration: none;
  padding: 0;
  margin: 0;
}
.phone-icon,
.phone-icon:hover,
.phone-icon:focus,
.phone-icon:active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1101;

  color: #ffffffdb !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  border: 1px solid #ffffffdb !important;
  border-radius: 4px !important;
}

.nav-scroll .fa-brands {
  color: #000 !important;
}
#mobileNav .fa-brands {
  color: #fff !important;
}
.counter-section {
  padding-top: 50px;
  padding-bottom: 50px;
}

  .counter-box h3 {
    color: #555;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
  }
  .counter-box p {
    font-size: 1rem;
    color: #555;
  }
.sub-title1 {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.sub-title1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* underline spans text only */
  height: 2px;
  background-color: #2272b9;
}
 
.text-primary {
    --bs-text-opacity: 1;
    color: #2272b9 !important;
}
.bg-light-section {
    --bs-bg-opacity: 1;
    background-color: #fafbfd !important;
}
.h2-dark {
  color: #222;
  font-size: 32px;
}

/* Optional: remove padding/margin added by nav-link */
.phone-icon.nav-link {
  padding: 0 !important;
  margin: 0 !important;
}
.phone-icon.nav-link:hover {
  color: #fff !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Force dropdown item layout */
ul.dropdown-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  list-style: none;
}

  .navbar .dropdown-menu li:last-child .dropdown-item {
    border-bottom: none !important;
  }
/* Optional cleanup for section header */
.dropdown-header {
  padding: 8px 12px;
  font-weight: 400;
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Indent dropdown items under headers */
.dropdown-subsection > .dropdown-item {
  padding-left: 24px !important;
}
.transparent-menu .menu-box-link {
  display: block;
  padding: 30px 20px;
  background-color: rgba(0, 0, 0, 0.35); /* transparent overlay */
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease, transform 0.3s ease;
  height: 100%;
}

.transparent-menu h4 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 12px;
}

.transparent-menu small {
    font-size: 1.0rem;
    letter-spacing: 1px;    
    font-family: 'Libre Caslon Display', serif;
}
hr {
    margin-top: 5px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid #0d6efd;
}
.banner-header {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.banner-header::before {
  z-index: 1;
}
.border {
  border: 1.5px solid #0d3d7a !important;
  border-radius: 2px;
}
.bg-hatchingblue {
  --bs-bg-opacity: 1;
  background-color: rgba(13, 61, 122, var(--bs-bg-opacity)) !important; /* #0d3d7a in RGB */
}

.transparent-menu {
  position: relative;
  z-index: 2; /* MUST be greater than .banner-header::before */
}
.hero-subtext {
  font-size: 34px !important;
  font-weight: 300 !important;
  letter-spacing: 3px;
  color: #ffffff;
  text-shadow: 2px 2px #1b1b1b;
  margin-bottom: 40px;
  margin-top: 60px;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  text-transform: none;
  font-family: 'Libre Caslon Display', serif;
}
.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
    background-color: #222 !important;
}
/* Top border only */
.top-border {
  border-top: 1px solid #ffffff !important;
}

/* Remove opacity on vertical dividers */
.border-end {
  border-right: 1px solid #ffffff !important;
}

.footer-heading {
  position: relative;
  display: block;
  padding-bottom: 6px;
  border-bottom: 2px solid #fff;
  width: fit-content;
}

.footer .bottom {
    padding: 30px 0 10px 0;
    margin-top: 45px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #000;
}
.footer {
    padding: 30px 0 0;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    background: #292929;
}
/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-bottom {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0px, 100px, 0px);
  -webkit-transform: translate3d(0px, 100px, 0px);
  -o-transform: translate(0px, 100px);
  -ms-transform: translate(0px, 100px);
  transform: translate3d(0px, 100px, 0px);
}
.animation-element.slide-bottom.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-top {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0px, -100px, 0px);
  -webkit-transform: translate3d(0px, -100px, 0px);
  -o-transform: translate(0px, -100px);
  -ms-transform: translate(0px, -100px);
  transform: translate3d(0px, -100px, 0px);
}
.animation-element.slide-top.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/* Initial state */
.animation-element.flipInY {
  opacity: 0;
  transform: perspective(1000px) rotateY(90deg);
  transition: transform 0.6s ease, opacity 0.6s ease;
  backface-visibility: hidden;
}

/* Animated state when in view */
.animation-element.flipInY.in-view {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg);
}

/* Initial state */
.animation-element.flipInX {
  opacity: 0;
  transform: perspective(1000px) rotateY(90deg);
  transition: transform 0.6s ease, opacity 0.6s ease;
  backface-visibility: hidden;
}

/* Animated state when in view */
.animation-element.flipInX.in-view {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg);
}
/* --- Impact call-out strip --- */
.counter-section {
  position: relative;
  padding-bottom: 120px; /* leave space for the callout strip */
}

.impact-callouts {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap; /* ensures proper wrapping on mobile */
  width: 100%;
  text-align: center;
  font-style: italic;
  font-weight: 700;
  color: white;
}

.impact-callouts .callout {
  flex: 1 0 33.333%;
  padding: 20px 10px;
}

.bg-red { background-color: #e82929; }
.bg-yellow { background-color: #ffd700; color: #222; }
.bg-blue { background-color: #0093dd; }

/* --- Mobile stacking --- */
@media (max-width: 767.98px) {
  .impact-callouts {
    flex-direction: column;
  }

  .impact-callouts .callout {
    flex: 1 1 100%;
    border-top: 6px solid #fff;
  }

  .impact-callouts .callout:first-child {
    border-top: none;
  }
}


/*============================== 
    Blog
================================*/
.blog {
  padding: 100px 0;
  overflow: hidden;
  background-color: #405265;
}

.blog-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 800;
  line-height: 1.2em;
  margin: 0 0 15px 0;
  color: #222;
}
.blog-title:hover {
  color: #005eb8;
}

/* Flex container to equalize column height */
.blog .row {
  display: flex;
  flex-wrap: wrap;
}

/* Each column must be a flex item */
.blog .col-lg-4 {
  display: flex;
}

/* Blog card styles with flex-grow */
.blog .item {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0px 5px 35px 0px #8ca6ab;
  border-radius: 1px;
  background: #fff;
  margin-bottom: 10px;
}
.blog .col-lg-4 {
  margin-bottom: 40px; /* Adjust as needed */
}

.blog .item {
  box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
  border-radius: 5px;
}
.blog .item .post-img {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.blog .item .post-img:hover img {
  transform: scale(1.1);
}
.blog .item .post-img img {
  width: 100%;
  transition: all 0.5s;
}
.blog .item .content {
  padding: 30px;
  background: #fff;
  text-align: left;
  border-radius: 5px;
}
transform: scale(1.1);
}

/* Card content */
.blog .item .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  text-align: left;
  background: #fff;
  border-radius: 0 0 1px 1px;
}

/* Content elements */
.blog .item .content .tag {
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.blog .item .content .read-more {
  margin-top: 20px;
  text-decoration: underline;
}
.blog .item .content .read-more:hover {
  color: #0197de;
  text-decoration: none;
}

.blog .item .content h6 {
  font-size: 16px;
  line-height: normal;
  text-transform: inherit;
  margin-bottom: 2px;
}


/* Navigation Styling */
.blog-nav {
  position: static !important;
  background: #fff !important;
  margin: 0;
  top: 0;
  transform: translateY(0px);
}
.blog-nav .logo {
  color: #1c1c1c !important;
}
.blog-nav .navbar-nav .nav-link {
  color: #232323;
}
.blog-nav .icon-bar {
  color: #232323;
}

/* Blog Header */
.blog-header {
  background: #232323;
  position: relative;
}
.blog-header h2 {
  font-weight: 700;
  letter-spacing: 1px;
  color: #ccc;
  margin-bottom: 15px;
}
.blog-header a {
  position: relative;
  color: #d5d5d5;
}
.blog-header a:after {
  content: '/';
  position: relative;
  margin: 0 10px;
}
.blog-header a:last-child:after {
  display: none;
}
.blog-header a:hover {
  color: #fff;
}
.blog-header a.active {
  color: #0197de;
}


@media screen and (max-width: 575px) {
  .bg-vid {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block !important;
  }
}

@media screen and (min-width: 768px) {
  .menu-box-link-alt {
    background: #2a609175;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.3s ease;
  }

  .menu-box-link-alt:hover {
    background: #00000061;
    color: #fff;
  }

  .menu-box-link-alt:hover small,
  .menu-box-link-alt:hover h4 {
    color: #fff !important;
  }

  .menu-box-link-alt h4 {
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  .menu-box-link-alt small {
    font-weight: 400;
    letter-spacing: 1.2px;
    font-size: 1.2rem;
    text-transform: none;
    font-family: 'Libre Caslon Display', serif;
  }

  
}

@media (max-width: 1360px) and (min-width: 767px) {
  .transparent-menu {
    display: flex;
  }

  .transparent-menu > .col-md-4 {
    display: flex;
    flex-direction: column;
  }

  .transparent-menu .menu-box-link-alt {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .footer-powered-by {
    justify-content: center;
    text-align: center;
    margin-top: 15px;
  }
    .header .caption h4 {
        font-size: 18px !important;
        text-shadow: 1px 1px #000;
    }
  .powered-link {
    margin: 0 auto;
  }

  .membership-logo {
    max-width: 75%;
  }
  .timeline::before {
    left: 20px; /* Adjust this to match dot center */
  }

  .timeline-item {
    width: 100%;
    padding-left: 3rem;
    padding-right: 1rem;
    text-align: left !important;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
  }
.timeline-item.right::before {
    left: 13px;
}
  .timeline-item::before {
    left: 13px; /* Same as .timeline::before */
    transform: translateX(0); /* Remove centering */
  }
  .banner-header.full-height {
    height: 60vh;
    background-position: center;
  }

  .banner-header h1 {
    font-size: 2.0rem;
    line-height: 1.2;
  }

  .butn-light {
    font-size: 0.85rem;
    padding: 14px 20px;
  }
  .banner-header.mobile-bg-fix {
    background-size: cover !important;
    background-position: right center !important; /* focus on the person */
    background-attachment: scroll !important;
    height: 70vh; /* Adjust if needed */
  }
  .banner-header p {
    font-size: 16px;
    margin-bottom: 0;
    color: #fff;
    text-shadow: 1px 1px 1px #282828;
}
  .menu-box-link-alt {
    position: relative;
    color: #ffffff;
    overflow: hidden;
    z-index: 0;
    background: #2a609175 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 30px 20px;
  }

  .menu-box-link-alt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #2a609175 !important;
    z-index: 1;
  }

.menu-box-overlay {
  background-color: #242629; /* dark overlay */
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Ensure text stays on top of overlay */
.menu-box-link-alt small,
.menu-box-link-alt h4 {
  position: relative;
  z-index: 2;
}

  .menu-box-link-alt:hover {
    background: #4e6f5561;
    color: #fff;
  }
  .bg-floorplan {
    background-image: url('../img/bg-floorplan.jpg') !important;
  }

  .bg-renovated {
    background-image: url('../img/bg-renovated.jpg') !important;
  }

  .bg-chattanooga {
    background-image: url('../img/bg-chattanooga.jpg') !important;
  }

  .transparent-menu .col-md-4 {
    width: 100% !important;
    border-right: none !important;
    border-top: 1px solid #ffffff;
  }
.hero-subtext {
    font-size: 22px !important;
    font-weight: 300 !important;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 2px 2px #1b1b1b;
    margin-bottom: 40px;
    margin-top: 60px;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    text-transform: none;
    font-family: 'Libre Caslon Display', serif;
}
.banner-header.full-height h1 {
    position: relative;
    margin-bottom: 15px;
    font-family: 'Libre Caslon Display', serif;
    font-size: 30px;
    line-height: 1.1em;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    color: #fff;
    font-weight: 400;
    margin-top: 90px;
}
  .hero-section {
    height: 80vh !important; /* or adjust to your preference */
  }

  .bg-vid {
    height: 80vh !important;
  }
.header .caption h1 {
        font-size: 35px !important;
        margin-bottom: 15px;
        text-shadow: 1px 1px #000;
    }  
}
@media screen and (min-width: 991.9px) and (max-width: 1199.98px) {
  .dropdown-menu {
    background-color: #192a43 !important;
  }
    #mobileNav .nav-link {
    padding: 3px 0 !important;
    text-align: center !important;
    font-size: 1.0rem !important;
  }
  .h2-dark {
  color: #222;
  font-size: 1.8rem !important;
}
}


  /* Main mobile nav panel */
#mobileNav.mobile-nav-panel{
  position: fixed !important;
  inset: 0;                 /* top/left/right/bottom: 0 */
  height: 100dvh;           /* correct on iOS too */
  background: rgba(0,0,0,.85);
  z-index: 1100 !important;

  /* key change: start above the viewport */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;

  transition: transform .2s ease, opacity .2s ease;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#mobileNav.open{
  transform: translateY(0);   /* slide down */
  opacity: 1;
  pointer-events: auto;
  background: #000000e6;
}

  #mobileNav .nav-link {
    padding: 3px 0 !important;
    text-align: center !important;
    font-size: 1.4rem !important;
  }

#mobileNav .navbar-nav {
  align-items: center !important;
  padding-left: 45px !important;
  padding-top: 55px;
}


  #mobileNav li.nav-item {
    margin-bottom: 0rem;
    width: 100%
  }

  #mobileNav hr {
    margin: 0.25rem 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
  }

  #mobileNav .floorplan-thumbs {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
  }

  #mobileNav .floorplan-thumbs .small {
    font-size: 0.85rem;
    margin-top: 0.3rem;
  }

  #mobileNav .nav-phone {
    margin-top: 20px;
    text-align: left;
  }

  /* Hamburger icon */
  .mobile-nav-toggle {
    position: relative;
    width: 45px;
    height: 34px;
    border: none;
    background: transparent;
    padding: 0;
    z-index: 1101;
  }
/* Default: white icon bars */
.mobile-nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 11px; height: 1.0px; }
.mobile-nav-toggle span:nth-child(3) { top: 22px; }

/* On scroll: black bars (only if NOT open) */
.mobile-nav-toggle.header-scrolled:not(.open) span {
  background: #232323;
  height: 1.0px;}

/* Open menu: white X */
.mobile-nav-toggle.open span {
  background: #fff;
}

/* Transform to "X" */
.mobile-nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 16px;
}
.mobile-nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 16px;
}


  .nav-scroll {
    background: #323e48 !important;
    height: 80px !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0;
    transform: translateY(0) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 999;
    position: fixed;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0px 5px 15px rgba(35, 36, 54, 0.07);
    border-bottom: 2px solid #13a6c4;
  }
.navbar .navbar-nav .nav-link {
    color: #fff !important;
}
.nav-scroll .dropdown .nav-link i {
    color: #fff;
}  
  .logo-wrapper.ms-4 {
    margin-left: 0 !important;
  }
  .nav-scroll .logo-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }
  .nav-scroll .navbar-nav .nav-link:hover {
  color: #fff !important;
}
    .bg-vid {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
    }
  .nav-scroll .logo-img {
    width: 280px;
    margin-top: 15px;
  }

  .navbar-toggler {
    margin-top: 0 !important;
    margin-right: 15px !important;
    background: transparent;
    border: none;
    outline: none !important;
  }

  .logo-wrapper {
    float: left;
    padding: 5px !important;
    z-index: 1102;
  }

  /* Floorplan thumbnails */
  .floorplan-thumbs a {
    flex: 1;
    min-width: 0;
  }

  .floorplan-thumb {
    max-width: 50%;
    height: auto;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
  }



.find-home-btn {
  background-color: #0000008f; /* match the dark button color */
  color: #fff;
  padding: 6px 16px;
  text-decoration: none;
  font-weight: 400;
  border-radius: 4px;
  font-size: 15px;
}

.find-home-btn:hover {
  opacity: .85;
}

#mobileNav .nav-item > div a.nav-link {
  padding: 5px 0;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
}

#mobileNav .small {
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.4;
  color: #d3d3d3;
}

  /* Overlay */
  #navOverlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
  }

  #navOverlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Dropdown styling */
  .navbar .dropdown-menu > li > a.dropdown-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 100px;
    display: block;
    color: #fff;
  }
ul.dropdown-menu li:last-child {
    border-bottom: 0px solid #ffffff94 !important;
}
.dropdown .nav-link i {
    padding-left: 0px;
    font-size: 18px;
}
    .navbar button {
        margin-right: 12px !important;
        outline: none !important;
        background: transparent;
        margin-top: 1px;
        border: none;
    }
  #mobileNav hr {
    margin: 1px 0 20px;
    height: 0px;
    background-color: #ffffff7d;
    border: none;
  }
  hr { 
  margin-top: 5px;
  margin-bottom: 15px;
  border-top: 1px solid #fff;
  width: 100%;
}
ul.dropdown-menu li {
    border-bottom: 0px solid rgba(255, 255, 255, 0.15) !important;
    list-style: none;
}

.mobile-logo-hr {
  position: absolute;
  bottom: -6px; /* Adjust spacing */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
}
  .navbar .dropdown-menu .dropdown-item {
    border: 0px solid #ffffff94;
    margin: 6px 0;
    border-radius: 4px;
    background: transparent !important;
  }
    .navbar .dropdown-menu {
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0;
        border-radius: 0;
        margin: 0;
        background: #00000047;
    }   
.dropdown-menu .dropdown {
  position: relative;
}

.dropdown-menu .dropdown-menu {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: #282828;
  border-radius: 0;
  min-width: 200px;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.dropdown-menu {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0;
  background-color: #1e1e1e;
  border: none;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu .dropdown-item {
  width: 100%;
  padding: 14px 0;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: transparent !important; /* Transparent each item */
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item {
  text-align: center;
  color: #fff;
  padding: 10px 0;
}

.dropdown-menu .dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}


  .about-links .about-block {
    flex: 0 0 32%; /* ~3 per row */
    background: transparent;
    color: #fff;
    padding: 8px 4px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    text-decoration: none;
  }

  .about-links .about-block:nth-child(n+4) {
    flex: 0 0 48%; /* ~2 per row */
  }

  .about-links .about-block:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
.about-link-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        padding: 2px 0;
}

.about-link-grid a {
        padding: 8px;
        background: #004f59;
        border-radius: 4px;
        font-size: 0.6rem;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: #fff;
        transition: background 0.2s ease;
    }

.about-link-grid a:hover {
  background: rgba(255, 255, 255, 0.15);
}
/* Smaller text for book tour & resident/investor */
.small-link {
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
}

/* Adjust icon size and spacing if needed */
.tenant-icon {
  font-size: 1.7rem;
}

  body.nav-open #mobileNav.mobile-nav-panel.open {
    transform: translateX(0%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #004f59 !important;
    display: flex !important;
    flex-direction: column;
    padding: 70px 20px;
    height: 100vh !important;
    overflow-y: auto;
    border-radius: unset;
  }

  .butn-light a {
    padding: 14px 34px;
    display: inline-block;
    background: #3d3d3d2e;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    border: 1px solid rgb(240 245 249);
    text-transform: none;
    letter-spacing: 2px;

}

/* Hamburger look */
.mobile-nav-toggle{
  position: relative;
  width: 46px;
  height: 34px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;               /* bar color via currentColor */

  /* default (desktop) bar widths */
  --barW: 46px;  /* full width of top/bottom (and middle when expanded) */
  --barS: 46px;  /* default (short) middle width */
  --gap : 10px;  /* distance between bars */
}

.mobile-nav-toggle span{
  position: absolute;
  left: 0;
  height: 2px !important;
  background: currentColor;
  display: block;
  border-radius: 2px;
  transition: width .22s ease, transform .22s ease, opacity .22s ease;
}

/* full bar width & spacing */
.mobile-nav-toggle span:nth-child(1){ top: 8px;  width: var(--barW); }
.mobile-nav-toggle span:nth-child(2){ top: 16px; width: var(--barS); }
.mobile-nav-toggle span:nth-child(3){ top: 24px; width: var(--barW); }

/* expand middle bar on hover/focus OR when toggled open */
.mobile-nav-toggle:hover span:nth-child(2),
.mobile-nav-toggle:focus-visible span:nth-child(2),
.mobile-nav-toggle.open span:nth-child(2){
  width: var(--barW);
}

/* ===== Mobile-only sizes (change values to taste) ===== */
@media (max-width: 575.98px){
  .mobile-nav-toggle{
    width: 44px;          /* smaller button */
    --barW: 44px;         /* full bar width on mobile */
    --barS: 44px;         /* short middle bar on mobile */
  }
}

.apply a{
  font-weight:500;
  background-color:#2c2d2fe6;   /* no !important */
  color:#fff;
  padding:8px 25px;
  margin:0;
  position:relative;
  font-size:16px;
  border:1px solid rgb(228 233 237);
  letter-spacing:2px;
  text-decoration:none;
  display:inline-block;
  transition:background-color .3s ease, color .3s ease;
}
.apply a:hover,
.apply a:focus-visible{
  background-color:#737064;
  color:#fff;
}

.apply2 a{
  font-weight:500;
  background:#615f56;           /* no !important */
  color:#fff;
  padding:8px 25px;
  margin:0;
  position:relative;
  font-size:16px;
  border:1px solid #232323;
  letter-spacing:2px;
  text-decoration:none;
  display:inline-block;
  transition:background .3s ease, color .3s ease;
}

.apply2 a:hover{
  background:#737064;        
  color:#fff;
}
/* Mobile: keep full-width buttons */
.apply2 .cta-link {
  width: 100%;
  display: flex;                 /* center text + arrow */
  justify-content: center;
  align-items: center;
}

/* Desktop+: shrink to content */
@media (min-width: 768px) {
  .apply2 .cta-link {
    width: auto !important;      /* override global 100% */
    display: inline-flex;
  }
}

/* default button look (yours) */
.apply3 a{
  font-weight:500;
  background:#004f59;           /* no !important */
  color:#fff;
  padding:10px 30px;
  margin:0;
  position:relative;
  font-size:16px;
  border:1px solid #222;
  letter-spacing:2px;
  text-decoration:none;
  display:inline-block;
  transition:background .3s ease, color .3s ease;
}

/* make the SVG use the link color */
.apply3 a svg *{
  fill: currentColor;       /* overrides fill="#fff" in the <g> */
  transition: fill .3s ease;
}

/* hover state */
.apply3 a:hover{
  opacity: .85
}
/* default button look (yours) */
.apply4 a{
  font-weight:500;
  background:#756756;           /* no !important */
  color:#fff;
  padding:8px 25px;
  margin:0;
  position:relative;
  font-size:16px;
  border:1px solid #f5eee9;
  letter-spacing:2px;
  text-decoration:none;
  display:inline-block;
  transition:background .3s ease, color .3s ease;
}

/* make the SVG use the link color */
.apply4 a svg *{
  fill: currentColor;       /* overrides fill="#fff" in the <g> */
  transition: fill .3s ease;
}

/* hover state */
.apply4 a:hover{
  background:#fff;
  color:#737064;            /* SVG will change with this */
}
/* Base panel: dock LEFT, start off-canvas */
#mobileNav.mobile-nav-panel{
  position: fixed !important;
  top: 0; bottom: 0;
  left: 0 !important;
  right: auto !important;          /* override any old right:0 */
  width: min(86vw, 360px);         /* tweak as you like */
  height: 100vh;
  transform: translateX(-100%);    /* hidden off the LEFT */
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
  z-index: 1100 !important;
  overflow-y: auto;
}

/* When open (your toggle adds .nav-open on <body> and .open on the panel) */
body.nav-open #mobileNav.mobile-nav-panel.open{
  transform: translateX(0);         /* slide in from the LEFT */
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Optional: width tuning by breakpoint */
@media (min-width: 576px){
  #mobileNav.mobile-nav-panel{ width: 340px; }
}
@media (min-width: 992px){
  #mobileNav.mobile-nav-panel{ width: 380px; }
}

/* If any earlier CSS injects inline transforms/side, neutralize on open */
body.nav-open #mobileNav.mobile-nav-panel.open{
  right: auto !important;
  left: 0 !important;
}

/* =992px: LEFT side drawer (~50% width) */
@media (min-width: 992px){
  #mobileNav.mobile-nav-panel{
    position: fixed !important;
    top: 0; left: 0; right: auto !important; bottom: 0;   /* <-- left side */
    width: min(400px, 30vw) !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;              /* hide off-canvas to the LEFT */
    box-shadow: 24px 0 40px rgba(0,0,0,.25);              /* shadow on the right edge */
    border-radius: 0 12px 12px 0;                         /* rounded outer edge */
    z-index: 1100;
    transition: transform .25s ease, opacity .25s ease;
  }

  body.nav-open #mobileNav.mobile-nav-panel.open{
    transform: translateX(0) !important;                  /* slide in from left */
    opacity: 1 !important;
  }

  /* optional overlay stays the same */
  body.nav-open::before{
    content:""; position:fixed; inset:0;
    background: rgba(0,0,0,.35); z-index: 1095;
  }
}
/* Base: left-docked off-canvas */
#mobileNav.mobile-nav-panel{
  position: fixed !important;
  top: 0; bottom: 0;
  left: 0 !important;
  right: auto !important;
  height: 100dvh;                 /* safer on mobile */
  transform: translateX(-100%);
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
  z-index: 1100 !important;
  overflow-y: auto;
}

/* Open state */
body.nav-open #mobileNav.mobile-nav-panel.open{
  transform: translateX(0);
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* PHONE: full width */
@media (max-width: 575.98px){
  #mobileNav.mobile-nav-panel{
    width: 100vw !important;      /* full width on mobile */
    max-width: none !important;
  }
}

/* TABLET+: narrower panel (adjust to taste) */
@media (min-width: 576px){
  #mobileNav.mobile-nav-panel{ width: 340px; }
}
@media (min-width: 992px){
  #mobileNav.mobile-nav-panel{ width: 380px; }
}

/* Failsafe in case something sets right/transform inline */
body.nav-open #mobileNav.mobile-nav-panel.open{
  left: 0 !important;
  right: auto !important;
}
/* Lock the page when the drawer is open (no body scroll) */
html.nav-open,
body.nav-open{
  overflow: hidden !important;
  height: 100%;
}

/* Drawer: fixed, slides in from the LEFT, scrolls internally */
#mobileNav.mobile-nav-panel{
  position: fixed !important;
  inset: 0 auto 0 0;                 /* top:0; left:0; bottom:0 */
  height: 100dvh !important;         /* handles mobile browser chrome */
  width: clamp(320px, 85vw, 28rem);  /* ? FLUID: phone->tablet->desktop */
  overflow-y: auto !important;       /* drawer scrolls, page doesn't */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1100;

  transform: translateX(-100%);
  transition: transform .25s ease;
  background: #405263;               /* your panel bg */
}

/* Open state */
#mobileNav.mobile-nav-panel.open{
  transform: translateX(0);
}

/* Nice bottom breathing room on notched phones */
#mobileNav .container > :last-child{
  margin-bottom: max(16px, env(safe-area-inset-bottom));
}
/* Base: left-slide drawer */
#mobileNav.mobile-nav-panel{
  position: fixed !important;
  inset: 0 auto 0 0;                 /* top:0; left:0; bottom:0 */
  height: 100dvh !important;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1100;
  background:#405263;               /* your color */
}

/* Open state */
#mobileNav.mobile-nav-panel.open{ transform: translateX(0); }

/* Lock page when open */
html.nav-open, body.nav-open{ overflow:hidden !important; height:100%; }

/* -------- Width rules (responsive) -------- */

/* xs: phones (<576px) - full width */
@media (max-width: 575.98px){
  #mobileNav.mobile-nav-panel{ width: 100vw !important; }
}

/* sm-lg: 576-1199px - full width (your request) */
@media (min-width: 576px) and (max-width: 1199.98px){
  #mobileNav.mobile-nav-panel{ width: 100vw !important; }
}

/* xl+ (=1200px): compact drawer */
@media (min-width: 1200px){
  #mobileNav.mobile-nav-panel{
    width: clamp(360px, 32vw, 20rem) !important; /* tweak as you like */
  }
}
@media (max-width: 767.98px){
  p{
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.75em;
    color: #222222db;
    margin-bottom: 15px;
  }
    .h2-dark{
    color: #004d69;
    line-height: 1.8;
    font-size: 1.12em;
  }
}

/* =========================================================
   Mobile and tablet subpage hero parallax fix
   Anchors the parallax image to the hero instead of the viewport.
   This keeps identical framing with or without the specials popdown
   and prevents blank areas through 991.98px.
   ========================================================= */
@media (max-width: 991.98px) {
  html body .page-hero .parallax__container {
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body .page-hero .parallax {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  html body .page-hero {
    overflow: hidden !important;
  }
}