/*-------------------*/




.mobileview {
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #01b07e;
    width: 151.8px;
    height: 0;
    cursor: pointer;
    background-color: rgba(58,175,249,0.0);
}
/* Icon: square box, true center, no nudges */
.mobileview i {
  font-size: 18px;  
  color: #34b998;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;    
  text-align: center;
  transform-origin: 50% 50%;
  margin-right: 5px;
  transition: color 0.3s ease, transform 0.4s ease;
  vertical-align: middle;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateY(2px);
}
/* rotation toggle */
.orientationIcon.icon-rotated {
  transform: translateX(-0.5px) translateY(-2px) rotate(180deg);
}
/* optional color toggle */
.orientationIcon.icon-highlight { color: #34b998; }


@media (hover: hover) and (pointer: fine) {
  .mobileview:hover {  
    color: #01bb6b;
    filter: brightness(60%) contrast(120%);
  }
}


.mobile{
    position: absolute;
    background-repeat: no-repeat;
    border: 1px solid #34a085;  
    background-size: 100%;   
    background-position: center;
    overflow: hidden;        
    border-radius: 10px;        
    pointer-events: none;
    --peek-fade: 350ms;
    --peek-delay: 100ms; 
}
.mobile .mobile-layer{
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100%;        
    background-position: center;
    opacity: 0;
    transition: opacity var(--peek-fade) ease;
    pointer-events: none;
    border-radius: inherit;
}

/* Common base */
.mobilepos {
  position: relative;
  overflow: visible;
    opacity: 0;
}
.showmobile {
  position: relative;
  left: 0;
  right: 0;
  width: 151.8px;
}


.subheading .text {
  display: inline; /* ensures normal text flow inside */
}

.showcolor{
    color:#01b07e;  
}



.carousel-wrapperprint {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* clip slides/arrows only */
	border: 1px solid #67c5ae;
    border-radius: 0px;
    touch-action: pan-y;   /* allow vertical scroll; deliver horizontal swipes to JS */
}

	
.carousel-container .info .subheading:hover {  
    color:#5BBB01;
    filter: brightness(60%) contrast(120%);
}
	
	/* Make the slideshow truly fullscreen */

.slides-fullscreen {
  transition: opacity 160ms ease;
}
.slides-fullscreen.is-hide {
  opacity: 0;
}
  /* Image area */
.slides-fullscreen .frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}


.slides-fullscreen .frame img.ready { opacity: 1; }

.slides-fullscreen .frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain; /* or cover */
  transition: opacity 160ms ease;
  opacity: 0;
}
  .slides-fullscreen .counter {
    position: absolute; 
	left: 50%; 
	bottom: 18px;
    transform: translateX(-50%);
    color: #fff; 
	background: rgba(0,40,31,.65);
    padding: 6px 10px 6px 12px; 
	border-radius: 18px; font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing: .02em;
	  
	  visibility: hidden;
  }

	/*
.slides-fullscreen .nav:hover { 
  background: rgba(20,20,20,.95); 
	}
.slides-fullscreen .nav:disabled,
  .slides-fullscreen .nav[hidden] { 
	  display: none; 
	}
*/

.slides-fullscreen .nav:not(:disabled):hover {
  background: rgba(20,20,20,.95);
}
	
	
.slides-fullscreen .nav:disabled {
  opacity: 0.25;       
  cursor: default;
  pointer-events: none; 
}
	
/* Arrow is "off" (for decks with only one image) */
.slides-fullscreen .nav.off {
  opacity: 0;
  pointer-events: none;
}


.close-full {	
	position: absolute;
	background-image: url("../img/closeXfull.svg");
    background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	top: calc(5% - 18px);
    right: calc(5% - 20px);
    width: 56px;
    height: 56px; 
    cursor: pointer;
	z-index: 9999999;
  filter: brightness(100%) contrast(90%)
	  drop-shadow(2px 4px 5px rgba(33, 96, 73, 0.5));
	
}
.close-full:hover {
	  filter: brightness(70%) contrast(200%);
}



