.elementor-247 .elementor-element.elementor-element-8e2cecc{--display:flex;--margin-top:12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-0c5d487 *//* =====================================================
   SARAYE SHAHR - CONTACT PAGE
===================================================== */

.sara-contact-page {

  --sara-primary:
    var(--e-global-color-primary, #E5232A);

  --sara-secondary:
    var(--e-global-color-secondary, #181818);

  --sara-text:
    var(--e-global-color-text, #666666);

  --sara-accent:
    var(--e-global-color-accent, #C91820);

  --sara-border:
    var(--e-global-color-2dedf91, #E8E8E8);

  width: 100%;

  font-family: inherit;

  color:
    var(--sara-secondary);
}


.sara-contact-page *,
.sara-contact-page *::before,
.sara-contact-page *::after {
  box-sizing: border-box;
}


/* =====================================================
   HERO
===================================================== */

.sara-contact-hero {

  position: relative;

  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  align-items: center;

  gap: 55px;

  min-height: 500px;

  padding: 70px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fffafa 50%,
      #fff2f2 100%
    );

  border:
    1px solid rgba(229,35,42,.08);

  border-radius:
    32px;
}


.sara-contact-hero::before {

  content: "";

  position: absolute;

  width: 550px;
  height: 550px;

  left: -270px;
  bottom: -300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(229,35,42,.20),
      rgba(229,35,42,.06) 45%,
      transparent 70%
    );

  filter: blur(18px);
}


.sara-contact-hero::after {

  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -100px;
  top: -100px;

  border-radius: 50%;

  background:
    rgba(229,35,42,.04);
}


.sara-contact-hero__content {

  position: relative;

  z-index: 2;
}


.sara-contact-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  color:
    var(--sara-primary);

  font-weight: 700;
}


.sara-contact-eyebrow::before {

  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--sara-primary);

  box-shadow:
    0 0 0 6px
    rgba(229,35,42,.08);
}


.sara-contact-hero h1 {

  max-width: 720px;

  margin:
    0 0 20px;

  line-height: 1.35;

  color:
    var(--sara-secondary);

  font-weight: 800;
}


.sara-contact-hero h1 span {

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


.sara-contact-hero__content > p {

  max-width: 650px;

  margin: 0;

  color:
    var(--sara-text);

  line-height: 2;
}


.sara-contact-hero__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


/* =====================================================
   BUTTONS
===================================================== */

.sara-contact-btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    0 25px;

  border-radius:
    12px;

  font-family: inherit;

  font-weight: 600;

  text-decoration:
    none !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.sara-contact-btn--primary {

  color: #fff !important;

  background:
    var(--sara-primary);

  border:
    1px solid var(--sara-primary);

  box-shadow:
    0 10px 25px
    rgba(229,35,42,.18);
}


.sara-contact-btn--primary:hover {

  background:
    var(--sara-accent);

  transform:
    translateY(-2px);

  box-shadow:
    0 16px 30px
    rgba(229,35,42,.24);
}


.sara-contact-btn--secondary {

  color:
    var(--sara-secondary) !important;

  background:
    #fff;

  border:
    1px solid var(--sara-border);
}


.sara-contact-btn--secondary:hover {

  color:
    var(--sara-primary) !important;

  background:
    #fff5f5;

  border-color:
    rgba(229,35,42,.25);
}


/* =====================================================
   HERO VISUAL
===================================================== */

.sara-contact-hero__visual {

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  z-index: 2;
}


.sara-contact-hero-card {

  position: relative;

  width: 100%;

  max-width: 440px;

  padding:
    38px;

  overflow: hidden;

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #202020,
      #101010
    );

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    26px;

  box-shadow:
    0 28px 70px
    rgba(24,24,24,.18);
}


.sara-contact-hero-card::before {

  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  left: -80px;
  top: -100px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(229,35,42,.60),
      rgba(229,35,42,.10) 50%,
      transparent 72%
    );

  filter: blur(18px);
}


.sara-contact-hero-card > * {

  position: relative;

  z-index: 2;
}


.sara-contact-hero-card__label {

  display: block;

  margin-bottom: 12px;

  color:
    rgba(255,255,255,.55);
}


.sara-contact-hero-card strong {

  display: block;

  font-size: 24px;

  line-height: 1.7;
}


.sara-contact-hero-card p {

  margin:
    14px 0 0;

  color:
    rgba(255,255,255,.6);

  line-height: 1.9;
}


.sara-contact-hero-card__line {

  height: 1px;

  margin:
    28px 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );
}


.sara-contact-hero-card > a {

  color:
    #fff !important;

  font-size: 26px;

  font-weight: 700;

  text-decoration: none !important;
}


/* =====================================================
   CONTACT METHODS
===================================================== */

.sara-contact-methods {

  display: grid;

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

  gap: 16px;

  padding:
    80px 20px;
}


