@charset "UTF-8";
/*
Theme Name: Wildwoods
Author: Owain Jones
Author URI: https://rentmanager.com
Description: A clean and modern WordPress theme perfect for blogs, portfolios, and business sites. Designed for minimalism and performance.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eucalyptus
Tags: clean, modern, blog, portfolio, responsive, minimal, custom-background, custom-logo, theme-options
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 7.4
*/
@import url(c:\Users\jnolan\London Computer Systems\Professional Services Web - Documents\Projects\Users\JNolan\wildwoodsoflakejohnson\public_html\wp-content\themes\euc-rebuild-main\assets\css\theme-colors.css);
@import url(c:\Users\jnolan\London Computer Systems\Professional Services Web - Documents\Projects\Users\JNolan\wildwoodsoflakejohnson\public_html\wp-content\themes\euc-rebuild-main\blocks\icon-boxes\icon-boxes.css);
@import url(c:\Users\jnolan\London Computer Systems\Professional Services Web - Documents\Projects\Users\JNolan\wildwoodsoflakejohnson\public_html\wp-content\themes\euc-rebuild-main\blocks\meet-the-team\meet-the-team.css);
@import url(c:\Users\jnolan\London Computer Systems\Professional Services Web - Documents\Projects\Users\JNolan\wildwoodsoflakejohnson\public_html\wp-content\themes\euc-rebuild-main\blocks\shape-divider\shape-divider.css);
.oj-hero-slider-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
}

.oj-hero-slider, .oj-hero-slide {
  height: 100%;
  width: 100vw;
  max-width: 100vw;
}

.oj-hero-slide {
  background-position: center;
  background-size: cover;
}

.oj-hero-slider-content {
  z-index: 998;
  opacity: 1;
  display: flex;
  position: absolute;
  top: 50%;
  left: 44%;
  transform: translate(-50%, -50%);
  padding: 0px 0px 0px 0px;
}

.oj-slider-overlay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 50px 0;
  width: 75vw;
}

.oj-slider-title {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  width: 77%;
  min-height: 350px;
  color: #ffffff;
  top: 10%;
  position: relative;
}

.oj-hero-icon-container {
  border-radius: 100%;
  position: absolute;
  top: 45px;
  left: 50%;
  padding: 20px;
  transform: translate(-50%, -50%);
  box-shadow: inset 1px 1px 60px rgba(0, 0, 0, 0.2);
}

.oj-hero-icon-container i {
  font-size: 60px;
}

.oj-hero-slider {
  position: relative;
}

.oj-hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.oj-hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.oj-hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.oj-hero-video,
.oj-hero-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.oj-hero-image {
  background-size: cover;
  background-position: center;
}

.fa-solid, .fas {
  color: #003e52;
}

.hp-head {
  font-weight: 800;
  font-size: 4em;
  width: 75%;
}

.slogan {
  font-size: 30px;
}

.subhead {
  font-size: 28px;
  font-weight: 500;
}

.addtop {
  margin-top: 1em;
}

/* SLICK GALLERY STYLING*/
.oj-gallery-container {
  max-width: 75%;
  margin: 50px auto;
}

.slider-for img {
  width: 100%;
  object-fit: cover;
}

.slider-nav {
  margin-top: 10px;
}

.slider-nav img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.slider-nav .slick-current img {
  border-color: #000;
}

.slick-prev:before, .slick-next:before {
  font-size: 30px !important;
  color: var(--primary-color) !important;
}

.slick-prev {
  left: -35px !important;
}

/* RESPONSIVE CSS */
@media (max-width: 1200px) {
  .oj-gallery-container {
    max-width: 75%;
    margin: 30px auto 50px;
  }
  .slider-nav img {
    margin: 5px;
  }
}

.home .oj-contact-block-container {
  padding: 1em 5% 0px;
}

.oj-contact-block-container {
  padding: 0px 5%;
}

.contact-gray {
  background-color: #e8e8e8;
  color: #000000;
}

.contact-branding {
  background-color: #5EC798;
  color: #000000;
}

.contact-branding2 {
  background-color: #2D2C2C;
  color: #FFFFFF;
}

.contact-black {
  background-color: #000000;
  color: #FFFFFF;
}

.oj-contact-block {
  display: flex;
}

