.contact-section {
      padding: 80px 20px;
      max-width: 1300px;
      margin: auto;
    }

    .contact-header {
    text-align: center;
        margin-bottom: 50px;
        position: absolute;
        top: 35%;
        z-index: 10;
        left: 0;
        right: 0;
    }

    .contact-header h2 {
      font-size: 42px;
      color: #ffffff;
      margin-bottom: 10px;
      font-weight: 600;
    }

        .contact-header p {
            font-size: 18px;
            color: #ffffff;
            width: auto;
            text-align: center;
            margin: auto;
            font-weight: lighter;
        }
    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      padding: 40px;
      align-items: center;
    }

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

    .contact-left img {
      width: 100%;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .contact-info p {
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #004aad;
    }

    .contact-info i {
      font-size: 20px;
      color: #004aad;
    }

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

    .contact-right input,
    .contact-right textarea {
      padding: 14px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #fff;
      transition: all 0.3s ease;
    }

    .contact-right input:focus,
    .contact-right textarea:focus {
      outline: none;
      border-color: #0073e6;
      box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2);
    }

    .contact-right button {
      padding: 14px;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(to right, #004aad, #00b7ff);
      color: #fff;
      cursor: pointer;
      transition: background 0.3s ease-in-out;
    }

    .contact-right button:hover {
      background: linear-gradient(to right, #00367a, #0099cc);
    }

    iframe {
      margin-top: 20px;
      border: none;
      width: 100%;
      height: 200px;
      border-radius: 10px;
    }

    .sliders{
        height: 380px;
    }
      .sliders-main {
  position: relative;
  background-image: url('https://www.cloud4c.com/id/sites/id/files/2022-07/cloud4c-company-contact-1Desktop.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  width: 100%;
  height: 411px;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.sliders-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.24); /* Slightly darker overlay for better contrast */
  z-index: 2;
}


    @media (max-width: 900px) {
      .contact-wrapper {
        grid-template-columns: 1fr;
        padding: 30px;
      }

      .contact-left img {
        max-height: 250px;
        object-fit: cover;
      }
    }