.contact-section {
     padding: 20px 0;
     background: linear-gradient(135deg, #ffffff, #ffffff);
 }

 .contact-section h2 {
     text-align: center;
     font-size: 36px;
     margin-bottom: 60px;
     color: #333;

 }

 .contact-container {
     display: grid;
     grid-template-columns: 1fr;
     gap: 40px;
 }

 .contact-info {
     background:  linear-gradient(135deg, #0066cc, #00aaff);
     padding: 20px;
     border-radius: 10px;
     backdrop-filter: blur(10px);
 }

 .contact-info h3 {
     font-size: 24px;
     margin-bottom: 30px;
     color: #fff;
 }

 .contact-item {
     margin-bottom: 20px;
     display: flex;
     align-items: flex-start;
     gap: 15px;
 }

 .contact-icon {
     font-size: 24px;
     color: #fff;
     min-width: 30px;
 }

 .contact-details h4 {
     font-size: 16px;
     margin-bottom: 5px;
     color: #fff;
     text-align: left;
 }

 .contact-details p {
     color: rgba(255, 255, 255, 0.8);
     margin-bottom: 0;
     text-align: left;
 }

 .map-section {
     padding: 20px 0;
     background-color: #f5f5f5;
 }

 .map-section h2 {
     text-align: center;
     font-size: 36px;
     margin-bottom: 40px;
     color: #333;
 }

 .map-container {
     height: 400px;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .map-container iframe {
     width: 100%;
     height: 100%;
     border: none;
 }
 .map-container img{
    width: 100%; height: 100%; object-fit: cover;
 }

 @media (max-width: 768px) {
     .contact-section {
         padding: 20px 0;
     }

     .contact-container {
         grid-template-columns: 1fr;
     }

     .contact-info {
         padding: 20px;
     }
 }