html, body {
    height: 100%; /* Ensure body takes full height */
    margin: 0;
	width: 100%;
  max-width: 100%;
}
.flex-child {
  min-height: 0;
}
#_header-2-14{
	z-index: 10000!important
}
/* ------------------Menu rollover--------------------- */
/* Target all menu-item-20 links */
.menu-item-114 > a {
  position: relative;
  display: inline-block;
}

/* Fade out text quickly */
.menu-item-114 > a > * {
  transition: opacity 0.1s ease; 
}

.menu-item-114 > a:hover * {
  opacity: 0 !important;
}
.leaflet-control-attribution.leaflet-control {
    display: none;
}
/* Hide Oxygen inline hover color */
.menu-item-114 > a:hover {
  color: transparent !important;
}

/* Image overlay */
.menu-item-114 > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/uploads/2026/01/roll.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Show image on hover */
.menu-item-114 > a:hover::after {
  opacity: 1;
}
.dark-menu .menu-item-114 > a::after {
  background-image: url("/wp-content/uploads/2026/01/roll2.svg");
}

.ff-message-success {
	margin-bottom: 10px;
}

/* ------------------Grids--------------------- */
.grid-big-left {
    display: grid !important;
    grid-template-columns: 3fr 2fr!important  ;
}
.grid-big-right {
	display: grid!important ;
    grid-template-columns: 2fr 3fr !important ;
}

.Sticky-header-grad {
  background: linear-gradient(
    to top,
    #043156 0%,
    #043b66 50%,
    #054172 100%);
}
#top-section-white {
  background: var(--light);
}


.gradient {
  background: linear-gradient(
    to bottom,
    #054172 0%,     
    #043b66 50%,      
    #043156 100%);   
}
.oxy-header-container {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
.home-animation {
  position:relative;
  top: 0;
  left: 0;
  width: 100%;        
  max-width: 1440px;
  z-index: 1;
  pointer-events: none; /* prevents blocking clicks */
}

/*#home-top-div {
    min-height: clamp(0px, 50vw, 900px);
}*/
.piper-animation {
 	position: relative;
    top: 115px;
    left: -202px;
    width: 1440px;
    z-index: 1;
    pointer-events: none;
}
.story-animation {
    position: relative;
    top: 207px;
    right: -33%;
    width: 1000px;
    /*max-width: 100%;*/
    z-index: 1;
    pointer-events: none;
}
.resident-animation {
    position: relative;
    bottom: -351px;
    left: 30%;
    width: 1440px;
    /* max-width: 100%; */
    z-index: 1;
    pointer-events: none;
}
.sustain-animation {
    position: relative;
    top: 50px;
    left: 0%;
    width: 1440px;
    z-index: 1;
    pointer-events: none;
}

/* Ensure the animation scales correctly */
.home-animation lottie-player,
.home-animation svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.animation-container {
  position: relative;
  width: 100%; /* Make the container take up the full width */
  height: 0;
  padding-bottom: 87% /* This is based on the aspect ratio (h/w * 100). For 1250/1440, it’s roughly 87% */;
  overflow: hidden; /* Hide anything that overflows */
  display: flex;
  justify-content: center;
  align-items: center;
}
/*-----------------------RESPONSIVE STYLES-----------------------*/

/*------------LARGE SCREENS------------*/
@media (min-width: 1921px) and (max-width: 2850px) {
 .story-animation {
}
	.grid-big-left {
    display: grid !important;
    grid-template-columns: 3fr 2fr!important  ;
}
.grid-big-right {
	display: grid !important;
    grid-template-columns: 2fr 3fr !important ;
}
}
@media (max-width: 1900px) {
    .story-animation {
   /* bottom: 100px;*/
}
	.grid-big-left {
    display: grid !important;
    grid-template-columns: 3fr 2fr!important  ;
}
.grid-big-right {
	display: grid !important;
    grid-template-columns: 2fr 3fr !important ;
}
}
@media (max-width: 1700px) {
    #section-57-14 {
        --bg-x: 20vw; 
        --bg-y: -200px;
        --bg-size: 1600px;
    }
}
/* Tablet-ish */
@media (max-width: 1450px) {
    #section-57-14 {
        --bg-x: 18vw; 
        --bg-y: -190px;
        --bg-size: 1400px;
    }
	.sustain-animation {
    top: 119px;
    left: -12%;
    width: 1240px;
}
	.piper-animation {
 	position: relative;
    top: 75px;
    left: -202px;
    width: 1240px;
	}
		.grid-big-left {
    display: grid !important;
    grid-template-columns: 3fr 2fr!important  ;
}
.grid-big-right {
	display: grid !important;
    grid-template-columns: 2fr 3fr !important ;
}
}
/* Tablet-ish */
@media (max-width: 1200px) {
    #section-57-14 {
        --bg-x: 19vw; 
        --bg-y: -120px;
        --bg-size: 1200px;
    }
	.sustain-animation {
        right: -12%;
        width: 1100px;
        top: 267px;
    }
	.resident-animation {
        left: 0%;
        width: 1200px;
        top: 398px;
    }
	    .story-animation {
        top: 233px;
        left: 9%;
        width: 900px;
    }
	.grid-big-left,	.grid-big-right {grid-template-columns: 1fr!important;  }
}
/* iPad Mini (portrait + landscape) */
@media (min-width: 769px) and (max-width: 1024px) {
    #section-57-14 {
        --bg-x: 21vw;
        --bg-y: -120px;
        --bg-size: 1100px;
    }
	}
