header{
    text-align: center;
    color: black;
    font-size:45px;
    padding-top: 20px;
    text-transform: capitalize;
    
  }
  .cont{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    
    
  }
  .cont > div{
    background-color: #4169E1;
    border-radius: 10px;
    padding: 20px;
    font-size: 33px;
    gap: 20px;
    height: 100px;
    color: white;
    padding-top: 45px;
  }
  nav{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: white;
    
    
    gap:20px;
    
  }
  a{
    text-decoration: none;
    display: flex;
  
   font-size: 15px;
    margin-right: auto;
    padding-top: 20px;
    padding: 12px 16px;
    text-align: right;
  }
  .links{
    display: flex;
    margin-left: auto;
    background-color: black;
  }
  
  .hero{
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 15px;
    
  }
  .hero > div{
    font-size: 34px;
    gap: 20px;
    font-family: monospace;
    
    padding-top: 50px;
  }
  img{
    width:100%;
    height: 230px;
    gap: 50;
    
  }
  p{
    font-size:13px ;
    line-height: 1.6;
  }
  .serch{
    display: flex;
    flex-direcrion: row;
    
    min-height: 40vh;
    
    
    gap: 5px;
    
  }
    
    .serch > div{
      display: flex;
      justify-content: center;
      align-items: center;
    
    flex-wrap: nowrap;
    text-align: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: beige;
    padding: 10px;
    margin: 20px;
    object-fit: cover;
    
    
   
  }
  .serch a{
    
    font-size: 18px;
    text-align: center;
    margin: 0 auto;
 
    text-decoration: none;
   
  }
   button {
    white-space: nowrap; 
    text-align: center;
    background-color: blue;
    font-size: 20px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border-radius: 8px;
    }
    
  button:hover{
    background-color: skyblue;
    
  }
  footer{
    background-color: black;
    color: white;
    font-size: 24px;
    

  }
  .btn{
    white-space: nowrap;
    background-color: blue;
    color: white;
  }
  .space{
      white-space: nowrap;
    background-color: blue;
    color: white;
    text-align: center;
    }
    .butt{
      background-color: black;
      font-size: 17px;
      color: white;
      border: 1px solid black;
      
    }
    .grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      background-color:#FFFFFF;
    }
    .grid > div{
      font-size: 34px;
      background-color:#FAFAFA;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      gap: 20px;
     height:100%; 
    }
    .grid img{
      width: 100%;
      height:230px;
      min-height: 20vh;
    }
      .link  {
      display:flex;
      margin:0 auto;
      
      color: blue;
      
    
    }
    h1{
      font-size: 26px;
      text-align: center;
    }
    h2{
      padding-top: 50px;
      font-size: 24px;
    }
    h3{
      padding-bottom: 65px;
      font-size:14px;
    }
    @media (min-width:1024px) {
      .grid{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap:15px;
      }
      
    }
    .center{
      text-align: center;
      font-size: 20px;
      display:flex;
      margin: 0 auto;
    }
    .div{
       background-color: beige;
       padding: 12px 16px;
       text-align: center;
       margin: 0 auto;
    }
    .grid p{
      text-align: center;
      font-size: 14px;
    }
    span{
      text-align: center;
      color: gold;
      font-size: 17px;
      padding:12px 16px;
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }
    .green{
      background-color: green;
    }
   .mos {
  width: 100%;
  height: 150px;
  background-color: #f6f3f0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mos img {
  width: 50% !important;   /* Forces the image width to match the screen width */
  height: 160px !important;  /* Forces the image height to fill the banner container */
  object-fit: cover !important; /* CRITICAL: Zooms into the logo perfectly without stretching it */
  
}
     
      .cens {
      display: flex;
      background-color: grey;
      color: black;
      margin-left: auto;
      justify-content: flex-end;
      padding-top:15px;
      border-radius: 10px;
    }
    .mide{
      display: flex;
      overflow-x: auto;
      padding:12px;
      scroll-behavior: smooth;
      gap:10px;
    }