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

body {
  cursor: url('Images/cursor2.png'), auto;
  background: rgb(174,223,242);
  background: linear-gradient(0deg, rgba(174,223,242,1) 3%, rgba(227,204,167,1) 7%, rgba(227,204,167,1) 50%, rgba(227,204,167,1) 93%, rgba(174,223,242,1) 97%);
}

.dark-mode .body {
    background: rgb(120,172,193);
    background: linear-gradient(0deg, rgba(120,172,193,1) 3%, rgba(170,147,110,1) 7%, rgba(170,147,110,1) 50%, rgba(170,147,110,1) 93%, rgba(120,172,193,1) 97%);  }

h2, h3, h4, h5, h6 {
  font-family: 'BeachVibes';
  font-weight: normal;
}


@font-face {
  font-family: 'SurfingBeach';
  src: url(Fonts/Surfing\ Beach\ 1.ttf);
}

@font-face {
  font-family: 'BeachVibes';
  src: url(Fonts/Beach\ Vibes.otf);
}

#playButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 16px;
  z-index: 1000; 
  background-color: rgb(174, 223, 242);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#playButton:active {
  background-color: rgb(174, 223, 242);
}


/*Start section one*/
.one {
  position: relative;
  width: 100%;
  height: 155vh; 
  overflow: hidden;
  background-color: rgb(174, 223, 242);
  transition: background-color 1s ease, background-image 1s ease; 
  background-size: cover;
  background-position: center;
}

.body .dark-mode .one {
  background-color: rgb(120, 172, 193);
}

.beach-typo {
  position: absolute;
  display: flex;
  width: auto;
  height: auto;
  top: 23%;
  left: 53%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'SurfingBeach';
  font-size: 180px; 
}

#dot{
  color: transparent;
}

.atmo-typo {
  position: absolute;
  display: flex;
  width: auto;
  height: auto;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 60px; 
  opacity: 0;
  animation: fadeIn 6s ease-in-out 3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.beach-image {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  position: absolute;
  top: -10%;
  left: 0;
}
/*End section one*/


/*Start section two*/
.two{
  position: relative;
  width: 100%;
  height: 130vh; 
  overflow: hidden;
  background-color: rgb(227, 204, 167);
  transition: background-color 1s ease;
  z-index: 1; 
}

.dark-mode .two {
  background-color: rgb(170, 147, 110); 
}

.take-typo{
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px; 
}

.umbrella-image{
  min-height: 100%;
  max-width: 100%;
  object-fit: cover; 
  position: absolute;
  margin-top: -12%;
  left: -35%;
  z-index: 2;
}

.menu-sunglasses {
  position: relative;
  width: 20%;
  min-height: 20%;
  margin-top: 3.5%;
  margin-bottom: 0%;
  margin-left: 35%;
  z-index: 3;
}

.menu-ice {
  position: relative;
  width: 20%;
  min-height: 20%;
  margin-top: -18%;
  margin-bottom: 7%;
  margin-left: 55%;
  z-index: 3;
}

.menu-headphones {
  position: relative;
  width: 20%;
  min-height: 20%;
  margin-top: -12%;
  margin-bottom: 0%;
  margin-left: 69%;
  z-index: 3;
}

.menu-bucket {
  position: relative;
  width: 20%;
  min-height: 20%;
  margin-top: -5%;
  margin-bottom: 0%;
  margin-left: 55%;
  z-index: 3;
}

.menu-unicorn {
  position: relative;
  width: 20%;
  min-height: 20%;
  margin-top: -18%;
  margin-bottom: 0%;
  margin-left: 35%;
  z-index: 3;
}
/*End section two*/


/*Start section three*/
.three{
  position: relative;
  width: 100%;
  height: 130vh; 
  overflow: hidden;
  background-color: rgb(227, 204, 167);
  transition: background-color 1s ease; 
}

.dark-mode .three {
  background-color: rgb(170, 147, 110);; 
}

.sunscreen-typo{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px; 
  width: 100vw;
}

.sunscreen-image{
  object-fit: cover; 
  position: absolute;
  min-height: 25%;
  width: 25%;
  top: 20%;
  left: 5%;
  z-index: 1;
}

.red-button {
  width: 75vw;
  top: 33%;
  left: 15%;
  background-color: rgb(199, 60, 70);
  color: white;
  border: none;
  padding: 80px 450px;
  font-size: 80px;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.5s ease;
  position: relative;
}

.red-button:hover {
  box-shadow: 0 0 20px 10px rgba(199, 60, 70, 0.8);
}

#timer {
  font-family: 'BeachVibes'
}

