body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0A0F24; 
    color: white; 
  }
  body::before {
    content: '';
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("airshow.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    display: flex;
    opacity: 50%; 
    z-index: -1;
  }
  .navbar {
    overflow: hidden;
    background-color: #1C2331; 
    position: sticky;
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 19px; 
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .main-heading {
    text-align: center;
    color: #ffffff;
    animation: fadeIn 2s;
    font-size: 45px; 
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
  }
  
  .content {
    padding: 15px;
  }
  
  .image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px; 
  }
  
  .image-item {
    text-align: center; 
  }
  
  .image-item img {
    width: 100%; 
    border: 3px solid #333;
    transition: transform 0.3s ease; 
    height: 200px;
  }
  
  .image-item img:hover {
    transform: scale(1.1); 
  }
  .image-gallery img {  animation: zoomIn 2s; }
  
  @keyframes zoomIn { from { transform: scale(0); } to { transform: scale(1); } }
  
  .image-caption {
    color: white; 
    margin-top: 5px; 
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
  
  @media (max-width: 500px) {
    .navbar a { font-size: 18px; } 
    .main-heading { font-size: 28px; } 
    .image-gallery {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    }
  }


.site-footer {
    text-align: center;
    padding: 10px 0;
    background-color: #1C2331; 
    color: #f2f2f2; 
    margin-top: 20px; 
  }
  
  .site-footer p {
    margin: 20px; 
  }
  
html {
  scroll-behavior: smooth;
}
