body {
   margin: 0;
   font-family: Arial, sans-serif;
   color: #333;
   background: #f5f5f5;

 }

 .slide {

   margin: 0 auto;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .slide-header {
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, #ffffff 90%);
   padding: 0px 20px;
   text-align: center;
   color: #000000;
 }

 .slide-header h1 {
   margin: 0;
   font-size: 2.5rem;
   font-weight: normal;
 }

 .slide-header h1 .highlight {
   color: #ffffff;
   font-weight: bold;
 }

 .slide-header h1 .green {
   color: #000000;

 }




 @media (max-width: 700px) {
   .sub-panel {
     grid-template-columns: 40px 1fr;
   }

   .sub-panel-logo {
     grid-column: 1 / -1;
     margin-top: 12px;
   }

   .sub-panel-logo img {
     max-width: 80px;
   }
 }


 .hero {
   background: url('../images/site5.jpg') center/cover no-repeat;

   height: 90vh;
   display: flex;
   align-items: flex-end;
   /* Align content to the bottom initially */
   justify-content: center;
   text-align: center;
   color: white;
   position: relative;
   padding: 0 20px;
   overflow: hidden;

 }

 .hero-text {

   /* Prevents any overflow when the hero text moves  background: rgba(0, 0, 0, 0.6);*/
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.6);
   border-radius: 5px;

   padding: 30px 40px;
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-width: 1200px;
   margin-bottom: 20px;
   transition: transform 0.5s ease-out;
   /* Smooth transition for the movement */
 }



 /* Additional styling for when the hero text is centered */
 .hero-text.scrolled {
   transform: translateX(-50%) translateY(-50%);
   /* Moves the text to the center */
 }

 label {
   color: #43a047 !important;

 }

 .hero h1 {
   font-size: 3rem;
   margin: 0;
 }

 .hero p {
   font-size: 1.5rem;
 }