/* 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: 1005px; /* 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;
}

/* Title Text */
.text-title {
  position: absolute;
  top: 80px;
  left: 20px;
  width: 900px;
  font-family: "Cormorant Garamond Semi Bold";
  font-size: 32px;        /* make it larger */
  font-weight: bold;      /* optional, makes it stand out */
  color: #000066;
  text-align: center;     /* center just the title */
}

/* Date Text */
.text-date {
  position: absolute;
  top: 200px;             /* push it below the title */
  left: 20px;
  width: 900px;
  font-family: "Crimson Pro";
  font-size: 18px;
  color: #000066;
  text-align: left;       /* align left */
}

/* Main Text1 */
.text-main1 {
  position: absolute;
  top: 250px;             /* leave space after the date */
  left: 20px;
  width: 900px;
  font-family: "Crimson Pro";
  font-size: 19px;
  color: #000066;
  text-align: left;       /* align left for the body */
  line-height: 1.6;       /* optional: improves readability */
}

/* Dashed Line2 inside main container */
.main-dashedline2 {
  position: absolute;
  top: 890px;   /* 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: 895px;
  padding: 12px 20px;
  background-color: #fafaf4;
  display: flex;
  justify-content: space-between;
  font-family: "Cormorant Garamond";
  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 {
  position: absolute;
  top: 928px;   /* distance from top of container */
   left: 50%; /* distance from left of container */
  transform: translateX(-50%); /* shift element left by half its width */
  width: 268px;  /* adjust as needed */
  height: 50px;  /* maintains aspect ratio */
}

/* Copyright Image BELOW main container */
.main-copyrightimage {
  position: absolute;
  top: 1275px;   /* 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 */
}