@font-face {
  font-family: 'BasicSans-SemiBold';
  src: url('/fonts/BasicSans-SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
}

*{
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}


html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body {
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
  background: #58b5cd;
  line-height: 1.4;
  color: white;
}




a{
  text-decoration: none;
}

p, li, a{
  font-size: 14px;
}

.shopnow{
  position: absolute;
  color: white;
  z-index: 80;
  font-size: 1.2vw;

  right: 31vw;
  top: 1.6vw;
}


.findstore{
  position: absolute;
  color: white;
  z-index: 80;
  font-size: 1.2vw;

  right: 21vw;
  top: 1.6vw;
}


.shipping{
  position: absolute;
  z-index: 10;
  width: 23vw;
  top: 1.55vw;
  right: -4vw;
  color: rgb(47, 155, 255);
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
  font-size: 1.3vw;
}

.logo{
  position: absolute;
  z-index: 10;
  width: 5vw;
  top: 1.5vw;
  left: 7.5vw;
}

#canvas {
  background-image: url('images/TopBG.jpg') crossorigin data-sampler="planeTexture";
  position: fixed;
top: 0;
left: 0;
right: 0;
  height: 100vh;
  opacity: 0.9;
  overflow: hidden;
  z-index: 0;
  background-color: rgb(46, 171, 230);
}


#content {
  position: relative;
  z-index: 2;
  touch-action: none; 
  
}

#container3D {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 4; 
  overflow: hidden;
}

#water-ripples {
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

#water-ripples-title {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#water-ripples-title h1 {
  color: white;
  font-size: 8.5vw;
  margin: 0;
  opacity: 0;
}

#water-ripples img {
  display: none;
}

#curtainsjs-ad {
  position: absolute;
  top: 1em;
  left: 1em;
  font-size: 0.75em;
  color: white;
  z-index: 3;
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
}

#curtainsjs-ad a {
  color: inherit;
}



.no-curtains #water-ripples {
  display: flex;
  overflow: hidden;
}

.no-curtains #water-ripples img {
  display: block;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}


.no-curtains #water-ripples-title h1 {
  opacity: 1;
}

.close-button close-bottom {
  display: none !important;
}

.dg.main .close-{
  display:  none;
}

.dg.main .close-button.close-bottom {
  position: absolute;
  display: none;
}

.down {
  position: absolute;
  width: 5vw;
  z-index: 999;
  animation: bounce 1.5s infinite;
  left: 47.5vw;
  top: 92%;
  transform: translateX(-50vw);
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5vw);
  }
}


.find{
  z-index: 10;
  position: absolute;
  width: 45vw;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 

  opacity: 1;
  transition: opacity 0.5s ease; 
}


#find.fade-out {
  opacity: 0;
}


.sec1{
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

.sec2{
  height: 45vw;
  width: 100vw;
  overflow: hidden;
}




#videoContainer {
  position: relative;
width: 100vw;
z-index: 50;
}
#myVideo {
  width: 100%;
  height: 100%;
}

#playButton {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  padding: .5vw 1.5vw;
  font-size: 1.6vw;
  background-color: #0798c9; 
  color: white;
  border: 0.2vw solid white;
  border-radius: 1vw;
  cursor: pointer;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
}

#playButton:hover {
  background-color: rgb(26, 156, 216);
  transform: translate(-50%, -50%) scale(1.1);
}

#playButton::before {
  content: '▶';
  font-size: 2vw;
  margin-right: 0.8vw;
}


.sec3{
  width: 100vw;
  height: 35vw;
  z-index: 50;
  background-color: aqua;
}

.sec3bg{
  position: absolute;
  z-index: 5;
  width: 100vw;
}

.amazon {
  position: relative;
  left: 43vw;
  top: 22vw;
  transform: translate(-50%, -50%);
  width: 14vw; 
  height: 3vw;
  border-radius: 0.5vw; 
  background-color: #ff9900; 
  border: none;
  text-align: center; 
  color: #ffffff; 
  font-size: 1vw; 
  cursor: pointer; 
  transition: transform 0.3s; 
  z-index: 40;
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: 3vw; 
}

