nav ul{
    list-style: none;
    text-align: center;
    overflow: hidden;  
}
nav li{
    display: inline;
    font-family: 'poiret one';
    font-size: 20pt;
    font-weight: bold;
    text-decoration: none;
    padding-inline: 10px;
}
nav a{
    color: black;
    text-decoration: none;
    padding-inline: 10px;
}
nav a:hover{
    background-color: #f0f0f0;
}
@media screen and (max-width: 768px) {
nav ul {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0;
}
nav li {
   display: block;
   margin: 10px 0;
}
}

h1{
    text-align: center; 
    font-family: 'poiret one';
    font-size: 50pt; 
    font-weight: bold;  
}
h2{
    text-align: center;
    font-family: 'poiret one';
    font-size: 20pt;
    padding: 15px;
}

.hero{
    width: 100%;
}
.hero-image{
    height: auto;
    width: 100%;
    margin-top: 0%;
    margin-bottom: 0%;
    position: relative;
    border: none;
    margin-top: 5px;
}

.background {
    width: 100%;
    height: auto;
    background-image: url('images/Dolphins.jpg'); /* Replace with your image */
    background-size: cover; /* Makes the image fit the container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;      
}
section{
    text-align: right;
}
@media screen and (max-width: 480px) {
  section{
   width: 300px;
  }
}

.container {
    display: flex;
    align-items: center; 
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 5px;
    text-align: center;
    border: solid;
    padding-top: 4px;
    margin-bottom: 5px;
} 
img {
    max-width: 100%;
    max-height: 100%;  
    border: none; 
}

/* Slideshow container */
.slideshow-container {
  position: relative;
 
}
/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: black;
  font-weight: bold;
  
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: white;
  color: black;
}
/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #f0f0f0f5;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {font-weight: bold;}

.table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Creates 3 equal columns */
  gap: 10px; /* Adjusts spacing */
}
.box {
  padding: 20px;
  text-align: justify;
  border: solid;
  border-radius: 10px;
}

body{
    margin: 10px;
    background-image: linear-gradient(#05a0cb 0%, #4be98d 100%); 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'abel';
    font-size: 15pt;
    text-align: justify;      
}

header img{
    border: none;
}
header {
    overflow: hidden;
    background-color: white;
    padding: 8px 8px;
    border-bottom: solid;
    text-align: center;
}  
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 480px) {
    .header-centre{
     float: none;
    }
}

.footer-follow, .footer-contact{
    color: black;
    text-align: center;
    padding: 5px;
}
@media (max-width: 768px) {
    .footer-contact, .footer-follow {
        width: 100%;
        margin-bottom: 20px;
    }
}

button{
    font-size: 15pt;
    font-family: 'abel';
    color: black;
    background-color: white;
    border: solid 0.5mm;
}
button:hover{
    background-color: #f0f0f0;
}
#topBtn {
  display: none; /* Initially hidden */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  
  border: none;
  outline: none;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tab-button {
  flex: 1;
  padding: 10px;
  background-color: #eee;
  border: none;
  cursor: pointer;
  text-align: center;
  margin-top: 5px;
}
.tab-content {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #ccc;
}

/* Responsive styles */
@media (max-width: 600px) {
  .tab-button {
    flex-basis: 100%;
    font-size: 16px;
  }
  .tab-content {
    font-size: 14px;
  }
}

.scroll-container {
    overflow: auto;
    white-space: nowrap;
    text-align: center;    
} 
.scroll-container img {
   border: solid;
}
  
Styling for FAQ page
.faq-container {
    max-width: 768px; /* Limit the width for better readability */
    margin: 50px auto; /* Center the container and add vertical spacing */
    padding: 20px;
    
  }
/* Style for each FAQ item */
.faq-item {
    border-bottom: 1px solid black; /* Light gray border between items */
    overflow: hidden; /* Hide overflowing content */
}
/* Style for the question buttons */
.faq-question {
    background-color: rgba(255, 252, 252, 0.893); /* Light gray background */
    width: 100%;
    padding: 20px;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease; /* Smooth background transition on hover */
}
/* Hover effect for question buttons */
.faq-question:hover {
    background-color: white; /* white on hover */
}
/* Style for the arrow icon */
.faq-question .arrow {
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease; /* Smooth rotation transition */
 }
/* Rotate the arrow when the question is active (expanded) */
.faq-question.active .arrow {
    transform: rotate(180deg); /* Rotate arrow 180 degrees */
}  
/* Style for the answer sections */
.faq-answer {
    max-height: 0; /* Initially hide the answer */
    overflow: hidden;
    transition: max-height 0.3s ease; /* Smooth transition for expanding */
}
/* Style for the answer text */
.faq-answer p {
    padding: 20px;
    line-height: 1.5; /* Increase line height for better readability */
}