/* =========================================================
   COMPLETE CONTACT PAGE
========================================================= */

.igi-contact-page {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 14%,
      var(--color-008fd5-alpha-12),
      var(--color-transparent) 30%
    ),
    radial-gradient(
      circle at 8% 52%,
      var(--color-003c89-alpha-08),
      var(--color-transparent) 31%
    ),
    radial-gradient(
      circle at 78% 88%,
      var(--color-008fd5-alpha-07),
      var(--color-transparent) 35%
    ),
    var(--color-page-background);

  color: var(--color-white);

  isolation: isolate;
}

/* =========================================================
   IMPORTANT
   Both internal sections remain transparent.

   This is what prevents the background/glow from being
   visibly cut between Contact Information and the form.
========================================================= */

.contact-information-section,
.contact-form-section {
  position: relative;

  z-index: 2;

  background: var(--color-transparent);
}

/* =========================================================
   CONTINUOUS PAGE GLOWS
========================================================= */

.contact-page-glow {
  position: absolute;

  z-index: 0;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(90px);
}

.contact-page-glow-one {
  width: 680px;
  height: 680px;

  right: -300px;
  top: 160px;

  background: var(--color-008fd5-alpha-12);
}

.contact-page-glow-two {
  width: 600px;
  height: 600px;

  left: -300px;
  top: 900px;

  background: var(--color-003c89-alpha-1);
}

.contact-page-glow-three {
  width: 760px;
  height: 760px;

  right: -350px;
  bottom: 40px;

  background: var(--color-008fd5-alpha-09);
}

/* =========================================================
   CONTACT INFORMATION SECTION
========================================================= */

.contact-information-section {
  padding: 140px 0 100px;
}

/* =========================================================
   MAIN HEADING
========================================================= */

.contact-main-heading {
  max-width: 750px;

  margin-bottom: 90px;
}

.contact-eyebrow {
  display: block;

  margin-bottom: 20px;

  color: var(--color-text-dark);

  font-size: var(--font-size-12);

  line-height: 1.4;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;
}

.contact-main-heading h2 {
  margin: 0;

  color: var(--color-white);

  font-size: var(--font-size-54);

  line-height: 1.08;

  font-weight: 600;

  letter-spacing: -1.8px;
}

.contact-main-heading > p {
  max-width: 580px;

  margin: 25px 0 0;

  color: var(--color-text-muted);

  font-size: var(--font-size-16);

  line-height: 1.8;
}

/* =========================================================
   HEAD OFFICE GRID
========================================================= */

.contact-head-grid {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.72fr)
    minmax(500px, 1.28fr);

  gap: 80px;

  align-items: stretch;

  padding-bottom: 120px;
}

/* =========================================================
   HEAD OFFICE
========================================================= */

.contact-head-office {
  position: relative;

  padding-top: 5px;
}

.contact-location-number {
  display: block;

  color: color-mix(
    in srgb,
    var(--color-brand-primary) 35%,
    var(--color-transparent)
  );

  font-size: var(--font-size-13);

  font-weight: 700;

  letter-spacing: 2px;
}

.contact-location-label {
  display: block;

  margin-top: 20px;

  color: var(--color-text-dark);

  font-size: var(--font-size-11);

  font-weight: 700;

  letter-spacing: 2px;
}

.contact-head-office h3 {
  margin: 16px 0 24px;

  color: var(--color-white);

  font-size: var(--font-size-38);

  line-height: 1.2;

  font-weight: 500;
}

.contact-office-address {
  max-width: 450px;

  margin: 0;

  color: var(--color-text-muted);

  font-size: var(--font-size-15);

  line-height: 1.8;
}

/* =========================================================
   HEAD OFFICE LINKS
========================================================= */

.contact-office-links {
  display: grid;

  margin-top: 42px;
}

.contact-office-links > a {
  min-height: 76px;

  display: flex;

  align-items: center;

  gap: 17px;

  color: var(--color-white);

  text-decoration: none;

  border-top: 1px solid var(--color-ffffff-alpha-09);

  transition:
    padding-left 0.3s ease,
    border-color 0.3s ease;
}

.contact-office-links > a:last-child {
  border-bottom: 1px solid var(--color-ffffff-alpha-09);
}

.contact-office-links > a:hover {
  padding-left: 8px;

  border-top-color: var(--color-008fd5-alpha-45);
}

.contact-office-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--border-radius-full);

  background: var(--color-008fd5-alpha-08);

  border: 1px solid var(--color-008fd5-alpha-2);

  color: var(--color-brand-primary);
}

.contact-office-detail {
  display: block;
}

