body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 100%;
  min-height: 100%;
  background-color: #eeeeee;
  overflow-x: hidden;
  margin: 0%;
  line-height: 1.7rem;
}
* {
  box-sizing: border-box;
}
/* home page navigation bar*/
.index_nav {
  padding-bottom: 0.5rem;
  height: 5rem;
  display: flex;
  position: sticky;
  z-index: 4;
  top: 0%;
  justify-content: space-between; /* Ensures logo and nav icon are at opposite ends */
  width: 100%; /* Makes sure the nav bar takes the full width */
  padding: 0 0.4rem; /* Adds some padding to the sides */
}

/*nav icon*/
#menu_img {
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 1rem;
  cursor: pointer;
  margin-bottom: 0.2rem;
}

/*logo shown on top of page*/
#phone_logo {
  max-width: 4rem;
  cursor: pointer;
  height: 4rem;
  padding: 0.5rem;
  margin-top: 0.7rem;
}

/*side menu*/
.cont {
  display: none;
  top: 0;
  flex-direction: column;
  position: fixed;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  background-image: url("./images/menu_background.jpeg");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
/*side menu links*/
.cont a {
  font-size: 2rem;
  font-weight: 600;
  font-family: sans-serif;
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 0.75rem;
}

/*side menu links hovering*/
.cont a:hover {
  color: rgb(43, 43, 43);
}
/*times sign acting as close menu button*/
#close_menu {
  font-size: 5rem;
  cursor: pointer;
  color: white;
  margin-right: 3rem;
  margin-bottom: 0%;
  width: 8vw;
  align-self: flex-end;
  margin-top: 0%;
}
#close_menu:hover {
  color: rgb(43, 43, 43);
}
/*container of the slideshow images on home page*/
.landing_image {
  width: 100vw;
  position: absolute;
  margin: 0%;
  z-index: 2;
}
.landing_image img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
  opacity: 1;
}
/* text over the landing image */
.text {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 3;
}
/* Add keyframes for the fade-in effect */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*intro message on the landing page*/
.text h1 {
  margin-top: 15rem;
  font-size: 3rem;
  color: #ffffff;
  line-height: 3.1rem;
  /* Animation Name | Duration | Ease Function | Delay | Iteration Count | Fill Mode */
  animation: fadeIn 3s ease-in-out 0s 1 forwards;
}
/*contact form*/
.contact-container {
  max-width: 600px;
  margin: 20px auto; /* Center the form with reduced top and bottom margin */
  padding: 40px 20px; /* Increased padding inside the container */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-container h2 {
  text-align: center;
  color: #555;
  margin-bottom: 30px; /* Increased bottom margin for more spacing */
}

.contact-form label {
  display: block;
  margin-bottom: 10px; /* Increased space between label and input */
  color: #777;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 92%;
  padding: 12px; /* Slightly increased padding for a larger input area */
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #8ab843;
  outline: none;
}

.contact-button {
  display: block;
  width: 100%;
  padding: 14px; /* Increased padding for a larger button */
  background-color: #8ab843;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  margin-top: 20px; /* Added margin to separate the button from the inputs */
  margin-left: 1rem;
}

.contact-button:hover {
  background-color: #729836;
}
/*icons on forms*/
#icon {
  width: 5rem;
  height: 5rem;
  margin-top: 1rem;
}
/*arrows outside containers*/
section .button a img {
  height: 2rem;
  width: 5rem;
}
/*buttons outside containers*/
.button {
  display: block;
  width: 60vw;
  background-color: #d5eef1;
  border-radius: 0.5rem;
}
.button p {
  font-size: 1rem;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  color: blue;
}
/*button links*/
.button a {
  text-decoration: none;
}
/*navbar for large devices*/
.large {
  display: none;
}

/*nav bar on other pages*/
.normal_nav {
  padding-bottom: 0.5rem;
  width: 100vw;
  height: 5rem;
  display: flex;
  background-color: #333333;
  justify-content: left;
  margin-left: auto;
  position: sticky;
}