.amazon:hover {
  background-color: #ffbd38; 
  transform: translate(-50%, -50%) scale(1.1); 
}

.amazonlogo {
  width: 1.7vw;
  top: 50px;
  transform: translate(-20%, 30%);
}
.storelocator {
  left: 55%;
  top: 51.5%;
  position: relative;
  color: rgb(255, 255, 255);
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
  text-decoration: underline;
  transition: transform 0.3s;
  transform-origin: center; 
  z-index: 40;
  font-size: 1.3vw;
}

.storelocator:hover {
  transform: translateX(4.5%) scale(1.1);
}





.sec4{
  height: 35vw;
  width: 100vw;

}

.sec4bg{
  position: absolute;
  width: 100vw;
}


.watchnow{
  position: relative;
  z-index: 50;
  width: 12vw;
  height: 2.75vw;
  top: 23.5vw;
  left: 13vw;
  font-size: 1.6vw;
  transition: transform 0.3s;
  background-color: white;
  border-radius: 4vw;
  overflow: hidden;
  padding-left: 1.8vw;
  padding-top: 0.5vw;
}


.watchnow:hover{
transform: scale(1.1);
}







.sec5 {
  position: relative;
  height: 31vw;
  width: 100vw;
  z-index: 222;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.sec5bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
  object-fit: cover;
}



.fish {
  position: absolute;
  width: 55vw;
  top: 3vw;
}



.container {
  position: absolute;
  text-align: center;
  width: 100vw;
  height: 100%;
  z-index: 500;
  left: 0vw;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
  text-align: center;
  color: white;
  overflow: hidden;
}

.goal-title {
  transform: translate(6vw, 6vw);
  width: 30vw;
  height: 10vw;
  font-size: 5vw;
  margin: 0;
  line-height: 4vw;
  overflow: hidden;
  color: rgb(71, 148, 236);
}

.goal-amount {
  transform: translate(6vw, 7vw);
  width: 30vw;
  height: 5vw;
  font-size: 3vw;
  margin: 0;
  line-height: 4vw;
  overflow: hidden;
  color: rgb(255, 255, 255);
}

.goal-description {
  transform: translate(10vw, 6vw);
  font-size: 1.5vw;
  margin: 0;
  color: white;
  width: 20vw;

}

.goal-detail {
  float: right;
  transform: translate(-12vw, -10vw);
  font-size: 2.0vw;
  margin: 0;
  color: white;
  width: 22vw;
  height: 20vw;
  text-align: left;
}

.learn-more-button {
  transform: translate(8.5vw, 2vw);
  float: right;
  right: 10vw;
  padding: 0.5vw 1vw;
  background-color: #004a93;
  color: white;
  border: 2px solid white;
  text-decoration: none;
  border-radius: 0.7vw;
  font-size: 1.1vw;
  transition: background-color 0.3s ease, color 0.3s ease; 
}

.learn-more-button:hover {
  background-color: white;
  color: #004a93;
}


.sec6{
  position: relative;
  height: 28vw;
  width: 100vw;
  overflow: hidden;
  
}

.sec6bg{
  position: absolute;
  width: 100vw;
}

.sec6 h2{
  position: absolute;
  left: 50vw;
  transform: translate(-50%, 11vw);
  font-size: 3vw;
  z-index: 900;
}

.sec6 input {
  position: absolute;
  transform: translate(37.5vw, 16vw);
  width: 16vw;         
  height: 2.5vw;      
  padding: 1vw;       
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
  font-size: 1vw;    
  color: #333;         
  background-color: #f9f9f9;  
  border: 1px solid #ccc;  
  border-radius: 0.5vw;   
  box-sizing: border-box; 
  resize: vertical;    
  margin-top: 0.5vw;    
  margin-bottom: 10px; 
  outline: none;       
  z-index: 900;
}