.contact-office-detail small {
  display: block;

  margin-bottom: 5px;

  color: var(--color-text-dark);

  font-size: var(--font-size-10);

  font-weight: 600;

  letter-spacing: 1.4px;
}

.contact-office-detail strong {
  display: block;

  color: var(--color-white);

  font-size: var(--font-size-14);

  font-weight: 500;

  line-height: 1.5;
}

/* =========================================================
   MAP
========================================================= */

.contact-map-area {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  border-radius: var(--border-radius-medium);

  border: 1px solid var(--color-ffffff-alpha-1);

  background: var(--color-ffffff-alpha-025);

  box-shadow: 0 30px 70px var(--color-000000-alpha-28);
}

.contact-map-header {
  position: absolute;

  z-index: 5;

  top: 20px;
  left: 20px;
  right: 20px;

  min-height: 70px;

  padding: 15px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border: 1px solid var(--color-ffffff-alpha-11);

  border-radius: var(--border-radius-small);

  background: var(--color-010307-alpha-88);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);
}

.contact-map-header span {
  display: block;

  margin-bottom: 5px;

  color: var(--color-brand-primary);

  font-size: var(--font-size-9);

  font-weight: 700;

  letter-spacing: 1.8px;
}

.contact-map-header strong {
  color: var(--color-white);

  font-size: var(--font-size-14);

  font-weight: 500;
}

.contact-map-header a {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--color-brand-primary);

  text-decoration: none;

  font-size: var(--font-size-12);

  transition: 0.3s ease;
}

.contact-map-header a:hover {
  color: var(--color-white);
}

.contact-map {
  display: block;

  width: 100%;

  min-height: 520px;

  height: 100%;

  border: 0;

  filter: saturate(0.8) contrast(1.02);
}

/* =========================================================
   BRANCH NETWORK HEADING
========================================================= */

.contact-branches-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 50px;

  padding-bottom: 30px;

  border-bottom: 1px solid var(--color-ffffff-alpha-1);
}

.contact-branches-heading span {
  display: block;

  margin-bottom: 12px;

  color: var(--color-text-dark);

  font-size: var(--font-size-10);

  font-weight: 700;

  letter-spacing: 2px;
}

.contact-branches-heading h3 {
  margin: 0;

  color: var(--color-white);

  font-size: var(--font-size-32);

  line-height: 1.2;

  font-weight: 500;
}

.contact-branches-heading > p {
  max-width: 330px;

  margin: 0;

  color: var(--color-text-dark);

  font-size: var(--font-size-13);

  line-height: 1.7;
}

/* =========================================================
   BRANCH GRID
========================================================= */

.contact-branches-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  column-gap: 55px;

  row-gap: 70px;

  padding-top: 58px;
}

/* =========================================================
   BRANCH ITEM
   Intentionally NOT designed as a box/card.
========================================================= */

.contact-branch-item {
  position: relative;

  min-height: 270px;

  padding-top: 5px;
}

.contact-branch-item h4 {
  margin: 18px 0 16px;

  color: var(--color-white);

  font-size: var(--font-size-22);

  line-height: 1.3;

  font-weight: 500;
}

.contact-branch-line {
  position: relative;

  display: block;

  width: 100%;

  height: 1px;

  margin-bottom: 24px;

  background: var(--color-ffffff-alpha-1);
}

.contact-branch-line::before {
  content: "";

  position: absolute;

  left: 0;

  top: -1px;

  width: 45px;

  height: 3px;

  border-radius: var(--border-radius-full);

  background: var(--gradient-brand);
}

.contact-branch-item > p,
.contact-sub-location > p {
  margin: 0 0 18px;

  color: var(--color-text-muted);

  font-size: var(--font-size-13);

  line-height: 1.8;
}

/* =========================================================
   SEPARATE PHONE NUMBERS
========================================================= */

.contact-branch-phone-list {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 7px;
}

