body {
    font-family: Arial, sans-serif;
  
}

/* Default styles for smaller screens */
.container {
    max-width: 100%; /* Adjust as needed for very small devices */
    margin: auto; /* Center the container */
  }
  
  /* When the viewport width is at least 992px, set the container max-width to 60% */
  @media (min-width: 992px) {
    .container {
      max-width: 60%;
      margin: auto; /* Center the container */
    }
  }
  
  /* When the viewport width is at least 1200px, set the container max-width to 80% */
  @media (min-width: 1200px) {
    .container {
      max-width: 80%;
      margin: auto; /* Center the container */
    }
  }
  
  a,p,h1,h2,h3{
     color: #0D2C44 ;
  }



/* Navigation CSS */
.navigation {
    display: flex;
    align-items: center;
    justify-content: start;
    
}
.topnav{
    border-bottom: 2px solid #0D2C44; 
}
.navigation .nav-link {
    margin-left: 20px;
    color: #0D2C44 ;
    text-decoration: none;
    font-size: larger;
    font-weight: bolder;

}


/*hero section */

.hero{
  background-color: #91B3B1;
}
.hero-content{
  margin-top: 30px;
}

.btn-primary{
  background-color: #0D2C44;
  border: #0D2C44;
  margin-bottom: 100px;
}
/* Ensuring focus state change */
.btn-primary:focus, .btn-primary.focus {
  background-color: #f9dc4a !important;
  color: #0D2C44 !important;
  outline: none !important; /* Optionally remove the outline */
}

/* Adding hover state change */
.btn-primary:hover {
  background-color: #f9dc4a !important;
  color: #0D2C44 !important;
}



.why{

  background-color: #91B3B1;
}

.why-content{
   text-align: center;
 }

 
/*contact page */
.contact{
  margin-top: 50px;
  margin-bottom: 50px;
}