/* Page background & fonts style */
body {
   margin: 0;
   padding: 0;
   font-family: Crimson Pro;            
   background-color: #000000;
}

/* Chrome, Edge, Safari Scrollbar*/
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background-color: #eaecaa;
  border-radius: 6px;
  border: 2px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d5d68f;
}

/* Firefox Scrollbar*/
html {
  scrollbar-color: #eaecaa #000000;
  scrollbar-width: auto; /* thicker than thin */
}

/* Makes the header container a positioning reference */
.header-container {
  position: relative;
  width: 1255px;
  height: 213px;
  margin: 0 auto;  /* <-- centers it like the body */
}

/* header and logo image inside header container */
.main-headerimage {
  position: absolute;
  top: 0;   /* distance from top of container */
  left: 0; /* distance from left of container */
  width: 1255px;  /* adjust as needed */
  height: 213px;  /* maintains aspect ratio */
  border-radius: 0; /* optional: rounded corners */
}

/* The invisible clickable phone number box inside the header */
.click-box {
  position: absolute;
  top: 174px;    /* vertical position from the top of image */
  left: 828px;  /* horizontal position from the left of image */
  width: 280px;  /* width of clickable area */
  height: 36px;  /* height of clickable area */
  background-color: rgba(0, 0, 0, 0); /* fully transparent */
  z-index: 2;
  cursor: pointer;
}

/* MENU BAR */
.menu-bar {
  display: flex;
  justify-content: center;
  gap: 2px;
  width: 990px;           /* stretch to parent width */
  margin: 0 auto;        /* centers the bar horizontally */
  margin-top: 2px;
}

 .image-button {
      border: none;
      padding: 0;
      background: none;
      cursor: pointer;
      outline: none;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
    }

 .image-button:active {
      transform: translateY(2px);
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    }

 .image-button img {
      display: block;
      width: 240px; /* adjust as needed */
      height: 38px;
      border-radius: 0;
    }

.hover-image-button {
  position: relative;
  display: inline-block;
  width: 240px; /* same as your image size */
  height: 38px;
}

.hover-image-button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 38px;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  transition: opacity 0.2s ease;
}

.hover-img {
  opacity: 0;
}

.hover-image-button:hover .hover-img {
  opacity: 1;
}

.hover-image-button:hover .default-img {
  opacity: 0;
}


/* Main container between header and footer */
.main-container {
  position: relative;
  width: 957px; /* match your header width */
  height: 10795px; /* adjust height as needed */
  margin: 0 auto;
  border: 4px solid #bdc476;
  background-color: #fafaf4;
}

/* Background Color Line to hide top border inside main container */
.main-bgcolorline {
  position: absolute;
  top: -3.75px;   /* distance from top of container */
  left: .40px; /* distance from left of container */
  width: 956.3px;  /* adjust as needed */
  height: 4px;  /* maintains aspect ratio */
}

/* Background Color Line to hide top border inside main container */
.main-bluecolorline {
  position: absolute;
  top: -3.75px;   /* distance from top of container */
  left: -4px; /* distance from left of container */
  width: 965px;  /* adjust as needed */
  height: 2px;  /* maintains aspect ratio */
}


/* 911 disclaimer inside main container */
.movable-box911 {
  position: absolute;
  width: 700px;
  height: 17px;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #324158;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000066;
  font-size: 18px;
  top: -4px;
  left: 115px;
  /* Center text vertically & horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* keeps spaces between bold words */
.movable-box911 b {
  margin-left: 4px;
  margin-right: 3px;
  color: #000000;
}


/* 988 disclaimer inside main container */
.movable-box988-under911 {
 position: absolute;
  width: 200px;
  height: 17px;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #324158;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000066;
  font-size: 18px;
  top: 25px;
  left: 375px;
  /* Center text vertically & horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* keeps spaces between bold words */
.movable-box988-under911 b {
  margin-left: 4px;
  margin-right: 3px;
  color: #000000;
}

/* Frequently asked questions title */
.Title-box {
  position: absolute;     /* absolute within .main-container */
  top: 10px;              /* adjust vertical starting point */
  left: 30px;             /* horizontal padding from container */
  width: 900px;           /* match the content width */
  z-index: 1;             /* behind the dashed line & footer */
}

/* Search Bar */
/* SEARCH BAR STYLING */
.search-container {
  position: relative;
  width: 800px;
  margin: 225px auto;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  z-index: 5000;       
}

#faqSearch {
  flex: 1;
  padding: 10px 14px;
  font-size: 20px;
  font-family: "Crimson Pro", serif;
  color: #000066;
  background-color: #ffffff;
  border: 2px solid #bdc476;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.25);
}

#faqSearch::placeholder {
  color: #324158;
  opacity: 0.7;
}