.sara-contact-method {

  position: relative;

  padding:
    28px;

  overflow: hidden;

  background: #fff;

  border:
    1px solid var(--sara-border);

  border-radius:
    20px;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.sara-contact-method:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(229,35,42,.25);

  box-shadow:
    0 18px 40px
    rgba(24,24,24,.06);
}


.sara-contact-method::before {

  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  left: -60px;
  top: -60px;

  border-radius: 50%;

  background:
    rgba(229,35,42,.05);
}


.sara-contact-method__icon {

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  margin-bottom:
    22px;

  background:
    #fff3f3;

  border-radius:
    14px;
}


.sara-contact-method__icon svg {

  width: 24px;
  height: 24px;

  fill:
    var(--sara-primary);
}


.sara-contact-method > span {

  display: block;

  color:
    var(--sara-text);

  margin-bottom: 7px;
}


.sara-contact-method > strong {

  display: block;

  margin-bottom: 8px;

  color:
    var(--sara-secondary);

  font-size: 18px;
}


.sara-contact-method > p {

  margin:
    0 0 8px;

  color:
    var(--sara-text);

  line-height: 1.9;
}


.sara-contact-method > a {

  display: inline-block;

  margin-top: 8px;

  color:
    var(--sara-primary) !important;

  font-weight: 600;

  text-decoration: none !important;
}


/* =====================================================
   MAIN FORM SECTION
===================================================== */

.sara-contact-main {

  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 30px;

  align-items: stretch;

  padding:
    30px;

  background:
    #fafafa;

  border:
    1px solid var(--sara-border);

  border-radius:
    28px;
}


.sara-contact-main__intro {

  position: relative;

  padding:
    35px;
}


.sara-contact-section-label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

  color:
    var(--sara-primary);

  font-weight: 700;
}


.sara-contact-section-label::before {

  content: "";

  width: 24px;
  height: 3px;

  border-radius: 999px;

  background:
    var(--sara-primary);
}


.sara-contact-main h2 {

  margin:
    0 0 15px;

  color:
    var(--sara-secondary);

  line-height: 1.55;
}


.sara-contact-main__intro > p {

  margin: 0;

  color:
    var(--sara-text);

  line-height: 2;
}


.sara-contact-info-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top:
    35px;
}


.sara-contact-info-list > div {

  display: flex;

  align-items: center;

  gap: 13px;

  padding:
    13px 15px;

  background:
    rgba(255,255,255,.75);

  border:
    1px solid var(--sara-border);

  border-radius:
    12px;
}


.sara-contact-info-list span {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  color:
    var(--sara-primary);

  background:
    #fff3f3;

  border-radius:
    9px;

  font-weight: 700;
}


.sara-contact-info-list p {

  margin: 0;

  color:
    var(--sara-secondary);
}


/* FORM CARD */

.sara-contact-form-card {

  padding:
    36px;

  background:
    #fff;

  border:
    1px solid var(--sara-border);

  border-radius:
    22px;

  box-shadow:
    0 15px 40px
    rgba(24,24,24,.05);
}


.sara-contact-form-card__head {

  display: flex;

  flex-direction: column;

  margin-bottom:
    28px;
}


.sara-contact-form-card__head span {

  margin-bottom:
    5px;

  color:
    var(--sara-primary);

  font-weight:
    600;
}


.sara-contact-form-card__head strong {

  color:
    var(--sara-secondary);

  font-size:
    22px;
}


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

.sara-contact-form-shortcode {

  font-family:
    inherit;
}


.sara-contact-form-shortcode form {

  display: grid;

  gap: 15px;
}


.sara-contact-form-shortcode p {

  margin:
    0 !important;
}


.sara-contact-form-shortcode label {

  display: block;

  margin-bottom:
    7px;

  color:
    var(--sara-secondary);

  font-family:
    inherit;

  font-weight:
    500;
}


.sara-contact-form-shortcode input:not([type="submit"]),
.sara-contact-form-shortcode textarea,
.sara-contact-form-shortcode select {

  width: 100% !important;

  min-height: 48px;

  padding:
    12px 15px !important;

  color:
    var(--sara-secondary) !important;

  background:
    #fafafa !important;

  border:
    1px solid var(--sara-border) !important;

  border-radius:
    11px !important;

  outline: none !important;

  font-family:
    inherit !important;

  box-shadow:
    none !important;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease !important;
}


.sara-contact-form-shortcode textarea {

  min-height:
    140px;

  resize:
    vertical;
}


.sara-contact-form-shortcode input:focus,
.sara-contact-form-shortcode textarea:focus,
.sara-contact-form-shortcode select:focus {

  background:
    #fff !important;

  border-color:
    rgba(229,35,42,.45) !important;

  box-shadow:
    0 0 0 4px
    rgba(229,35,42,.07) !important;
}


