@charset "utf-8";
/* CSS Document */
/* 12-9-2025 */
    @font-face {
        font-family: "Fontawesome"; /* Choose a name for your font */
        src: url("fonts/fontawesome-webfont.woff2") format("woff2"),
             url("fonts/fontawesome-webfont.woff") format("woff"); /* Provide multiple formats for broader browser support */
        font-weight: normal; /* Optional: specify font weight */
        font-style: normal; /* Optional: specify font style */
        font-display: swap; /* Optional: controls how font loads */
    }



.logo-container {
  max-width: 100%; /* Ensures responsiveness */
  height: auto; /* Keeps the aspect ratio */
  display: flex;
  justify-content: center; /* Centers logo horizontally */
  align-items: center; /* Centers logo vertically */
  margin: 0px auto; /* Ensures centering within the page */
  padding-top: 50px;
  padding-bottom: 50px;
}


.custom-logo {
  max-width: 100%; /* Ensures responsiveness */
  height: auto; /* Keeps the aspect ratio */

}



/* Mobile Layout header - Stack Columns Vertically */
.site-header {
    background-image: url('images/siteheader/1200-curved-water-background-only.png');
    background-size: cover; /* Ensures the image covers the container */
    background-repeat: no-repeat; /* Prevents repeating */
}


/* ------------------------------
   MENU STYLES
------------------------------ */

/* Main menu list */
.menu ul {
  list-style: none;        /* Remove default bullet points */
  padding: 0;              /* Remove default padding */
  margin: 0;               /* Remove default margin */
  display: flex;           /* Display items in a row (horizontal) */
  justify-content: center; /* Center the menu items horizontally */
}

/* Each menu item */
.menu li {
  position: relative;      /* Needed so submenu can be positioned relative to parent */
  margin: 0 10px;          /* Add spacing between menu items */
}

/* Menu links */
.menu a {
  text-decoration: none;
  color: #333;
  font-family: Arial, sans-serif; /* use a readable font */
  padding: 10px 0;
  display: block;
  transition: background-color 0.3s ease-in-out; /* smooth hover */
}

/* Hover effect */
.menu a:hover {
  background-color: #D3D3D3;
}

/* Submenu toggle (apply globally, override in mobile if needed) */
.submenu-toggle {
  background: none;
  border: none;
  font-size: 18px;
  margin-left: 5px;
  cursor: pointer;
  color: #333;
  display: none; /* hidden by default, shown on mobile */
}

/* Mobile menu toggle button (hamburger icon) */
.menu-toggle {
  display: none;           /* Hidden by default (desktop) */
  background: rgba(0,0,0,0.0); /* Transparent background */
  color: black;            /* Button text/icon color */
  padding: 10px;           /* Spacing inside button */
  border: none;            /* Remove border */
  cursor: pointer;         /* Show pointer on hover */
}

/* ------------------------------
   SUBMENU STYLES
------------------------------ */

/* Submenu container */
.menu .submenu {
  display: none;            /* hide by default */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  min-width: 160px;
  z-index: 1;
  white-space: nowrap;
}


/* Submenu items */
.menu .submenu li {
  margin: 0;               /* Remove spacing between submenu items */
}

/* Submenu links */
.menu .submenu a {
  padding: 10px 15px;      /* Add spacing inside submenu links */
}

/* Show submenu when hovering over parent (desktop) */
.menu li:hover > .submenu {
  display: block;
}


/* Hover effect for menu links */
.menu a:hover {
  background-color: #D3D3D3; /* Light gray background on hover */
  transition: background-color 0.3s ease-in-out; /* Smooth transition effect */
}

/* ------------------------------
   RESPONSIVE MENU (Mobile)
------------------------------ */
@media (max-width: 768px) {
  .menu {
    display: none;
    text-align: center;
  }

  .menu.active {
    display: block;
  }

  .menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }

  .menu li {
    margin: 10px 0;
  }

  .menu a {
    width: 100%;
    text-align: center;
    font-size: 18px;       /* bigger text */
  }

  .submenu-toggle {
    display: inline-block;
    margin-left: 4px;
    font-size: 18px;
    cursor: pointer;
    background: none;
    border: none;
  }

  .menu-toggle {
    display: block;
    margin: 0 auto;
    font-size: 18px;       /* bigger text */

  }

  .menu .submenu {
    position: static;
    box-shadow: none;
    background: none;
    width: 100vw;
    max-height: 0;              /* collapsed by default */
    overflow: hidden;           /* hide content */
    transition: max-height 0.3s ease-out;
  }

  .menu .submenu.open {
    max-height: 500px;          /* enough space for items */
    transition: max-height 0.3s ease-in;
  }

  .menu .submenu a {
    padding-left: 30px;
  }


}


/* ------------------------------
   TABLE RESPONSIVENESS
------------------------------ */
.table-container {
  overflow-x: auto;        /* Allow horizontal scroll if table too wide */
  display: block;
  white-space: nowrap;     /* Prevent wrapping inside table */
}