.nextp {
	font-weight: 900;
    font-size: 14px;
    line-height: 1.25;  
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #01b07e;
    height: 0;
    cursor: pointer;
}
.nextp i {
  font-size: 18px;      
  color: #34b998;
  display: inline-block;
  width: 0.5em;
  height: 1em;
  line-height: 1.25;  

  transform-origin: 50% 50%;
  vertical-align: middle;
  backface-visibility: hidden;
	  text-align: left;
  margin-right: 5px;
	margin-left: 0px;
  transform: translateY(-2px);
}










	
.carousel-container .nextproject {
	z-index: 10;
    opacity: 0;      
}  




@media screen and (orientation: portrait){

	
.roadnextbtn {
	position: absolute;
    top: 0;
    left: calc(100% + 13vw);
    transform: translateY(0px);
	padding-top: 39px;
    width: 120px;
    height: 0px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */	
	}


	
	
.bannersnextbtn {
	position: relative;
     margin-left: 50%;
  margin-top:20px;
	padding-top: 10px;
    width: 120px;
    height: 15px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */
	}
.nmleft {
	position: absolute;
	width: 120px;
	text-align: left; 
    top: calc(100% + 72px);
    right: calc(30% - 90px);
	}

.npleft{
	position: absolute;
	width: 100px;
	text-align: left; 
    top: calc(100% + 67px);
    right: calc(30% - 90px);
	}
	
.nextp i {
	text-align: left;
	margin-right: 5px;
	margin-left: 0px;
	transform: translateY(-2px);
}	
	
	
	
.slides-fullscreen .nav {
    position: absolute; 
	top: calc(97% - 25px);
    transform: translateY(-50%);
    border: none; outline: none;
    width: 56px; height: 56px; 
	border-radius: 50%;
	background: rgba(0,40,31,.65);
    color: #fff; font-size: 42px; 
	line-height: 0;
    text-align: center; cursor: pointer;
    backdrop-filter: blur(2px);
	padding-bottom: 8px;
	padding-left: 8px;
	opacity: 1;
	transition: opacity 0.2s ease, background 0.2s ease;
  }

  .slides-fullscreen .nav.prev { left: 30px; }
  .slides-fullscreen .nav.next { right: 30px; }

	
.slides-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	overflow: hidden;
	background:#e4ebe6;
	touch-action: pan-y; /* <-- IMPORTANT: allow vertical gestures */
	user-select: none;   /* optional: prevents accidental text/image dragging */
	z-index: 999999;
}

    /* Subheading: lighter and styled differently */
.subheading {
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.25;
    margin-left: 0px;
    letter-spacing: 0.01em;
    color: #626d57; 
    text-transform: uppercase;  
    pointer-events: all;
    cursor: pointer;
    position: relative;
    padding-left: 28px;   /* reserve space for the icon */
    min-width: 100px;
    max-width: 250px;
}

.subheading i { 
    font-size: var(--icon-size, 20px); 
    color: #34b998;
    padding-right: 0px;
    padding-top: 0;
    position: absolute;
    left: 0;
    top: -3px;             
    line-height: 1.2;       
    width: 1em;
    text-align: center;
}
.contactsubheading {
min-width: 300px;
}  

.closeslidesmulti {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
     top: -45px;
    right: 15px;
    width: 40px;
    height: 40px; 
    cursor: pointer;
    z-index: 10; /* make sure it's above everything */
}
.closeslidesprint {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
     top: -45px;
    right: 20px;
    width: 40px;
    height: 40px; 
    cursor: pointer;
    z-index: 10; /* make sure it's above everything */
}
 /* carousel sizing we finalized */
