/* Contact page brand skin.
   The downloaded Webflow stylesheet owns all layout measurements and animations. */
:root {
  --white: #ffffff;
  --grey-40--hover: rgba(106, 69, 137, 0.4);
  --grey-101: #f1e7ff;
  --grey-25--border: rgba(106, 69, 137, 0.25);
  --grey-100: #80649a;
  --accent: #9c5cff;
  --black: #160d21;
  --grey-5: rgba(106, 69, 137, 0.05);
  --grey-10-101: rgba(106, 69, 137, 0.1);
  --grey-90--text-gray: rgba(106, 69, 137, 0.9);
  --light-background: #d8b4fe;
  --switch-button-gray: rgba(106, 69, 137, 0.6);
  --background: #28153b;
  --black-trans: rgba(22, 13, 33, 0.86);
  --link: #a970ff;
}

.body {
  background-color: var(--background);
}

/* Same 83 x 29 footprint as the reference navigation logo. */
.maryam-nav-mark {
  display: flex;
  align-items: center;
  width: 83px;
  height: 29px;
  color: var(--grey-101);
  font-family: "Degular display", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.72;
  text-transform: uppercase;
}

.maryam-loader-mark {
  color: var(--black);
  font-family: "Degular display", Arial, sans-serif;
  font-size: clamp(26px, 4vw, 64px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.72;
  text-align: center;
  text-transform: uppercase;
}

/* Reference curtain sequence:
   1. the lower curve starts folded at 85deg;
   2. it unfolds for 400ms;
   3. the complete curtain travels to -130% for 1000ms. */
.loader {
  background-color: var(--light-background);
  display: block !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
  will-change: transform;
}

.loader-bottom-img {
  background-image: url("../images/ui/loader-down-purple.svg");
  display: block !important;
  transform-origin: 50% 0;
  transform: perspective(1000px) rotateX(85deg) !important;
  transition: none !important;
  backface-visibility: hidden;
  will-change: transform;
}

body.loader-curve-open .loader-bottom-img {
  transform: perspective(1000px) rotateX(0deg) !important;
  transition: transform 400ms cubic-bezier(.215, .61, .355, 1) !important;
}

body.loader-exit .loader {
  transform: translate3d(0, -130%, 0) !important;
  transition: transform 1000ms cubic-bezier(.455, .03, .515, .955) !important;
}

body.loader-finished .loader {
  display: none !important;
}

/* Pin the custom cursor's center to the native pointer coordinates. */
.cursor-wrap.mbm-ex {
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  opacity: 0;
  display: flex;
  pointer-events: none;
  transform: translate3d(var(--cursor-x, -40px), var(--cursor-y, -40px), 0) !important;
  transition: opacity 160ms ease;
  will-change: transform;
}

body.cursor-visible .cursor-wrap.mbm-ex {
  opacity: 1;
}

.cursor-dot {
  position: absolute;
  inset: 0 auto auto 0;
  width: 11px;
  height: 11px;
  filter: none;
  background-color: rgba(255, 255, 255, 0.82);
  border: 1px solid #ffffff;
  mix-blend-mode: exclusion;
  transform: translate3d(-50%, -50%, 0) !important;
  transition: width 500ms cubic-bezier(.22, 1, .36, 1),
              height 500ms cubic-bezier(.22, 1, .36, 1),
              background-color 300ms ease;
}

body.cursor-active .cursor-dot {
  width: 55px !important;
  height: 55px !important;
  background-color: rgba(238, 236, 204, 0.12) !important;
}

@media (pointer: coarse), (max-width: 767px) {
  .body,
  .section-7.is-contact {
    background-color: var(--background) !important;
  }

  .cursor-wrap,
  .cursor-dot {
    display: none !important;
  }
}
/* Shared Iconify social links for navigation and page footers. */
.maryam-socials {
  gap: 12px;
}

.maryam-social-link {
  color: var(--grey-101, #f4eaff);
  border: 1px solid rgba(244, 234, 255, .42);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  display: inline-flex;
}

.maryam-social-link iconify-icon {
  font-size: 21px;
}

body .navbar-1-menu .maryam-social-link,
body .contact-container-2 .maryam-social-link {
  color: #000;
  border-color: #000;
}

@media (min-width: 992px) {
  .maryam-social-link {
    transition: color .35s ease, background-color .35s ease, border-color .35s ease,
      transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
  }

  .maryam-social-link:hover {
    color: #28153b;
    background-color: #ead8ff;
    border-color: #ead8ff;
    transform: translateY(-5px) rotate(-7deg) scale(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  }

  /* body .maryam-socials .maryam-social-link:nth-child(1):hover {
    color: #fff;
    background-color: #d62976;
    background-image: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
    border-color: #ee2a7b;
  } */

  body .maryam-socials .maryam-social-link:nth-child(1):hover {
    color: #fff;
    background-color: #0a66c2;
    border-color: #0a66c2;
  }

  body .maryam-socials .maryam-social-link:nth-child(2):hover {
    color: #fff;
    background-color: #1769ff;
    border-color: #1769ff;
  }
}