.masthead {
    background: #001f3f;
  }

  .masthead h1,
.masthead h3,
.masthead a {
  color: #ffffff;
}

.masthead .btn-primary {
    background-color: #ffffff;
    color: #001f3f;
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
  }
  
  .masthead .btn-primary:hover {
    background-color: #001f3f;
    color: #ffffff;
    border: 2px solid #ffffff;
  }

#about {
    background-color: #ffffff;
    color: #001f3f;
  }
  
  
 h2, p {
    color: #001f3f;
  }
  
  /* Button: white default, navy on hover */
  #about .btn-dark {
    background-color: #ffffff;
    color: #001f3f;
    border: 2px solid #001f3f;
    transition: all 0.3s ease;
  }
  
  #about .btn-dark:hover {
    background-color: #001f3f;
    color: #ffffff;
    border: 2px solid #001f3f;
  }

  /* Services section background and text */
#services {
    background-color: #001f3f; /* Navy background */
    color: #ffffff;            /* White text */
  }
  
  #services h3,
  #services h4,
  #services p {
    color: #ffffff;
  }  

  #services h2,
#services h3 {
  color: #ffffff;
}
  
  /* Optional: Style icons */
  #services .service-icon {
    background-color: #ffffff;
    color: #001f3f;
    padding: 20px;
    font-size: 30px;
  }
  

  #services a {
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Hover effect for the icon background and color */
  #services a:hover .service-icon {
    background-color: #001f3f;
    color: #ffffff;
  }
  
  #services .service-icon {
    background-color: #ffffff;
    color: #001f3f;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    border-radius: 50%;
    margin: 0 auto 1rem auto;
    transition: all 0.3s ease;
  }


 /* === Custom Overrides for the Callout Section === */
.callout {
    background: none !important; /* Remove background image and gradient */
    background-color: #ffffff !important; /* White background */
    color: #001f3f !important; /* Navy text */
    text-align: center;
  }
  
  /* Heading styling override */
  .callout h2,
  .callout .h2 {
    color: #001f3f !important;
  }
  
  /* Button override in callout */
  .callout .btn-primary {
    background-color: #001f3f !important; /* Navy button */
    color: #ffffff !important;           /* White text */
    border: 2px solid #001f3f;
    transition: all 0.3s ease;
  }
  
  .callout .btn-primary:hover {
    background-color: #ffffff !important; /* White background */
    color: #001f3f !important;           /* Navy text */
    border: 2px solid #001f3f;
  }

  /* Contact Section Container */
#contact {
    background-color: #ffffff !important;  /* White background */
    color: #001f3f !important;             /* Navy text */
    padding: 4rem 0;
  }
  
  /* Headings and Paragraphs */
  #contact h2,
  #contact p,
  #contact label {
    color: #001f3f !important;
  }
  
  /* Form Fields */
  #contact input.form-control,
  #contact textarea.form-control {
    background-color: #f8f9fa; /* Light grey background for inputs */
    color: #001f3f;
    border: 2px solid #001f3f;
    border-radius: 5px;
    padding: 0.75rem;
  }
  
  /* Input Placeholder Text */
  #contact input::placeholder,
  #contact textarea::placeholder {
    color: #7a8a99;
  }
  
  /* Input focus effect */
  #contact input:focus,
  #contact textarea:focus {
    border-color: #001f3f;
    box-shadow: 0 0 0 0.2rem rgba(0, 31, 63, 0.25);
    outline: none;
  }
  
  /* Button Styles */
  #contact .btn-primary {
    background-color: #001f3f;
    color: #ffffff;
    border: 2px solid #001f3f;
    transition: all 0.3s ease;
  }
  
  #contact .btn-primary:hover {
    background-color: #ffffff;
    color: #001f3f;
    border: 2px solid #001f3f;
  }

  .bg-primary {
    background-color: #001f3f !important; /* Navy */
    color: #ffffff;
  }

  /* Scroll to Top Button - Default (White) */
.scroll-to-top {
    background-color: #ffffff;
    color: #001f3f;
    border: 2px solid #001f3f;
    transition: all 0.3s ease;
  }
  
  /* Scroll to Top Button - Hover (Navy) */
  .scroll-to-top:hover {
    background-color: #001f3f;
    color: #ffffff;
    border: 2px solid #001f3f;
  }
  
  .menu-toggle {
    background-color: #ffffff;
    color: #001f3f; /* Navy stripes (icon lines) */
    border: 2px solid #001f3f;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1030;
    text-decoration: none;
  }
  
  /* Icon inside */
  .menu-toggle i {
    font-size: 24px;
    transition: color 0.3s ease;
  }
  
  /* Hover effect: navy background, white icon */
  .menu-toggle:hover {
    background-color: #001f3f;
    color: #ffffff; /* This changes the icon too */
    border: 2px solid #001f3f;
  }
 
  /* Sidebar container */
#sidebar-wrapper {
    background-color: #001f3f !important;  /* Navy background */
    color: #ffffff !important;             /* White text */
    position: fixed;
    z-index: 2;
    right: 0;
    width: 250px;
    height: 100%;
    transition: all 0.4s ease 0s;
    transform: translateX(250px);
    border-left: 1px solid rgba(255, 255, 255, 0.1); /* Optional subtle border */
  }
  
  /* Sidebar active (when it's visible) */
  #sidebar-wrapper.active {
    right: 250px;
    width: 250px;
  }
  
  /* Sidebar nav links */
  .sidebar-nav-item {
    color: #ffffff !important;     /* White text */
    font-weight: 600;
    text-decoration: none;
    display: block;
    padding: 1rem 0;
    transition: color 0.3s ease;
  }
  
  /* Hover effect: optional lighter white/gray */
  .sidebar-nav-item:hover {
    color: #dddddd !important;
  }