/* SEARCH BUTTON matches menu-bar buttons */
.search-container button {
  padding: 10px 18px;
  font-size: 20px;
  font-family: "Cormorant Garamond", serif;
  font-weight: bold;
  background-color: #ffffff;
  color: #000066;
  border: 2px solid #bdc476;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.search-container button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

/* Highlight class */
.highlight {
  background-color: #ffff99;
  transition: background-color 1s ease;
}


/* FAQ box for resources inside main container */
.FAQ-box {
  position: absolute;     /* absolute within .main-container */
  top: 300px;              /* adjust vertical starting point */
  left: 30px;             /* horizontal padding from container */
  width: 900px;           /* match the content width */
  z-index: 1;             /* behind the dashed line & footer */
}

/* Optional: ensure content flows naturally inside the box */
.FAQ-box p,
.FAQ-box ul,
.FAQ-box li,
.FAQ-box h2 {
  position: static;       /* override any previous absolute positioning */
  margin: 0 0 20px 0;    /* standard spacing */
}


/* Main Title */
.text-maintitle {
  font-family: "Cormorant Garamond Semi Bold";
  font-size: 32px;
  font-weight: bold;
  color: #000066;
  text-align: center;
  margin: 80px 0 20px 0;
}

/* Intro paragraph */
.text-main1 {
  width: 900px;
  margin: 0 auto 40px auto;
  margin-bottom: 80px; /* more space before next section */
  font-family: "Crimson Pro";
  font-size: 19px;
  color: #000066;
  text-align: center;
  line-height: 1.6;
}

/* section Titles */
.text-title {
  font-family: "Cormorant Garamond Semi Bold";
  font-size: 26px;
  text-decoration: underline;
  font-weight: bold;
  color: #000066;
  text-align: center;
  margin-top: 80;       /* remove extra top margin */
  margin-bottom: 30px; /* nice gap before subtitle */
}

/* Back to top button next to section titles */
/* tiny inline icon */
.title-top-link img {
  width: 22px;
  height: 22px;
  margin-left: 6px;      /* small gap from title text */
  vertical-align: middle; /* aligns properly with text */
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.title-top-link img:hover {
  opacity: 1;
  transform: scale(1.1);
}


/* The questions */
.questions {
  font-family: "Cormorant Garamond";
  font-size: 24px;
  font-weight: bold;
  color: #000066;
  margin-top: 20px; /* space before this subtitle */
  margin-bottom: 10px; /* reduce gap before bullet list */
  text-align: left;
}

/* Bullet lists answers to questions */
.bullet-list {
  width: 100%;        /* fit to parent */
  max-width: 860px;   /* optional, for some padding */
  margin: 0 0 40px 20px; /* left padding inside the container */
  margin-top: 0;        /* remove extra top margin */
  margin-bottom: 50px;  /* keep space after list */
  padding-left: 38px; 
  box-sizing: border-box; /* include padding in width */
  font-family: "Crimson Pro";
  font-size: 19px;
  color: #000000;
  list-style-type: disc;
  line-height: 1.6;
}

.bullet-list li {
  margin-bottom: 20px;
}

.back-to-top-button {
  position: absolute;   /* lets you place it where you want */
  left: 899px;           /* adjust left/right */
  top: 10580px;          /* adjust up/down */
  z-index: 1000;        /* keep it above other items */
}

.back-to-top-button img {
  width: 40px;   /* match your other buttons */
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}

.back-to-top-button:hover img {
  transform: scale(1.05);
}

/* Dashed Line2 inside main container */
.main-dashedline2 {
  position: absolute;
  top: 10630px;   /* distance from top of container */
  left: 0; /* distance from left of container */
  width: 957px;  /* adjust as needed */
  height: 5px;  /* maintains aspect ratio */
}


/* Footer Box Container */
.movable-boxfoot {
  position: relative;
  width: 902px;
  margin: 20px auto;
  margin-top: 10370px;
  padding: 12px 20px;
  background-color: #fafaf4;
  display: flex;
  justify-content: space-between;
  font-family: "Cormorant Garamond Light";
  color: #000000;
}

/* Left Box (inside Footer) */
.movable-boxFootLeft {
  width: 50%;
  padding-right: 10px;
  text-align: left;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
margin-left: -14px;
}

/* Right Box (inside Footer) */
.movable-boxFootRight {
  width: 50%;
  padding-left: 10px;
  text-align: right;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Shared Styling */
.movable-boxFootLeft ul,
.movable-boxFootRight ul {
  list-style-type: none;
  padding-left: 10px;
  margin: 0;
}

.movable-boxFootLeft li,
.movable-boxFootRight li {
  margin: 4px 0;
  line-height: 1.3;
}

.movable-boxFootLeft a,
.movable-boxFootRight a {
  text-decoration: none;
  color: black;
}


/* Call Today Image inside main container */
.main-calltoday-link {
  position: absolute;
  top: 10680px;
  left: 50%;
  transform: translateX(-50%);
  width: 268px;
  height: 50px;
  display: block;
  z-index: 2;
  cursor: pointer;
  text-decoration: none;
}

/* the image fills the link exactly */
.main-calltoday-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Copyright Image BELOW main container */
.main-copyrightimage {
  position: absolute;
  top: 11060px;   /* distance from top of container */
  left: 50%; /* distance from left of container */
  transform: translateX(-50%); /* shift element left by half its width */
  width: 663px;  /* adjust as needed */
  height: 36px;  /* maintains aspect ratio */
}