* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   /* Body background */
   body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(90deg, rgba(15, 78, 15, 0.8), rgba(255, 255, 255, 0.8));
     min-height: 100vh;
   }

   /* Top Navigation */
   .top-nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background: linear-gradient(90deg, rgba(15, 78, 15, 0.8), rgba(255, 255, 255, 0.8));
     backdrop-filter: blur(10px);
     padding: 15px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 1000;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   /* Nav Left group */
   .nav-left {
     display: flex;
     gap: 15px;
     align-items: center;
   }

   .nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     cursor: pointer;
     transition: all 0.3s ease;
     padding: 5px;
     border-radius: 10px;
   }

   .nav-item:hover {
     background: rgba(127, 205, 205, 0.2);
   }

   .nav-icon {
     font-size: 1.3rem;
     color: #4a7c59;
   }

   .nav-text {
     font-size: 0.7rem;
     color: #fefffd;
     font-weight: 500;
   }

   /* User Profile */
   .user-profile {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     padding: 5px 50px;
     border-radius: 10px;
     margin-top: -20px;
    
   }

   .profile {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 10px;
    margin-right: 800px;
    background-color: #ffffffcc; 
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1); 
  z-index: 999
  }
  

   .profile .icon {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background-color: #4a7c59;
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
   }

   .profile .name {
     font-size: 0.9rem;
     font-weight: 600;
     color: hsl(0, 0%, 4%);
   }

   .logo-image {
     margin-left: 20px;
   }

   /* Black Line */
   .black-line {
     position: fixed;
     top: 85px;
     width: 100%;
     background-color: rgb(10, 62, 6);
     color: rgb(255, 255, 255);
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 8px 20px;
     z-index: 1100;
   }

   .black-line-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 50px;
   }

   .black-line .nav-item {
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
     color: rgb(255, 255, 255);
     padding: 5px 10px;
     border-radius: 5px;
     transition: background 0.3s ease;
     text-decoration: none;
   }

   .black-line .nav-item:hover {
     background: rgba(255, 255, 255, 0.2);
   }

   /* Main Content */
   .main-content {
     padding-top: 150px;
   }

   /* Carousel */
   .carousel-container {
     position: relative;
     padding: 0;
     overflow: hidden;
     margin-top: 0;
   }

   .carousel-wrapper {
     overflow: hidden;
     padding: 0;
     width: 100%;
     height: 400px;
   }

   .carousel-track {
     display: flex;
     width: 500%;
     /* 5 slides × 100% */
     height: 100%;
     transition: transform 0.5s ease-in-out;
   }

    .carousel-slide {
     width: 20%;
     /* Each slide takes 1/5 of track width (100% / 5 slides) */
     height: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
    display: block;
    text-decoration: none;
    color: inherit;
   }

   .carousel-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 15px;
   }

   .carousel-content {
     position: absolute;
     left: 50px;
     top: 50%;
     transform: translateY(-50%);
     color: white;
     z-index: 2;
     max-width: 500px;
   }

   .carousel-content h2 {
     font-size: 70px;
     font-weight: bold;
     margin-bottom: 10px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
     line-height: 1.2;
   }

   .carousel-content p {
     font-size: 30px;
     font-weight: 500;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
     margin: 0;
   }

   /* Carousel Dots */
   .carousel-dots {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 3;
   }

   .dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: background-color 0.3s ease;
   }

   .dot.active {
     background-color: white;
   }

   .dot:hover {
     background-color: rgba(255, 255, 255, 0.8);
   }

   /* Service Actions */
   .service-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     padding: 20px;
   }

   .service-btn {
     padding: 18px 40px;
     font-size: 0.9rem;
     font-weight: 600;
     border: none;
     border-radius: 25px;
     cursor: pointer;
     transition: all 0.3s ease;
   }

   .call-btn {
     background-color: #4CAF50;
     color: white;
   }

   .call-btn:hover {
     background-color: #45a049;
     transform: translateY(-2px);
   }

   .whatsapp-btn {
     background-color: #25D366;
     color: white;
   }

   .whatsapp-btn:hover {
     background-color: #20c45a;
     transform: translateY(-2px);
   }

   .upload-btn {
     background-color: #007bff;
     color: #fff;
   }

   .upload-btn:hover {
     background-color: #034790;
     transform: translateY(-2px);
   }

   /* Modal Styles */
   .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1200;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
   }

   .modal-overlay.active {
     opacity: 1;
     visibility: visible;
   }

   .modal {
     background: white;
     border-radius: 12px;
     width: 90%;
     max-width: 450px;
     padding: 0;
     position: relative;
     transform: scale(0.9);
     transition: transform 0.3s ease;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   }

   .modal-overlay.active .modal {
     transform: scale(1);
   }

   .modal-header {
     padding: 24px 24px 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #e5e7eb;
   }

   .modal-title {
     font-size: 20px;
     font-weight: 600;
     color: #1f2937;
     margin: 0;
   }

   .close-button {
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: #6b7280;
     padding: 4px;
     border-radius: 4px;
     transition: background-color 0.2s;
   }

   .close-button:hover {
     background-color: #f3f4f6;
   }

   .modal-body {
     padding: 24px;
   }

   .form-group {
     margin-bottom: 20px;
   }

   .form-label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     color: #374151;
     font-size: 14px;
   }

   .required {
     color: #ef4444;
   }

   .form-input {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid #d1d5db;
     border-radius: 8px;
     font-size: 16px;
     transition: border-color 0.2s, box-shadow 0.2s;
     background-color: #f9fafb;
   }

   .form-input:focus {
     outline: none;
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     background-color: white;
   }

   .form-select {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid #d1d5db;
     border-radius: 8px;
     font-size: 16px;
     background-color: #f9fafb;
     cursor: pointer;
     appearance: none;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
     background-position: right 12px center;
     background-repeat: no-repeat;
     background-size: 16px;
     transition: border-color 0.2s, box-shadow 0.2s;
   }

   .form-select:focus {
     outline: none;
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     background-color: white;
   }

   .checkbox-group {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 24px;
   }

   .checkbox-input {
     width: 18px;
     height: 18px;
     margin: 0;
     cursor: pointer;
     accent-color: #3b82f6;
   }

   .checkbox-label {
     font-size: 14px;
     color: #6b7280;
     line-height: 1.5;
     cursor: pointer;
     flex: 1;
   }

   .submit-button {
     width: 100%;
     background-color: #3b82f6;
     color: white;
     padding: 14px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.1s;
   }

   .submit-button:hover {
     background-color: #2563eb;
   }

   .submit-button:active {
     transform: translateY(1px);
   }

   /* Mobile Responsiveness */
   @media (max-width: 768px) {
     .carousel-wrapper {
       height: 300px;
     }

     .carousel-content {
       left: 20px;
       max-width: 300px;
     }

     .carousel-content h2 {
       font-size: 1.8rem;
     }

     .carousel-content p {
       font-size: 1rem;
     }
   }

   @media (max-width: 480px) {
     .carousel-wrapper {
       height: 250px;
     }

     .carousel-content h2 {
       font-size: 1.5rem;
     }

     .carousel-content p {
       font-size: 0.9rem;
     }
   }


   /* Service Actions */
   .service-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     padding: 20px;
   }

   .service-btn {
     padding: 18px 40px;
     font-size: 0.9rem;
     font-weight: 600;
     border: none;
     border-radius: 25px;
     cursor: pointer;
     transition: all 0.3s ease;
   }

   .call-btn {
     background-color: #4CAF50;
     color: white;
   }

   .call-btn:hover {
     background-color: #45a049;
     transform: translateY(-2px);
   }

   .whatsapp-btn {
     background-color: #25D366;
     color: white;
   }

   .whatsapp-btn:hover {
     background-color: #20c45a;
     transform: translateY(-2px);
   }

   .upload-btn {
     background-color: #007bff;
     /* Blue */
     color: #fff;

   }

   .upload-btn:hover {
     background-color: #034790;
     transform: translateY(-2px);
   }

   /* Featured Section - Modern Layout */
   .featured-section {
     padding: 30px 20px;
     text-align: center;
   }

   .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 40px;
   }

   .section-title {
     font-size: 2.5rem;
     font-weight: bold;
     color: #000000;
     background: linear-gradient(135deg, #000000, #000000);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-align: center;
     display: inline-block;
     /* This helps with centering gradient text */
     margin: 0 auto 100px auto;
     /* Adds space below and centers block */
     margin-right: 310px;
     position: relative;
   }


   .view-all-btn {
     font-size: 0.95rem;
     color: #000000;
     background: none;
     border: 2px solid #000000;
     padding: 8px 16px;
     border-radius: 20px;
     cursor: pointer;
     font-weight: 600;
     transition: all 0.3s ease;
     text-decoration: none;
     margin-top: 5px;
     /* ← adjust this value as needed */
   }


   .view-all-btn:hover {
     background-color: #000000;
     color: white;
     transform: translateY(-2px);
   }

   .featured-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
     max-width: 1200px;
     margin: 0 auto;
     margin-top: -80px;

   }

   .featured-card {
     position: relative;
     border-radius: 25px;
     padding: 0;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     height: 280px;
     overflow: hidden;
     text-decoration: none;
     display: flex;
     flex-direction: column;

   }

   .featured-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
   }

   /* Hide packages beyond the first 4 initially */
   .featured-card:nth-child(n+5) {
     display: none;
   }

   .featured-grid.show-all .featured-card {
     display: flex;
   }

   /* Card Content Area */
   .card-content {
     position: relative;
     height: 100%;
     padding: 30px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     z-index: 2;
     font-weight: 500px;
   }

   .card-header {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 20px;
   }

   .card-icon {
     font-size: 3rem;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   }

   .card-title {
     font-size: 25px;
     font-weight: 700;
     color: rgb(0, 0, 0);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     line-height: 1.2;
     font-style: bold;
   }

   .card-description {
     font-size: 16px;
     color: rgba(0, 0, 0, 0.9);
     line-height: 1.4;
     margin-bottom: 20px;
     font-style: bold;
     font-weight: 8000px;
   }

   .card-cta {
     background: rgba(0, 0, 0, 0.2);
     color: rgb(0, 0, 0);
     border: 2px solid rgba(0, 0, 0, 0.3);
     padding: 12px 24px;
     border-radius: 25px;
     font-weight: 600;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
     align-self: flex-start;
   }

   .card-cta:hover {
     background: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-2px);
   }

   /* Background Patterns */
   .featured-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.228);
     /* adjust darkness here */
     filter: brightness(0.8) blur(2px);
     z-index: 1;
   }

   /* Smart Selection Package - Orange Theme */
   /* Smart Selection Package */
  .featured-card.smart  {
 background-color: aqua;
}