.carousel-container {
    --top-offset: 12dvh;
    width: min(90vw, 90dvh * (4 / 3));
    aspect-ratio: 4 / 3;
    margin: var(--top-offset) auto 0;
    position: relative;
    opacity: 1;
    touch-action: pan-y;
    z-index: 9; 
   transform: translateX(0%);
}
.carousel-container .info {  
    position: absolute;
    inset-block-end: 0;      /* bottom: 0 */
    inset-inline-start: 0;   /* left: 0 */
    translate: 0px 100%;      /* sit exactly one-width to the left */
    z-index: 10;
    left: calc(25% - 90px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* content starts at the TOP */
    align-items: flex-start;      /* content aligned to the LEFT */
    text-align: left;             /* align text inside the box */
    padding-top: 60px;            /* breathing room at the top */
    padding-bottom: 0px;
    margin-inline-start: 28px;       /* no offset unless you need one */
    inline-size: clamp(16ch, 42vw, 230px); 
 opacity: 0;      
}  
		
.mobile {
    width: 130.92px;
    height: 216.31px;
    visibility:hidden;
  }
.mobilepos {
    position: relative;
    visibility:hidden;
    translate: calc(100% + 80px) 32px; 
  }
.showmobile {
    top: -18px;
    margin-left: -108px;
    text-align: right;
  }
.mobileview {
    text-align: right;
    padding-left: 0px;
	width: 280px;
  }
.mobileview i {
    text-align: left;
	margin-right: 0px;
    margin-bottom: 3px;
	transform: translateY(-1px);
    }
.orientationIcon.icon-rotated {
  transform: translateX(-0.5px) translateY(-1px) rotate(180deg);
}
.moveupmost {
    transform: translate(0px, -3px);
    text-align: right;
    }  
.moveupmostf {
    transform: translate(0px, -3px);
    text-align: right;
} 
.fullscreenpos {
    transform: translate(0px, -4px);
    text-align: right;
    } 
	
}/* (orientation: portrait) */










@media screen and (orientation: portrait) and (min-width: 580px) and (min-height: 720px) {
	
.nmleft {
	position: absolute;
	width: 160px;
	text-align: left; 
    top: calc(100% + 270px);
    right: 0;
	left: calc(30% - 98px);
	
	}
.npleft {
	position: absolute;
	width: 120px;
	text-align: left; 
   /*  top: calc(100% + 250px);
    right: 0;
	left: calc(30% - 98px);*/
	top: calc(100% + 72px);
    right: calc(30% - 90px);
	}
	
	
.carousel-container {
    --top-offset: 8dvh;
    width: min(80vw, 80dvh * (4 / 3));
    max-width: 500px;
    }
.carousel-container .info {  
    left: calc(30% - 124px);
	 padding-top: 75px; 
}  
/*.carousel-wrapperprint::before {
  content: "";
  position: absolute;
  left: 18px;                    
  bottom: 0;             
  width: calc(100% - 36px); 
  border-bottom: 1px solid #67c5ae;	
}*/
.mobile {
    width: 136.62px;
    height: 225.72px;
          visibility: visible;
  }
.showmobile {
    top: -18px;
    margin-left: -152px;
    text-align: right;
  }
.mobilepos {
      position: relative;
      visibility: visible;
      translate: calc(60% + 90px) 24px; 
  }
  .subheading {
    max-width: 130px;
}  

}/*(orientation: portrait) and (min-height: 768px)*/




@media screen and (orientation: portrait) and (min-width: 680px) and (min-height: 900px) {
 .carousel-container {
    --top-offset: 8dvh;
    width: min(85vw, 85dvh * (4 / 3));
    max-width: 640px;
    }  
.carousel-container .info {  
    padding-top: 80px;        
    }
.mobile {
    width: 163.94px;
    height: 270.86px;
          visibility: visible;
  }
.mobilepos {
      position: relative;
      visibility: visible;
      translate: calc(90% + 50px) 20px; 
  }
.showmobile {
    top: -18px;
    margin-left: 10px;
    text-align: right;
  }
.mobileview {
    text-align: left;
    padding-left: 0px;
   width: 163.94px;
  }
.mobileview i {
    text-align: left;
  margin-right: 3px;
    margin-bottom: 3px;
    }



}/*(orientation: portrait) and (min-height: 768px)*/


@media screen and (orientation: portrait) and (min-width: 767px) and (min-height: 1023px) {
 .carousel-container {
    --top-offset: 8dvh;
    width: min(85vw, 85dvh * (4 / 3));
    max-width: 750px;
    }  	
	
}