.custom-alert {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-alert-content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(199, 60, 70);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 60px;
  color: rgb(255, 255, 255);
}

.close-btn {
  position: absolute;
  margin-top: -2%;
  right: 20px;
  color: rgb(255, 255, 255);
  font-size: 80px;
  font-weight: lighter;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/*End section three*/


/*Start section four*/
.four {
  position: relative;
  width: 100%;
  height: 130vh;
  overflow: hidden;
  background-color: rgb(227, 204, 167);
  transition: background-color 1s ease; 
}

.dark-mode .four {
  background-color: rgb(170, 147, 110);; 
}

#arrowsunglass {
  position: absolute;
  transform: rotate(90deg);
  bottom: 72%;
  left: 84%;
  width: 5%;
  height: auto;
  animation: fadeInOut 6s ease-in-out infinite;
}

.sunglass-typo {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px; 
  width: 100vw;
}

.sunglass-image {
  object-fit: cover;
  position: absolute;
  top: 25%;
  left: 10%;
  cursor: pointer;
  width: 80%; 
  min-height: 80%;
}

#menuIcon4 {
  position: fixed; 
  bottom: 1%;          
  right: 1%;           
  width: 4%;        
  height: auto;       
}
/*End section four*/


/*Start section five*/
.five {
  position: relative;
  width: 100%;
  height: 130vh;
  overflow: hidden;
  background-color: rgb(227, 204, 167);
  transition: background-color 1s ease; 
}

.dark-mode .five {
  background-color: rgb(170, 147, 110); 
}

#arrowright {
  position: absolute;
  bottom: 49%;
  right: 19%;
  width: 5%;
  height: auto;
  animation: fadeInOut 6s ease-in-out infinite;
}

#arrowleft {
  position: absolute;
  bottom: 50%;
  left: 16.5%;
  width: 5%;
  height: auto;
  animation: fadeInOut 6s ease-in-out infinite;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ice-typo {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px; 
  width: 100vw;
}


input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 70%;
  min-height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .4s ease
  opacity .4s ease;
  cursor: pointer;
}

.container {
  margin: 0 auto;
  width: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.cards {
  position: relative;
  top: 5%;
  width: 70%;
  min-height: 70%;
  margin-bottom: 20px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

#item-1:checked ~ .cards #ice-1,
#item-2:checked ~ .cards #ice-2,
#item-3:checked ~ .cards #ice-3,
#item-4:checked ~ .cards #ice-4,
#item-5:checked ~ .cards #ice-5 {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 2;
}

#item-1:checked ~ .cards #ice-5,
#item-2:checked ~ .cards #ice-1,
#item-3:checked ~ .cards #ice-2,
#item-4:checked ~ .cards #ice-3,
#item-5:checked ~ .cards #ice-4 {
  transform: translateX(-40%) scale(0.8);
  opacity: 0.6;
  z-index: 1;
}

#item-1:checked ~ .cards #ice-2,
#item-2:checked ~ .cards #ice-3,
#item-3:checked ~ .cards #ice-4,
#item-4:checked ~ .cards #ice-5,
#item-5:checked ~ .cards #ice-1 {
  transform: translateX(40%) scale(0.8);
  opacity: 0.6;
  z-index: 1;
}

#item-1:checked ~ .cards #ice-3,
#item-2:checked ~ .cards #ice-4,
#item-3:checked ~ .cards #ice-5,
#item-4:checked ~ .cards #ice-1,
#item-5:checked ~ .cards #ice-2,
#item-1:checked ~ .cards #ice-4,
#item-2:checked ~ .cards #ice-5,
#item-3:checked ~ .cards #ice-1,
#item-4:checked ~ .cards #ice-2,
#item-5:checked ~ .cards #ice-3 {
  display: none;
}

#menuIcon5 {
  position: fixed; 
  bottom: 1%;          
  right: 1%;           
  width: 4%;        
  height: auto;       
}
/*End section five*/

/*Start section six*/
.six{
  position: relative;
  width: 100%;
  height: 130vh; 
  overflow: hidden;
  background-color: rgb(227, 204, 167);
  transition: background-color 1s ease; 
  z-index: 1;
}

.dark-mode .six {
  background-color: rgb(170, 147, 110);; 
}

.headphones-typo{
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px; 
  width: 100vw;
}


.headphones-image{
  object-fit: cover; 
  position: absolute;
  width: 60%;
  min-height: 60%;
  top: 6%;
  left: 10%;
  z-index: 2;
}

