/* ------------09-06-2025 Start------------------- */
.section-padding70{padding: 70px 0px;position: relative;}
.pattern-wave {
    position: relative;
    margin-bottom: 170px;
    margin-top: 40px;
}
.island-features-scrollbox{max-width: 86%;float:right;}
.island-features-boxs
{
    border-radius: 10px;
  background-color: rgb(255, 255, 255);
    -webkit-box-shadow: rgb(99 99 99 / 20%) 10px 5px 8px 1px;
            box-shadow: rgb(99 99 99 / 20%) 10px 5px 8px 1px;
    height: 100%;
}

.island-featuresslider.owl-carousel .owl-stage{display: -webkit-box;display: -ms-flexbox;display: flex;}
/*.island-featuresslider.owl-carousel .owl-stage .owl-item{min-height: 395px;}*/


.island-featuresbox-Text{padding: 15px;padding-bottom: 30px;}
.island-featuresbox-Text > h4{color: #343434;font-family: 'Poppins', sans-serif;}
.island-featuresbox-Text > p{color: #8a8c8d;font-family: 'Poppins', sans-serif;font-size: 12px;}
.island-featuresbox-Text > a{color: #343434;font-family: 'Poppins', sans-serif;display: block;
    text-align: right;position: absolute;bottom: 10px;right: 15px;}
.island-featuresbox-Text > a i{color: #04566b;}
.island-featuresbox-Text > a:hover{color: #04566b;}

.slider-counter{
    position: absolute;
    z-index: 9999;
    left: 15px;
    bottom: 5%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: 60px;
    color: #fff;
    font-weight: 800;
    width: 10%;
    text-align: right;
}
.pattern-wave{position: relative;margin-bottom: 170px;margin-top: 40px;}
.pattern-wave:after{
    position: absolute;
    content: "";
    left: 0px;
    width: 20%;
    height: 100%;
    top: 0px;
    background: url(../images/island/pattern-wave-inner-page.jpg) repeat;
    
}

video.video{border-top-left-radius: 10px;border-top-right-radius: 10px;}

.island-features-scrollbox .owl-carousel .owl-nav{position: absolute;left: -130px;bottom: 30%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}

.island-features-scrollbox .owl-carousel .owl-nav .owl-prev,
.island-features-scrollbox .owl-carousel .owl-nav .owl-next{height: 40px;width: 40px;border: 2px solid #086b85;color: #fff;border-radius: 50%;margin-top: 15px;}

.island-features-scrollbox .owl-carousel .owl-nav .owl-prev:hover,
.island-features-scrollbox .owl-carousel .owl-nav .owl-prev:focus,
.island-features-scrollbox .owl-carousel .owl-nav .owl-next:hover,
.island-features-scrollbox .owl-carousel .owl-nav .owl-next:focus{outline: none;border-color: #fff;}

.pattern-wave:before
{
   
    background: url(../images/isl/island/explore-mainC-background.png);
    background-size: 100%;
    position: absolute;
    content: "";
    bottom: -143px;
    height: 100%;
    width: 100%;
    z-index: -11111;

}

section#MediaResource.pattern-wave:before{display: none;}

#ResourcePattern:before
{
    background: url(../images/explore-mainC-background.png);
    background-size: cover;
    position: absolute;
    content: "";
    bottom: -270px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    
}

.sliderContainer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	max-height: 100%;
	height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    overflow: hidden;
}

.sliderContainer .controls{
	position: absolute;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-item-align: end;
	    align-self: flex-end;
	font-size: 24px;
	letter-spacing: 5px;
	font-weight: bold;
	z-index: 99999;
	text-transform: uppercase;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100%;
    z-index: 1;
}
.sliderContainer .controls > div
{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    padding: 5px;
    border: 2px solid #04566b;
    color: #fff;
    border-radius: 50%;
}

.sliderContainer .controls > div.prev-button
{
    right: auto;
    left: 0px;
}

.controls > div{
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	width: 100%;
	height: auto;
	text-align: center;
	padding: 1px 24px 5px 23px;
	cursor: pointer;
	margin: 0px 15px;
	background-color: transparent;
	color: #202020;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	font-family: sans-serif;
	font-weight: 800;
}

.arrow{
	background-color: #303030;
	width: 40px;
	border-radius: 30px;
	height: 3px;
	position: relative;
}

.arrow:before{
	position: absolute;
	content: "";
	background-color: inherit;
	width: 12px;
	border-radius: 30px;
	height: inherit;
	-webkit-transform: rotate(40deg);
	    -ms-transform: rotate(40deg);
	        transform: rotate(40deg);
	display: inline-block;
	right: -3px;
	top: -3px;
}

.arrow:after{
	position: absolute;
	content: "";
	background-color: inherit;
	width: 12px;
	border-radius: 30px;
	height: inherit;
	-webkit-transform: rotate(140deg);
	    -ms-transform: rotate(140deg);
	        transform: rotate(140deg);
	display: inline-block;
	right: -3px;
	top: 3px;
}

.prev-button,
.next-button{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
}

.prev-button *,
.next-button *{
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	padding: 0px 8px;
	margin: 5px;
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
}

.prev-button .arrow{
	-webkit-transform: scale(-1);
	    -ms-transform: scale(-1);
	        transform: scale(-1);
}

.prev-button:hover .arrow:before,
.prev-button:hover .arrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.prev-button:hover .arrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0;
	padding: 0;
}

.prev-button .hoverArrow:before,
.prev-button .hoverArrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.prev-button .hoverArrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0px;
	padding: 0px;
}

.prev-button:hover .hoverArrow:before,
.prev-button:hover .hoverArrow:after{
	width: 12px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.prev-button:hover .hoverArrow{
	width: 40px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 5px;
	padding: 0 8px;
}

.next-button:hover .arrow:before,
.next-button:hover .arrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.next-button:hover .arrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0;
	padding: 0;
}

.next-button .hoverArrow:before,
.next-button .hoverArrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.next-button .hoverArrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0px;
	padding: 0px;
}

.next-button:hover .hoverArrow:before,
.next-button:hover .hoverArrow:after{
	width: 12px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.next-button:hover .hoverArrow{
	width: 40px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 5px;
	padding: 0 8px;
}

.slider{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	margin: 0 auto;
	-ms-flex-item-align: start;
	    align-self: flex-start;
	position: relative;
	height: 90%;
	width: 100%;
    min-height: 500px;
}

.slider div > h3{ 
position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff;
    text-shadow: 2px 2px #000;
    font-size: 28px;
    z-index: 9999;
    font-family: 'Poppins', sans-serif;
}

.slider *{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.active-slide.slide{
	max-height: 700px;
	height: 100%;
     -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}
.active-slide.slide:hover:after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    background: rgb(0 0 0 / 50%);
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;

}

.slide{
	max-height: 400px;
	max-width: 100%;
	height: 100%;
}

.slide img{
	max-height: 100%;
	width: auto;
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
}

.slide{
	-ms-flex-item-align: end;
	    align-self: flex-end;
	pointer-events: none;
	border-radius: 35px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: 0;
	opacity: 0;
	cursor: -webkit-grab;
	cursor: grab;
	-webkit-transition: 0.2s cubic-bezier(0,.64,1,.94);
	-o-transition: 0.2s cubic-bezier(0,.64,1,.94);
	transition: 0.2s cubic-bezier(0,.64,1,.94);
	overflow: hidden;
}

.grabbing *,
.grabbing .active-slide{
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
	-webkit-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/* .prev-slide.slide, 
.next-slide.slide, 
.active-slide.slide{
	pointer-events: all;
} */

.prev-slide, 
.next-slide{
	-webkit-filter: blur(0.5px);
	        filter: blur(0.5px);
}

.prev-slide:hover, 
.next-slide:hover{
	-webkit-filter: blur(0px);
	        filter: blur(0px);
}

.prev-slide{
	opacity: 0.6;
	left: 35%;
}

.prev-slide:hover{
	-webkit-transform: rotate(-16deg) translateX(-60%) translateY(-60%);
	    -ms-transform: rotate(-16deg) translateX(-60%) translateY(-60%);
	        transform: rotate(-16deg) translateX(-60%) translateY(-60%);
	opacity: 1;
	-webkit-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	-o-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
}

.next-slide:hover{
	-webkit-transform: rotate(16deg) translateX(-37%) translateY(-40%);
	    -ms-transform: rotate(16deg) translateX(-37%) translateY(-40%);
	        transform: rotate(16deg) translateX(-37%) translateY(-40%);
	opacity: 1;
	-webkit-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	-o-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
}

.next-slide{
	opacity: 0.6;
	left: 65%;
}

.active-slide{
	-webkit-box-shadow: 1px 2px 25px rgba(0,0,0,0.2);
	        box-shadow: 1px 2px 25px rgba(0,0,0,0.2);
	z-index: 99;
	left: 50%;
	opacity: 1;
	-webkit-transition: 0.2s cubic-bezier(0,.64,1,.94);
	-o-transition: 0.2s cubic-bezier(0,.64,1,.94);
	transition: 0.2s cubic-bezier(0,.64,1,.94);
}

/*Experience Bottom Background*/
.attractions-pattern:before
{
    background: url(../images/attraction-bg.png);
    background-size: cover;
    position: absolute;
    content: "";
    bottom: -135px;
    height: 100%;
    width: 100%;
    z-index: -11111;
}


/*Explore inner text css start here*/
.Explore-InnerContent{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.Explore-InnerContentLeft,
.Explore-InnerContentRight{-webkit-box-flex: 0;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}




.YellowBoxText{position: relative;padding: 15px 15px 15px 0px;margin-bottom: 15px;}
.YellowBoxText > p{margin: 0px;}

.YellowBoxText:after{
    position: absolute;
    content: "";
    height: 100%;
    width: 250%;
    background: #ffd74d;
    background: #ffd74d;
    top: 0;
    z-index: -1;
    left: -150%;
}

.Explore-InnerContentLeft p{font-weight: 500;}

ul.list-style1 li{position: relative;padding-left: 30px;font-family: 'Poppins', sans-serif;margin-bottom: 20px;
    line-height: 30px;}
ul.list-style1 li > b{color: #04566b;}

ul.list-style1 li:after{position: absolute;content: "\f101";left: 0px;font-family: Font Awesome\ 5 Free;font-weight: 900;color: #04566b;top: 0px;}

.geographyinner-pattern:before
{
    background: url(../images/explore-beach-background.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -50px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
    
}

.marineProinner-pattern:before
{
    background: url(../images/Marine-Protected-Areas-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -50px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
    
}

.MangrovesInner-pattern:before
{
    background: url(../images/Mangroves-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
    
}
.coralsInner-pattern:before
{
    background: url(../images/Corals-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
}
.costalInner-pattern:before
{
    background: url(../images/Coastal-Regulations-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
}
.marineBioInner-pattern:before
{
    background: url(../images/Marine-Biodiversity-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
}
.exploreInner-pattern:after
{
    background: url(../images/explore-innerPattern.png);
    background-size: cover;
    position: absolute;
    content: "";
    bottom: -135px;
    height: 100%;
    width: 100%;
    z-index: -11111;
}

.ExploreListOwlItem a{
    height: 130px;
    width: 130px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
a.geographyTexter{background: url(../images/geography-thumbg.jpg);}
a.mangrvoesTexter{background: url(../images/mangroves-thumbg.jpg);}
a.coralTexter{background: url(../images/coral-thumbg.jpg);}
a.costalTexter{background: url(../images/costal-thumbg.jpg);}
a.marineTexter{background: url(../images/bio-div-thumbg.jpg);}
a.marineProTexter{background: url(../images/marine-protected-thumbg.jpg);}
a.mangrvoesTexter{background: url(../images/mangroves-thumbg.jpg);}

.ExploreListOwlItem a:hover{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

.ExploreListItemImg{margin-bottom: 15px;}
.ExploreListItemImg img.img-fluid{max-height: 40px;}
.ExploreListOwlItem a > p{color: #fff;font-size: 13px;margin: 0px;}

.ExploreListSlide
{
    position: relative;
    bottom: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding-left: 70px;
    padding-bottom: 70px;
    margin-left: 15px;
}

.ExploreListOwl .owl-nav button
{
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: -50px;
    background: #b2b2b2!important;
    height: 30px;
    width: 30px;
    border-radius: 5px;
}

.ExploreListOwl .owl-nav button.owl-next
{
    position: absolute;
    top: 60%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: -50px;
    background: #b2b2b2!important;
    height: 30px;
    width: 30px;
}

.ExploreListOwl .owl-nav button span
{
    color: #fff;
    font-size: 20px;
    line-height: normal;
    font-weight: 600;
}

.ExploreListOwl .owl-nav button:hover,
.ExploreListOwl .owl-nav button:focus{background: #ffd74d!important;outline: none;}

.ExploreListOwl.owl-carousel{position: relative;padding: 3rem 0px;}
.ExploreListOwl.owl-carousel:after{
    position: absolute;
    content: "";
    left: -70px;
    height: 100%;
    background: #ffd74d;
    width: 3px;
    top: 0px;
}

.virtualtour-banner{background-size: cover;padding: 90px 15px;background: url(../images/virtual-tour-banner.jpg);background-position: center bottom;min-height: 300px;background-size: cover; -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;}

.mapingicon.sandybeach{position: absolute;bottom: 55%;left: 8%;transform: translateX(-18%);}
.mapingicon.FloraFauna{position: absolute;bottom: 43%;left: 25%;}
.mapingicon.FloraSpices{position: absolute;top: 27%;right: 33%;}  
.mapingicon.Mangroves{position: absolute;top: 18%;left: 45%;}
.mapingicon.SandyBeach2{position: absolute;top: 31%;right: 26%;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.mapingicon.journey1{position: absolute;top: 33%;right: 19%;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.mapingicon.Mangroves2{position: absolute;top: 25%;right: 14%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.mapingicon.ExquisiteMarine{position: absolute;top: 27%;right: 9%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.mapingicon.CoralReefs{position: absolute;top: 37%;right: 12%;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
.journeyVideo{position: absolute;bottom: 20%;right: 20%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

.mapingicon
{
    display: flex;
    flex-direction: column;
}

/* third tooltip style */

/* global tooltip content style */
.mapingicon .tooltip{opacity: 1;position: relative;max-width: 60px;}

.tooltip__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 9999;
  position: absolute;
  width:150px;
  height: auto;
  padding:8px 10px;
  border: 2px solid #fff;
  border-radius: 15px;
  background: #ffd74d;
  color: #343434;
  opacity: 0;
  font-size: 15px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.4s;
  transition: opacity 0.3s, -webkit-transform 0.4s;
  -o-transition: opacity 0.3s, transform 0.4s;
  transition: opacity 0.3s, transform 0.4s;
  transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    font-family: 'Poppins', sans-serif;
}

/* show tooltip on hover */
.tooltip:hover .tooltip__content { opacity: 1; }
.tooltip.three .tooltip__content {
  top:  -40px;
  left:  70px;
  -webkit-transform: translateX(-50%) rotate3d(1, 0, 0, 180deg);
          transform: translateX(-50%) rotate3d(1, 0, 0, 180deg);
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}


.tooltip.three:hover .tooltip__content { -webkit-transform: translateX(-50%) rotate3d(1,0,0,0deg); transform: translateX(-50%) rotate3d(1,0,0,0deg); }

.vt-maincontent,.VirtualTourInfo-background{overflow: hidden;}

/*.VirtualTourInfo-background:after
{
    position: absolute;
    content: "";
    height:220px;
    background: url(../images/island-virtual-tour.png);
    bottom: 0px;
    width: 100%;
    
}*/

.VirtualTourInfo-background > img
{
    width: 100%;
    position: relative;
    z-index: -1;
    /*bottom: -122px;*/
    transform: scale(1.5);
}
/*
.island-vt-pattern:after
{
    position: absolute;
    content: "";
    background: url(../images/island-virtual-tour.png);
    height: 115%;
    width: 100%;
    background-position: bottom center;
    background-size: cover;
    bottom: -75px;
    z-index: -1;
}
*/

/* Hang */
@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

.hvr-hang
{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-box-shadow: 0 0 1px rgb(0 0 0 / 0%);
            box-shadow: 0 0 1px rgb(0 0 0 / 0%);
}

.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active
{
    -webkit-animation-name: hvr-hang-sink, hvr-hang;
    animation-name: hvr-hang-sink, hvr-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}
section.section-padding70.island-vt-pattern{padding-top: 0px;}

/*Js Modal Popup Css Start Here*/
.modal-box {
  display: none;
  position: fixed;
  z-index: 99999999999;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}




.modal-box { width: 100%;max-height: 500px;height: 500px;left: 0px!important; }
.modal-box{background: transparent;}
.modal-box:after
{
    position: absolute;
    content: "";
    background: rgb(0 0 0 / 0.8);
    width: 100%;
    height: 100vh;
    top: -65px;
    z-index: -1;
}


.modal-box header,
.modal-box .modal-header {
  padding: 1em 1.5em;
  border-bottom: 1px solid #ddd;
}
.modal-box header .js-modal-close{position: absolute;right: 10px;top: 15px;background: #000;color: #fff;border: 0px;}
.modal-box header .js-modal-close:hover{color: #fff;}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
    margin: 0;font-family: 'Poppins', sans-serif;
    text-align: center;
    border-bottom: 3px solid #ffd74d;
    display: table;
    margin: 0 auto;
    padding-bottom: 6px;
}

.modal-box .modal-body { padding: 1.5em 1.5em;height: 500px;max-height: 500px;max-width: 80%;margin: 0 auto;background: #fff;}

.modal-box .modal-body video{max-height: 380px;width: 100%;-o-object-fit: fill;object-fit: fill;}

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
}

a.btn.btn-small.js-modal-close {
  position: absolute;
    top: -40px;
    right: -40px;
    background: #04566b;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    opacity: 1;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0px;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -o-transition: color 1s ease;
  transition: color 1s ease;
}

.attractions-pattern:before
{
    background: url(../images/attraction-bg.png);
    background-size: cover;
    position: absolute;
    content: "";
    bottom: -135px;
    height: 100%;
    width: 100%;
    z-index: -11111;
}
.sliderContainer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	max-height: 100%;
	height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    overflow: hidden;
}

.sliderContainer .controls{
	position: absolute;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-item-align: end;
	    align-self: flex-end;
	font-size: 24px;
	letter-spacing: 5px;
	font-weight: bold;
	z-index: 99999;
	text-transform: uppercase;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100%;
    z-index: 1;
}
.sliderContainer .controls > div
{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    padding: 5px;
    border: 2px solid #04566b;
    color: #fff;
    border-radius: 50%;
}

.sliderContainer .controls > div.prev-button
{
    right: auto;
    left: 0px;
}

.controls > div{
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	width: 100%;
	height: auto;
	text-align: center;
	padding: 1px 24px 5px 23px;
	cursor: pointer;
	margin: 0px 15px;
	background-color: transparent;
	color: #202020;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	font-family: sans-serif;
	font-weight: 800;
}

.arrow{
	background-color: #303030;
	width: 40px;
	border-radius: 30px;
	height: 3px;
	position: relative;
}

.arrow:before{
	position: absolute;
	content: "";
	background-color: inherit;
	width: 12px;
	border-radius: 30px;
	height: inherit;
	-webkit-transform: rotate(40deg);
	    -ms-transform: rotate(40deg);
	        transform: rotate(40deg);
	display: inline-block;
	right: -3px;
	top: -3px;
}

.arrow:after{
	position: absolute;
	content: "";
	background-color: inherit;
	width: 12px;
	border-radius: 30px;
	height: inherit;
	-webkit-transform: rotate(140deg);
	    -ms-transform: rotate(140deg);
	        transform: rotate(140deg);
	display: inline-block;
	right: -3px;
	top: 3px;
}

.prev-button,
.next-button{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
}

.prev-button *,
.next-button *{
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	padding: 0px 8px;
	margin: 5px;
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
}

.prev-button .arrow{
	-webkit-transform: scale(-1);
	    -ms-transform: scale(-1);
	        transform: scale(-1);
}

.prev-button:hover .arrow:before,
.prev-button:hover .arrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.prev-button:hover .arrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0;
	padding: 0;
}

.prev-button .hoverArrow:before,
.prev-button .hoverArrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.prev-button .hoverArrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0px;
	padding: 0px;
}

.prev-button:hover .hoverArrow:before,
.prev-button:hover .hoverArrow:after{
	width: 12px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.prev-button:hover .hoverArrow{
	width: 40px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 5px;
	padding: 0 8px;
}

.next-button:hover .arrow:before,
.next-button:hover .arrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.next-button:hover .arrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0;
	padding: 0;
}

.next-button .hoverArrow:before,
.next-button .hoverArrow:after{
	width: 0px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.next-button .hoverArrow{
	width: 0px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 0px;
	padding: 0px;
}

.next-button:hover .hoverArrow:before,
.next-button:hover .hoverArrow:after{
	width: 12px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.next-button:hover .hoverArrow{
	width: 40px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	margin: 5px;
	padding: 0 8px;
}

.slider{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	margin: 0 auto;
	-ms-flex-item-align: start;
	    align-self: flex-start;
	position: relative;
	height: 90%;
	width: 100%;
    min-height: 500px;
}

.slider div > h3{ 
position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff;
    text-shadow: 2px 2px #000;
    font-size: 28px;
    z-index: 9999;
    font-family: 'Poppins', sans-serif;
}

.slider *{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.active-slide.slide{
	max-height: 700px;
	height: 100%;
     -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}
.active-slide.slide:hover:after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    background: rgb(0 0 0 / 50%);
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;

}

.slide{
	max-height: 400px;
	max-width: 100%;
	height: 100%;
}

.slide img{
	max-height: 100%;
	width: auto;
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
}

.slide{
	-ms-flex-item-align: end;
	    align-self: flex-end;
	pointer-events: none;
	border-radius: 35px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: 0;
	opacity: 0;
	cursor: -webkit-grab;
	cursor: grab;
	-webkit-transition: 0.2s cubic-bezier(0,.64,1,.94);
	-o-transition: 0.2s cubic-bezier(0,.64,1,.94);
	transition: 0.2s cubic-bezier(0,.64,1,.94);
	overflow: hidden;
}

.grabbing *,
.grabbing .active-slide{
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
	-webkit-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/* .prev-slide.slide, 
.next-slide.slide, 
.active-slide.slide{
	pointer-events: all;
} */

.prev-slide, 
.next-slide{
	-webkit-filter: blur(0.5px);
	        filter: blur(0.5px);
}

.prev-slide:hover, 
.next-slide:hover{
	-webkit-filter: blur(0px);
	        filter: blur(0px);
}

.prev-slide{
	opacity: 0.6;
	left: 35%;
}

.prev-slide:hover{
	-webkit-transform: rotate(-16deg) translateX(-60%) translateY(-60%);
	    -ms-transform: rotate(-16deg) translateX(-60%) translateY(-60%);
	        transform: rotate(-16deg) translateX(-60%) translateY(-60%);
	opacity: 1;
	-webkit-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	-o-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
}

.next-slide:hover{
	-webkit-transform: rotate(16deg) translateX(-37%) translateY(-40%);
	    -ms-transform: rotate(16deg) translateX(-37%) translateY(-40%);
	        transform: rotate(16deg) translateX(-37%) translateY(-40%);
	opacity: 1;
	-webkit-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	-o-transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
	transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19);
}

.next-slide{
	opacity: 0.6;
	left: 65%;
}

.active-slide{
	-webkit-box-shadow: 1px 2px 25px rgba(0,0,0,0.2);
	        box-shadow: 1px 2px 25px rgba(0,0,0,0.2);
	z-index: 99;
	left: 50%;
	opacity: 1;
	-webkit-transition: 0.2s cubic-bezier(0,.64,1,.94);
	-o-transition: 0.2s cubic-bezier(0,.64,1,.94);
	transition: 0.2s cubic-bezier(0,.64,1,.94);
}

/*Experience Bottom Background*/
.attractions-pattern:before
{
    background: url(../images/island/attraction-bg.png);
    background-size: cover;
    position: absolute;
    content: "";
    bottom: -70px;
    height: 100%;
    width: 100%;
    z-index: -11111;
}
@media only screen and (max-width: 991px) {
	.section-padding70{padding: 50px 0px;}

}
@media only screen and (max-width: 576px) {
    .island-features-scrollbox .owl-carousel .owl-nav {
        left: -45px;
    }
}
@media only screen and (max-width: 576px) {
    .slider-counter {
        font-size: 28px;
    }
}

element.style {
    display: block;
    text-align: center;
    position: relative;
}
* {
    margin: 0;
    padding: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .property-heading .heading1 h2 {
        font-size: 36px;
        line-height: 40px;
    }
	.mapingicon .tooltip {
    max-width: 30px;
}
.attractions-pattern:before {
    
    bottom: -5px;
    
}
	
}
@media only screen and (max-width: 479px) {
    .active-slide.slide {
        max-height: 260px;
    }
}
@media only screen and (max-width: 991px) {
    .active-slide.slide {
        max-height: 360px;
    }
}
@media only screen and (max-width: 576px) {
    .sliderContainer .slider {
        min-height: 300px;
    }
}


.partner-single-slider .owl-nav {
    display: none;
}

.partnership-single-slider  .owl-nav {
    display: none;
}




/* ------------09-06-2025 End------------------- */

/* ------------10-06-2025 start----------------- */
/*Explore inner text css start here*/
.Explore-InnerContent{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.Explore-InnerContentLeft,
.Explore-InnerContentRight{-webkit-box-flex: 0;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}




.YellowBoxText{position: relative;padding: 15px 15px 15px 0px;margin-bottom: 15px;}
.YellowBoxText > p{margin: 0px;}

.YellowBoxText:after{
    position: absolute;
    content: "";
    height: 100%;
    width: 250%;
    background: #ffd74d;
    background: #ffd74d;
    top: 0;
    z-index: -1;
    left: -150%;
}
.section-padding30 {
    padding: 30px 0px;
    position: relative;
}

.Explore-InnerContentLeft p{font-weight: 500;}

ul.list-style1 li{position: relative;padding-left: 30px;font-family: 'Poppins', sans-serif;margin-bottom: 20px;
    line-height: 30px;}
ul.list-style1 li > b{color: #04566b;}

ul.list-style1 li:after{position: absolute;content: "\f101";left: 0px;font-family: Font Awesome\ 5 Free;font-weight: 900;color: #04566b;top: 0px;}

.geographyinner-pattern:before
{
    background: url(../images/island/explore-beach-background-new.png); 
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -50px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
    
}

.marineProinner-pattern:before
{
    background: url(../images/island/Marine-Protected-Areas-beach.png);
    background-size: 100% 100%;
    position: absolute;
    content: "";
    bottom: -50px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
    
}

.MangrovesInner-pattern:before
{
    background: url(../images/island/Mangroves-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
    
}
.coralsInner-pattern:before
{
    background: url(../images/island/Corals-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
}
.costalInner-pattern:before
{
    background: url(../images/island/Coastal-Regulations-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
}
.marineBioInner-pattern:before
{
    background: url(../images/island/Marine-Biodiversity-beach.png);
    background-size: contain;
    position: absolute;
    content: "";
    bottom: -125px;
    height: 100%;
    width: 100%;
    z-index: -11111;
    max-width: 800px;
    right: 0;
    background-repeat: no-repeat;
}




.exploreInner-pattern:after
{
    background: url(../images/island/explore-innerPattern.png);
    background-size: cover;
    position: absolute;
    content: "";
    bottom: -108px;
    height: 100%;
    width: 100%;
    z-index: -11111;
}





.ExploreListOwlItem a{
    height: 130px;
    width: 130px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

a.geographyTexter{background: url(../images/island/geography-thumbg.jpg);}
a.mangrvoesTexter{background: url(../images/island/mangroves-thumbg-bg-10.jpg);}
a.coralTexter{background: url(../images/island/coral-thumbg-bg-10.jpg);}
a.costalTexter{background: url(../images/island/costal-thumbg-bg-10.jpg);}
a.marineTexter{background: url(../images/island/marine-protected-thumbg-bg-10.jpg);}
a.marineProTexter{background: url(../images/island/marine-protected-thumbg-bg-10.jpg);}
a.mangrvoesTexter{background: url(../images/island/mangroves-thumbg-bg-10.jpg);}

.ExploreListOwlItem a:hover{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}





.ExploreListItemImg{margin-bottom: 15px;}
.ExploreListItemImg img.img-fluid{max-height: 40px;}
.ExploreListOwlItem a > p{color: #fff;font-size: 13px;margin: 0px;}

.ExploreListSlide
{
    position: relative;
    bottom: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding-left: 70px;
    padding-bottom: 70px;
    margin-left: 15px;
}

.ExploreListOwl .owl-nav button
{
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: -50px;
    background: #b2b2b2!important;
    height: 30px;
    width: 30px;
    border-radius: 5px;
}

.ExploreListOwl .owl-nav button.owl-next
{
    position: absolute;
    top: 60%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: -50px;
    background: #b2b2b2!important;
    height: 30px;
    width: 30px;
}

.ExploreListOwl .owl-nav button span
{
    color: #fff;
    font-size: 20px;
    line-height: normal;
    font-weight: 600;
}

.ExploreListOwl .owl-nav button:hover,
.ExploreListOwl .owl-nav button:focus{background: #ffd74d!important;outline: none;}

.ExploreListOwl.owl-carousel{position: relative;padding: 3rem 0px;}
.ExploreListOwl.owl-carousel:after{
    position: absolute;
    content: "";
    left: -70px;
    height: 100%;
    background: #ffd74d;
    width: 3px;
    top: 0px;
}
.partner-single-slider .owl-nav {
    display: none;
}

/* ------------10-06-2025 End--------------------*/

.hvr-hang
{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-box-shadow: 0 0 1px rgb(0 0 0 / 0%);
            box-shadow: 0 0 1px rgb(0 0 0 / 0%);
}

.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active
{
    -webkit-animation-name: hvr-hang-sink, hvr-hang;
    animation-name: hvr-hang-sink, hvr-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}
section.section-padding70.island-vt-pattern{padding-top: 0px;}

/*Js Modal Popup Css Start Here*/
.modal-box {
  display: none;
  position: fixed;
  z-index: 99999999999;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}




.modal-box { width: 100%;max-height: 500px;height: 500px;left: 0px!important; }
.modal-box{background: transparent;}
.modal-box:after
{
    position: absolute;
    content: "";
    background: rgb(0 0 0 / 0.8);
    width: 100%;
    height: 100vh;
    top: -65px;
    z-index: -1;
}


.modal-box header,
.modal-box .modal-header {
  padding: 1em 1.5em;
  border-bottom: 1px solid #ddd;
}
.modal-box header .js-modal-close{position: absolute;right: 10px;top: 15px;background: #000;color: #fff;border: 0px;}
.modal-box header .js-modal-close:hover{color: #fff;}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
    margin: 0;font-family: 'Poppins', sans-serif;
    text-align: center;
    border-bottom: 3px solid #ffd74d;
    display: table;
    margin: 0 auto;
    padding-bottom: 6px;
    
}

.modal-box .modal-body { padding: 1.5em 1.5em;height: 500px;max-height: 500px;max-width: 80%;margin: 0 auto;background: #fff; max-height: 100%;
    min-height: auto;
    overflow-y: inherit;}

.modal-box .modal-body video{max-height: 380px;width: 100%;-o-object-fit: fill;object-fit: fill;}

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
}

a.btn.btn-small.js-modal-close {
  position: absolute;
    top: -40px;
    right: -40px;
    background: #04566b;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    opacity: 1;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0px;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -o-transition: color 1s ease;
  transition: color 1s ease;
}