@media (max-width: 600px) {
  table {
    width: 100%;           /* Table takes full width */
    display: block;        /* Display as block for responsiveness */
  }

  tr {
    display: block;        /* Stack rows vertically */
    margin-bottom: 0px;
  }

  td {
    display: block;        /* Stack cells vertically */
    text-align: left;      /* Align text left */
  }
}

/* ------------------------------
   IMAGE STYLES
------------------------------ */
.image {
  position: relative;      /* Allows positioning child elements inside */
  width: 200px;            /* Fixed width for image container */
}

	
/*  Header Images */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px 0px 10px 0px; /* Adds spacing */
}

.image-container img {
  width: 800px;        /* initial width */
  max-width: 100%;     /* don’t overflow container */
  height: auto;        /* keep aspect ratio */
  object-fit: cover;
}

.double-image-container {
  display: flex;
  justify-content: center;
  gap: 0px;        /* space between images */
}

.double-image-container img {
  max-width: 200px; /* control max size */
  height: auto;
}

/* On mobile, stack vertically */
@media (max-width: 768px) {
  .double-image-container {
    flex-direction: column;   /* stack images */
    align-items: center;      /* center them */
  }

  .double-image-container img {
    width: 80%;               /* make them larger on mobile */
    max-width: none;           /* remove desktop max-width limit */
    margin-bottom: 15px;       /* spacing between stacked images */
  }
}

/* ------------------------------
   SITE CONTENT
------------------------------ */
.site-content {
    text-align: center;
    padding: 0px;
    max-width: 65%;
    margin: auto; 
    font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */

}

.site-content-left {
    text-align: left;
    padding: 0px;
    max-width: 80%;
    margin: auto;
}


h6 {
    font-size: 1.2rem;
    font-weight: normal;
    font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
    margin: 0.30rem 0;   /* reduces vertical spacing */
    /* line-height: 1.2;     tighter spacing between lines of text */

}

/* Make text readable on all screens */
h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: -10px;
}

p {
    font-size: 1rem;
    margin-bottom: 0px;
}

/* Ensure spacing on mobile */
@media (max-width: 600px) {
    .site-content {
        padding: 5px;
        max-width: 100%;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: .9rem;
    }
}

/* Begin Page Header Content */
image-container img {
    max-width: 100%;
    height: auto;
    display: block; */
}

@media (max-width: 600px) {
    .iv-content {
        padding: 5px;
	width: 100%;
        max-width: 100%;
}
}



/* ------------------------------
  BUTTONS
------------------------------ */
.button {
  background-color: #365F91; /* Grey Navy Blue */
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
}


/* ------------------------------
   FAQ CONTENT
------------------------------ */
.faq-content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  max-width: 1000px;
  margin: auto; 
  font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
  padding: 0px;
}

h1 {
    font-size: 1.4rem;
    font-weight: normal;
    font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
    margin: 0.30rem 0;   /* reduces vertical spacing */
    /* line-height: 1.2;     tighter spacing between lines of text */

}

 faq-ul {
    font-size: 1.1rem;
    list-style-type: none;
    line-height: 1.2;
    padding: 0;
    font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
}

faq-ul li {
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
} 

/* ------------------------------
   IV CONTENT
------------------------------ */

.iv-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  max-width: 1000px;
  margin: auto;
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.iv-option {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1.2rem;
}

.iv-option:last-of-type {
  border-bottom: none;
}

.iv-icon {
  width: 60px;
  flex-shrink: 0;
}

.boost-icon {
  flex-shrink: 0;
}