.player-container {
  position: relative;
  width: 15%;
  margin-left: 59.7%;
  margin-top: 15%;
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 20px;
  padding: 20px;
  z-index: 3;
}

.cover {
  text-align: center;
  margin-bottom: 12px;
}

.cover img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.info {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  color: rgb(255, 255, 255);
  font-size: 40px;
  font-family: 'BeachVibes';
}

.artist {
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
  transition: color 0.3s ease;
  outline: none;
  margin: 0 15px;
}

button:hover {
  color: rgb(175, 174, 174);
  cursor: pointer;
}

button.play-pause {
  font-size: 2rem;
  color: rgb(255, 255, 255);
}

button.play-pause:hover {
  cursor: pointer;
  color: rgb(175, 174, 174);
}

audio {
  width: 100%;
  display: none;
}

#menuIcon6 {
  position: fixed; 
  bottom: 1%;          
  right: 1%;           
  width: 4%;        
  height: auto;       
}
/*End section six*/


/*Start section seven*/
.seven{
  position: relative;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  background-color: rgb(227, 204, 167);
  transition: background-color 1s ease; 
}

.dark-mode .seven {
  background-color: rgb(170, 147, 110); 
}

.sandcastle-typo{
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px;  
  margin: 0%;
  width: 100vw;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  justify-content: center;
  align-content: center;
  margin-top: 12vh;
}

.slides {
  display: flex;
  width: 300%;
}

.slide {
  flex: 0 0 33.33%;
  box-sizing: border-box;
}

.slide img {
  width: 60%;
  margin-left: 22%;
  height: auto;
  display: block;
}

.navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.prev2, .next2 {
  background-color: rgb(233, 219, 197);
  color: rgb(255, 255, 255);
  border: none;
  padding: 10px;
  cursor: pointer;
}

.dark-mode .prev2{
  background-color: rgb(0, 0, 0, 0.5);
}

.dark-mode .next2{
  background-color: rgb(0, 0, 0, 0.5);
}

#menuIcon7 {
  position: fixed; 
  bottom: 1%;          
  right: 1%;           
  width: 4%;        
  height: auto;       
}
/*End section seven*/


/*Start section eight*/
.eight {
  position: relative;
  width: 100%;
  height: 350vh; 
  overflow: hidden;
  background: rgb(174,223,242);
  background: linear-gradient(0deg, rgba(174,223,242,1) 56%, rgba(227,204,167,1) 85%);
  z-index: 1;
}

body.dark-mode .eight {
  background: rgb(174,223,242);
  background: linear-gradient(0deg, rgba(120, 172, 193,1) 56%, rgba(170, 147, 110,1) 85%);

}

.swim-typo {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px;
  z-index: 2; 
  width: 100vw;
}

.feet1 {
  position: relative;
  width: 10%;
  min-height: 10%;
  margin-top: 15%;
  margin-left: 40%;
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1s ease-in-out 4s forwards;
  animation: showImage 10s infinite;
  animation-delay: 2s;
}

.feet2 {
  position: relative;
  width: 10%;
  min-height: 10%;
  margin-top: -10%;
  margin-left: 50%;
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1s ease-in-out 4s forwards;
  animation: showImage 10s infinite;
  animation-delay: 4s;
}

.feet3 {
  position: relative;
  width: 10%;
  min-height: 10%;
  margin-top: -10%;
  margin-left: 40%;
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1s ease-in-out 4s forwards;
  animation: showImage 10s infinite;
  animation-delay: 6s;
}

.feet4 {
  position: relative;
  width: 10%;
  min-height: 10%;
  margin-top: -10%;
  margin-left: 50%;
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1s ease-in-out 4s forwards;
  animation: showImage 10s infinite;
  animation-delay: 8s;
}

@keyframes showImage {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

.swim-image {
  width: 70%;
  min-height: 70%;
  margin-top: 40%;
  margin-left: -2%;
  z-index: 4;
  animation: float 10s ease-in-out infinite;
}

@keyframes float {
  0% {
      transform: translate(0%, 0%) rotate(0deg);
  }
  25% {
      transform: translate(25%, -5%) rotate(5deg);
  }
  50% {
      transform: translate(50%, 5%) rotate(-5deg);
  }
  75% {
      transform: translate(25%, 10%) rotate(5deg);
  }
  100% {
      transform: translate(0%, 0%) rotate(0deg);
  } 
}

.ask-typo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'BeachVibes';
  font-size: 80px;
  z-index: 5; 
}

