body {


     background-color: #f8f8f8;
 }



 .hero {
     background: url('../images/st4.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;
     /* Prevents any overflow when the hero text moves */
 }

 .hero-text {
     border: 1px solid rgba(255, 255, 255, 0.6) !important;
     background: rgba(0, 0, 0, 0.6);
     padding: 30px 40px;
     border-radius: 5px;
     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;
 }

 /* @keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}About Section */



 .container {
     max-width: 99% !important;
     margin: 0 auto;
     display: flex;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .left,
 .right {
     padding: 40px;
 }

 .left {
     flex: 1;
     background: #fff;
 }

 .right {
     flex: 2;
     background: #fff;
 }


 .details {
     margin-top: 20px;
     gap: 5px;
 }

 .detail-item {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
     font-size: 1.1em;
 }

 .detail-item i {
     color: #43a047;
     font-size: 1.5em;
     gap: 5px;
     margin-right: 12px;

 }

 form {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 input,
 textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 1em;
 }

 .half-width {
     width: 48%;
 }

 button {
     background: #43a047;
     /* Orange */
     color: white;
     padding: 14px 28px;
     border: none;
     border-radius: 5px !important;
     cursor: pointer;
     font-size: 1.1em;
     margin-top: 10px;
     transition: background 0.3s;
 }

 button:hover {
     opacity: 0.7;
 }

 /* Responsive adjustments for mobile */
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
     }

     .left,
     .right {
         padding: 20px;
     }

     .half-width {
         width: 100%;
     }

     .hero h1 {
         font-size: 2rem;
     }

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