/* Small tablet / big mobile */
@media (max-width: 768px) {
    #section-57-14 {
          --bg-x: 0vw; 
        --bg-y: 680px;
        --bg-size: 1000px;
    }
	.story-animation {
        top: 323px;
        width: 535px;
		left:-19%;
    }
.resident-animation {
        left: -40%;
        width: 1200px;
        top: 398px;
    }
	.sustain-animation {
        top: 372px;
        right: 0%;
        width: 800px;
    }
	.piper-animation {
 	position: relative;
    top: 75px;
    left: -80px;
    width: 500px;
	}
	.grid-big-left,	.grid-big-right {grid-template-columns: 1fr!important;  }
/* Prevent Fluent Forms columns from stacking on mobile */
    .ff_col_2, .ff_col_3, .ff_col_4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
	.no-stack .ff-el-group {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
	/* Prevent Fluent Forms columns from stacking on mobile */

}

@media (max-width: 479px) {
    #section-57-14 {
          --bg-x: 0vw; 
        --bg-y: 680px;
        --bg-size: 1000px;
    }
  .home-animation {
 /* top: -218px;
    width: 90%; */
}
.resident-animation {
        top: 460px;
        left: -40%;
        width: 900px;
    }
}
.grid-big-left,	.grid-big-right {    grid-template-columns: 1fr;
}
@media (max-width: 376px) and (max-height: 625px) {
  .home-animation {
 /* top: -40px;
    width: 90%;*/ 
}
	.story-animation {
 /*   bottom: -110px;*/
	width:100%;
}
	.sustain-animation {
        right: -20%;
    }
}
	@media (max-width: 900px) and (max-height: 450px) {   .home-animation {top: -30px; left: 0; width: 400px;    }
}
	@media (max-width: 713px) and (max-height: 375px) {
  .home-animation {
        top: -50px;
        left: 0;
        width: 360px;
    }
}
@media only screen   /* ------------------iPhone 14 Pro max--------------------- */
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) {
.home-animation {
  top: -60px!important;
    width: 90%; 
}
}
@media (max-width: 450px)  {  /* ------------------Small mobile--------------------- */
	.sustain-animation {
        left: -40%;
    }
}

/* ------------------CSS from ChatGTP--------------------- */
.map-wrapper {
  width: 100%;
  height: 500px;
  min-height: 300px;
  position: relative;
}
#myMap {
  width: 100%;
  height: 100%;
}