.callToAction {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

.openPopup {
  background-color: rgb(216, 161, 197);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 50px; 
  padding: 30px 40px; 
  font-family: 'BeachVibes';
  font-size: 80px; 
  cursor: pointer; 
  transition: background-color 0.3s;
  max-height: 10%; 
}

.openPopup:hover {
  background-color: rgb(196, 141, 177); 
}

.popup{
  display: none;
  position: fixed;
  top: 20%;
  left: 15%;
  width: 70%;
  max-height: 50%;
  background-color: rgb(204, 191, 171);
  justify-content: center;
  align-items: center;
  z-index: 15;
  overflow: hidden;
  border-radius: 20px;

}

.popup-content{
  background-color: rgb(204, 191, 171);
  padding: 15%;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  position: relative;
}

.popup-text{
  font-family: 'BeachVibes';
  color: rgb(255, 255, 255);
  font-size: 40px; 
  text-align: center; 
  line-height: 90%;
}

.close{
  position: absolute;
  top: 17%;
  right: 3%;
  font-size: 40px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-weight: bolder;
}

.link-button{
  position: relative;
  top: 10px;
  padding: 10px 40px;
  background-color: rgb(170, 147, 110); 
  font-family: 'BeachVibes';
  font-size: 40px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 20px;
}

.link-button:hover{
  background-color:  rgb(69, 47, 13);
}

#menuIcon8 {
  position: fixed; 
  bottom: 1%;          
  right: 1%;           
  width: 4%;        
  height: auto;       
}
/*End section eight*/

/*....................................................................*/

@media screen and (max-width: 415px){

/*Start @media section one*/
.one {
  width: 100%;
  height: 60vh; 
}

.beach-image {
  width: 150%;
  min-height: 150%;
  top: -2%;
}

.beach-typo {
  top: 32%;
  left: 50%;
  font-size: 80px; 
}

#dot{
  color: transparent;
}

.atmo-typo {
  top: 63%;
  left: 53%;
  font-size: 30px; 
}
/*End @media section one*/


/*Start @media section two*/
.two{
  height: 60vh; 
}

.take-typo{
  position: relative;
  top: 8%;
  left: 50%;
  font-size: 40px;
  margin-bottom: 10%;
}

.umbrella-image{
  min-height: 150%;
  max-width: 150%;
  margin-top: -20%;
  margin-left: -26%;
}

.menu-sunglasses {
  width: 35%;
  min-height: 35%;
  top: -3%;
  margin-left: 30%;
}

.menu-ice {
  width: 35%;
  min-height: 35%;
  margin-top: -35%;
  margin-bottom: 7%;
  margin-left: 60%;
}

.menu-headphones {
  width: 35%;
  min-height: 35%;
  margin-top: -20%;
  margin-bottom: 7%;
  margin-left: 67%;
}

.menu-bucket {
  width: 35%;
  min-height: 35%;
  margin-top: -25%;
  margin-bottom: 7%;
  margin-left: 48%;
}

.menu-unicorn {
  width: 35%;
  min-height: 35%;
  margin-top: -48%;
  margin-bottom: 7%;
  margin-left: 15%;
}
/*End @media section two*/


/*Start @media section three*/
.three{
  height: 60vh; 
}

.sunscreen-typo{
  position: relative;
  top: 30%;
  left: 50%;
  font-size: 40px; 
  max-width: 70vw;
}

.sunscreen-image{
  min-height: 40%;
  width: 40%;
  top: 42%;
  left: 0%;
}

.red-button {
  width: 73vw;
  top: 39%;
  left: 16%;
  padding: 30px 40px;
  font-size: 50px;
  position: relative;
}

.close-btn {
  margin-top: -8%;
  right: 3%;
}

#menuIcon3 {
  bottom: 0%;                   
  width: 10%;         
}
/*End @media section three*/


/*Start @media section four*/
.four{
  height: 60vh; 
}

.sunglass-typo {
  position: relative;
  top: 30%;
  left: 50%;
  font-size: 40px; 
  max-width: 70vw;
}

.sunglass-image {
  top: 55%;
  left: 5%;
  width: 90%; 
  min-height: 90%;
}

#menuIcon4 {
  bottom: 0%;                   
  width: 10%;         
}
/*End @media section four*/


/*Start @media section five*/
.five {
  width: 150%;
  height: 60vh;
}

#arrowright {
  right: 19%;
}

#arrowleft {
  left: -40%;
}

.ice-typo {
  top: 15%;
  left: 34%;
  font-size: 40px; 
  max-width: 70vw;
}

.card {
  left: -5%;
  right: 0;
}

.container {
  margin-left: -2%;
  width: 120%;
  min-height: 100%;
  height: 80vh;
}

