﻿

      /* Page Header */
      .page-header {
          background: linear-gradient(135deg, #0a1f2e 0%, #1a3a4a 100%);
          color: white;
          padding: 4rem 2rem 6rem;
          text-align: center;
      }

        .page-header h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #00ffcc;
        }

      .page-header p {
          font-size: 1.2rem;
          color: #66d9ff;
      }

      /* Contact Section */
      .contact-container {
          max-width: 1200px;
          margin: -3rem auto 4rem;
          padding: 0 2rem;
      }

      .contact-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2rem;
          margin-bottom: 3rem;
      }

      .contact-card {
          background: white;
          padding: 2.5rem;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
          text-align: center;
          transition: transform 0.3s, box-shadow 0.3s;
      }

      .contact-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 255, 204, 0.2);
      }

      .contact-icon {
          width: 70px;
          height: 70px;
          background: linear-gradient(135deg, #00ffcc 0%, #66d9ff 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
          margin: 0 auto 1.5rem;
          color: #0a1f2e;
      }

      .contact-card h3 {
          color: #0a1f2e;
          margin-bottom: 1rem;
          font-size: 1.3rem;
      }

      .contact-card p {
          color: #555;
          margin-bottom: 0.5rem;
      }

      .contact-card a {
          color: #00ffcc;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.3s;
      }

      .contact-card a:hover {
          color: #0a1f2e;
      }

      /* Form and Map Section */
      .form-map-section {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 3rem;
          margin-bottom: 3rem;
      }

      .inquiry-form {
          background: white;
          padding: 3rem;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }

      .inquiry-form h2 {
          color: #0a1f2e;
          margin-bottom: 1.5rem;
          font-size: 2rem;
      }

      .form-group {
          margin-bottom: 1.5rem;
      }

      .form-group label {
          display: block;
          margin-bottom: 0.5rem;
          color: #0a1f2e;
          font-weight: 500;
      }

      .form-group input,
      .form-group textarea,
      .form-group select {
          width: 100%;
          padding: 0.8rem;
          border: 2px solid #e0e0e0;
          border-radius: 8px;
          font-size: 1rem;
          font-family: inherit;
          transition: border-color 0.3s;
      }

      .form-group input:focus,
      .form-group textarea:focus,
      .form-group select:focus {
          outline: none;
          border-color: #00ffcc;
      }

      .form-group textarea {
          resize: vertical;
          min-height: 120px;
      }

      .submit-btn {
          width: 100%;
          padding: 1rem 2rem;
          background: linear-gradient(135deg, #00ffcc 0%, #66d9ff 100%);
          color: #0a1f2e;
          border: none;
          border-radius: 50px;
          font-size: 1.1rem;
          font-weight: bold;
          cursor: pointer;
          transition: transform 0.3s, box-shadow 0.3s;
      }

      .submit-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 30px rgba(0, 255, 204, 0.4);
      }

      /* Map Section */
      .map-section {
          background: white;
          padding: 3rem;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }

      .map-section h2 {
          color: #0a1f2e;
          margin-bottom: 1.5rem;
          font-size: 2rem;
      }

      .map-container {
          width: 100%;
          height: 400px;
          border-radius: 10px;
          overflow: hidden;
          border: 2px solid #e0e0e0;
      }

      .map-container iframe {
          width: 100%;
          height: 100%;
          border: none;
      }

      /* Social Media Section */
      .social-link-s {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.social-link-s {
    display: flex;
    /* gap: 1rem; */
    margin-top: 1rem;
}
      .social-section {
          background: white;
          padding: 3rem;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
          text-align: center;
      }

      .social-section h2 {
          color: #0a1f2e;
          margin-bottom: 1.5rem;
          font-size: 2rem;
      }

      .social-section p {
          color: #555;
          margin-bottom: 2rem;
          font-size: 1.1rem;
      }

      img.social-icon-img {
    width: 60px;
}

      .social-link-2 {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #0a1f2e;
          text-decoration: none;
          font-size: 1.8rem;
          transition: transform 0.3s, box-shadow 0.3s;
      }

      .social-link-2:hover {
          transform: translateY(-5px) scale(1.1);
          box-shadow: 0 10px 30px rgba(0, 255, 204, 0.4);
      }

      /* Responsive Design */
      @media (max-width: 968px) {
          .page-header h1 {
              font-size: 2rem;
          }

          .form-map-section {
              grid-template-columns: 1fr;
          }

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

          .inquiry-form,
          .map-section {
              padding: 2rem;
          }

          .map-container {
              height: 300px;
          }
      }
      img.contact-icon-tri {
    width: 55%;
}