.sara-contact-form-shortcode input[type="submit"] {

  min-height:
    48px;

  padding:
    0 28px !important;

  color:
    #fff !important;

  background:
    var(--sara-primary) !important;

  border:
    1px solid var(--sara-primary) !important;

  border-radius:
    11px !important;

  font-family:
    inherit !important;

  font-weight:
    600 !important;

  cursor:
    pointer !important;

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease !important;
}


.sara-contact-form-shortcode input[type="submit"]:hover {

  background:
    var(--sara-accent) !important;

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 24px
    rgba(229,35,42,.18);
}


/* Contact Form 7 messages */

.sara-contact-form-shortcode .wpcf7-response-output {

  margin:
    15px 0 0 !important;

  padding:
    12px 15px !important;

  border-radius:
    10px !important;

  font-family:
    inherit !important;
}


.sara-contact-form-shortcode .wpcf7-not-valid-tip {

  margin-top:
    5px !important;

  color:
    var(--sara-primary) !important;
}


/* =====================================================
   LOCATION
===================================================== */

.sara-contact-location {

  position: relative;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin:
    80px 20px;

  padding:
    40px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #fff3f3,
      #ffffff
    );

  border:
    1px solid
    rgba(229,35,42,.10);

  border-radius:
    24px;
}


.sara-contact-location::before {

  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -150px;
  top: -140px;

  border-radius: 50%;

  background:
    rgba(229,35,42,.08);
}


.sara-contact-location__content {

  position: relative;

  z-index: 2;
}


.sara-contact-location__content > span {

  color:
    var(--sara-primary);

  font-weight: 700;
}


.sara-contact-location h2 {

  margin:
    7px 0 8px;

  color:
    var(--sara-secondary);
}


.sara-contact-location p {

  margin: 0;

  color:
    var(--sara-text);
}


.sara-contact-location__badge {

  position: relative;

  z-index: 2;

  min-width:
    180px;

  padding:
    18px 22px;

  background: #fff;

  border:
    1px solid var(--sara-border);

  border-radius:
    14px;

  box-shadow:
    0 10px 30px
    rgba(24,24,24,.05);
}


.sara-contact-location__badge span {

  display: block;

  margin-bottom:
    4px;

  color:
    var(--sara-text);
}


.sara-contact-location__badge strong {

  color:
    var(--sara-secondary);
}


/* =====================================================
   FINAL CTA
===================================================== */

.sara-contact-final {

  position: relative;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding:
    45px;

  overflow: hidden;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #191919,
      #0d0d0d
    );

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    26px;
}


.sara-contact-final::before {

  content: "";

  position: absolute;

  width:
    400px;

  height:
    400px;

  right:
    -160px;

  bottom:
    -250px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(229,35,42,.55),
      transparent 70%
    );

  filter:
    blur(20px);
}


.sara-contact-final > * {

  position: relative;

  z-index: 2;
}


.sara-contact-final span {

  color:
    var(--sara-primary);

  font-weight:
    700;
}


.sara-contact-final h2 {

  margin:
    7px 0 0;

  color:
    #fff;
}


.sara-contact-btn--light {

  color:
    var(--sara-secondary) !important;

  background:
    #fff;

  border:
    1px solid #fff;
}


.sara-contact-btn--light:hover {

  color:
    #fff !important;

  background:
    var(--sara-primary);

  border-color:
    var(--sara-primary);

  transform:
    translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

  .sara-contact-hero {

    grid-template-columns:
      1fr 1fr;

    padding:
      45px;

    gap:
      35px;
  }


  .sara-contact-method {

    padding:
      22px;
  }


  .sara-contact-main {

    grid-template-columns:
      1fr 1.15fr;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  .sara-contact-hero {

    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding:
      30px 20px;

    gap:
      35px;

    border-radius:
      22px;
  }


  .sara-contact-hero__visual {

    order:
      2;
  }


  .sara-contact-hero-card {

    padding:
      27px;

    border-radius:
      20px;
  }


  .sara-contact-hero__actions {

    width:
      100%;
  }


  .sara-contact-btn {

    flex:
      1;
  }


  .sara-contact-methods {

    grid-template-columns:
      1fr;

    padding:
      55px 0;
  }


  .sara-contact-main {

    grid-template-columns:
      1fr;

    padding:
      16px;

    border-radius:
      20px;
  }


  .sara-contact-main__intro {

    padding:
      20px 8px;
  }


  .sara-contact-form-card {

    padding:
      22px;

    border-radius:
      16px;
  }


  .sara-contact-location {

    flex-direction:
      column;

    align-items:
      stretch;

    margin:
      55px 0;

    padding:
      28px 22px;

    border-radius:
      18px;
  }


  .sara-contact-location__badge {

    width:
      100%;
  }


  .sara-contact-final {

    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      28px 22px;

    border-radius:
      20px;
  }

}/* End custom CSS */