.oj-form-wrap, .oj-contact-col {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.contact-address, .contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-address h2 {
  margin-bottom: 35px;
}

.google-map2 {
  height: 400px;
}

.contact-address .google-map2 {
  align-self: stretch;
  height: 400px;
}

.contact-address .google-map2 iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.our-location {
  width: 80%;
  margin: 2em auto 0px;
}

.address-info, .contact-page-info {
  width: 100%;
  margin: 1em 0px;
  text-align: left;
}

@media (max-width: 768px) {
  .oj-contact-block {
    flex-direction: column;
  }
  .oj-form-wrap, .oj-contact-col {
    width: 100%;
  }
}

/* CONTENT ROTATOR STYLING */
.oj-content-rotator-container {
  width: 70%;
  margin: 2em auto;
}

.oj-content-rotator-container h2 {
  text-align: left;
  margin-bottom: 2rem;
}

.oj-content-rotator-container .slide {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.oj-content-rotator-container .slide-text {
  min-height: 120px;
}

.oj-content-rotator-container .slide-image,
.oj-content-rotator-container .slide-content {
  flex: 1;
  align-self: flex-start;
}

.oj-content-rotator-container .slide-image img {
  width: 100%;
  height: 375px;
  object-fit: cover;
}

.oj-content-rotator-container .slide-content h3 {
  margin-bottom: 1rem;
}

.oj-content-rotator-container .slide-content p {
  margin-bottom: 1rem;
}

.oj-content-rotator-container.image-left .slide {
  flex-direction: row;
}

.oj-content-rotator-container.image-right .slide {
  flex-direction: row-reverse;
}

.oj-content-rotator-container .slider-for-content-rotator {
  position: relative;
}

.oj-content-rotator-container .slider-for-content-rotator.has-multiple-slides {
  padding-bottom: 50px;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev,
.oj-content-rotator-container .slider-for-content-rotator .slick-next {
  width: 40px;
  height: 40px;
  z-index: 10;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev:before,
.oj-content-rotator-container .slider-for-content-rotator .slick-next:before {
  font-size: 40px;
  color: var(--primary-color);
  opacity: 1;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev:hover:before,
.oj-content-rotator-container .slider-for-content-rotator .slick-next:hover:before {
  opacity: 0.7;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev {
  left: -50px !important;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-next {
  right: -50px !important;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots {
  bottom: 0px;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots li {
  margin: 0 5px;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots li button:before {
  font-size: 12px;
  color: var(--primary-color);
  opacity: 0.4;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--primary-color);
}

/* SLICK GALLERY STYLING*/
.oj-gallery-container {
  max-width: 75%;
  margin: 50px auto;
}

.slider-for img {
  width: 100%;
  object-fit: cover;
}

.slider-nav {
  margin-top: 10px;
}

.slider-nav img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.slider-nav .slick-current img {
  border-color: #000;
}

.slick-prev:before, .slick-next:before {
  font-size: 30px !important;
  color: #2D2C2C !important;
}

.slick-prev {
  left: -35px !important;
}

/* RESPONSIVE CSS */
@media (max-width: 1200px) {
  .oj-content-rotator-container {
    max-width: 70%;
    margin: 30px auto 50px;
  }
  .oj-gallery-container {
    max-width: 75%;
    margin: 30px auto 50px;
  }
  .slider-nav img {
    margin: 5px;
  }
}

@media (max-width: 768px) {
  .oj-content-rotator-container .slide {
    flex-direction: column !important;
    gap: 1.5rem;
  }
  .oj-content-rotator-container .slide-image {
    width: 90%;
    margin: 0 auto;
  }
  .oj-content-rotator-container .slide-image img {
    height: auto !important;
  }
  .oj-content-rotator-container .slide-content {
    width: 100%;
  }
  .oj-content-rotator-container .slider-for-content-rotator .slick-dots {
    bottom: -30px;
  }
}

@media (max-width: 1024px) {
  .oj-content-rotator-container .slider-for-content-rotator .slick-prev {
    left: 10px;
  }
  .oj-content-rotator-container .slider-for-content-rotator .slick-next {
    right: 10px;
  }
  .oj-content-rotator-container .slider-for-content-rotator .slick-prev:before,
  .oj-content-rotator-container .slider-for-content-rotator .slick-next:before {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  }
}

.two-column-image-text {
  column-count: 2;
  width: 90%;
  margin: auto;
}

.slider-for-image-rotator.slick-initialized.slick-slider img {
  height: 600px;
  width: 100%;
  object-fit: cover;
}

/* CONTENT ROTATOR STYLING */
.makecolumns {
  columns: 2;
  column-gap: 5em;
}

@media (max-width: 900px) {
  .makecolumns {
    columns: 1;
  }
}

.oj-content-rotator-container {
  width: 70%;
  margin: 2em auto;
}

.oj-content-rotator-container h2 {
  text-align: left;
  margin-bottom: 2rem;
}

.oj-content-rotator-container .slide {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.oj-content-rotator-container .slide-text {
  min-height: 120px;
}

.oj-content-rotator-container .slide-image,
.oj-content-rotator-container .slide-content {
  flex: 1;
  align-self: flex-start;
}

.oj-content-rotator-container .slide-image img {
  width: 100%;
  height: 375px;
  object-fit: cover;
}

.oj-content-rotator-container .slide-content h3 {
  margin-bottom: 1rem;
}

.oj-content-rotator-container .slide-content p {
  margin-bottom: 1rem;
}

.oj-content-rotator-container.image-left .slide {
  flex-direction: row;
}

.oj-content-rotator-container.image-right .slide {
  flex-direction: row-reverse;
}

.oj-content-rotator-container .slider-for-content-rotator {
  position: relative;
}

.oj-content-rotator-container .slider-for-content-rotator.has-multiple-slides {
  padding-bottom: 50px;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev,
.oj-content-rotator-container .slider-for-content-rotator .slick-next {
  width: 40px;
  height: 40px;
  z-index: 10;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev:before,
.oj-content-rotator-container .slider-for-content-rotator .slick-next:before {
  font-size: 40px;
  color: var(--primary-color);
  opacity: 1;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev:hover:before,
.oj-content-rotator-container .slider-for-content-rotator .slick-next:hover:before {
  opacity: 0.7;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-prev {
  left: -50px !important;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-next {
  right: -50px !important;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots {
  bottom: 0px;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots li {
  margin: 0 5px;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots li button:before {
  font-size: 12px;
  color: var(--primary-color);
  opacity: 0.4;
}

.oj-content-rotator-container .slider-for-content-rotator .slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--primary-color);
}

/* SLICK GALLERY STYLING*/
.oj-gallery-container {
  max-width: 75%;
  margin: 50px auto;
}

.slider-for img {
  width: 100%;
  object-fit: cover;
}

.slider-nav {
  margin-top: 10px;
}

.slider-nav img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.slider-nav .slick-current img {
  border-color: #000;
}

.slick-prev:before, .slick-next:before {
  font-size: 30px !important;
  color: #2D2C2C !important;
}

.slick-prev {
  left: -35px !important;
}

/* RESPONSIVE CSS */
@media (max-width: 1200px) {
  .oj-content-rotator-container {
    max-width: 70%;
    margin: 30px auto 50px;
  }
  .oj-gallery-container {
    max-width: 75%;
    margin: 30px auto 50px;
  }
  .slider-nav img {
    margin: 5px;
  }
}

@media (max-width: 900px) {
  .oj-content-rotator-container .slide {
    flex-direction: column !important;
    gap: 1.5rem;
  }
  .oj-content-rotator-container .slide-image,
  .oj-content-rotator-container .slide-content {
    width: 100%;
  }
  .oj-content-rotator-container .slider-for-content-rotator .slick-dots {
    bottom: 0px;
  }
}

@media (max-width: 1024px) {
  .oj-content-rotator-container .slider-for-content-rotator .slick-prev {
    left: 10px;
  }
  .oj-content-rotator-container .slider-for-content-rotator .slick-next {
    right: 10px;
  }
  .oj-content-rotator-container .slider-for-content-rotator .slick-prev:before,
  .oj-content-rotator-container .slider-for-content-rotator .slick-next:before {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  }
}

.icon .fa-solid {
  font-size: 7rem;
  color: inherit;
}

.branding {
  background-color: #5EC798;
  color: #000000;
}

.branding2 {
  background-color: #2D2C2C;
  color: #FFFFFF;
}

.black {
  background-color: #000000;
  color: #FFFFFF;
}

.gray {
  background-color: #b2b2b2;
  color: #000000;
}

.transparent {
  background-color: transparent;
  color: #000000;
}

.oj-icon-bar-container {
  text-align: center;
  padding: 2em 0px;
}

.flex-for-icon-bar {
  display: flex;
  padding: 2em 0px;
  width: 80%;
  margin: auto;
}

.icon-set {
  display: flex;
  width: 90%;
  margin: auto;
}

.icon {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1em;
  margin: 0px 0px 1em;
}

.icon-bar-button-container {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
}

.ic-subhead {
  font-size: 26px;
}

.icon-text {
  font-size: 24px;
}

.tabbed-content-block {
  width: 75%;
  margin: 2em auto;
}

/* Tab navigation */
.tab-nav {
  display: flex;
  gap: 0.5em;
  border-bottom: 2px solid #ddd;
  margin-bottom: 1.5em;
  flex-wrap: wrap;
}

.tab-btn {
  background: none;
  border: none;
  padding: 0.75em 1.5em;
  cursor: pointer;
  font-size: 1rem;
  color: #555;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
  color: var(--primary-color, #333);
}

.tab-btn.active {
  color: var(--primary-color, #333);
  border-bottom-color: var(--primary-color, #333);
  font-weight: 600;
}

/* Tab panels */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-panel-inner {
  display: flex;
  gap: 2em;
  align-items: flex-start;
}

.tab-panel-images {
  flex: 0 0 50%;
  max-width: 50%;
}

.tab-panel-text {
  flex: 1;
}

.tab-panel-text p {
  font-size: inherit;
  text-transform: capitalize;
  margin-bottom: 1em;
}

.slider-for-tab-images.slick-initialized img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.tab-panel-text ul li {
  list-style: none;
  border-bottom: 1px solid #eeeeee;
  padding: 0.5em 0px;
  text-transform: capitalize;
}

/* Force Slick track/slide to full width — inline styles set during hidden init can be wrong */
.tab-panel-images .slick-track,
.tab-panel-images .slick-slide {
  width: 100% !important;
}

/* Pull all slides out of float layout so they stack rather than wrapping into clipped rows */
.tab-panel-images .slick-slide {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

/* Keep the active slide in flow so the track has a rendered height */
.tab-panel-images .slick-slide.slick-active {
  position: relative !important;
}

/* Prevent dots going vertical after tab switching */
.tab-panel-images .slick-dots li {
  display: inline-block;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .tab-panel-inner {
    flex-direction: column;
  }
  .tab-panel-images {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .slider-for-tab-images img {
    height: 260px;
    width: 100%;
  }
}

.ww-gallery {
  width: 80%;
  margin: 0px auto 3em;
}

.ww-gallery__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.ww-gallery__tab {
  background: none;
  border: 2px solid #2D2C2C;
  color: #2D2C2C;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  transition: background 0.2s, color 0.2s;
}

.ww-gallery__tab:hover {
  background: #2D2C2C;
  color: #FFFFFF;
}

.ww-gallery__tab.is-active {
  background: #2D2C2C;
  color: #FFFFFF;
}

.ww-gallery__panel[hidden] {
  display: none;
}

.ww-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 800px) {
  .ww-gallery__grid {
    grid-template-columns: 1fr;
  }
}

.ww-gallery__item {
  margin: 0;
  overflow: hidden;
}

.ww-gallery__item img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.ww-gallery__empty {
  color: #b2b2b2;
  font-style: italic;
}

.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.glightbox-container .gclose svg path,
.glightbox-container .gnext svg path,
.glightbox-container .gprev svg path {
  fill: #FFFFFF;
}

.glightbox-container .gclose {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  top: 1rem;
  right: 1rem;
}

.policies-block {
  width: 75%;
  margin: 2em auto;
}

.policies-block .tab-panel-images img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

img.policy-image {
  margin-bottom: 1em;
}

.policy-section {
  margin-bottom: 3em;
}

.policy-section__title {
  margin-bottom: 1em;
}

@media (max-width: 768px) {
  .policies-block .tab-panel-images img {
    height: 260px;
  }
}

body {
  margin: 0 auto;
  /*font-family: var(--body-font) !important; /*  Unfortunatly Bootstrap kept overriding this so we need an important tag here */
  font-family: "hanken-grotesk", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  /*font-family: var(--header-font);*/
  font-family: "verdigris-mvb-pro-text", serif;
}

h1 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 3em;
  margin: 0;
}

h2 {
  font-weight: 800;
  font-size: 2.5em;
}

h3 {
  font-weight: 800;
  font-size: 2em;
}

p {
  font-size: 1.25rem;
  margin-top: 0;
}

a {
  color: #000000;
  text-decoration: none;
}

a.underline {
  text-decoration: underline;
}

.strong {
  font-weight: 800;
}

p.disclaimer {
  font-size: 11px;
}

.oj-row {
  padding: 50px 10vw;
  margin: 0 auto;
}

.oj-btn-container {
  padding: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  background-color: #2D2C2C;
  cursor: pointer;
  text-transform: uppercase;
}

.oj-btn-container a, .oj-btn-container a:hover {
  text-decoration: none;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.oj-btn-container:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.oj-btn-container2 {
  padding: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #2D2C2C;
  max-width: 60%;
  margin-top: 2em;
}

.oj-btn-container2 a, .oj-btn-container2 a:hover {
  text-decoration: none;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.oj-btn-container2:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* CALLOUT SECTION */
.oj-home-callout {
  overflow: hidden;
  background-color: #eeeeee !important;
}

.oj-callout-content {
  display: flex;
  width: 90%;
  justify-content: center;
  gap: 2em;
  margin: auto;
}

.oj-callout-col {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}

.callout-contact {
  /*background-color: rgba(255, 255, 255, 0.9);*/
  padding: 20px 10px;
}

.callout-contact h2, .callout-contact h3, .callout-contact p {
  width: 100%;
}

.google-map {
  flex: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 550px;
  margin-top: 7em;
}

.google-map iframe {
  width: 100%;
}

#styled-map {
  width: 100%;
  height: 415px;
  margin-top: 18px;
}

/* CALLOUT SECTION END */
/* SUBPAGE HERO */
.page-hero {
  display: flex;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 15vh;
  align-items: center;
  position: relative;
  z-index: 1;
  justify-content: center;
  margin-bottom: 3em;
}

body:not(.admin-bar) .page-hero {
  margin-bottom: 5em;
}

.page-hero::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*background-color: rgba(0, 0, 0, 0.3);*/
  background-color: #5B7267;
}

.page-hero h1 {
  padding: 0 10vw;
  color: #FFFFFF;
  z-index: 99;
}

img.pl-primary {
  width: 90%;
  height: auto;
  object-fit: cover;
  margin: auto;
}

img.pd-primary {
  margin-top: 30px;
  width: 50%;
}

/* RESPONSIVE CSS */
@media (max-width: 781px) {
  .oj-callout-content {
    flex-direction: column;
  }
}

.full-width {
  width: 90%;
  margin: auto;
}

.wp-block-column {
  width: 100vw;
  overflow: hidden;
}

.detailbutton {
  background: #5EC798;
  /* Keep the button background */
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.detailbutton:hover {
  background: #003e52;
  /* Keep the button background */
  transition: all 0.3s ease;
  transform: translateY(-2px);
}

.detailbutton a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 600;
  display: block;
  /* Ensure full clickable area */
  text-align: center;
}

a.button {
  /*min-width: 210px;*/
  display: flex;
  justify-content: center;
  color: #FFFFFF;
}

.wp-element-caption {
  display: none;
}

.disclaimer {
  font-size: 14px;
}

.disclaimer a {
  color: inherit;
  font-weight: 300;
}

/* CONTACT US PAGE */
.oj-contact-block {
  display: flex;
  flex-direction: row;
  gap: 30px;
  width: 100%;
  margin: auto;
}

.oj-contact-col, .oj-form-wrap {
  flex-basis: 50%;
}

.oj-content li {
  margin-top: 1em;
}

.property-marker img {
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.75));
}

.poi-filter-btn[data-type="Restaurant"] {
  --poi-color: #e74c3c;
}

.poi-filter-btn[data-type="Shopping"] {
  --poi-color: #3498db;
}

.poi-filter-btn[data-type="Entertainment"] {
  --poi-color: #9b59b6;
}

.poi-filter-btn[data-type="Activities"] {
  --poi-color: #2ecc71;
}

.poi-filter-btn[data-type="Education"] {
  --poi-color: #f39c12;
}

.poi-filter-btn[data-type]:not([data-type="All"]) {
  border-color: var(--poi-color);
}

.poi-filter-btn[data-type]:not([data-type="All"]).active, .poi-filter-btn[data-type]:not([data-type="All"]):hover {
  background: var(--poi-color);
  border-color: var(--poi-color);
  color: #fff;
}

.footer {
  background-color: #2D2C2C;
  text-align: center;
  color: #FFFFFF;
  overflow: hidden;
  padding: 20px 0px;
}

.footer img {
  max-width: 50%;
  max-height: 100px;
}

.bottom-footer {
  background-color: #22332B;
  display: flex;
  color: #FFFFFF;
  padding: 20px 10px;
  text-align: center;
  justify-content: center;
  min-height: 60px;
}

footer a {
  color: #FFFFFF !important;
  letter-spacing: 1px;
}

.footer-logo {
  margin-bottom: 10px;
}

img.rm-logo {
  margin-bottom: 4px;
}

.footer-menu {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 90%;
  margin: auto;
  list-style: none;
  margin-bottom: 30px;
}

.footer-menu li {
  text-transform: uppercase;
  font-size: 18px;
}

/* HEADER */
.front-page-callout {
  width: 100%;
  background-color: #5EC798;
  color: #FFFFFF;
  text-align: center;
  padding: 0.5em 1em;
}

.front-page-callout h2 {
  font-size: 2.5rem;
  margin: 0px;
}

.front-page-callout p {
  font-size: 1.5rem;
}

.super-header {
  width: 100%;
  background-color: #22332B;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  /* always on top — covers hidden menu bleed-through on mobile and dropdown on desktop */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.super-container {
  display: flex;
  width: 90%;
  padding: 0.5em;
  justify-content: space-between;
  margin: auto;
}

.contact-bar {
  color: #FFFFFF;
  display: flex;
  gap: 1em;
  align-items: center;
}

.contact-bar p {
  margin: 0;
}

.mobile-menu-buttons {
  display: none;
}

a.superlink {
  color: #FFFFFF;
}

.superlink .fa-solid {
  color: #FFFFFF;
}

.no-transitions * {
  transition: none !important;
}

.site-header {
  padding: 0px;
  position: fixed;
  top: var(--super-header-height, 44px);
  width: 100%;
  z-index: 1001;
  /* above super-header (1000) so .main-nav (z-index:9999) inside it clears both headers */
  background-color: #2D2C2C;
  transition: top 0.3s ease, background-color 0.3s ease;
}

.home .site-header {
  padding: 0px 20px;
  background-color: transparent;
}

/* Shift hero content down so it's centered in the visible area below the fixed headers */
.home .oj-hero-slider-content {
  top: calc(42% + var(--total-header-height, 225px) / 2);
}

/* Push content below fixed headers. Admin bar handled by WordPress's html { margin-top: 32px } — no extra offset needed. */
body:not(.home) {
  padding-top: var(--total-header-height, 225px);
}

/* WordPress admin bar adjustment */
body.admin-bar .super-header {
  top: 32px;
}

body.admin-bar .site-header {
  top: calc(32px + var(--super-header-height, 44px));
}

@media screen and (max-width: 782px) {
  body.admin-bar .super-header {
    top: 46px;
  }
  body.admin-bar .site-header {
    top: calc(46px + var(--super-header-height, 44px));
  }
}

/* Scrolled state */
.scrolled .site-header,
.scrolled.home .site-header {
  background-color: #2D2C2C;
  top: var(--super-header-height, 44px);
}

body.admin-bar.scrolled .site-header {
  top: calc(32px + var(--super-header-height, 44px));
}

.scrolled .header-wrap {
  padding-top: 0;
}

.scrolled .site-logo img {
  max-height: 75px;
}

.scrolled .main-nav .menu a:hover {
  color: #5EC798;
}

.header-wrap {
  display: flex;
  width: 90%;
  justify-content: center;
  /*padding-top: 2em;*/
  margin: 0 auto;
}

.site-logo {
  padding: 1em 0;
  flex-basis: 15%;
}

.nav-w-btns-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-basis: 100%;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  justify-content: space-evenly;
}

.site-logo img {
  max-height: 150px;
  transition: max-height 0.3s ease;
}

.main-nav .menu {
  list-style: none;
  display: flex;
  gap: 2em;
  margin: 0;
  text-transform: uppercase;
  text-align: left;
  width: 100%;
  min-width: 66vw;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 1500px) {
  .main-nav .menu {
    gap: 0em;
  }
}

.main-nav .menu a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 20px;
  padding: 10px 15px;
  letter-spacing: 2px;
}

.main-nav .menu a:hover {
  color: #5EC798;
}

.main-nav .menu .current-menu-item > a,
.main-nav .menu .current-post-type-archive > a {
  color: #5B7267;
  pointer-events: none;
}

.home .menu-item-home {
  display: none;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}

.nav-overlay.show {
  opacity: 1;
  visibility: visible;
  z-index: 99;
}

.mobile-nav-toggle {
  display: none;
}

.menu-buttons {
  display: flex;
  gap: 2em;
}

.oj-btn-container {
  min-width: 245px;
}

/* Sub-menu - hidden by default */
.main-nav .menu .sub-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 1000;
  padding: 0;
  margin: 0;
  background-color: #22332B;
}

.main-nav .menu > li {
  position: relative;
}

.main-nav .menu > li:hover > .sub-menu {
  display: block;
}

.main-nav .menu .sub-menu a {
  color: #FFFFFF;
  padding: 10px 15px;
  display: block;
  text-transform: uppercase;
  letter-spacing: normal;
}

.main-nav .menu .sub-menu a:hover {
  background-color: #2D2C2C;
}

@media (max-width: 1200px) {
  .main-nav {
    position: fixed;
    top: var(--super-header-height, 44px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--super-header-height, 44px));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: 70px;
    /* clears close button (top:20px + ~24px height + breathing room) */
    background-color: #22332B;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 9999;
  }
  .site-logo {
    text-align: center;
    flex-basis: 100%;
  }
  .oj-btn-container {
    align-self: center;
  }
  .contact-bar {
    /* flex-direction: column;
        margin: auto; */
    display: none;
  }
  .main-nav .menu {
    display: block;
    margin: 20px 20px 20px;
    padding: 0;
    gap: 0;
  }
  .main-nav .menu li {
    margin-bottom: 20px;
  }
  .main-nav .menu a {
    display: block;
    color: #FFFFFF;
  }
  .main-nav.open {
    transform: translateY(0);
  }
  .mobile-nav-toggle {
    display: flex;
    background: none;
    cursor: pointer !important;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 999;
    margin: 5px 0px;
    border: 1px solid white;
    border-radius: 5px;
  }
  .menu-icon {
    display: block;
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    position: relative;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .menu-icon::before,
  .menu-icon::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    left: 0;
    transition: all 0.3s ease;
  }
  .menu-icon::before {
    top: -8px;
  }
  .menu-icon::after {
    top: 8px;
  }
  .mobile-nav-toggle.active .menu-icon {
    background: transparent;
  }
  .mobile-nav-toggle.active .menu-icon::before {
    transform: translateY(8px) rotate(45deg);
  }
  .mobile-nav-toggle.active .menu-icon::after {
    transform: translateY(-8px) rotate(-45deg);
  }
  /* -----------------------------------
     Mobile Contact Section
  ----------------------------------- */
  .oj-mobile-nav-contact {
    padding: 20px;
    background-color: #b2b2b2;
    /*border-bottom: 1px solid $lightgrey;*/
    text-align: center;
    margin-bottom: 20px;
  }
  .oj-mobile-nav-contact a {
    color: #333333;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .oj-mobile-nav-contact i {
    font-size: 18px;
    /* Adjust icon color if needed */
    color: #333333;
  }
  /* -----------------------------------
   Mobile Nav Button Section
----------------------------------- */
  .oj-mobile-nav-buttons {
    padding: 20px;
    background-color: #b2b2b2;
    /*border-top: 1px solid $lightgrey;*/
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Close Button Styles */
  .mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10000;
    color: #333333;
  }
  .mobile-nav-close:focus {
    outline: none;
  }
  .close-icon {
    display: inline-block;
  }
}

/* ============================================= */
/* = Mobile Menu Settings                 */
/* ============================================= */
@media (min-width: 1201px) {
  .main-nav {
    display: flex;
    height: auto;
    width: auto;
    align-self: center;
    flex-basis: 85%;
  }
  .mobile-nav-toggle, .oj-mobile-nav-buttons, .oj-mobile-nav-contact, .mobile-nav-close {
    display: none;
  }
}

@media (max-width: 1200px) {
  .menu-buttons {
    display: none;
  }
  .mobile-menu-buttons {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
  }
  .mobilelink {
    color: #FFFFFF;
  }
  /*.fa-solid, .fas {
    color: $white;
}*/
  /* Mobile user dropdown */
  .mobile-user-dropdown {
    position: relative;
  }
  .mobile-user-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
  }
  .mobile-user-toggle i {
    color: #FFFFFF;
  }
  .mobile-user-toggle .fa-chevron-down {
    font-size: 0.7em;
    transition: transform 0.2s ease;
  }
  .mobile-user-toggle.open .fa-chevron-down {
    transform: rotate(180deg);
  }
  .mobile-user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #22332B;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 160px;
    z-index: 1001;
  }
  .mobile-user-menu.open {
    display: block;
  }
  .mobile-user-menu li a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 14px;
    white-space: nowrap;
  }
  .mobile-user-menu li a:hover {
    background-color: #2D2C2C;
  }
}

@media (max-width: 700px) {
  button.mobile-nav-toggle {
    align-self: flex-start;
  }
  .site-logo {
    padding: 1em 0px 1em;
  }
}

@media (max-width: 400px) {
  .site-logo img {
    max-height: 115px;
  }
  .front-page-callout h2 {
    font-size: 2rem;
  }
}

.reducedwidth {
  width: 90%;
  margin: auto;
}

.oj-row2 {
  padding: 50px;
  text-align: center;
}

.oj-row3 {
  padding: 2em 15vw 2em;
  margin: 0 auto;
}

ul.nolist {
  list-style: none;
  text-align: left;
}

.nolist {
  column-count: 3;
  padding: 0;
  margin-left: 10%;
}

.is-layout-flex {
  margin-bottom: 0px;
  gap: 0;
}

.wp-block-image img {
  margin-bottom: -16px;
  max-width: 50vw;
  /*min-height: 75vh;
    max-height: 90vh;*/
  height: 50vh;
  object-fit: cover;
}

.rmwb_info-list3 {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  padding-top: 40px !important;
  font-size: 1.75em;
}

.rmwb_info-list3 li {
  flex-direction: column;
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: center;
  border-bottom: 1px solid #bbb;
  box-sizing: border-box;
}

.grid-details {
  justify-self: end;
}

/* FAQs */
.faq-section {
  width: 78%;
  margin: 2em auto;
}

.faq-wrapper {
  width: 100%;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.faq-question {
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding-right: 20px;
  font-size: 22px;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  content: "-";
}

.faq-answer {
  display: none;
  padding: 10px 0;
  color: #555;
  font-size: 18px;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-answer a {
  text-decoration: underline;
  color: inherit;
}

/* HOME PAGE */
.centered {
  text-align: center;
  margin: auto;
}

a.nohover {
  text-decoration: none;
}

.property-listings-container, .unit-listings-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  width: 80%;
  margin: auto;
  margin: 1em auto 2em;
}

.property, .unit {
  flex-basis: calc(33.333% - 0.67em);
  /* Accounts for gap */
  border: 1px solid #2D2C2C;
  text-align: center;
  /*border-radius: 20px;*/
}

.unit-contact-buttons {
  display: flex;
  gap: 0.75em;
  justify-content: center;
  margin: 0px auto 3em;
  width: 90%;
  flex-direction: column;
}

.unit-list-button-container {
  padding: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #2D2C2C;
  width: 80%;
  margin: 2em auto;
}

.unit-list-button-container a, .unit-list-button-container a:hover {
  text-decoration: none;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.unit-list-button-container:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.unit-detail-button-container {
  padding: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #5B7267;
  flex: 1;
}

p.unit-count, p.no-units-available {
  margin-bottom: 0px;
}

.unit-detail-description {
  text-align: left;
  margin: 2em 0px;
}

.unit-detail-description p {
  margin: 10px 0px;
}

.unit-detail-special {
  background-color: #22332B;
  padding: 1em;
  color: #FFFFFF;
}

.unit-detail-button-container a, .unit-detail-button-container a:hover {
  text-decoration: none;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.unit-detail-button-container:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.rental-terms {
  margin: 1em 0px;
}

.rental-terms p {
  font-size: inherit;
  line-height: 2;
}

h1.page-title {
  text-align: center;
  margin-top: 0.5em;
}

.view-details {
  margin: 1.5em auto;
}

.isflex {
  display: flex;
  width: 80%;
  margin: auto;
}

.add-bottom {
  margin-bottom: 2em;
}

.add-gap {
  gap: 1em;
}

/* Load More Button */
.rmua-load-more-wrapper {
  text-align: center;
  margin: 1em;
}

/* Search/Filters */
.property-filters {
  width: 50%;
  margin: 0px auto 2em;
  border: 1px solid;
  /*border-radius: 10px;*/
}

/* Featured Unit Block */
.unittype {
  margin-bottom: 15px;
}

.featured-container, .featured-wrapper {
  text-align: center;
}

.featured-container {
  width: 80%;
  margin: 10px auto;
}

.featured-unit {
  border: 1px solid #2D2C2C;
  /*border-radius: 20px;*/
  margin: 0px 25px;
  -webkit-box-shadow: 5px 5px 15px 5px #666;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  background-color: #FFFFFF;
}

.hp-featured {
  margin: 20px 0px 55px;
}

.featured-container .slick-track {
  margin-bottom: 10px;
}

.entry-content .fa-solid {
  color: #2D2C2C;
}

img.featured-image {
  height: 300px;
  width: 90%;
  object-fit: cover;
  /*border-radius: 20px;*/
}

/* Unit Details */
.unit-details {
  text-align: center;
}

.unit-custom-description {
  font-size: 1.25em;
}

.unit-info-grid, .image-grid {
  margin: 0px 0px 1em;
}

.unit-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15%, 1fr));
  gap: 15px;
}

@media (max-width: 800px) {
  .unit-info-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
}

#unit-map {
  margin: auto;
  height: 400px;
  width: 100%;
  /*border-radius: 20px;*/
}

.unit-image-gallery {
  width: 80%;
  margin: 2em auto;
}

/* Unit Image Gallery Carousel */
.unit-carousel-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.slick-carousel-main {
  margin-bottom: 0;
}

.slick-carousel-main .slick-list {
  margin: 0;
  padding: 0;
}

.slick-carousel-main .slick-slide {
  line-height: 0;
}

.slick-carousel-main img {
  width: 100%;
  height: 750px;
  object-fit: cover;
  /*border-radius: 20px;*/
}

.slick-carousel-nav {
  margin-top: 10px;
}

.slick-carousel-nav img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 2px;
  /*border-radius: 10px;*/
}

.slick-carousel-nav .slick-current img {
  border-color: #2D2C2C;
}

.slick-carousel-nav .slick-slide {
  margin: 0 5px;
}

@media (max-width: 800px) {
  .slick-carousel-nav img {
    height: 60px;
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.image-grid img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  /*border-radius: 20px;*/
}

.details-list {
  text-align: left;
}

.col-sm-4 {
  background-color: #eeeeee;
  padding: 20px;
  /*border-radius: 20px;*/
  flex: 1 !important;
}

.col-sm-8 {
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.col-sm-8 .unit-map-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.unit-apply-now {
  margin: 0.5em 1em 1em;
}

.unit-bedrooms, .unit-bathrooms, .unit-rent, .unit-available-date, .pets_allowed, .unit-sqft {
  border: 1px solid #2D2C2C;
  /*border-radius: 20px;*/
  align-content: center;
  width: 100%;
  margin: auto;
  height: 120px;
  background-color: #eeeeee;
}

.unit-leaflet-map {
  width: 100%;
  flex: 1;
  min-height: 400px;
  /*border-radius: 20px; */
  border: 1px solid #ddd;
}

.floorplan-data h2 a {
  text-decoration: none;
}

.archive-floorplan-view {
  margin: 1em;
  border: 1px solid #2D2C2C;
  padding: 1em 2em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  justify-content: center;
  align-items: center;
  flex-basis: 30%;
}

.single-floorplan-view {
  margin: 1em;
  padding: 2em 4em;
}

.floorlan-page-description {
  width: 80%;
  margin: 1em auto 2em;
  padding: 1em;
}

.floorplan-list-button-container {
  padding: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #5B7267;
  width: 90%;
  margin: 1em auto !important;
}

@media (max-width: 1475px) {
  .floorplan-list-button-container {
    width: 66%;
  }
}

.floorplan-list-button-container a, .floorplan-list-button-container a:hover {
  text-decoration: none;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.floorplan-list-button-container:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.floorplan-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  align-items: center;
  text-align: center;
  margin-top: auto;
}

.floorplan-unitcount {
  margin: 1em 0px;
  font-weight: 800;
}

.floorplan-listings-container {
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.floorplan-gallery img {
  height: 350px;
}

.floorplan-detail-gallery img {
  height: auto;
  width: 75%;
  display: flex;
}

.available-units h4 {
  text-align: center;
  font-size: 40px;
  margin: 0px;
  padding-top: 0.5em;
}

.units-grid {
  /*    display: flex;
    flex-direction: column;*/
  gap: 2em;
}

.gallery-item {
  display: flex;
  justify-content: left;
}

.units-slider.slick-initialized {
  display: block;
  gap: 0;
}

.units-slider.slick-initialized .slick-list {
  overflow: hidden;
  margin: 0 -10px;
}

.units-slider.slick-initialized .slick-track {
  display: flex;
}

.units-slider.slick-initialized .slick-slide {
  padding: 0 10px;
  box-sizing: border-box;
  float: left;
}

.units-slider.slick-initialized .slick-slide > div {
  width: 100%;
}

.units-slider.slick-initialized .unit-card {
  width: 100%;
}

.units-slider-counter {
  text-align: center;
  padding: 0.75em 0;
  font-size: 0.9rem;
  color: #666;
}

.floorplan-unit-list-details {
  text-align: center;
}

p.unit-fp-address {
  font-weight: 800;
  font-size: 1.75rem;
}

.unit-fp-specs {
  display: flex;
  gap: 1em;
  margin: 1em auto;
  width: 85%;
}

.fp-unit-amen {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 1.125rem;
}

.floorplan-detail-button-container {
  padding: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #5B7267;
  width: 50%;
  margin: 0.25em auto;
}

.floorplan-detail-button-container a, .floorplan-detail-button-container a:hover {
  text-decoration: none;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.floorplan-detail-button-container:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.col-50 {
  flex: 1;
  margin: 0px 2em;
}

.grayback {
  background-color: #eeeeee;
}

.isnotflex {
  column-count: 2;
  column-gap: 3em;
  width: 90%;
  margin: auto;
}

.col-not-50 {
  break-inside: avoid;
}

.slider-wrap {
  width: 100%;
  padding: 0px 2em 2em;
}

.fp-no-units-available {
  text-align: center;
  padding: 1em;
  font-weight: 800;
}

.floorplan-filters {
  background-color: #eeeeee;
  border-top: 3px solid #2D2C2C;
  border-bottom: 3px solid #2D2C2C;
  padding: 1.25em 0;
  margin-bottom: 2em;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2.5em;
  justify-content: center;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.filter-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2D2C2C;
  margin-right: 0.25em;
}

.filter-btn {
  padding: 0.45em 1em;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: transparent;
  color: #2D2C2C;
  border: 2px solid #2D2C2C;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover, .filter-btn.active {
  background-color: #2D2C2C;
  color: #FFFFFF;
}

/* Filter Bar */
.unit-filter-bar {
  background-color: #eeeeee;
  border-top: 3px solid #2D2C2C;
  border-bottom: 3px solid #2D2C2C;
  padding: 1.5em 0;
  margin-bottom: 2em;
}

.unit-filter-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1em 1.5em;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}

.unit-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.unit-filter-group label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2D2C2C;
}

.unit-filter-floorplan-toggles {
  align-items: center;
}

.unit-fp-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.unit-fp-toggle {
  padding: 0.5em 1.1em;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: transparent;
  color: #2D2C2C;
  border: 2px solid #2D2C2C;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.unit-fp-toggle:hover, .unit-fp-toggle.is-active {
  background-color: #2D2C2C;
  color: #FFFFFF;
}

.unit-archive-descriptions {
  width: 63%;
  margin: 2em auto;
  font-size: 20px;
}

/* Unit Archive Grid */
.unit-archive-grid {
  display: flex;
  flex-direction: column;
  gap: 2em;
  width: 100%;
  max-width: 1200px;
  margin: 0px auto;
}

@media (max-width: 1100px) {
  .unit-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .unit-archive-grid {
    grid-template-columns: 1fr;
  }
}

.unit-archive-grid .unit-card {
  border: 1px solid #2D2C2C;
  display: flex;
}

.unit-archive-grid .unit-card .unit-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.unit-archive-grid .unit-card .unit-image img.floorplan-slide-img {
  object-fit: contain;
}

.unit-archive-grid .unit-card .floorplan-unit-list-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unit-archive-grid .unit-card .floorplan-detail-button-container {
  width: 85%;
}

.unit-image {
  flex: 1;
  /*display: flex;
    justify-content: center;*/
}

.unit-card-slider {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.unit-card-slider .slick-prev,
.unit-card-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  /*background-color: rgba(0, 0, 0, 0.45);*/
  border-radius: 50%;
}

.unit-card-slider .slick-prev::before,
.unit-card-slider .slick-next::before {
  font-size: 14px;
  line-height: 32px;
  opacity: 1;
  color: #5B7267 !important;
}

.unit-card-slider .slick-prev {
  left: 8px !important;
}

.unit-card-slider .slick-next {
  right: 8px !important;
}

.unit-floorplan-type {
  font-size: 0.95rem;
  color: #333333;
  margin: 0.25em 0 0.5em;
}

.unit-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3em 1em;
  font-size: 1.1rem;
}

.unit-no-results button {
  background: none;
  border: none;
  color: #2D2C2C;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}

.unit-archive-disclaimer {
  width: 90%;
  max-width: 1200px;
  margin: 2em auto;
  font-size: 0.85rem;
  color: #333333;
  text-align: center;
}

@media (max-width: 1705px) {
  .archive-floorplan-view {
    flex-basis: 45%;
  }
}

@media (max-width: 1000px) {
  .archive-floorplan-view {
    flex-basis: 100%;
  }
}

.show-for-small {
  display: none;
}

@media (max-width: 1200px) {
  .oj-row3 {
    padding: 2em 5vw 2em;
  }
  .oj-hero-slider-content {
    width: 70%;
    left: 50%;
    top: 66%;
  }
  .oj-row3 .oj-content, .our-location {
    text-align: center;
  }
  .oj-slider-title {
    text-align: center;
  }
  .oj-slider-overlay {
    width: 100%;
  }
  .oj-btn-container2 {
    max-width: 90%;
    margin: auto;
  }
  .oj-contact-col, .oj-form-wrap {
    width: 100%;
  }
  .hp-head {
    font-size: 2em;
    margin: 0px 50px;
    width: 100%;
  }
  .slogan {
    margin-top: 20px;
  }
  .floorplan-gallery {
    text-align: center;
    flex: none;
    max-width: 100%;
    margin: 0;
  }
  .floorplan-data {
    flex: none;
  }
  .archive-floorplan-view {
    padding: 2em;
  }
  .floorplan-gallery img {
    width: 100%;
    height: auto;
  }
  .floorplan-gallery-carousel img {
    height: auto;
  }
  .archive-floorplan-view {
    flex-direction: column;
  }
  .floorplan-unitcount, .floorplan-description {
    text-align: center;
  }
  .floorplan-list-button-container {
    align-self: center;
    width: 90%;
  }
  .isnotflex {
    column-count: 1;
    column-gap: 3em;
    width: 90%;
    margin: auto;
  }
  .gallery-item {
    justify-content: center;
  }
  .isflex {
    flex-direction: column-reverse;
  }
  .col-sm-8, .col-sm-4 {
    max-width: 100%;
  }
  .slick-carousel-main img {
    height: 500px !important;
  }
  .slick-carousel-nav img {
    height: 120px;
  }
  .unit-search {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: auto;
    align-items: center;
  }
  .unit-search label,
  .unit-search input,
  .unit-search select {
    width: 100%;
    margin-bottom: 15px;
  }
  .wp-block-image img {
    max-width: 100vw;
  }
  ul.nolist {
    display: flex;
  }
  .detailbutton {
    width: unset;
  }
  .slider-nav img {
    height: 50px;
    min-width: 60px;
  }
  .footer-menu {
    display: none;
  }
  .oj-contact-block {
    display: block;
  }
  h1, h2 {
    text-align: center;
  }
  .icon .fa-solid {
    font-size: 5rem;
  }
  .address-info, .contact-page-info {
    text-align: center;
  }
  button.unit-fp-toggle {
    flex-basis: 100%;
  }
  .unit-archive-descriptions {
    width: 90%;
    margin: 1em auto;
    font-size: 1rem;
  }
  .unit-card {
    flex-direction: column;
    width: 90%;
    margin: auto;
  }
}

@media (max-width: 1000px) {
  .oj-slider-title {
    min-width: 80vw;
  }
}

@media (max-width: 900px) {
  .oj-content-rotator-container .slide-content p {
    text-align: center;
  }
}

@media (max-width: 850px) {
  body.admin-bar.scrolled .site-header {
    top: 0px;
  }
  p {
    font-size: 1rem;
  }
}

@media (max-width: 781px) {
  .oj-row {
    text-align: center;
  }
  .flex-for-icon-bar {
    flex-direction: column;
  }
  .hpcol2 {
    flex-direction: column-reverse;
  }
  /*.oj-content-rotator-container .slide-text {
    text-align: left;
}*/
  .google-map {
    margin-top: 0px;
  }
  .oj-content-rotator-container h2, .slide-content h3 {
    text-align: center;
  }
  .show-for-large {
    display: none;
  }
  .show-for-small {
    display: block;
  }
  .iscolumn {
    column-count: 1;
  }
  .poi-panel-wrapper {
    width: 90%;
    margin: 1em auto;
  }
  li.poi-panel-item {
    flex-basis: 100%;
  }
  button.poi-filter-btn {
    width: 100%;
  }
  .filter-group {
    flex-basis: 100%;
    flex-direction: column;
  }
  .filter-btn {
    width: 80%;
  }
}

@media (max-width: 750px) {
  .front-page-callout p {
    font-size: 0.9rem;
  }
}

@media (max-width: 700px) {
  .subhead {
    font-size: 20px;
  }
  .menu-buttons .oj-btn-container {
    min-width: 175px;
  }
  .ww-gallery__tab, .tab-btn {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .front-page-callout h2 {
    font-size: 2rem;
  }
  .slick-carousel-main img {
    height: 250px !important;
  }
}

@media (max-width: 550px) {
  h1 {
    font-size: 2.25em;
    width: 100%;
  }
  .ic-subhead, .icon-text {
    font-size: 22px;
  }
}

@media (max-width: 500px) {
  h2 {
    font-size: 2em;
  }
}

@media (max-width: 400px) {
  h1 {
    font-size: 2.2em;
  }
}

@media (max-width: 375px) {
  a.superlink {
    font-size: 0.75em;
  }
  .contact-bar {
    gap: 0;
  }
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1em;
  }
  .floorplan-list-button-container {
    line-height: 1;
  }
  .floorplan-list-button-container a {
    font-size: 0.5em;
  }
  .footer p, .bottom-footer p {
    font-size: 0.75em;
  }
}