p, body {
  width: 100%;
  padding: 0;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  color: #ffffff;
  background-color: #eeeeee;
  text-align: left;
  vertical-align: center;
  margin: 0 auto;
  line-height: 110%;
}

img {
  max-width: 100%;
  height:auto;
}


table, tr, th, td {
  
  border: 0px solid white;
  border-spacing: 0px;
  border-collapse: collapse;
  padding: 0;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  color: #ffffff;
  background-color: lightblue;
  margin: 0 auto;
  line-height: 110%;
  background-color:rgba(0, 0, 0, 0);
}

ul, ol, li  {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  color: #310d0d;
  text-align: left;
  text-indent: 0px;
  line-height: 140%;
  }


H1 {
 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
 color: #050a30;
 text-align: center;
 font-size:calc(1.7vw + 1.7vh);
  }

H2 {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  color: #050a30;
  text-align: center;
  text-indent: 0px;
  font-size:calc(1.3vw + 1.3vh);
  }

H2.left {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  color: #f3f3f5;
  text-align: Left;
  font-weight: normal;
  font-size:calc(1.3vw + 1.3vh);
  }

H2.right {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #f3f3f5;
    text-align: right;
    font-weight: normal;
    font-size:calc(1.3vw + 1.3vh);
    }

H3 {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  color: #f3f3f5;
  text-align: justify;
  font-weight: normal;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 110%;
  
  }

  H3.bespoke {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #310d0d;
    text-align: justify;
    font-weight: normal;
    font-size:calc(0.9vh + 0.9vw);
    line-height: 110%;
    
    }

H4 {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
  text-align: justify;
  font-weight: normal;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 110%;
  }

.heading {
  margin-bottom: 2.0vw; /* Adds space below the heading */
  z-index: 2; /* Ensures the heading stays above other content if needed */
  position: relative; /* Ensures it respects the document flow */
  font-size: calc(2.5vw = 2.5vh);
  line-height: 1.4;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000000;
  }

  .heading2 {
  
    margin-bottom: 0.2vw; /* Adds space below the heading */
    z-index: 2; /* Ensures the heading stays above other content if needed */
    position: relative; /* Ensures it respects the document flow */
    font-size: calc(0.8vw + 0.8vh);
    line-height: 1.1;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
    
  }

a:link {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  }

a:visited {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  }

a:hover {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  color: #ff0000;
  background-color: transparent;
  text-decoration: underline;
  }

  a.messageLink {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-stretch: expanded;
    font-size:calc(0.7vh + 0.7vw);
    line-height: 1.5;
    color: #000000;
    background-color: transparent;
    text-decoration: none;
  }

  .normalpage
  {
    color: #000000;
  }

.contact {
  color: #000000;
}

.bottom-left {
  position: absolute;
  bottom: 2vw;
  left: 2vw;
  width: 100%;
  }
.bottom-right {
  position: absolute;
  bottom: 2vw;
  right: 2vw;
  width: 100%;
  }
.bottom-centre {
    position: absolute;
    bottom: 2vw;
    left: 50%; /* Centers from the left edge */
    transform: translateX(-50%); /* Corrects for the 50% shift */
    width: auto; /* Allow content to define the width */
    text-align: center; /* Centers the text inside */
  }

.bannerDiv {
  display: flex;
  background-color: #050a30;
  border: 0px outset black;
  background-image: url("images/top-banner-exp.png");
  background-size: cover;
  height: 17vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:calc(1.4vh + 1.4vw);
  font-weight: bold;
  color: #ffffff;
  
}

.headerDiv {
  border: 0px outset black;
  background-color: lightblue;
  text-align:left;
  background-image: url("images/blue-whale.png");
  background-size: cover;
  height: 55vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:calc(2.0vh + 2.0vw);
  line-height: 1.5;
  margin: 0;
  font-weight: bold;
  color: #ffffff;
}

.callDiv {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  background-color: #ffffff;
  border: 0px outset #ffffff;
  height: calc(17vh + 17vw);
  width: 100%;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: calc(3vh + 3vw);
  font-weight: bold;
  color: #000000;
}

.intensiveDiv {
  border: 0px outset black;
  background-color: lightblue;
  text-align:left;
  background-image: url("images/intensive.png");
  background-size: cover;
  height: 55vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:calc(2.0vh + 2.0vw);
  line-height: 1.5;
  margin: 0;
  font-weight: bold;
  color: #ffffff;
}

.messageDiv {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  background-color: #ffffff;
  border: 0px outset #ffffff;
  height: calc(38vw + 38vh);
  width: 100%;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: calc(3vh + 3vw);
  font-weight: bold;
  color: #000000;
}