@media screen and (orientation: portrait) and (min-width: 900px) and (min-height: 1200px) {
 .carousel-container {
    --top-offset: 8dvh;
    width: min(85vw, 85dvh * (4 / 3));
    max-width: 920px;
    }  	
.mobile {
    width: 177.06px;
    height: 292.53px;
          visibility: visible;
  }
.mobilepos {
      position: relative;
      visibility: visible;
      translate: calc(80% + 0px) 20px; 
  }
.showmobile {
    top: -18px;
    margin-left: 20px;
    text-align: right;
  }
.mobileview {
    text-align: left;
    padding-left: 0px;
  width: 177.06px;;
  }
.mobileview i {
    text-align: left;
  margin-right: 3px;
    margin-bottom: 3px;
    }	
}


@media (orientation: portrait) and (max-width: 580px) { 
    
.subheading {
     margin-left: 0px;
    min-width: 50px;
 
} 
.contactsubheading {
    min-width: 300px;
} 
.carousel-container {
    --top-offset: 12dvh;
    width: min(90vw, 90dvh * (4 / 3));
    aspect-ratio: 4 / 3;
    margin: var(--top-offset) auto 0;
    position: relative;
    opacity: 1;
    touch-action: pan-y;
    z-index: 9; 
   transform: translateX(0%);
}
 .carousel-container .info {  
    padding-top: 70px;   
        max-width: 320px;
    }

.closeslidesmulti {
    top: -60px;
    right: 6px;
    width: 50px;
    height: 50px;
}
.closeslidesprint {
    top: -54px;
    right: 15px;
    width: 50px;
    height: 50px;
}
    .mobile {
   visibility: hidden;
  }
.mobilepos {
    position: relative;
   /* visibility: visible;*/
          visibility: hidden;
    translate: calc(100% + 50px) 32px; 
  }

}











@media (orientation: landscape) {  
.roadnextbtn {
	position: absolute;
    top: 100%;
    left: calc(100% + 18vw);
    transform: translateY(15px);
	padding-top: 0px;
    width: 260px;
    height: 0px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */	
	}
	
.bannersnextbtn {
	position: relative;
     margin-left: 50%;
  margin-top:20px;
	padding-top: 10px;
    width: 140px;
    height: 15px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */
	}

 .nmleft {
	position: absolute;
	width: 120px;
	text-align: right; 
    top: calc(100% - 320px);
    right: calc(100% + 16px);
	}
.npleft{
	position: absolute;
	width: 100px;
	text-align: right; 
    top: calc(100% - 338px);
    right: calc(100% + 16px);
	}
	
.nextp i {
	text-align: right;
	margin-right: 2px;
	margin-left: 0px;
	transform: translateY(-2px);
}	
	
	
.slides-fullscreen .nav {
    position: absolute; 
	/*top: 50%; */
    transform: translateY(-50%);
	
		top: calc(97% - 25px);
    border: none; outline: none;
    width: 56px; height: 56px; 
	border-radius: 50%;
   /* background: rgba(20,20,20,.65);*/
	background: rgba(0,40,31,.65);
    color: #fff; font-size: 42px; line-height: 0px;
    text-align: center; cursor: pointer;
    backdrop-filter: blur(2px);
		padding-bottom: 12px;
	padding-left: 8px;
	
		  opacity: 1;
  transition: opacity 0.2s ease, background 0.2s ease;
	
  }

  .slides-fullscreen .nav.prev { left: 15px; }
  .slides-fullscreen .nav.next { right: 15px; }

.slides-fullscreen {
	position: fixed;
	inset: 0;
/*	width: 100vw;
	height: 100dvh;*/
	width: 100vw;
	height: 100dvh;
	overflow: hidden;
	background:#e4ebe6;
	touch-action: pan-y; /* <-- IMPORTANT: allow vertical gestures */
	user-select: none;   /* optional: prevents accidental text/image dragging */
	z-index: 999999;
}


  .carousel-container {
     --top-offset: 4dvh;
    width: min(80vw, 80dvh * (4 / 3));
    aspect-ratio: 4 / 3;
    margin: var(--top-offset) auto 0;
    position: relative;
    opacity: 1;
    touch-action: pan-y;
    z-index: 9; 
    transform: translateX(calc(10% + 10px));  
    max-width: 480px;     
   /*  container-type: inline-size; */
}
	
	
/*.carousel-wrapperprint::before {
  content: "";
  position: absolute;
  left: 0;                    
  bottom: 25px;                
  height: calc(90% - 25px);   
max-height: 250px; 
  border-left: 1px solid #67c5ae;	
}*/	
	
	
	
	
.carousel-container .infoprint {
	/*  transform: translateY(-20px);*/
	  transform: translateY(0px);
}
.carousel-container .info {  
    position: absolute;
    inset-block-end: 0;     
    inset-inline-start: 0;  
    translate: -100% 0;    
    z-index: 10;
     left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    padding-bottom: 10px;
    margin-inline-start: -16px; 
   inline-size: clamp(135px, 10vw, 200px); 
}     
.carousel-container .info .subheading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    padding: 6px 0 0 0;
    margin: 0;
    position: static;
    text-align: right;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #626d57;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: all;
    max-width: 108px;
  }

	
	
	