/*landing page booking button*/
.text a button {
  font-size: 1.4rem;
  text-decoration: none;
  border-radius: 0.75rem;
  font-family: sans-serif;
  height: 2.5rem;
  width: 16rem;
  background-color: #d5eef1;
  cursor: pointer;
  border-color: #d5eef1;
}
/*button hovering*/
.text a button:hover {
  background-color: #38a3e0;
}
/*div to add space*/
.space_div {
  margin-top: 90vh;
}

/*information containers . have large width*/
.container_info {
  display: block;
  margin-top: 0.1rem;
  margin-left: auto;
  margin-right: auto;
  width: 90vw;
  text-align: center;
  color: #363636;
  font-family: sans-serif;
}
.container_info h2 {
  font-size: 1.7rem;
}
.container_info h5 {
  font-size: 3rem;
}
.container_info p {
  color: #636363;
}
/*iframe holding map*/
.container_info section iframe {
  width: 70vw;
  height: 90vh;
}
/*set container info on the about page to white background*/
#container_info_about {
  width: 100vw;
  background-color: #e0e0e0;
  margin: 0%;
  padding: 1rem;
}

/* content container*/
.container {
  display: block;
  max-width: 100%;
  background-color: #333333;
  font-family: sans-serif;
  text-align: center;
}
/*container list*/
ul {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #cfcfcf;
  font-size: 1rem;
}
li {
  padding: 0.3rem;
}
/*container button*/
.container a button {
  background-color: #d1da61;
  border: solid #e7f06f;
  border-width: 1.5px;
  cursor: pointer;
  max-height: 2.8rem;
  max-width: 14rem;
  margin-bottom: 1.5rem;
  font-family: sans-serif;
}
.container a button:hover {
  color: white;
  background-color: #bcc539;
}
/*container img*/
.container img {
  max-width: 22rem;
  max-height: 5rem;
  padding-top: 1.5rem;
  margin: 0rem;
}
/*container h3*/
.container h3 {
  margin-top: 2rem;
  font-size: 1rem;
  color: white;
}

/*information container*/
.info {
  text-align: center;
  background-image: url("./images/HeroDark.jpg");
  color: white;
  font-family: sans-serif;
  padding-top: 0.5rem;
}
/*information section*/
.info section {
  width: 5rem;
  height: 5rem;
  border: solid white;
  border-width: 0.2rem;
  margin-right: auto;
  margin-left: auto;
  font-size: 3.5rem;
  visibility: hidden;
}
.info section h3 {
  margin: auto;
  padding: auto;
  font-weight: 500;
}
.info h2 {
  visibility: hidden;
  padding-bottom: 2rem;
}

/*photos cluster*/
.photos {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.photos section {
  width: 45vw;
  height: 35vh;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
/*section links*/
.photos section .section-link {
  display: block; /* Make the link fill the section */
  width: 100%;
  height: 100%;
  text-decoration: none; /* Removes underline from links */
  position: relative;
  z-index: 2;
}
.photos section img {
  transition: transform 0.5s ease-in-out;
  position: absolute;
  z-index: 1;
  width: inherit;
  height: inherit;
}
/*while hovering on images*/
.photos section img:hover {
  overflow: hidden;
  transform: scale(1.2); /* Adjust the scale value as needed */
}
/*text above the images in the photos cluster*/
.photos section h2 {
  position: absolute;
  color: white;
  z-index: 2;
  margin-top: 15vh;
  margin-left: 12vw;
}

/*about page*/
#person1 {
  background-image: url("./images/person1.jpg");
}
#person2 {
  background-image: url("./images/person2.jpg");
}
/*about contaner*/
.about_cont {
  max-width: 100%;
  text-align: left;
  font-family: sans-serif;
  overflow: visible;
  background-repeat: no-repeat;
  background-size: 100% 30%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/*about container p*/
.about_cont p {
  background-color: white;
  width: 70vw;
  padding: 3rem;
  color: #636363;
  font-size: 1rem;
  margin-top: 45vh;
  height: fit-content;
  margin: auto;
}
.about_cont p span {
  font-size: 2rem;
  color: rgb(39, 38, 38);
  font-weight: 550;
}
/*programmes page*/
#programmes {
  background-image: url("./images/HeroDark.jpg");
}
.page_intro {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
.page_intro h1 {
  text-align: center;
  font-size: 3rem;
  /*fade in animation*/
  animation: fadeIn 3s ease-in-out 0s 1 forwards;
}
#info_header {
  color: #363636;
  font-size: 3rem;
}