/* Base style for the popup */
.popup {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Place the popup just below the trigger text */
  left: 50%; /* Start at the center of the column */
  width: 80%;
  transform: translateX(-50%); /* Center it horizontally */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.trigger:hover + .popup {
  display: block; /* Show popup when hovering over the trigger */
}

.trigger {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

.container {
  width: 100%;
  padding: 0;
  background-color: #ffffff;
  text-align: center; /* Centers the heading and text */
}



.info-columns {
  display: flex;
  justify-content: space-around;
  padding: 2vw;
  gap: 1vw; /* Spacing between columns */
  z-index: 1;
}

.column {
  position: relative;
  width: 30%;
  background-color: #ffffff;
  padding: 1vw; /* Fixed padding for better layout control */
  text-align: center;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: calc(0.7vh + 0.7vw);
  font-weight: normal;
  color: #000000;
  box-sizing: border-box; /* Ensure padding is included in the width and height */
  word-wrap: break-word; /* Prevent long words from overflowing */
  line-height: 1.5;
}

.messageTable {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Ensure content starts from the top */
  background-color: #ffffff;
  border: 0px outset #ffffff;
  height: 55vh; /* Keep this fixed to avoid overflow */
  width: 100%;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: calc(3vh + 3vw);
  font-weight: bold;
  color: #000000;
  overflow: hidden; /* Prevent overflow content */
}

.messageTableSmall {
  display: table;
  width: 100%;
  background-color: #ffffff;
  border: 0px outset #ffffff;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: calc(1.5vh + 1.5vw);
  font-weight: bold;
  color: #000000;
  height: 100%; /* Make it take up the available height */
}

.messageTableSmall td {
  display: table-cell;
  vertical-align: middle; /* Vertically center content in the cells */
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
}

.whitelineDiv {
  display: flex;
  vertical-align: middle;
  text-align: center;
  border: 0px outset black;
  background-color: #ffffff;
  background-size: cover;
  height: 5vw;
  max-width: 100%px;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: expanded;
  font-size:calc(1.0vh + 1.0vw);
  line-height: 1.5;
  margin: 0;
  color: #000000;
}

.darkvesselDiv {
  display: flex;
  vertical-align: middle;
  text-align: left;
  border: 0px outset black;
  background-color: lightblue;
  background-image: url("images/detection.png");
  background-size: cover;
  height: 50vh;
  max-width: 100%px;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: expanded;
  font-size:calc(1.2vh + 1.2vw);
  line-height: 1.5;
  padding-left: 2vw;
  padding-right: 2vw;
  margin: 0;
  color: #ffffff;
}

.p3Left img {
    width: 100%;
    max-width: 293px;
    height: auto;
}

.pelagicDiv {
  display: flex;
  vertical-align: middle;
  text-align:left;
  border: 0px outset black;
  background-color: lightblue;
  background-image: url("images/fish-school.png");
  background-size: cover;
  height: 55vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: expanded;
  font-size:calc(1.4vh + 1.4vw);
  line-height: 1.5;
  margin: 0;
  padding-left: 1vw;
  padding-right: 1vw;
  color: #ffffff;
}

.bespokeDiv {
  display: flex;
  vertical-align: middle;
  text-align:left;
  border: 0px outset black;
  background-color: lightblue;
  background-image: url("images/estuarine-health.png");
  background-size: cover;
  height: 55vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: expanded;
  font-size:calc(1.4vh + 1.4vw);
  line-height: 1.5;
  margin: 0;
  padding-left: 1vw;
  padding-right: 1vw;
  color: #ffffff;
}

.sharkDiv {
  display: flex;
  vertical-align: middle;
  text-align: right;
  border: 0px outset black;
  background-color: lightblue;
  background-image: url("images/white-shark-3.png");
  background-size: cover;
  height: 55vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: expanded;
  font-size:calc(1.2vh + 1.2vw);
  line-height: 1.5;
  padding-left: 2vw;
  padding-right: 2vw;
  margin: 0;
  color: #ffffff;
}

.kaurnaDiv {
  display: flex;
  vertical-align: middle;
  text-align: left;
  border: 0px outset black;
  background-color: rgb(107, 173, 196);
  background-image: url("images/Hubble.jpg");
  background-size: cover;
  height: 30vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: expanded;
  font-size:calc(1.4vh + 1.4vw);
  line-height: 1.5;
  margin: 0;
  color: #ffffff;
}

.contactdetails {
  background-color: #050a30;
  text-align:center;
  height: 30vh;
  max-width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:calc(1.4vh + 1.4vw);
  line-height: 1.5;
  margin: 0;
  font-weight: bold;
  color: #ffffff;
}
  
.p1 {
  float: left;
  text-align: left;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  max-width: 100%;
  margin: 0;
}

.p2 {
  float: right;
  text-align: right;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  max-width: 50%;
  border: 0px;
  padding: 0%;
}
.p3 {
  float: right;
  text-align: left;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  max-width: 50%;
  border: 0px;
  padding: 0%;
}

.p4 {
  float: center;
  text-align: center;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  line-height: 1.5;
  max-width: 100%;
  margin: 0;
}
.p3Left {
  display: flex;
  flex-direction: column;
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
  border: 0px outset black;
  background-color: #ffffff;
  padding-left: 10vw;
  padding-right: 10vw;
  background-size: cover;
  height: auto;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-stretch: expanded;
  font-size:calc(0.7vh + 0.7vw);
  color: #310d0d;
}

.break {
  flex-basis: 100%;
  height: 0;
  background-color: lightblue;
}
.item { 
  flex-grow: 1; 
  justify-content: space-around;
  margin: 3vw;
  background-color: lightblue;
}
.item-side { 
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3vw;
}

/* Dropdown Button */
.dropbtn {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  background-color: #050A30;
  color: white;
  align-items: left;
  font-size: calc(0.7vh + 0.7vw);
  font-weight: normal;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  /*display: inline-block;*/
  float: right;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #050A30;
  min-width: 25vw;
  text-align: right;
  padding-right: 2vw;
  padding-left: 2vw;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #ffffff;
  padding-top: 2.0vw;
  padding-left: 0.5vw;
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0a1565;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #050A30;}

.progressive-image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}

.progressive-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Style for the low-quality placeholder */
.placeholder {
  filter: blur(10px);
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

/* Style for when the full image is loaded */
.loaded {
  filter: blur(0);
  transform: scale(1);
}

/* Optional loading animation */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.is-loading .loading-spinner {
  display: block;
}