.moveup {
    transform: translate(-3px, 3px);
    }
.moveupf {
    transform: translate(30px, -8px);
    text-align: right;
    }
.movedownt {
  position: relative;
	text-align: left;
  top: 6px; /* pushes the text down */
	}

.fullscreenpos {
    transform: translate(0px, -2px);
    text-align: right;
    } 
.paragraph {
   min-width: 130px;
}
    
.carousel-container .info .subheading i {
    /* keep FA’s font-family/weight from .fa-solid */
    position: static !important;
    left: 0; right: 0; top: auto; bottom: auto;
    margin: 0;
    padding: 0;
    width: auto;
    display: inline-block;
    text-align: inherit;
    line-height: 1.25;
    font-size: var(--icon-size, 20px);
    color: #34b998;
  }

.mobilepos {
  visibility: hidden;
}


    
    
.showmobile {
    top: -20px;
    margin-left: 0;
    text-align: left;
  }
.mobile {
    width: 128.35px;
    height: 213.2px;
    visibility: visible;
    visibility: hidden;
  }
.mobileview {
    text-align: left;
    padding-left: 0px;
     width: 128.35px;
  }
.mobileview i {
    text-align: left;
    margin-right: 0px;
    margin-bottom: 3px;
    }
   

.closeslidesmulti {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    right: -60px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
}
.closeslidesprint {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 15px;
    right: -58px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
}
.moveupmost {
    transform: translate(8px, -8px);    
    }
.moveupmostf {
    transform: translate(30px, -8px);    
    }
}/*(orientation: landscape)*/
 








