:root {
	--bs-link-color-rgb: var(--color_one_rgb) !important;
	
	--bs-primary: var(--color_two) !important;
	--bs-btn-bg: var(--color_two);
	--bs-btn-border-color: var(--color_two);
	--bs-btn-hover-bg: var(--color_one);
	--bs-btn-hover-border-color: var(--color_one);
	--bs-btn-active-bg: var(--color_one);
	--bs-btn-disabled-bg: var(--color_two);
	--bs-btn-disabled-border-color: var(--color_two);
	--bs-link-color: var(--color_two);
	--bs-link-hover-color-rgb: var(--color_two_rgb);
  --sloganDescColor: white;
  --sloganTitleColor: #FDB700;
  --color_one: #003375;
  --color_two: #FDB700;
	
}

/*hero section*/

#hero {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
  }
  
  /* Content container */
  #hero .hero-content-container {
    position: relative;
    z-index: 1;
    flex: 1;
  }
  
  #hero .hero-title {
    color: var(--color_two);
  }
  
  #hero .hero-title p {
    color: var(--color_two);
    font-size: 4rem ;
  }
  
  #hero h1 {
    color: var(--color_two);
    font-size: 4rem;
  }
  
  #hero h2 {
    color: var(--color_two);
    font-size: 2rem;
  }
  
  #hero p {
    color: var(white);
    font-size: 1.5rem ;
  }
  
  #hero #heroNavigateButton {
    transition: 0.2s;
     background-color: ease-in-out;
    background-color: var(--color_two);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  #hero #heroNavigateButton .button-body {
    color: var(--header_font_color);
    font-size: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  #hero #heroNavigateButton .button-body-contact {
    color: var(--header_contact_font_color);
    font-size: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  #hero #heroNavigateButton:hover {
    background-color: var(--color_one);
  }
  
  #hero #heroNavigateButton:hover .button-body {
    color: var(--header_font_hover_color);
  }
  
  #hero #heroNavigateButton:hover .button-body-contact {
    color: var(--header_contact_font_hover_color);
  }
  
  #hero .headerBackground-overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex: 1;
  }
  
  @media (max-width: 600px) {
    #hero h1 {
      font-size: 10vw !important;
    }
  }

  .sloganTitleColor {
    color: var(--sloganTitleColor) ;
  }
  
  .sloganDescColor {
    color: var(--sloganDescColor);
  }