/*images with links container*/
.img_cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*img with links for accessibility*/
.img_with_links {
  height: 30vh;
  width: 50vw;
  font-size: 0.9rem;
  color: white;
  margin: 2rem;
  text-align: center;
}

.img_with_links a {
  color: white;
  text-decoration: none;
  font-family: sans-serif;
}

/*programmes container*/
.programmes {
  display: block;
  width: 100vw;
  background-color: white;
  font-family: sans-serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  font-size: 1.2rem;
  color: #858585;
}
/*programmes p*/
.programmes p {
  width: 90vw;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
}
/*programmes img*/
.programmes img {
  height: 5rem;
  width: 18rem;
}
/*programmes list*/
.programmes ul {
  list-style: none;
  width: 80vw;
  padding-bottom: 1rem;
  font-size: 30px;
  color: #bcc539;
}
/*AI GENERATED CODE*/
/*create custom bullets in the list*/
.programmes ul li::before {
  content: ""; /* Clear default content */
  width: 0.6rem; /* Width of the square */
  height: 0.6rem; /* Height of the square */
  background-color: #bcc539; /* Square color */
  display: inline-block; /* Needed to apply dimensions */
  margin-right: 1.1rem; /* Space between bullet and text */
  vertical-align: middle; /* Align bullet vertically with text */
}
/*programmes list*/
.programmes li {
  font-size: 1.1rem;
  color: #858585;
}
/*programmes hr*/
.programmes hr {
  height: 0.1rem;
  background-color: #cccccc;
  margin: 2.5rem;
  margin-bottom: 1rem;
}
.programmes button {
  color: white;
  height: 3.2rem;
  width: 12rem;
}

