@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Permanent+Marker&display=swap');

body {
  font-family: Arial, sans-serif;
  background-image: url(./images/island.png);
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.socialMedia {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  margin-right: 1rem;
}

li {
  margin-right: 0.5rem;
  list-style-type: none;
}



.header {
  display: flex;
  justify-content: center;
}

.nav {
  display: flex;
  list-style-type: none;
  list-style-type: none;

}

.nav li {
  padding: 10px 15px;
}

.nav li a {
  color: whitesmoke;
  text-decoration: none;
  font-weight: bold;
  /* Thicker text */
  text-shadow: 2px 2px 2px black;
  /* Text shadow for depth */
  font-size: 18px;
  /* Increased font size */
}

.home {
  background-color: white;
  border-radius: 15px;

}

.home1 {
  color: rgb(71, 175, 216) !important;
}


.carouselSize {
  margin: auto;
  width: 50%;
  height: 50%;
}

.section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.resize {
  width: 25rem;
  min-height: 30rem;
  background-color: #ddd;
  margin-bottom: 10px;
  margin: 2rem;
}

.imgCard {
  height: 350px;
}

.welcome-text {
  width: 50%;
  margin: auto;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 70px;
  /* Large font size */
  color: white;
  /* White color for text */
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  /* Dramatic shadow */
  padding: 20px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  /* Slightly transparent white background */
  backdrop-filter: blur(10px);
  /* Blur effect for background */
  border: 3px solid rgba(255, 255, 255, 0.5);
  /* White border */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  /* Box shadow for depth */
}


.activiesCont {
  display: flex;
  margin: 2rem;
  border: 1px solid black;
}

.imgAct {
  width: 250px;
}

.contA {
  backdrop-filter: blur(20px);
  padding: 1rem;
}

.contAA {
  backdrop-filter: blur(20px);
  padding: 1rem;
}





/* Base styles here (applied to all devices) */

/* iPhone 14 Pro Max (and similar devices) */
@media only screen and (max-width: 1170px) {
  .header {
      /* Adjust header styles for smaller screens */
      flex-direction: column;
      align-items: center;
  }

  .nav {
      /* Adjust navigation styles */
      flex-direction: column;
      align-items: center;
  }

  .nav li {
      /* Adjust each navigation item */
      padding: 5px;
      text-align: center;
  }

  .socialMedia {
      /* Adjust social media icons layout */
      justify-content: center;
      margin-top: 0.5rem;
  }

  .carouselSize {
      /* Adjust carousel size */
      width: 80%;
      height: auto;
  }

  .section {
      /* Adjust layout of sections */
      flex-direction: column;
  }

  .resize {
      /* Adjust card sizes */
      width: 90%;
      min-height: auto;
  }

  .imgCard {
      /* Adjust image sizes within cards */
      height: auto;
  }

  .welcome-text {
      /* Adjust welcome text styles */
      width: 90%;
      font-size: 40px; /* Smaller font size */
  }

  /* Add additional styles as needed */
}


@media only screen and (max-width: 1170px) {
  .activiesCont {
      /* Adjust the layout of the activities container */
      flex-direction: column;
      align-items: center;
      margin: 1rem 0;
  }

  .imgAct {
      /* Adjust the image size within the activities container */
      width: 100%;
      max-width: 500px; /* Adjust max-width as needed */
      height: auto;
  }

  .contA {
      /* Adjust the content area within the activities container */
      padding: 1rem;
      text-align: center;
  }

  /* You can add more styles here to adjust text sizes, margins, paddings, etc., as needed */
}