/* Menu CSS */
@import url("superfish.css");

body {
/* water-bkgd-banner.jpg
   bubbleblue.png */

 /*
  background-image: url('../images/bubbleblue.png');
  background-repeat: repeat-y; /* Tiles the image horizontally and vertically * /
  background-size: auto;     /* Keeps the image at its original size * /
*/

/*
Key Properties for Tiling Control

  background-image: url('../images/bubbleblue.png');
  background-repeat: repeat; /* Tiles the image horizontally and vertically * /
  background-size: auto;     /* Keeps the image at its original size * /

• background-repeat: Controls how the background image repeats.
	• repeat: Tiles the image across both the X and Y axes (default behavior).
	• repeat-x: Tiles the image horizontally only.
	• repeat-y: Tiles the image vertically only.
	• space: Tiles the image and spaces them out evenly without cropping.
	• round: Tiles and scales the image slightly so it fits an exact number of times without partial clipping.
• background-size: Set this to auto (or omit it) rather than cover, contain, or stretched percentages like 100% 100%, which forces the browser to distort or stretch the graphic. You can read more via MDN Web Docs.
• background-position: Optionally specify where the tiling pattern starts (e.g., top left or center center).
*/

}

/* add the following to a text-overlay definition to put a light block around the text that follow
  background-color: rgba(255, 255, 255, 0.75); /* White tint with 75% opacity * /
  padding: 1rem;
  color: #000;
}
*/

.img-container {
  display: flex;            /* Enables Flexbox */
  justify-content: center;   /* Centers the image horizontally */
  align-items: flex-start;  /* Aligns the image to the top vertically */
      
  /*height: 100vh;            /* Makes the container fill the full screen height */
/*    border: 2px solid #333;   /* Optional: Just to see the container boundaries */
}

root {
  --primary-blue:  #428ce7;
}

table {
/*    border-collapse: collapse; /* Merges adjacent cell borders into one */
}

td {
/*    border: 1px solid red; /* Width, style, and color */
/*    padding: 8px;            /* Adds space inside the cell */
}

.element-class-00 {
  /* this is used for the top banner */
  background-image: url('../images/water-bkgd-banner.jpg');
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 200px;
  /* or height: 100vh    500px; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

/* Style the image to be responsive */
.element-class-00 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* max-width: 100%; */
  max-height: 100%;
  height: auto;
}

.element-class-background {
  background-image: url('../images/bubbleblue.png');
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

.center-left {
  position: relative;
  width: 100%;
/*  height: 200px; */
}

.offset-left-centered {
  position: absolute;
  left: 50%;
  transform: translate(calc(-50% - 50px), -50%); /* Shifts center left by an extra 50px */
}

.center {
  position: relative;
  width: 100%;
/*  height: 200px; */
}

.offset-centered {
  position: absolute;
  left: 100%;
  transform: translate(calc(+50% + 50px), +50%); /* Shifts center left by an extra 50px */
}

.center-right {
  position: relative;
  width: 100%;
/*  height: 200px; */
}

.offset-right-centered {
  position: absolute;
  left: 50%;
  transform: translate(calc(+50% + 50px), +50%); /* Shifts center left by an extra 50px */
}

.element-class-01 {
  /* background-image: url('../images/bubbleblue.png'); */
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

.element-class-02 {
  background-image: url('../images/bubbleblue.png');
  /* background-image: url('../images/clean counter 60.png'); */
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

/* Style the image to be responsive */
.element-class-02 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Position the text over the image */
.element-class-02-overlay-text {
            position: absolute;
            top: 65%;          /* Push down to the middle */
            left: 50%;         /* Push right to the middle */
            transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
            /* Styling details */
            color: black;
            font-size: 36px;
            font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
  text-align: center;
  }

/* Position the text over the image */
.element-class-02a-overlay-text {
            position: absolute;
            top: 62%;          /* Push down to the middle */
            left: 50%;         /* Push right to the middle */
            transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
            /* Styling details */
            color: black;
            font-size: 36px;
            font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
  text-align: center;
  }

/* Position the text over the image */
.element-class-02b-overlay-text {
            position: absolute;
            top: 68%;          /* Push down to the middle */
            left: 50%;         /* Push right to the middle */
            transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
            /* Styling details */
            color: black;
            font-size: 36px;
            font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
  text-align: center;
  }

.element-class-03 {
  background-image: url('../images/bubblebluedark.png');
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

.element-class-04 {
  background-image: url('../images/blue wave 50.png');
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

.element-class-m1 {
  /* background-image: url('../images/bubbleblue.png'); */
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  background-color: transparent;
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}
 
/* Style the image to be responsive */
.element-class-m1 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Position the text over the image */
.element-class-m1-overlay-text {
  position: absolute;
  top: 70%;         /* Push down to the middle */
  left: 50%;         /* Push right to the middle */
  transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
  /* Styling details */
  color: black;
  font-size: 36px;
  font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
  text-align: center;
}

.element-class-m2 {
  position: relative;
  /* background-image: url('../images//bubbleblue.png'); */
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

/* Style the image to be responsive */
.element-class-m2 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Position the text over the image */
.element-class-m2-overlay-text {
  position: absolute;
  top: 40%;          /* Push down to the middle */
  left: 50%;         /* Push right to the middle */
  transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
  /* Styling details */
  color: black;
  font-size: 36px;
  font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
            text-align: left;
}

/* Position the text over the image */
.element-class-m2a-overlay-text {
  position: absolute;
  top: 40%;          /* Push down to the middle */
  left: 50%;         /* Push right to the middle */
  transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
  /* Styling details */
  color: black;
  font-size: 36px;
  font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
            text-align: left;
}

/* Position the text over the image */
.element-class-m2b-overlay-text {
  position: absolute;
  top: 48%;          /* Push down to the middle */
  left: 50%;         /* Push right to the middle */
  transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
            
  /* Styling details */
  color: black;
  font-size: 36px;
  font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
            text-align: left;
}

.element-class-m3 {
  position: relative;
  /* background-image: url('../images//bubbleblue.png'); */
  background-size: cover;          /* Scales the image to fill the div */
  background-position: center;     /* Centers the image inside the div */
  background-repeat: no-repeat;    /* Prevents the image from tiling */
  /* width: 100%;
  height: 500px; /* or height: 100vh; */
  /* • background-size: cover: Stretches or scales the image to completely cover the div without distorting its aspect ratio.
     • background-position: center: Keeps the focal point of the image centered.
     • background-repeat: no-repeat: Stops the image from repeating horizontally and vertically if the div is larger than the image file.
  */
}

/* Style the image to be responsive */
.element-class-m3 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Position the text over the image */
.element-class-m3-overlay-text {
  position: absolute;
  top: 10%;          /* Push down to the middle */
  left: 50%;         /* Push right to the middle */
  transform: translate(-50%, -50%); /* Perfect alignment to the exact center */
/* Styling details */
  color: black;
  font-size: 36px;
  font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Makes text readable over any image */
  text-shadow: 
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
    -2px  0px 0 #fff,  2px  0px 0 #fff,
     0px -2px 0 #fff,  0px  2px 0 #fff;           
            text-align: left;
}