/*tools page*/
/*list container*/
.lists_cont {
  text-align: center;
  color: white;
  font-size: 1.4rem;
  font-family: sans-serif;
  background-image: url("./images/HeroDark.jpg");
  background-attachment: fixed;
  width: 100%;
}
.lists_cont h1 {
  padding: 1.5rem;
}
/*hide the drop-down content initially*/
.dropdown_content {
  display: none;
  margin: 0.5rem;
  color: #424242;
}
.tools_list {
  list-style-type: none;
  width: 100vw;
  padding: 2rem;
  color: #bcc539;
  background-color: white;
  margin: 0%;
}
/* custom list style type */
.tools_list span {
  display: inline-block; /* Allows width and height to be set */
  width: 0.8rem; /* Fixed width */
  height: 0.8rem; /* Fixed height */
  line-height: 0.8rem; /* Centers the + or - vertically */
  text-align: center; /* Centers the + or - horizontally */
  padding: 0.2rem;
  font-size: 1.5rem;
  background-color: #333333;
  color: white;
  margin-right: 1rem;
  cursor: pointer;
}
/*hovering over the list bullets*/
.tools_list span:hover {
  background-color: #bcc539;
}
/*tools list*/
.tools_list li {
  padding: 0.5rem;
  font-size: 1.3rem;
  color: #bcc539;
  margin-left: 10vw;
}
@media (max-width: 600px) {
  .contact-form input,
  .contact-form textarea {
    width: 17rem;
  }
  /*contact form*/
  .contact-container {
    width: 90%;
    margin: auto;
  }
  .lists_cont h1 {
    padding: 1.5rem;
    font-size: 1.7rem;
  }
  /* custom list style type */
  .tools_list span {
    width: 1.1rem; /* Fixed width */
    height: 1.1rem; /* Fixed height */
    line-height: 0.6rem; /* Centers the + or - vertically */
    padding: 0.3rem;
    font-size: 1rem;
  }
  /*tools list*/
  .tools_list li {
    padding: 0.3rem;
    font-size: 1.2rem;
    margin-left: 5%;
  }
  /*side menu links*/
  .cont a {
    font-size: 1.5rem;
    padding: 0.5rem;
    line-height: 3rem;
  }
  /*times sign acting as close menu button*/
  #close_menu {
    font-size: 4.2rem;
    margin-top: 7%;
  }
  .text h1 {
    font-size: 1.8rem;
    margin-top: 14rem;
    line-height: 3rem;
  }
  .container_info p {
    font-size: 1rem;
  }
  .container_info h1 {
    font-size: 1.2rem;
  }
  .container_info h5 {
    font-size: 2rem;
  }
  .container_info h2 {
    font-size: 1.5rem;
  }
  ul {
    font-size: 0.9rem;
  }
  li {
    padding: 0.2rem;
  }
  .container h3 {
    margin-top: 1rem;
    font-size: 0.9rem;
  }
  .container a button {
    max-height: 2.4rem;
    max-width: 13rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    padding: 0.8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /*information section*/
  .info section {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
  }
  .info h2 {
    font-size: 1.2rem;
    padding-bottom: 1rem;
  }
  .info h3 {
    padding-top: 0.3rem;
  }

  .photos section {
    width: 80vw;
    height: 35vh;
  }
  .photos section h2 {
    position: absolute;
    color: white;
    z-index: 2;
    margin-top: 15vh;
    margin-left: 18vw;
  }
  /*about container p*/
  .about_cont p {
    width: 90vw;
    padding: 2rem;
    font-size: 1rem;
    margin-top: 20vh;
  }
  .about_cont p span {
    font-size: 2rem;
    color: rgb(39, 38, 38);
    font-weight: 550;
  }
  /*programmes page*/
  .page_intro {
    height: 40vh;
  }
  .page_intro h1 {
    text-align: center;
    font-size: 2rem;
    line-height: 2rem;
  }
  #info_header {
    font-size: 2rem;
    line-height: 2rem;
  }

  /*images with links container*/
  .img_cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  /*img with links for accessibility*/
  .img_with_links {
    width: 80vw;
  }
  .programmes p {
    font-size: 1rem;
  }
  /*create custom bullets in the list*/
  .programmes ul li::before {
    margin-right: 1rem; /* Space between bullet and text */
  }
  /*programmes list*/
  .programmes li {
    font-size: 1rem;
  }
  .programmes button {
    height: 3.5rem;
    width: 14rem;
  }
}
/*h3*/
h3 {
  text-align: center;
}
/*programmes info div*/
.programmes_info {
  line-height: 1.8rem;
}
.programmes_info h1 {
  text-align: left;
  margin-left: 2.5rem;
}
.programmes_info img {
  width: 90vw;
  height: 30vh;
  margin-bottom: 2rem;
}
/*animation showing items appearing from the left*/
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    visibility: hidden;
  }
  100% {
    transform: translateX(0);
    visibility: visible;
  }
}
.animate-on-scroll {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}
/*heading on the information container*/
#heading {
  font-size: 3rem;
}

/*container of the slideshow images on home page*/
.slideshow-container {
  width: 100vw;
  height: 15rem;
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  justify-content: space-evenly;
}
.myslides {
  transition: transform 1s ease, opacity 1s ease;
  transform: translateX(100%); /* Start off-screen to the right */
  opacity: 0;
}

.animate-on-slideIn {
  transform: translateX(0); /* Slide in to the center */
  opacity: 1;
}