/* Advance Health Package */
.featured-card.advance {
  background-color: #76b2f1;
}

/* All In One Package */
.featured-card.allinone {
  background-color: #b6f176;
}

/* More Specific Packages */
.featured-card.basics {
  background-color: #76f17e;
}
.featured-card.fever {
  background-color: #969696;
}
.featured-card.pef {
  background-color: #f88fe7;
}
.featured-card.anc {
  background-color: #f1e776;
}
.featured-card.pcod {
   background-color: #f1bc76;
}
.featured-card.arthritis {
   background-color: #a3f5e9;
}
.featured-card.diabetes {
   background-color: #f5adaa;
}
.featured-card.hyper {
   background-color: #f56060;
}
.featured-card.dialysis {
   background-color: #f09c4e;
}
.featured-card.maleinf {
   background-color: #f05c9c;
}
.featured-card.feinf {
 background-color: #e27af1;
}

   /* Decorative Elements */
   .card-decoration {
     position: absolute;
     right: -20px;
     top: -20px;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     z-index: 1;
   }

   .card-decoration-2 {
     position: absolute;
     left: -30px;
     bottom: -30px;
     width: 80px;
     height: 80px;
     border-radius: 30%;
     background: rgba(255, 255, 255, 0.05);
     z-index: 1;
     transform: rotate(45deg);
   }

   /* Responsive Design */
   @media (max-width: 768px) {
     .featured-grid {
       grid-template-columns: 1fr;
       gap: 20px;
     }

     .featured-card {
       height: 220px;
     }

     .card-content {
       padding: 25px;
     }

     .section-title {
       font-size: 2rem;
     }

     .card-title {
       font-size: 1.2rem;
     }

     .section-header {
       flex-direction: column;
       gap: 20px;
       text-align: center;
     }
   }


   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }

   /* Modal Overlay */
   .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: linear-gradient(90deg, rgba(15, 78, 15, 0.8), rgba(255, 255, 255, 0.8));
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1200;
     /* Increased from 1000 to 1200 */
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
   }

   .modal-overlay.active {
     opacity: 1;
     visibility: visible;
   }

   /* Modal Container */
   .modal {
     background: white;
     border-radius: 12px;
     width: 90%;
     max-width: 450px;
     padding: 0;
     position: relative;
     transform: scale(0.9);
     transition: transform 0.3s ease;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   }

   .modal-overlay.active .modal {
     transform: scale(1);
   }

   /* Modal Header */
   .modal-header {
     padding: 24px 24px 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #e5e7eb;
   }

   .modal-title {
     font-size: 20px;
     font-weight: 600;
     color: #1f2937;
     margin: 0;
   }

   .close-button {
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: #6b7280;
     padding: 4px;
     border-radius: 4px;
     transition: background-color 0.2s;
   }

   .close-button:hover {
     background-color: #f3f4f6;
   }

   /* Modal Body */
   .modal-body {
     padding: 24px;
   }

   /* Form Styles */
   .form-group {
     margin-bottom: 20px;
   }

   .form-label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     color: #374151;
     font-size: 14px;
   }

   .required {
     color: #ef4444;
   }

   .form-input {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid #d1d5db;
     border-radius: 8px;
     font-size: 16px;
     transition: border-color 0.2s, box-shadow 0.2s;
     background-color: #f9fafb;
   }

   .form-input:focus {
     outline: none;
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     background-color: white;
   }

   .form-select {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid #d1d5db;
     border-radius: 8px;
     font-size: 16px;
     background-color: #f9fafb;
     cursor: pointer;
     appearance: none;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
     background-position: right 12px center;
     background-repeat: no-repeat;
     background-size: 16px;
     transition: border-color 0.2s, box-shadow 0.2s;
   }

   .form-select:focus {
     outline: none;
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     background-color: white;
   }

   /* Checkbox Styles */
   .checkbox-group {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 24px;
   }

   .checkbox-input {
     width: 18px;
     height: 18px;
     margin: 0;
     cursor: pointer;
     accent-color: #3b82f6;
   }

   .checkbox-label {
     font-size: 14px;
     color: #6b7280;
     line-height: 1.5;
     cursor: pointer;
     flex: 1;
   }

   /* Submit Button */
   .submit-button {
     width: 100%;
     background-color: #3b82f6;
     color: white;
     padding: 14px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.1s;
   }

   .submit-button:hover {
     background-color: #2563eb;
   }

   .submit-button:active {
     transform: translateY(1px);
   }

   .submit-button:disabled {
     background-color: #9ca3af;
     cursor: not-allowed;
     transform: none;
   }

   /* Mobile Responsiveness */
   @media (max-width: 480px) {
     .modal {
       width: 95%;
       margin: 20px;
     }

     .modal-header {
       padding: 20px 20px 12px;
     }

     .modal-body {
       padding: 20px;
     }

     .modal-title {
       font-size: 18px;
     }
   }

   /* About Us Page Styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
     color: #333;
     background: #c8f3c8;
   }

   header {
     background: #0b7530;
     color: #fff;
     padding: 60px 20px;
     text-align: center;
   }

   header h1 {
     font-size: 3rem;
     margin-bottom: 10px;
   }

   header p {
     font-size: 1.2rem;
     opacity: 0.9;
   }

   .container {
     max-width: 1000px;
     margin: 40px auto;
     padding: 0 20px;
   }

   .about-section {
     background: #fff;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   .about-section h2 {
     font-size: 2rem;
     margin-bottom: 20px;
     color: #000000;
   }

   .about-section p {
     margin-bottom: 20px;
   }

   .team {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
     margin-top: 40px;
   }

   .team-member {
     background: #fff;
     padding: 20px;
     border-radius: 12px;
     text-align: center;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s ease;
   }

   .team-member:hover {
     transform: translateY(-5px);
   }

   .team-member img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 15px;
   }

   .team-member h3 {
     margin-bottom: 5px;
     color: #000000;
   }

   .team-member p {
     font-size: 0.9rem;
     color: #666;
   }

   footer {
     text-align: center;
     padding: 30px 20px;
     background: #0b7530;
     color: #fff;
   }

   @media (max-width: 600px) {
     header h1 {
       font-size: 2rem;
     }
   }

   /*FAQ Page Styles */

   .faq {
     background: #fff;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   .faq h2 {
     font-size: 2rem;
     margin-bottom: 30px;
     color: #000000;
   }

   .faq-item {
     margin-bottom: 20px;
   }

   .faq-item h3 {
     font-size: 1.2rem;
     margin-bottom: 8px;
     color: #000000;
   }

   .faq-item p {
     font-size: 1rem;
     color: #555;
   }



   header {
     background: #0b7530;
     color: #fff;
     padding: 60px 20px;
     text-align: center;
   }

   header h1 {
     font-size: 3rem;
     margin-bottom: 10px;
   }

   header p {
     font-size: 1.2rem;
     opacity: 0.9;
   }

   .container {
     max-width: 900px;
     margin: 40px auto;
     padding: 0 20px;
   }

   .contact-info {
     background: #fff;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   .contact-info h2 {
     font-size: 2rem;
     margin-bottom: 30px;
     color: #000000;
   }

   .info-item {
     margin-bottom: 20px;
   }

   .info-item h3 {
     margin-bottom: 8px;
     font-size: 1.2rem;
     color: #000000;
   }

   .info-item p,
   .info-item a {
     font-size: 1rem;
     color: #555;
     text-decoration: none;
   }

   .social-links {
     margin-top: 30px;
   }

   .social-links a {
     display: inline-block;
     margin-right: 15px;
     font-size: 1.5rem;
     color: #000000;
     text-decoration: none;
     transition: color 0.3s ease;
   }

   .social-links a:hover {
     color: #000000;
   }

   .map {
     margin-top: 40px;
     width: 100%;
     height: 400px;
     border: none;
     border-radius: 12px;
   }

   @media (max-width: 600px) {
     header h1 {
       font-size: 2rem;
     }

     .social-links a {
       font-size: 1.2rem;
     }
   }

   .name-link {
  text-decoration: none;
  color: inherit;
}

.name-link:hover {
  text-decoration: underline;
  color: #007bff;
}