.submit {
  position: absolute;
  right: 40vw;
  transform: translateY(16.5vw);
  width: 5vw; 
  height: 2.5vw; 
  border-radius: 0.5vw; 
  background-color: #0077ff; 
  border: none; 
  text-align: center; 
  color: #ffffff; 
  font-size: 1vw; 
  transition: all 0.2s ease-in-out;
  z-index: 40;
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
  cursor: pointer;
}

.submit:hover {
  background-color: #0cefff; 
}


.footer{
  position: relative;
  height: 6vw;
  width: 100vw;

}

.footerimg{
  position: absolute;
  width: 100vw;
}

.footerlogo{
  position: absolute;
  z-index: 999;
  width: 7.5vw;
  transform: translate(1.5vw,1.5vw);
}



.footertxt{
  left: 12vw;
  padding: 1vw;
  position: absolute;
  z-index: 999;
  width: 100vw;
  font-size: 1vw;
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
}


.sec7{
  height: 10vw;
  overflow: hidden;
}

.header img{
  position: absolute;
  overflow: hidden;
  width: 100vw;

}


.header p{
  position: absolute;
  text-align: center;
  font-size: 2vw;
  left: 50%;
  transform: translate(-50%, 1.8vw);
  font-family: 'BasicSans-SemiBold', Verdana, sans-serif;
}



.sec8{
  width: 100vw;
  height: 33.3vw;
}

.sec8 .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100vw;
}

.sec8 .grid-container img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.65;
  transition: opacity 0.3s ease; /* Add transition for opacity */
}

.grid-container{
  position: absolute;
}



.sec8 .grid-container .grid-item {
  position: relative;
  overflow: hidden;
}

.sec8 .grid-container .grid-item .text {
  width: 14vw;
  height: 3vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2vw;
  font-weight: bold;
  text-align: center; /* Center text horizontally */
  line-height: 1.5; /* Adjust line-height for vertical centering */
  overflow: hidden;
  transition: color 0.3s ease, transform 0.3s ease;
}

.sec8 .grid-container .grid-item .text:hover {
  color: rgb(72, 209, 255); /* Change text color on hover */
  transform: scale(1.1) translate(-45%, -45%);
}

.sec8 .grid-container .grid-item .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2vw;
  font-weight: bold;
  text-align: center; /* Center text horizontally */
  line-height: 1.5; /* Adjust line-height for vertical centering */
  overflow: hidden;
}

.grid1{
  height: 32vw;
}


.grid1img {
  position: absolute;
  z-index: 10;
  opacity: 0.8;
  width: 100%;
  height: 100%; /* Ensures the image fills its parent */
  object-fit: cover; /* Ensures the image covers the entire container */

}
.grid1 h1{
  color: white;
  font-size: 5vw;
  position: absolute;
  z-index: 1000;
  left: 55%;
  transform: translate(0, 6vw);
}

.grid1 h2{
  color: white;
  font-size: 2.5vw;
  position: absolute;
  z-index: 1000;
  left: 55%;
  transform: translate(0, 12vw);
}

.grid1 p{
  color: white;
  font-size: 1.5vw;
  position: absolute;
  z-index: 1000;
  left: 55%;
  transform: translate(0, 18vw);
}

.grid1button{
  padding: 1vw;
  width: 18vw;
  height: 1.7vw;
  border-radius: 1vw;
  font-size: 1.23vw;
  position: absolute;
  z-index: 1000;
  left: 61%;
  margin-top: 28.2vw;
  color: white;
  background-color: #1194ff;
  border: none;
  transition: color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.grid1button:hover{
  background-color: rgb(72, 209, 255); /* Change text color on hover */
  transform: scale(1.1);
}

.grid1icon{
  position: absolute;
  z-index: 999;
  opacity: 0.8;
  width: 3vw;
  left: 55%;
  transform: translate(0vw, 28.5vw);
}

.back{
  position: absolute;
  width: 4vw;
  z-index: 12;
  padding: 2vw;
}



@media only screen and (max-width: 768px) {
  .find{
    width: 95vw;
  }
}