@media (orientation: landscape) and (min-height: 600px) {  
	
	
.roadnextbtn {
	position: absolute;
    top: 100%;
    left: calc(100% + 35vw);
    transform: translateY(45px);
	padding-top: 0px;
    width: 260px;
    height: 0px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */	
	}
	
	
.nmleft {
	position: absolute;
	width: 260px;
	text-align: left; 
    top: calc(100% + 56px);
    right: calc(28% - 130px);
	}
.npleft{
	position: absolute;
	width: 240px;
	text-align: left; 
    top: calc(100% + 56px);
    right: calc(28% - 130px);
	}
	
.nextp i {
	text-align: left;
	margin-right: 5px;
	margin-left: 0px;
	transform: translateY(-2px);
}	
	
	
	
.closeslidesmulti {
  top: -45px;
    right: 15px;
    width: 40px;
    height: 40px;  
} 
.closeslidesprint {
  top: -45px;
    right: 15px;
    width: 40px;
    height: 40px;  
} 
 .carousel-container {
     --top-offset: 16dvh;
    width: min(65vw, 65dvh * (4 / 3));
    aspect-ratio: 4 / 3;
    margin: var(--top-offset) auto 0;
    position: relative;
    opacity: 1;
    touch-action: pan-y;
    z-index: 9; 
    transform: translateX(calc(10% + 20px));
         max-width: 100%;
}
.carousel-container .info {  
     left: 0; 
     padding-bottom: 0px;
	inline-size: clamp(16ch, 17vw, 46ch); 
}  
  
  	
/*.carousel-wrapperprint::before {
  content: "";
  position: absolute;
  left: 0;                    
  bottom: 25px;               
  height: calc(60% - 25px);    
	 max-height: 250px;   
  border-left: 1px solid #67c5ae;	
}*/	
	  

    
.mobile {
    width: 128.35px;
    height: 213.2px;
    visibility: visible;
    translate: 0 calc(100% - 465px);
  }
.mobilepos {
    position: relative;
    visibility: visible;
         translate: calc(100% - 130px) -10px;

  /* width: 128.35px;
    text-align: right;
*/
  }
.showmobile {
    bottom: 0;
    text-align: right;
  }
 .mobileview {
     text-align: right;
      width: 128.35px;
     padding-left: 0px;
  }
    
    
}/*(orientation: landscape) and (min-height: 600px) */










 
@media (orientation: landscape) and (min-height: 600px) and (min-width: 900px) {  
      
.roadnextbtn {
	position: absolute;
    top: 100%;
    left: calc(50% + 40vw);
    transform: translateY(30px);
	padding-top: 0px;
    width: 260px;
    height: 0px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */	
	}
	
 	
.nmleft {
	position: absolute;
	width: 260px;
	text-align: left; 
    top: calc(100% + 56px);
   right: calc(28% - 200px);
	}
.npleft{
	position: absolute;
	width: 240px;
	text-align: left; 
    top: calc(100% + 56px);
   right: calc(28% - 168px);
	}
	
.nextp i {
	text-align: left;
	margin-right: 5px;
	margin-left: 0px;
	transform: translateY(-2px);
}	
	
.mobile {
    width: 151.8px;
    height: 250.8px;
    visibility: visible;
    translate: 0 calc(100% - 546px);
  }
.mobilepos {
    position: relative;
    visibility: visible;
    translate: calc(100% - 153px) -10px;

  }
.showmobile {
    bottom: 0;
    text-align: right;
  }
 .mobileview {
     text-align: right;
    /* width: 151.8px;*/
     width: 100%;
     padding-left: 0px;
  }
    
    
 .carousel-container {
     --top-offset: 9dvh;
    width: min(75vw, 75dvh * (4 / 3));
    aspect-ratio: 4 / 3;
    margin: var(--top-offset) auto 0;
    position: relative;
    opacity: 1;
    touch-action: pan-y;
    z-index: 9; 
    transform: translateX(calc(10% + 10px));
         max-width: 100%;
}
.carousel-container .info {  
     left: 0;
     padding-bottom: 10px;
 inline-size: clamp(8ch, 16vw, 54ch); 
}  
    
}/*landscape) and (min-height: 600px) and (min-width: 900px) */





@media (orientation: landscape) and (min-height: 600px) and (min-width: 1260px) {  
      

.carousel-container .info .subheading {
	min-width: 100px;
    max-width: 250px;
  }
.moveup {
   transform: translate(0px, 2px);
    }
 .moveupf {
    transform: translate(0px, -2px);
    text-align: right;
    }
.moveupmost {
    transform: translate(0px, -2px);    
    }
.moveupmostf {
    transform: translate(0px, -2px);    
    }
}


@media (orientation: landscape) and (min-height: 600px) and (min-width: 1366px) {  
.roadnextbtn {
	position: absolute;
    top: 100%;
    left: calc(50% + 600px);
    transform: translateY(30px);
	padding-top: 0px;
    width: 260px;
    height: 0px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */	
	}
	      
.mobile {
    width: 182.16px;
    height: 300.96px;
    visibility: visible;
    translate: 0 calc(100% - 650px);
  }
.mobilepos {
    visibility: visible;
      translate: calc(100% - 184px) -10px;

  }
.showmobile {
    bottom: 0;
    text-align: right;
  }
 .mobileview {
     text-align: right;
     width: 182.16px;
     padding-left: 0px;
  }
.carousel-container .info { 
     left: 0;
     padding-bottom: 10px;
    inline-size: clamp(8ch, 16vw, 54ch); 
}  
}/*landscape) and (min-height: 600px) and (min-width: 1366px)*/















