:root {
  --bg-navy: #0c2d4e;
  --input-white: #ffffff;
  --text-label: #ffffff;
  --text-placeholder: #a0aec0;
  --required-red: #ff4d4d;
  --border-radius: 12px; /* Slightly more rounded for pixel perfect match */
}
 /* ── Validation Styles  */
        .field-group {
            position: relative;
        }

        .input-container input.invalid,
        .input-container textarea.invalid {
            border: 1.5px solid #e53e3e !important;
            background-color: #fff5f5;
        }

        .input-container input.valid,
        .input-container textarea.valid {
            border: 1.5px solid #38a169 !important;
            background-color: #f0fff4;
        }

        .custom-select.invalid .select-trigger {
            border: 1.5px solid #e53e3e !important;
            background-color: #fff5f5;
        }

        .custom-select.valid .select-trigger {
            border: 1.5px solid #38a169 !important;
            background-color: #f0fff4;
        }

        .error-msg {
            display: block;
            color: #e53e3e;
            font-size: 12px;
            margin-top: 4px;
            margin-left: 2px;
            min-height: 16px;
            font-weight: 500;
        }

        .error-msg:empty {
            display: none;
        }

        /* Valid tick icon inside input */
        .input-container .valid-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #38a169;
            font-size: 13px;
            pointer-events: none;
        }

        .input-container {
            position: relative;
        }

        /* Form message toast */
        #formMessage {
            margin-top: 14px;
            padding: 12px 18px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            transition: all 0.3s ease;
        }
.page-title-banner {
  background: linear-gradient(
    0deg,
    rgba(31, 50, 113, 1) 0%,
    rgba(53, 127, 194, 1) 100%
  );
}
/* Base Wrapper */
.page-contact-wrapper {
  background-color: var(--bg-navy);
  padding: 100px 0;
}

.contact-box h2 {
  color: white;
  font-size: 42px;
  margin-bottom: 40px;
}

/* Grid Layout - Fixed for Enquiry Type */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* Controlled spacing */
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Remove full-width from Enquiry Type */
/* This ensures it stays in the left column */
.field-group.enquiry-half {
  grid-column: span 1;
  margin-top: 0px;
}

.full-width {
  grid-column: span 2;
  margin-top: 25px;
}

label {
  color: var(--text-label);
  font-size: 18px;
  font-weight: 500;
}

.required {
  color: var(--required-red);
  margin-left: 4px;
}

/* Inputs & Icons */
.input-container {
  position: relative;
  width: 100%;
}

.icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-placeholder);
  font-size: 16px;
}

#contactForm input,
#contactForm textarea,
.select-trigger {
  width: 100%;
  padding: 18px 20px 18px 50px;
  border-radius: var(--border-radius);
  border: none;
  background: var(--input-white);
  font-size: 16px;
  outline: none;
  color: #B1B4BA;
font-family: 'Inter';
}

#contactForm .no-icon textarea {
  padding-left: 20px;
  height: 60px;
  resize: none;
}

/* Pixel Perfect Custom Dropdown */
.custom-select {
  position: relative;
  cursor: pointer;
}

.select-trigger {
  padding-left: 20px; /* No icon on select trigger usually */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*color: var(--text-placeholder);*/
}

.arrow {
  color: #cbd5e0;
  font-size: 20px; /* Heavy chevron match */
}

.options-container {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: white;
  border-radius: var(--border-radius);
  display: none;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.custom-select.open .options-container {
  display: block;
}

.option {
  padding: 15px 20px;
  color: #a0aec0;
  font-size: 15px;
  border-bottom: 1px solid #edf2f7; /* Divider lines from image_100779.png */
}

.option:last-child {
  border-bottom: none;
}

.option:hover {
  background-color: #f8fafc;
  color: var(--bg-navy);
}

/* Submit Button */
.btn-submit {
  margin-top: 40px;
  background: transparent;
  border: 1.5px solid white;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.3s ease;
}

.btn-submit:hover {
  background: white;
  color: var(--bg-navy);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field-group.enquiry-half,
  .full-width {
    grid-column: span 1;
  }
}