@charset "UTF-8";
/* EX-IM · contact.css · the Contact page (load after inner.css, whose dark form fields, title and gradient submit
   button it uses). Reach Us beside the message form, the offices with their maps, and the demo call to action, in
   the site's dark cards with the brand gradient on the headings. Phone rules sit under @media (max-width: 767.98px). */

.ct { position: relative; padding: 48px 16px 110px; color: #fff; font-family: Inter, system-ui, sans-serif; }
.ct * { box-sizing: border-box; }
.ct__wrap { max-width: 1260px; margin: 0 auto; }
.ct .section-title { margin-bottom: 44px; }

/* cards: dark glass with a hairline rim */
.ct-card { position: relative; padding: 32px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), #08090c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px -30px rgba(0, 0, 0, .9); }
.ct-card__title, .ct-office__head { position: relative; margin: 0; padding-left: 14px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.ct-card__title::before, .ct-office__head::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #FFBA6A, #D8D3FF 50%, #6FE2FF); }
.ct a:not(.ct-demo__btn) { color: #6FE2FF; text-decoration: none; }
.ct a:not(.ct-demo__btn):hover { text-decoration: underline; }

/* top: Reach Us beside the form */
.ct__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px; align-items: stretch; }
/* Reach Us runs the full height of the form beside it, its rows spread evenly down the card */
.ct-reach { display: flex; flex-direction: column; }

.ct-hours { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.ct-hours b { display: block; margin-bottom: 2px; font-weight: 600; color: #fff; }
.ct-hours span { display: block; }

.ct-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ct-chips > .ct-chip { flex: 1 1 0; }   /* the boxes share the card's height evenly */
/* the Reach Us heading repeated above each box after the first */
.ct-chips__head { margin-top: 10px; }
.ct-chips__head .ct-card__title { display: block; }
.ct-chip { display: flex; align-items: start; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.ct-chip__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 14px; color: #0A0B0E;
  background: linear-gradient(135deg, #FFBA6A, #D8D3FF 55%, #6FE2FF); }
.ct-chip small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .55); }
/* a second or third label in a box (Sales queries, Other queries, WhatsApp) stands apart from the numbers above it */
.ct-chip div small:not(:first-child) { margin-top: 14px; }
/* UAE: Sales and Other queries side by side, WhatsApp on the row below */
.ct-chip .ct-pairs { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 40px; row-gap: 14px; }
.ct-chip .ct-pairs > span { display: block; }
.ct-chip .ct-pairs small { margin-top: 0; }
.ct-chip div { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .45); word-break: break-word; }
.ct .ct-chip a { color: #fff; font-weight:500; white-space: nowrap; }   /* a number never breaks across lines */

/* the form: inner.css gives the dark fields and the gradient submit button */
.ct-form { padding: 32px 32px 36px; border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)) padding-box, linear-gradient(#08090c, #08090c) padding-box,
              linear-gradient(90deg, #FFBA6A -12%, #D8D3FF 50%, #6FE2FF 112%) border-box;
  box-shadow: 0 0 60px -20px rgba(111, 226, 255, .35); }
.ct-form__title { margin: 0 0 24px; text-align: center; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; color: #fff; }
.ct-form__title span { background: linear-gradient(90deg, #FFBA6A, #D8D3FF 50%, #6FE2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-form .form-label { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .78); }
.ct-form .gradient-input .form-control, .ct-form .gradient-input .form-select { height: 48px; font-size: 15px; }
.ct-form .gradient-input .ct-textarea { height: auto; min-height: 110px; padding-top: 12px; resize: vertical; }
.ct-opt { color: rgba(255, 255, 255, .45); font-weight: 400; }
.ct-check { margin: 4px 0 0; }
.ct-check .form-check-label { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.ct-privacy { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.ct-form .submit-btn { width: 300px; height: 54px; margin-top: 26px; font-size: 17px; }
.ct-form .submit-btn:disabled { opacity: .7; cursor: progress; transform: none; }
.ct-form .req-alert-msg { margin-bottom: 18px; border-radius: 12px; }

/* offices: address blocks, two of them with a map */
.ct-offices { margin-top: 20px; display: grid; gap: 28px; }
.ct-office { display: grid; gap: 14px; align-content: start; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* side by side, both address cards take the row's height; the map and its link sit at the foot, level across */
.ct-grid > .ct-addr { display: flex; flex-direction: column; }
.ct-grid > .ct-addr .ct-map { margin-top: auto; }
.ct-grid > .ct-addr p:has(+ .ct-map) { margin-bottom: 14px; }   /* space above the map, not between an address and its phone */
.ct-addr { padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.ct-addr p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
/* the office phone under an address */
.ct-addr .ct-addr__tel { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ct-addr__tel i { font-size: 12px; color: #6FE2FF; }
.ct .ct-addr__tel a { color: #fff; font-weight: 500; white-space: nowrap; }
.ct-map { display: block; width: 100%; height: 220px; margin-top: 14px; border: 0; border-radius: 12px; background: #0d0e12;
  filter: invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95); }    /* the light map, turned to the site's dark */
.ct-dir { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; }

/* demo call to action */
.ct-demo { margin-top: 88px; text-align: center; }
.ct-demo__title { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; color: #fff; }
.ct-demo__title span { background: linear-gradient(90deg, #FFBA6A, #D8D3FF 50%, #6FE2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-demo p { margin: 16px auto 0; max-width: 40em; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.ct-demo .ct-demo__ask { margin-top: 22px; font-weight: 600; color: #fff; }
.ct-demo__btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; margin-top: 18px; padding: 0 28px; border-radius: 999px; font: 600 16px/1 Inter, system-ui, sans-serif;
  color: #0A0B0E; text-decoration: none; background: linear-gradient(90deg, #FFBA6A, #D8D3FF 55%, #6FE2FF); box-shadow: 0 8px 24px -8px rgba(111, 226, 255, .6);
  transition: transform .25s ease, box-shadow .25s ease; }
.ct-demo__btn:hover { color: #0A0B0E; transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(111, 226, 255, .8); }
.ct-demo__btn svg { width: 14px; height: 14px; }
.ct-demo__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ct-rise { animation: ctRise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--dl, 0s); }
@keyframes ctRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ct-rise { animation: none; } .ct-demo__btn { transition: none; } }

@media (max-width: 991.98px) {
  .ct__top { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, ..) lets the column shrink to the screen; plain 1fr would not go below its widest content */
}
@media (max-width: 767.98px) {
  .ct { padding: 32px 16px 72px; }
  .ct .section-title { margin-bottom: 28px; }
  .ct-card { padding: 22px 18px; border-radius: 20px; }
  .ct-form { padding: 24px 18px 28px; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-form .submit-btn { width: 100%; }
  .ct-map { height: 200px; }
  .ct-demo { margin-top: 64px; }
}

/* phones: nothing wider than the screen. The cards and their contents may shrink (min-width: 0), the UAE pairs stack,
   and a list of numbers wraps between numbers - each number still stays on one line. */
.ct__top > *, .ct-chip > div { min-width: 0; }
@media (max-width: 767.98px) {
  .ct-chip .ct-pairs { grid-template-columns: minmax(0, 1fr); }
  .ct-chip { padding: 14px 12px; }
  .ct-chip div { font-size: 15px; }
}