@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap");
body {
  font-family: Helvetica, sans-serif;
  /* margin: auto; */
  margin: 0px;
  padding: 0px;
  /* background-color: black; */
}
#top-nav {
  background-color: rgb(244, 245, 249);
}

#top-nav .container {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 5px;
}

small a {
  text-decoration: none;
  color: black;
  font-weight: 530;
  padding: 0px 15px;
}

small a:hover {
  text-decoration: underline;
}

#nav {
  margin: 1em 2em 0.1em 5em;
}

#nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav h1 {
  font-family: "Teko", sans-serif;
  font-weight: 700;
  font-size: 35px;
  letter-spacing: 0.0001px;
  color: #003087;
  margin: 0;
  padding: 0;
}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  padding: 10px 10px 10px 20px;
  width: 200px;
  height: 20px;
  border: none;
  border-bottom: 1px solid black;
  transition: width 0.3s ease-in-out;
}

.search-icon {
  font-size: 16px;
  color: #999;
}

#hamburger {
  display: none;
  cursor: pointer;
}

@media (max-width: 700px) {
  #nav {
      margin: 10px;
  }

  #nav h1 {
      margin: 0;
  }

  #hamburger {
      display: block;
  }

  #links {
      display: none;
  }

  .search-icon {
      display: none;
  }
  .search-input{
    display: none;
}


  .show {
      display: flex !important;
      flex-direction: column;
      width: 100%;
      gap: 10px;
      position: absolute;
      background-color: #003087;
      top: 50px;
      left: 0;
      padding: 10px;
      z-index: 1;
  }

  .show a {
      display: block;
      margin-block: 10px;
      text-align: center;
      color: white;
      border-bottom: 1px solid white;
      padding: 10px;
  }

  .remove {
      display: none !important;
  }
}

/* -------------------------- */
.slider1 {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  margin-bottom: -4px;
  padding: 0px;
}

.slider1 img {
  width: 100%;
  height: auto;
  /* display: none; */
}

/* --------------------------------- */


.card-container {
   display: flex;
   max-width: 1300px;
   width: auto;
   margin: auto;
   height: auto;
   justify-content: space-between;
   padding: 20px;
   flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
}

.card {
   background-color: white;
   border-radius: 8px;
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
   flex: 1;
   margin: 10px;
   padding: 20px;
   text-align: center;
   min-width: 280px; /* Minimum width for each card */
   max-width: 100%; /* Ensure cards don’t overflow the container */
}

.card img {
   width: 100%;
   height: auto;
   border-radius: 8px;
   margin-bottom: 15px;
}

.card h3 {
   margin: 10px 5px;
   font-size: 14px;
   text-align: center;
}

.card p {
   color: #555;
   margin-bottom: 40px;
   font-size: 13px;
   font-weight: bold;
}

/* Media query for small screens */
@media (max-width: 768px) {
   .card-container {
       flex-direction: column; /* Stack cards vertically on smaller screens */
       align-items: center; /* Center align the cards */
   }

   .card {
       width: 90%; /* Make each card take full width */
       margin: 10px 0; /* Add vertical margin between cards */
   }
}

/* Media query for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
   .card {
       flex: 0 0 45%; /* Each card takes about half width */
       max-width: 45%;
   }
}



/* Footer Styles */
footer {
   background-color: rgb(244, 245, 249);
   padding: 2em 0em;
 }
 footer a {
   color: black; /* Set the text color to black */
   text-decoration: none; /* Remove underline if desired */
 }
 
 footer a:hover {
   text-decoration: underline; /* Add underline on hover for better UX */
 }
 footer .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
 }
 
 #footer-one {
   display: flex;
   justify-content: center;
   gap: 4em;
   margin: 2em;
 }
 
 #footer-one a {
   color: rgb(138, 138, 138);
 }
 
 #footer-two {
   display: flex;
   gap: 2em;
   cursor: pointer;
 }
 
 #footer-three,
 #footer-four,
 #footer-five {
   text-align: center;
   margin: 1em 0;
 }
 
 #footer-five small {
   display: block;
   font-weight: 600;
 }
 
 @media (max-width: 700px) {
   footer .container {
       flex-direction: column;
       gap: 20px;
   }
 
   #footer-one,
   #footer-three {
       display: none;
   }
 
   #footer-two {
       margin-left: 5px;
   }
 }












/* --------------------------------------- */
/* FOOTER START */


/* FOOTER END */