.hero-banner {
     background: url('/Assets/Drone\ 3.1.jpg') center center/cover no-repeat;
     height: 40vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     position: relative;
 }

 .hero-banner h1 {
     font-size: 4rem;
     font-weight: 700;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 }

 @media (max-width: 768px) {
     .hero-banner {
         height: 20vh;
     }

     .hero-banner h1 {
         font-size: 2.5rem;
     }
 }





 .profile-card {
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     margin-bottom: 20px;
 }

 .profile-img {
     width: 100%;
     height: 400px;
     object-fit: cover;
 }

 .profile-name {
     font-weight: bold;
     text-align: center;
     padding: 10px;
     font-size: 1.1rem;
 }