.animate-on-scrollLeft {
  transform: translateX(-100%); /* Slide out to the left */
  opacity: 0;
}

/*slideshow container images*/
.myslides img {
  height: 10rem;
  width: 16rem;
  padding: 1rem;
}

/*footer*/
footer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  background-color: #444444;
  margin-top: auto;
  font-size: 1rem;
  font-family: sans-serif;
  color: white;
  padding-top: 5vh;
}
/*footer section*/
footer section {
  text-align: center;
  padding: 0.7rem;
}
/*foter links*/
footer section a {
  text-decoration-line: none;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
footer section a:hover {
  color: #d8d538;
}
/*footer class in footer*/
.footer_sect {
  align-self: center;
  padding: 0.5rem;
}
#credits {
  text-align: center;
  flex-basis: 90%;
  font-size: 0.8rem;
  background-color: #575757;
  width: 100vw;
}
/*footer images*/
.footer_sect img {
  height: 2.2rem;
  width: 2.2rem;
  margin-bottom: 0.2rem;
}
/*
.footer_sect img:hover{
    background-color: #333333;
    opacity: 1;
}*/
/*invisible line to act as padding*/
footer section hr {
  visibility: hidden;
  font-size: 4px;
}
/*footer section image(logo)*/
#footer_logo {
  width: 7rem;
  height: 7rem;
}
/*forms*/
section form {
  display: block;
  border-radius: 1rem;
  width: 60vw;
  background-color: #ffffff;
}
/* Style each form group (label and input) */
form .form-group {
  display: block;
  align-items: centre;
  margin-left: 6vw;
}
/*form labels*/
form .form-group label {
  margin: 0.3rem;
  width: 20vw;
  font-size: 1rem;
}
/*form input fields*/
form .form-group input {
  margin: 0.3rem;
  width: 45vw;
  height: 1.8rem;
  border-radius: 0.3rem;
  border-width: 0.1rem;
  font-size: 0.9rem;
}

form .form-group select {
  width: 45vw;
  height: 2rem;
  border-radius: 0.3rem;
  font-size: 1rem;
}
form .submit {
  text-align: center;
  margin-bottom: 2vh;
}
form .submit input[type="submit"] {
  font-size: 1.1rem;
  margin: 1rem;
  height: 2rem;
  width: 7rem;
  border-radius: 0.5rem;
  background-color: #d5eef1;
  border-width: 0.1rem;
}
/*text area field in feedback form*/
form .form-group textarea {
  margin: 0.3rem;
  width: 45vw;
  border-radius: 0.5rem;
  border-width: 0.1rem;
  font-size: 0.9rem;
}
/*links in the forms*/
.form_link a {
  text-decoration: none;
  margin: 7vw;
}
/* Change the background color of the submit button when hovered over */
input[type="submit"]:hover {
  background-color: #38a3e0;
  cursor: pointer;
}
/*records table*/
.table {
  margin-top: 1rem;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  width: 75vw;
}
/*table heading*/
.table h3 {
  text-align: center;
  padding-top: 1rem;
}
table {
  width: 75vw;
  border-collapse: collapse;
}
/*table header*/
th {
  border: 1px solid black;
  padding: 2px;
}
/*table data*/
td {
  border: 1px solid black;
  text-align: center;
  border-collapse: collapse;
  font-size: 1rem;
}
/*list*/
.container ul {
  width: 75vw;
}
li {
  text-align: left;
  font-size: 1rem;
  font-family: sans-serif;
}
/*header style*/
h1 {
  font-family: sans-serif; /* Replace with your preferred font */
  font-size: 5vw;
}

/*FAQs list*/
.container section ul {
  width: auto;
}

/*view more buttons*/
.container_intro section p button {
  font-size: 0.8rem;
  border: solid #bbb9b9;
  border-radius: 0.5rem;
  border-width: 1.5px;
  cursor: pointer;
}