/* Reusable clip-reveal for phone previews */
.mobile.clip-hide {
  /* hidden by default (orientation-specific below) */
  transition: clip-path var(--reveal-ms, 380ms) ease;
  will-change: clip-path;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}

/* When revealed, show full frame */
.mobile.clip-hide.is-revealed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

/* Portrait: reveal DOWN (hide by pushing bottom to 100%) */
@media (orientation: portrait) {
  .mobile.clip-hide:not(.is-revealed) {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
}

/* Landscape: reveal UP (hide by pushing top to 100%) */
@media (orientation: landscape) {
  .mobile.clip-hide:not(.is-revealed) {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
  }
}

/* Optional: honor reduced motion 
@media (prefers-reduced-motion: reduce) {
  .mobile.clip-hide { transition: none; }
}
*/







/* Slides live inside this box and get clipped */
.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* clip slides/arrows only */
    border: 1px solid #67c5ae;
    border-radius: 6px;
    touch-action: pan-y;   /* allow vertical scroll; deliver horizontal swipes to JS */
}

/* blur-up placeholder transition */
.blur-up { filter: blur(12px); transform: translateZ(0); }
.blur-up.is-loaded { filter: blur(0); transition: filter .35s ease; }

/* simple open state if you want fade-in */
.carousel-container.is-open { display:block !important; }

.carousel-wrapper .carousel-item {
  position: absolute;
  inset: 0;                  /* top/right/bottom/left: 0 */
  opacity: 0;
  transition: opacity 360ms ease;
  z-index: 1;  
}

.carousel-wrapperprint .carousel-item {
  position: absolute;
  inset: 0;                  /* top/right/bottom/left: 0 */
  opacity: 0;
  transition: opacity 360ms ease;
  z-index: 1;  
}

/* touch-oriented devices */
@media (pointer: coarse) {
    
.carousel-wrapper .carousel-item {
    position: absolute;
    inset: 0;                  /* top/right/bottom/left: 0 */
    opacity: 0;
    transition: opacity 500ms ease;
    z-index: 1;
  }
.carousel-wrapperprint .carousel-item {
    position: absolute;
    inset: 0;                  /* top/right/bottom/left: 0 */
    opacity: 0;
    transition: opacity 500ms ease;
    z-index: 1;
  }
}

.carousel-wrapper .carousel-item[data-active-slide] {
    opacity: 1;
}
.carousel-wrapper .carousel-item img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    object-position: center;
    user-select: none; 
    -webkit-user-drag: none; 
    pointer-events: none;  
}

 .carousel-wrapperprint .carousel-item[data-active-slide] {
    opacity: 1;
}

 .carousel-wrapperprint .carousel-item img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    object-position: center;
    user-select: none; 
    -webkit-user-drag: none; 
    pointer-events: none;  
}