.cards {
  position: relative;
  left: -18%;
  top: 5%;
  width: 70%;
  min-height: 70%;
  margin-bottom: 20px;
  overflow: hidden;
}

#menuIcon5 {
  bottom: 0%;                   
  width: 10%;         
}
/*End @media section five*/


/*Start @media section six*/
.six{
  width: 150%;
  height: 60vh; 
}

.headphones-typo{
  position: relative;
  top: 18%;
  left: 35%;
  font-size: 40px; 
  max-width: 70vw;
}

.headphones-image{
  width: 60%;
  min-height: 60%;
  top: 30%;
  left: -1%;
}

.player-container {
  width: 22%;
  height: 32%;
  margin-left: 40%;
  padding: 10px;
  bottom: 2.5%;
}

.cover img {
  width: 80px;
  height: 80px;
}

.title {
  font-size: 25px;
  margin-bottom: 5px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120%;
  margin: -9%;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
  transition: color 0.3s ease;
  outline: none;
  margin: 0 15px;
}

#menuIcon6 {
  bottom: 0%;                   
  width: 10%;         
}
/*End @media section six*/


/*Start @media section seven*/
.seven{
  height: 60vh; 
}

.sandcastle-typo{
  position: relative;
  top: 20%;
  left: 50%;
  font-size: 40px;  
  max-width: 70vw;
}

.slider {
  top: -10%;
  left: -42%;
  width: 180%;
  height: 80%;
}

.slides {
  display: flex;
  width: 300%;
}

.slide {
  flex: 0 0 33.33%;
  box-sizing: border-box;
}

.slide img {
  width: 60%;
  margin-left: 22%;
  height: auto;
  display: block;
}

.navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

#menuIcon7 {
  bottom: 0%;                   
  width: 10%;         
}
/*End section seven*/


/*Start @media section eight*/
.eight {
  height: 120vh; 
  background: rgb(174,223,242);
  background: linear-gradient(0deg, rgba(174,223,242,1) 46%, rgba(227,204,167,1) 71%);
}

.swim-typo {
  position: relative;
  top: 10%;
  left: 50%;
  font-size: 40px;
  max-width: 70vw;
}

.feet1 {
  width: 10%;
  min-height: 10%;
  margin-top: 20%;
  margin-left: 40%;
}

.feet2 {
  width: 10%;
  min-height: 10%;
  margin-top: -15%;
  margin-left: 50%;
}

.feet3 {
  width: 10%;
  min-height: 10%;
  margin-top: -15%;
  margin-left: 40%;
}

.feet4 {
  width: 10%;
  min-height: 10%;
  margin-top: -15%;
  margin-left: 50%;
}

.swim-image {
  width: 80%;
  margin-top: 30%;
}

.ask-typo {
  position: relative;
  top: 50%;
  left: 55%;
  font-size: 40px; 
  max-width: 70vw;
}

.callToAction {
  width: 100%;
}

.callToAction button {
  border-top: -30%;
  padding: 10px 20px; 
  font-size: 40px; 
}

.openPopup {
  background-color: rgb(216, 161, 197);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 50px; 
  padding: 30px 40px; 
  font-family: 'BeachVibes';
  font-size: 80px; 
  cursor: pointer; 
  transition: background-color 0.3s;
  max-height: 10%; 
}

.openPopup:hover {
  background-color: rgb(196, 141, 177); 
}

.popup{
  position: fixed;
  top: 25%;
  left: 10%;
  width: 80%;
  height: 90%;
  background-color: rgb(204, 191, 171);
  justify-content: center;
  align-items: center;
  z-index: 15;
  border-radius: 20px;
}

.close{
  position: absolute;
  top: 1%;
  right: 13%;
  font-size: 30px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-weight: bolder;
}

.popup-content{
  background-color: rgb(204, 191, 171);
  top: 0%;
  padding: 15%;
  border-radius: 10px;
  text-align: center;
  width: 95%;
  height: 90%;
  position: absolute;
}

.popup-text{
  font-family: 'BeachVibes';
  color: rgb(255, 255, 255);
  font-size: 30px; 
  text-align: center; 
  line-height: 120%;
  width: 100%;
  border-top: 20%;
}

.link-button{
  position: relative;
  padding: 10px 40px;
  background-color: rgb(170, 147, 110); 
  font-family: 'BeachVibes';
  font-size: 35px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 40px;
}

.link-button:hover{
  background-color:  rgb(69, 47, 13);
}

#menuIcon8 {
  bottom: 0%;                   
  width: 10%;         
}
/*End @media section eight*/
}