:root {
      --primary: #28a745; 
      --accent: #ffc107; 
      --dark: #1a1a1a; 
      --light: #f8f9fa;
    }
    body { 
      font-family: 'Segoe UI', sans-serif; 
      background: var(--light);
      color: #333; 
    }
    

    .hero { 
      position: relative; 
      height: 350px!important; 
      background:  url('../images/pexels-photo-356036.jpeg') center/cover no-repeat  !important;
      background-attachment: scroll !important;
      color: white; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      text-align: center; 
    }
   .hero-content { 
      position: relative; 
      z-index: 2;
       max-width: 900px; 
       padding: 2rem; 
      }
    .hero h1 { 
      margin-top: 70px!important;
      font-size: 2rem!important; 
      font-weight: 600!important; 
      text-shadow: 3px 3px 8px rgba(0,0,0,0.6); 
    }
    .hero p { 
      font-size: 1.4rem; 
      text-shadow: 2px 2px 6px rgba(0,0,0,0.6); 
    }
    .section-title { 
      color: var(--primary); 
      font-weight: 700; 
      position: relative; 
      display: inline-block; 
    }
    .section-title::after { 
      content: ''; 
      position: absolute; 
      width: 60px; 
      height: 4px; 
      background: var(--accent); 
      bottom: -10px; left: 50%; 
      transform: translateX(-50%); 
      border-radius: 2px; 
    }

    .contact-card { 
      border: none; 
      border-radius: 18px; 
      box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
      transition: all 0.3s ease; 
    }
    .contact-card:hover { 
      transform: translateY(-8px); 
      box-shadow: 0 15px 35px rgba(0,0,0,0.15); 
    }
    .contact-icon { 
      font-size: 2.2rem; 
      color: var(--primary); 
    }

    .form-control { 
      border-radius: 12px; 
      padding: 0.75rem 1rem; 
    }
    .form-control:focus { 
      border-color: var(--primary); 
      box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.25); 
    }
    .btn-primary { 
      background: var(--accent); 
      border: none; color: #000; 
      font-weight: 600; 
      padding: 0.8rem 2rem; 
      border-radius: 50px; 
    }
    .btn-primary:hover { 
      background: #e0a800; 
      transform: translateY(-2px); 
    }

    .map-container { 
      border-radius: 18px; 
      overflow: hidden; 
      box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
      height: 350px; 
    }

   
   
   
    @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    @media (max-width: 768px) { 
      .hero h1 { font-size: 3rem; } 
      .map-container { height: 250px; }
    }