/* Headline: bold, large */
.headline {
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: -10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* Paragraph: regular weight */
.paragraph {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 15px;
}
.paragraphvideoplay {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 0;
  margin-bottom: 15px;
  margin-top: 5px;
}
/* Subheading: lighter and styled differently */
.subheading {
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.3;
    margin-left: 0;
    letter-spacing: 0.01em;
    color: #626d57; 
    text-transform: uppercase;  
    pointer-events: all;
    cursor: pointer;
    position: relative;
    padding-left: 28px;   /* reserve space for the icon */
}

.subheading i { 
    font-size: var(--icon-size, 20px); 
    color: #34b998;
    padding-right: 0px;
    padding-top: 0;
    position: absolute;
    left: 0;
    top: -3px;             
    line-height: 1.25;       
    width: 1em;
    text-align: center;
}



.contactinfo {
    position: relative;
    top: calc(20% - 100px);
    left: 10%;    
    width: 77%;
    height: 100%;
    z-index: 10; 
}
.contactheadline {
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.0;
    margin-bottom: -10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.contactparagraph {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 15px;
    color: #626d57; 
}
.contactsubheading {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.25;
    margin-left: 0px;
    letter-spacing: 0.02em;
    color: #626d57; 
    text-transform: uppercase;  
    pointer-events: all;
    cursor: pointer;
}
.contactsubheading i { font-size: var(--icon-size, 26px); 
    color: #34b998;
    padding-right: 7px;
    padding-top: 4px;
    position: relative;
    top: 1px; /* moves icon down */
}
.contactsubheading:hover {  
    color:#5BBB01;
    filter: brightness(60%) contrast(120%);
}
.carousel-arrow {
  background-color: transparent;      /* kill UA/bg bleed */
  background-repeat: no-repeat;
  background-position: center;        /* keeps SVG centered */
  -webkit-appearance: none;
  appearance: none;
}

/* Arrows now positioned relative to the container, not the wrapper */
.carousel-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    top: calc(100% + 10px);
    transform: translateY(0%);
    z-index: 5;
    border: 0;
    border-radius: 50%;
    color:#676B5A;
    cursor: pointer;
    padding: 0.0em 0.15em 0.2em 0.15em;
}
.carousel-arrow:hover {  
    color:#5BBB01;
    filter: brightness(60%) contrast(450%);
    background-color: rgba(0,0,0,0.0);
}
.carousel-arrow[disabled],
.carousel-arrow:disabled {
    background-color: rgba(0,0,0,0.0);
    color: rgba(255,255,255,0.0);
    cursor: not-allowed;
    opacity: 0;  
}
.carousel-arrow:focus-visible {
  outline: 0px solid #5BBB01;
  outline-offset: 0px;
}
.carousel-arrow.prev {
    left: 0px;  
    background-image: url("../img/slidearrowL.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
}
.carousel-arrow.next {
    right: 0px;
    background-image: url("../img/slidearrowR.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    background-color:rgba(13,86,66,1.00);
    transition: background-color 0.3s ease; 
}

@keyframes flashArrow {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation: flashArrow 0.65s ease-in-out infinite;
}

/* Transparent background after flashing */
.transparent-bg {
  background-color: transparent !important;
/* filter: brightness(100%) contrast(100%);*/
}


/* Dots sit exactly 2rem below the 4:3 box, and centered */
.carousel-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 11;
}
.carousel-dots .dots {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 4px solid #67c5ae;
  border-radius: 50%;
  background-color: #67c5ae;
  cursor: pointer;
}
.dots:hover {  
    filter: brightness(0%) contrast(150%);
}
.carousel-dots .dots[data-active-dot] {
    background-color:#000000;
    border-color: #000000;
}
.carousel-dots .dots:focus-visible,
.carousel-wrapper .carousel-arrow:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

.carousel-wrapperprint .carousel-arrow:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}


@media screen and (min-width: 580px) {	
    
.carousel-dots {
  bottom: -2.35rem;
} 
.carousel-arrow {
  top: calc(100% + 4px);
  transform: translateY(0%);
}    
.carousel-arrow.prev {
    left: -4px;  
    background-size: 80%;
}
.carousel-arrow.next {
    right: -4px;
    background-size: 80%;
}
.contactinfo {
    top: calc(20% - 70px);
    left: 8%;    
    width: 86%;
    max-width: 400px;
    height: 100%;
} 
.contactparagraph {
  font-size: 1.1rem;
}
} /* (min-width: 580px*/



@media screen and (min-width: 580px) and (min-height: 600px) {	
 
.carousel-dots {
  bottom: -2.5rem;
}
.carousel-dots .dots {
  width: 18px;
  height: 18px;
  padding: 0;
}
.carousel-arrow {
  top: calc(100% + 8px);
  transform: translateY(0%);
}    
.carousel-arrow.prev {
    left: -2px;  
    background-size: 100%;
}
.carousel-arrow.next {
    right: -2px;
    background-size: 100%;
}
.contactinfo {
    top: calc(20% - 100px);
    left: 25%;    
    width: 60%;
    height: 100%;
} 
.contactparagraph {
  font-size: 1.3rem;
}

}/*(min-width: 580px) and (min-height: 600px) */

@media screen and (min-width: 768px) and (min-height: 600px) {	
   .contactinfo {
    top: calc(20% - 80px);
    left: 30%;    
    width: 60%;
    height: 100%;
}    
}