/****************************************************
 * Example: Replacing color values with a teal/pink
 * color scheme. Other parts of your CSS remain the
 * same unless they directly reference old colors.
 ****************************************************/

/* Replacing the original #c0ca33 and #fff in the .button-primary */
.button-primary {
  position: relative;
  /* NEW background color for the button (teal) */
  background-color: #009688;  
  /* NEW text color (white) */
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  transition: color 0.3s ease-in;
  z-index: 1;
}
.button-primary:hover {
  /* On hover, we can invert or accent. For example, text becomes teal. */
  color: #009688; 
  text-decoration: none;
}
.button-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  /* NEW background color for the hover effect (white) */
  background-color: #ffffff;
  border-radius: 4px;
  opacity: 0;
  transform: scaleX(0.8);
  transition: all 0.3s ease-in;
  z-index: -1;
}
.button-primary:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Navbar and overall background changes */
.navigationbar {
  /* Replacing #000406 with a slightly lighter dark color */
  background-color: #263238; 
}

/* When the navbar is fixed, it uses a background color. 
   Replace the old rgba(0,0,0,.9) with a slightly tinted dark teal, 
   or keep it black. Here’s a dark gray with transparency: */
.navbar.fixed-top {
  background-color: rgba(38, 50, 56, 0.9);
}

/* Text color changes for active and hovered nav-links. 
   Replace #c0ca33 (the old lime color) with a pink accent (#ff4081). */
.navbar.fixed-top.navbar-dark .navbar-nav .nav-link.active {
  color: #ff4081; /* accent color */
}
.navbar.fixed-top.navbar-dark .navbar-nav .nav-link::after {
  background-color: #ff4081; /* accent color */
}

/* Dropdown items:
   Replace #c0ca33 with new accent color #ff4081. */
.navbar .dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: #ff4081;
}
.navbar .dropdown-menu .dropdown-item::before {
  background-color: #ff4081; /* accent color */
}

/* Header-area background. 
   Replace #32dbff with a different background color or gradient. */
.header-area {
  position: relative;
  /* For a dark teal or a gradient, for instance: */
  background: #00897b; 
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Banner text color. 
   If you prefer white text on your banner, replace the old value. */
.banner {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  color: #ffffff; 
  text-align: center;
  z-index: 1;
  background-image: url('../img/banner.png');
}

/* Adjust the hero description text color or stroke if desired. */
.hero_des_text {
  color: #ffffff; /* or pick an accent color */
  filter: drop-shadow(7px 5px 2px #292727);
  -webkit-text-stroke: 1px #c7c0c0;
}

/* If you prefer a white or near-white background for the page body: */
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: #f5f5f5; /* new, lighter background */
  color: #444; /* text color on lighter bg */
}

/* Buttons, links, etc. */
.submit_button {
  background: linear-gradient(to bottom right, #009688 0%, #66bb6a 100%);
  border: none;
  border-radius: 5px;
  color: #ffffff;
  padding: 12px 32px;
  text-align: center;
  font-size: 18px;
}

.link {
  text-decoration: none;
  color: #ff4081; /* pink accent */
}