.contact-branch-phone-list a {
  display: inline-flex;

  color: var(--color-white);

  font-size: var(--font-size-13);

  line-height: 1.5;

  font-weight: 500;

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.contact-branch-phone-list a:hover {
  color: var(--color-brand-primary);

  transform: translateX(3px);
}

/* =========================================================
   LAHORE SECOND LOCATION
========================================================= */

.contact-sub-location {
  margin-top: 27px;

  padding-top: 24px;

  border-top: 1px solid var(--color-ffffff-alpha-07);
}

.contact-sub-location > strong {
  display: block;

  margin-bottom: 11px;

  color: var(--color-white);

  font-size: var(--font-size-13);

  font-weight: 600;
}

/* =========================================================
   FORM SECTION
   NO BACKGROUND RESET HERE.

   This keeps the entire page in one visual flow.
========================================================= */

.contact-form-section {
  position: relative;

  padding: 90px 0 150px;
}

/* =========================================================
   LARGE BACKGROUND WORD
========================================================= */

.contact-background-word {
  position: absolute;

  z-index: 0;

  right: -60px;

  bottom: -50px;

  color: var(--color-ffffff-alpha-018);

  font-size: var(--font-size-180);

  line-height: 1;

  font-weight: 700;

  letter-spacing: -8px;

  pointer-events: none;
}

/* =========================================================
   FORM LAYOUT
========================================================= */

.contact-form-layout {
  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(500px, 1.28fr);

  gap: 110px;

  align-items: start;

  padding-top: 85px;

  border-top: 1px solid var(--color-ffffff-alpha-08);
}

/* =========================================================
   FORM INTRO
========================================================= */

.contact-form-content {
  position: sticky;

  top: 120px;
}

.contact-form-content h2 {
  margin: 0 0 30px;

  color: var(--color-white);

  font-size: var(--font-size-50);

  line-height: 1.08;

  font-weight: 600;

  letter-spacing: -1.6px;
}

.contact-form-content > p {
  max-width: 420px;

  margin: 0;

  color: var(--color-text-muted);

  font-size: var(--font-size-15);

  line-height: 1.8;
}

/* =========================================================
   CUSTOMER SUPPORT
========================================================= */

.contact-support-details {
  display: grid;

  gap: 9px;

  margin-top: 55px;

  padding-top: 25px;

  border-top: 1px solid var(--color-ffffff-alpha-1);
}

.contact-support-details > span {
  margin-bottom: 5px;

  color: var(--color-text-dark);

  font-size: var(--font-size-10);

  font-weight: 600;

  letter-spacing: 1.8px;
}

.contact-support-details a {
  width: fit-content;

  color: var(--color-white);

  font-size: var(--font-size-14);

  text-decoration: none;

  transition: color 0.25s ease;
}

.contact-support-details a:hover {
  color: var(--color-brand-primary);
}

/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 40px;

  row-gap: 48px;
}

.contact-form-field {
  position: relative;
}

.contact-field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   LABELS
========================================================= */