p {
    font-size: 1.1rem; /* Adjust size here */
    font-weight: bold;
    line-height: 1.2;  /* Optional: improves readability */
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

h3 {
    font-size: 1.3rem; /* Adjust size here */
    font-weight: bold;
    line-height: 1.2;  /* Optional: improves readability */
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

h4 {
    font-size: 1.1rem; /* Adjust size here */
    line-height: 1.2;  /* Optional: improves readability */
    font-weight: normal; 
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.iv-details ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 1.1rem; /* Adjust size here */
  line-height: 1.2;  /* Optional: improves readability */
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

 ul {
    font-size: 1.1rem;
    list-style-type: none;
    padding: 0;

}


 .ul li {
    font-size: 1.1rem;
    line-height: 1.2;
} 



/* ------------------------------
   BOOSTS CONTENT
------------------------------ */

.boost-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  max-width: 1000px;
  margin: auto;
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.boost-option {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

.boost-option:last-of-type {
  border-bottom: none;
}

.boost-icon {
  flex-shrink: 0;
  width: 80px;
}

.boost-details ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 1.1rem; /* Adjust size here */
  line-height: 1.2;  /* Optional: improves readability */
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

h5 {
    font-size: 1.3rem; /* Adjust size here */
    font-weight: bold;
    line-height: 1.2;  /* Optional: improves readability */
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
    margin-bottom: .5rem; /* space after paragraph */
}

h7 {
    font-size: 1.1rem; /* Adjust size here */
    line-height: 1.2;  /* Optional: improves readability */
    font-weight: normal; 
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

/* ------------------------------
   WEIGHTLOSS CONTENT
------------------------------ */

.wl-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  max-width: 1000px;
  margin: auto;
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.wl-option {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  padding-bottom: .5rem;
}

.wl-option:last-of-type {
  border-bottom: none;
}

.wl-icon {
  flex-shrink: 0;
  width: 80px;
}


h8 {
    font-size: 1.3rem; /* Adjust size here */
    font-weight: bold;
    line-height: 1.2;  /* Optional: improves readability */
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
    /*  margin-bottom: 1rem; space after paragraph */
}

h9 {
    font-size: 1.1rem; /* Adjust size here */
    line-height: 1.2;  /* Optional: improves readability */
    font-weight: normal; 
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}


/* ------------------------------
   HRT CONTENT
------------------------------ */

.hrt-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  max-width: 1000px;
  margin: auto;
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.hrt-option {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

.hrt-option:last-of-type {
  border-bottom: none;
}

.hrt-icon {
  width: 60px; /* Icon size */
  flex-shrink: 0;
}

.hrt-icon {
  flex-shrink: 0;
}


h10 {
    font-size: 1.3rem; /* Adjust size here */
    font-weight: bold;
    line-height: 1.2;  /* Optional: improves readability */
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

h11 {
    font-size: 1.1rem; /* Adjust size here */
    line-height: 1.2;  /* Optional: improves readability */
    font-weight: normal; 
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.hrt-details ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 1.1rem; /* Adjust size here */
  line-height: 1.2;  /* Optional: improves readability */
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.hrt-two-columns ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .hrt-two-columns ul {
    grid-template-columns: 1fr; /* stack vertically */
  }
}


.hrt-img {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 0px 0px 10px 0px; /* Adds spacing */
}

/* ------------------------------
   WELNESS CONTENT
------------------------------ */

.well-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  max-width: 1000px;
  margin: auto;
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.well-option {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  border-bottom: none;
  padding-bottom: 1rem;
}

.well-option:last-of-type {
  border-bottom: none;
}

.well-icon {
  width: 100px; /* Icon size */
  flex-shrink: 0;
}

.well-icon {
  flex-shrink: 0;
}


h12 {
    font-size: 1.2rem; /* Adjust size here */
    line-height: 1.2;  /* Optional: improves readability */
    font-weight: normal; 
    font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.well-details ul {
  margin: 10;
  padding-left: 1.2rem;
  font-size: 1.1rem; /* Adjust size here */
  line-height: 1.2;  /* Optional: improves readability */
  font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */
}

.well-two-columns ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .well-two-columns ul {
    grid-template-columns: 1fr; /* stack vertically on mobile */
  }
}


/* ------------------------------
   FOOTER CONTENT
------------------------------ */
.footer-five-column-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    justify-content: space-between;
    width: 100%; /* Full width */
    padding: 20px;
    background-color: #B5B5B5; /* Footer background */
}

/* Ensures footer columns adapt to different screen sizes */
.footer-column,
.footer-column-wide,
.footer-column-thin {
    flex: 1; /* Default equal width */
    padding: 10px;
    text-align: center;
    color: white;
}

/* Link colors in footers */
.footer-column a,
.footer-column-wide a,
.footer-column-thin a {
color: #228fd8; 
text-decoration: none; /* Optional: removes the underline */
font-weight: bold;
font-size: .8rem;   /* scales with root font size */
font-size: .8em;  /* scales relative to parent */
font-family: "Fontawesome", sans-serif; /* Optional: ensure consistency */

}

/* Copyright Container */
	.copyright { 
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin: 0px;
	width: auto;
	font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
	color: grey; /* Sets text color to white */
	font-size: 10px;
	}
	
/* Icon Container */
	.icon-container {
  	display: flex;
 	justify-content: space-between; /* Even spacing */
  	gap: 20px; /* Adjust spacing between columns */
}
	
	.icon-column-wide {
  	flex: 2; /* Makes this column wider */
	padding: 20px;
  	/* background-color: #FFFFFF;  background color */
  	font-family: "Fontawesome", sans-serif; /* Change this to your preferred font */
  	color: white; /* Sets text color to white */
}


/* Make wider columns stand out 
.footer-column-wide {
    flex: 2; /* Makes this column twice as wide */
    text-align: left;
}

/* Mobile Layout - Stack Columns Vertically */
@media (max-width: 768px) {
    .footer-five-column-container {
        flex-direction: column; /* Stacks footer columns */
        align-items: center;
        text-align: center;
    }

    .footer-column,
    .footer-column-wide,
    .footer-column-thin {
    width: 100%; /* Makes each column take full width */
    }

}