:root {
    --primary-color: #28a745;
    --secondary-color: #009933;
    --accent-color: #ffffff;
    --hover-color: #006400;
    --text-dark: #333;
    --text-light: #e75757;
    --background-light: #f9f9f9;
    --background-dark: #f0f0f0;
}

/* Hero Section */
.hero-contact {
   position: relative;
   color: var(--accent-color);
   background: linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)
  ), 
  linear-gradient(
      rgba(40, 167, 69, 0.5),  
      rgba(40, 167, 69, 0.5)
  ), 
  url('../Images/YOMLEF BACKGROUND PICS.jpg') top center/cover no-repeat;
   text-align: center;
   padding: 120px 0;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.hero-content {
   position: relative;
   z-index: 2;
}

.hero-content h1 {
   font-size: 3.5rem;
   font-weight: bold;
   margin-bottom: 20px;
}

/* .hero-content p {
   font-size: 1.3rem;
   margin-bottom: 30px;
   color: rgba(255, 255, 255, 0.9);
} */

.icons {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-bottom: 30px;
}

@media (max-width: 768px) {
   .icons{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
   }
}

.icon {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.1rem;
}

.icon i {
   font-size: 1.5rem;
   color: var(--primary-color);
}




/* Contact Section */
.contact-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 80px 20px;
   background-color: var(--background-light);
}

.contact-content {
   display: flex;
   justify-content: space-between;
   gap: 50px;
   max-width: 1200px;
   width: 100%;
}

.contact-info2, .contact-form {
   flex: 1;
   padding: 20px;
   background-color: var(--background-dark);
   border-radius: 10px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.contact-info2 h2, .contact-form h2 {
   color: var(--primary-color);
   margin-bottom: 20px;
   font-size: 2rem;
   text-align: center;
}

.contact-info2 p {
   color: var(--text-dark);
   font-size: 1.1rem;
   margin-bottom: 30px;
   text-align: center;
}

.info-item {
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 1.02rem;
   margin-bottom: 20px;
   font-weight: 600;
}

.info-item i {
   font-size: 1.8rem;
   color: var(--primary-color);
}

.contact-form form {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.floating-label {
   position: relative;
   margin-bottom: 20px;
}

.floating-label input, .floating-label textarea {
   width: 100%;
   padding: 15px 12px;
   border: 1px solid var(--primary-color);
   border-radius: 8px;
   outline: none;
   font-size: 1rem;
   color: var(--text-dark);
}

.floating-label label {
   position: absolute;
   top: 12px;
   left: 15px;
   font-size: 1rem;
   color: var(--text-light);
   transition: all 0.3s ease;
   pointer-events: none;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
   top: -10px;
   left: 10px;
   font-size: 0.85rem;
   background-color: var(--background-light);
   padding: 0 5px;
   color: var(--primary-color);
}

.submit-btn {
   padding: 15px 30px;
   background-color: var(--primary-color);
   color: var(--accent-color);
   border: none;
   border-radius: 8px;
   font-size: 1.2rem;
   cursor: pointer;
   transition: background 0.3s ease;
}

.submit-btn:hover {
   background-color: var(--hover-color);
}

/* Media Queries for Responsiveness */
@media (min-width: 768px) {
   .hero-content h1 {
      font-size: 3rem;
   }

   .hero-content p {
      font-size: 1.5em;
      margin-bottom: 40px;
      line-height: 1;
      text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
      color: white;
   }

   .number{
      font-size: 1.4rem;
   }

   .hero-contact{
      height: 75vh;
      padding: 100px 20px;

   }


   .contact-content {
      gap: 30px;
   }


}

@media (max-width: 992px) {
   .hero-content h1 {
      font-size: 2.5rem;
   }
   .contact-info2{
      margin-top: -20px;
   }

   /* .hero-content p {
      font-size: 1.1rem;
   } */


   .contact-content {
      gap: 20px;
   }
}

@media (max-width: 768px) {
   .hero-contact {
      padding: 80px 0;

   }

   .hero-content h1 {
      font-size: 2rem;
      margin-bottom: 9px;
   }

   .hero-content{
      display: flex;
      flex-direction: column;
      gap: 10px;
   }
   

   /* .hero-content p {
      font-size: 1rem;
   } */

   

   .contact-content {
      flex-direction: column;
      gap: 50px;
   }
}

@media (max-width: 576px) {
   .hero-content h1 {
      font-size: 1.8rem;
   }

   /* .hero-content p {
      font-size: 0.9rem;
   } */

   .cta-buttons{
      width: 80%;
      margin: auto;

   }

   .floating-label input, .floating-label textarea {
      font-size: 0.9rem;
   }

   .contact-info2 h2, .contact-form h2 {
      font-size: 1.6rem;
   }
}




/* Common Message Styles */
.message {
   padding: 15px 20px;
   width: 100%;
   max-width: 500px;
   margin: 20px auto;
   border-radius: 8px;
   font-size: 1.1rem;
   text-align: center;
   font-family: 'Poppins', sans-serif;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease-in-out;
   opacity: 0; /* Initially hidden */
   transform: translateY(-20px); /* Slide-in effect */
}

/* Success Message Styles */
.success-message {
   background-color: #28a745;
   color: #fff;
   border: 2px solid #28a745;
   animation: fadeSlideIn 0.5s forwards; /* Fade and slide-in animation */
}

/* Error Message Styles */
.error-message {
   background-color: #dc3545;
   color: #fff;
   border: 2px solid #dc3545;
   animation: fadeSlideIn 0.5s forwards; /* Same animation */
}

/* Animation for sliding in and fading in */
@keyframes fadeSlideIn {
   0% {
       opacity: 0;
       transform: translateY(-20px);
   }
   100% {
       opacity: 1;
       transform: translateY(0);
   }
}