<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

html, body {
    height: 100%; /* Ensure body takes full height */
    margin: 0;
	width: 100%;
  max-width: 100%;
	overflow-x: hidden;

}
p {
   /* margin-block-end: 0;
    margin-block-start: 0;*/
}
.flex-child {
  min-height: 0;
}

html {
  scroll-padding-top: 150px;
	scroll-behavior: smooth;
}

.contact:hover .contact-text {
  display: none!important;
}
#_header-2-14{
	z-index: 10000!important
}

/*-------SWIPER CODE-------*/
.my-swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.swiper-slide:last-child {
    margin-right: 0;
}

/*.my-swiper .swiper-wrapper {
  display: flex;
}*/

.my-swiper .swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}
.my-swiper .swiper-slide {
  width: 80%;
}

@media (min-width: 768px) {
  .my-swiper .swiper-slide {
    width: 45%;
  }
}

@media (min-width: 1024px) {
  .my-swiper .swiper-slide {
    width: 30%;
  }
}

.my-swiper .swiper-slide {
  flex-shrink: 0 ;
  width: calc((100% / 3) - 13.33px) !important; /* adjust for 3 slides + 20px gap */
  box-sizing: border-box;
}
/* ---------END SWIPER CODE--------*/


/* ------------------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;
}
.menu-item-173 > 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;
}
.menu-item-173 > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/wp-content/uploads/2026/01/roll2.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;
}
.menu-item-173 > 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-left-pic {
		 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%);*/
	background: #043156
}
#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;
    max-width: 100%;
    z-index: 1;
    pointer-events: none;
}
.story-animation {
    position: relative;
    top: 208px;
    right: -33%;
    /*width: 1000px;*/
    max-width: 100%;
    z-index: 1;
    pointer-events: none;
}
.resident-animation {
    position: relative;
    bottom: -319px;
    left: 30%;
    /*width: 1440px;*/
    max-width: 100%;
    z-index: 1;
    pointer-events: none;
}
.sustain-animation {
    position: relative;
    top: 50px;
    left: 0%;
	z-index: 1;
    pointer-events: none;
	max-width: 100%!important;
}
#animation-div, #piper-div, #resident-animation {
    max-width: 100%!important;
	overflow-x: clip;
}

.oxy-post-image-date {
    color: var(--light);
	font-size: var(--text-s)
}
.oxy-post-image-date-dk {
    color: var(--primary);
	font-size: var(--text-s)
}

/* make the image container clip the zoom */
.fluentform .ff-el-input--content {
  /*padding-right: 40px !important;*/
}

/* tint overlay */
.ep-hover .oxy-post-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20); /* change tint here */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* show tint on hover */
.ep-hover .oxy-post:hover .oxy-post-image::after {
  opacity: 1;
}
/* END*/

/* 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 {
        width: 1000px;
    }
	.sustain-animation {
        min-width: 1440px;
    }
	.resident-animation {
    width: 1440px;
}
	.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: 1920px) {
    .story-animation {
   /* bottom: 100px;*/
		width: 1000px;
}
	.piper-animation {
    width: 1440px;
}
		.resident-animation {
    width: 1440px;
}
	.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;
    }
		.resident-animation {
    min-width: 1440px;
}
}
/* Tablet-ish */
@media (max-width: 1450px) {
    #section-57-14 {
        --bg-x: 18vw; 
        --bg-y: -190px;
        --bg-size: 1400px;
    }
	.sustain-animation {
    top: 106px;
    left: -12%;
    min-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%;
        min-width: 1100px;
        top: 267px;
    }
	.resident-animation {
        left: 0%;
        width: 1200px;
        top: 370px;
    }
	    .story-animation {
        top: 252px;
        left: 9%;
        width: 900px;
    }
	.grid-big-left,	.grid-big-right {grid-template-columns: 2fr!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: 331px;
        width: 535px;
		left:-9%;
    }
.resident-animation {
        left: -40%;
        min-width: 1200px;
        top: 370px;
    }
	.sustain-animation {
        top: 372px;
        right: 0%;
        min-width: 800px;
    }
	.piper-animation {
 	position: relative;
    top: 75px;
    left: -80px;
    min-width: 500px;
	}
	.grid-big-left,	.grid-big-right {grid-template-columns: 1fr!important;  }
	
	.grid-big-left-pic {
		 display: grid !important;
    grid-template-columns: 3fr 2fr!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 */


.my-swiper .swiper-slide {
  flex-shrink: 0 !important;
  width: calc((100% / 2) - 13.33px) !important; 
  box-sizing: border-box;
}
}
@media (max-width: 479px) {
    #section-57-14 {
          --bg-x: 0vw; 
        --bg-y: 680px;
        --bg-size: 1000px;
    }
  .home-animation {
 /* top: -218px;
    width: 90%; */
}
	.story-animation {
        top: 374px;
        width: 535px;
		left:-9%;
    }
.resident-animation {
        top: 432px;
        left: -60%;
        min-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: -61%;
		min-width: 800px;
    }
}
/*---------------------IPhone 11 landscape---------------------------*/
@media only screen and (min-width: 414px) and (orientation: landscape) {
  #div_block-15-10 {
        height: 130px!important;
    }
}

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


.custom-arrow-prev, .custom-arrow-next {
 /* position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;*/
  cursor: grab;
  z-index: 999;
  user-select: none;
}
}