/* Banner Styling */
 .banner {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 35vh;
   background: url('/images/home-banner.jpg') no-repeat center center;
   background-size: cover;
   text-align: center;
   color: #ffffff;

   position: relative;
 }

 .banner h1 {
   font-size: 2rem;
   margin-bottom: 40px;
   text-shadow: 1px 1px 2px var(--secondary-color),
     /* Adjust color as needed */
     -1px -1px 2px var(--secondary-color),
     1px -1px 2px var(--secondary-color),
     -1px 1px 2px var(--secondary-color);
 }

 .banner-button a {
   display: inline-block;
   padding: 10px 20px;
   background-color: var(--secondary-color);
   color: rgb(0, 0, 0);
   font-size: 1.2rem;
   font-weight: bold;
   border-radius: 4px;
   transition: background-color 0.3s;
   text-decoration: none;
 }

 .banner-button a:hover {
   background-color: #556A46;
 }