.contact-form-field label {
  display: block;

  margin-bottom: 14px;

  color: var(--color-text-dark);

  font-size: var(--font-size-11);

  line-height: 1.4;

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.contact-form-field label span {
  color: var(--color-brand-primary);
  font-size: var(--font-size-14);
}

/* =========================================================
   INPUTS
========================================================= */

.contact-form-field input,
.contact-form-field textarea {
  width: 100%;

  padding: 0 0 18px;

  border: 0;

  border-bottom: 1px solid var(--color-ffffff-alpha-19);

  border-radius: 0;

  outline: none;

  background: var(--color-transparent);

  color: var(--color-white);

  font-family: inherit;

  font-size: var(--font-size-18);

  line-height: 1.5;

  box-shadow: none;

  transition: border-color 0.3s ease;
}

.contact-form-field textarea {
  min-height: 155px;

  resize: vertical;

  line-height: 1.75;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: var(--color-text-muted);

  opacity: 0.35;
}

/* =========================================================
   INPUT ANIMATED LINE
========================================================= */

.contact-input-line {
  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 2px;

  border-radius: var(--border-radius-full);

  background: var(--gradient-brand);

  transition: width 0.35s ease;
}

.contact-form-field:focus-within .contact-input-line {
  width: 100%;
}

/* =========================================================
   FORM ERROR
========================================================= */

.contact-form-field.has-error input,
.contact-form-field.has-error textarea {
  border-color: var(--color-danger);
}

.contact-form-field.has-error .contact-input-line {
  width: 100%;

  background: var(--color-danger);
}

.contact-error {
  position: absolute;

  left: 0;

  bottom: -23px;

  color: var(--color-danger);

  font-size: var(--font-size-10);

  line-height: 1.4;
}

/* =========================================================
   FORM FOOTER
========================================================= */

.contact-form-footer {
  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 17px;
}

.contact-form-footer > span {
  color: var(--color-text-dark);

  font-size: var(--font-size-11);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit-btn {
  min-width: 220px;

  height: 58px;

  padding: 0 27px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  border: 0;

  border-radius: var(--border-radius-full);

  outline: none;

  background: var(--gradient-brand);

  color: var(--color-white);

  font-family: inherit;

  font-size: var(--font-size-14);

  font-weight: 500;

  cursor: pointer;

  box-shadow: 0 14px 35px var(--color-008fd5-alpha-18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-3px);

  box-shadow: 0 18px 45px var(--color-008fd5-alpha-28);
}

.contact-submit-btn i {
  transition: transform 0.3s ease;
}

.contact-submit-btn:hover i {
  transform: translateX(5px);
}

/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.contact-success-message {
  grid-column: 1 / -1;

  display: none;

  align-items: center;

  gap: 15px;

  margin-top: 5px;

  padding-top: 25px;

  border-top: 1px solid var(--color-34a853-alpha-25);
}

.contact-success-message.show {
  display: flex;
}

.contact-success-icon {
  width: 38px;

  height: 38px;

  flex: 0 0 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--color-34a853-alpha-27);

  border-radius: var(--border-radius-full);

  background: var(--color-34a853-alpha-08);

  color: var(--color-success);
}

.contact-success-message strong {
  display: block;

  margin-bottom: 3px;

  color: var(--color-white);

  font-size: var(--font-size-13);
}

.contact-success-message p {
  margin: 0;

  color: var(--color-text-muted);

  font-size: var(--font-size-11);
}

/* =========================================================
   INITIAL GSAP STATE
========================================================= */

.contact-reveal {
  opacity: 0;

  transform: translateY(35px);
}

/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1200px) {
  .contact-head-grid {
    grid-template-columns: 0.85fr 1.15fr;

    gap: 55px;
  }

  .contact-branches-grid {
    column-gap: 40px;
  }

  .contact-form-layout {
    grid-template-columns: 0.8fr 1.2fr;

    gap: 70px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {
  .contact-information-section {
    padding: 110px 0 80px;
  }

  .contact-main-heading {
    margin-bottom: 65px;
  }

  .contact-main-heading h2 {
    font-size: var(--font-size-46);
  }

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

    gap: 55px;

    padding-bottom: 90px;
  }

  .contact-head-office {
    max-width: 680px;
  }

  .contact-map-area,
  .contact-map {
    min-height: 460px;
  }

  .contact-branches-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 60px 40px;
  }

  .contact-form-section {
    padding: 70px 0 110px;
  }

  .contact-form-layout {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .contact-form-content {
    position: static;

    max-width: 670px;
  }

  .contact-form-content h2 {
    font-size: var(--font-size-44);
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {
  .contact-information-section {
    padding: 75px 0 60px;
  }

  .contact-main-heading {
    margin-bottom: 50px;
  }

  .contact-main-heading h2 {
    font-size: var(--font-size-36);

    letter-spacing: -1px;
  }

  .contact-main-heading > p {
    font-size: var(--font-size-14);
  }

  .contact-head-grid {
    gap: 45px;

    padding-bottom: 70px;
  }

  .contact-location-label {
    margin-top: 25px;
  }

  .contact-head-office h3 {
    font-size: var(--font-size-30);
  }

  .contact-office-address {
    font-size: var(--font-size-13);
  }

  .contact-office-links {
    margin-top: 32px;
  }

  .contact-office-links > a {
    min-height: 70px;
  }

  .contact-office-detail strong {
    font-size: var(--font-size-12);
  }

  .contact-map-area,
  .contact-map {
    min-height: 390px;
  }

  .contact-map-header {
    top: 12px;
    left: 12px;
    right: 12px;

    min-height: 62px;

    padding: 11px 12px;
  }

  .contact-map-header strong {
    font-size: var(--font-size-12);
  }

  .contact-map-header a {
    font-size: var(--font-size-10);
  }

  .contact-branches-heading {
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
  }

  .contact-branches-heading h3 {
    font-size: var(--font-size-28);
  }

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

    gap: 48px;

    padding-top: 45px;
  }

  .contact-branch-item {
    min-height: auto;
  }

  .contact-form-section {
    padding: 50px 0 90px;
  }

  .contact-form-layout {
    padding-top: 65px;

    gap: 55px;
  }

  .contact-form-content h2 {
    font-size: var(--font-size-36);

    letter-spacing: -1px;
  }

  .contact-form-content > p {
    font-size: var(--font-size-13);
  }

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

    row-gap: 43px;
  }

  .contact-form-field,
  .contact-field-full {
    grid-column: 1;
  }

  .contact-form-field input,
  .contact-form-field textarea {
    font-size: var(--font-size-16);
  }

  .contact-form-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .contact-submit-btn {
    width: 100%;
  }

  .contact-background-word {
    right: -30px;

    font-size: var(--font-size-100);
  }

  .contact-page-glow-one,
  .contact-page-glow-two,
  .contact-page-glow-three {
    transform: scale(0.7);
  }
}