@charset "utf-8";
/* Marbella Website Design - contact page */

/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */

.mwd-hero {
  background-color: #78A3C9;
}
.mwd-hero-content p {
    max-width: 400px;
  }
/*
.mwd-hero-contact,
.mwd-hero-contact-success,
.mwd-hero-consultation,
.mwd-hero-consultation-success {}
*/
@media only screen and (min-width:501px) and (max-width:1000px) {
  .mwd-hero-contact .mwd-hero-content {
    width: 55%;
    max-width: 380px;
  }
}
@media only screen and (max-width:500px) {
  .mwd-hero-contact .mwd-hero-content {
    padding-bottom: 65%;
  }
  .mwd-hero-content p {
    max-width: 300px;
    width: 75%;
  }
}


/* ------------------------------------------------------------
   Main 
------------------------------------------------------------ */

#contact main {
  text-align:left;
  padding-bottom:0;
}

/* contact */
#contactInfo {
  padding:0;
}
.contact-sections {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:70px;
}
.contact-details {
  width:38%;
  margin:0;
}
.contact-form {
  width:58%;
  margin:0 0 3rem;
}
.contact-details p {
  max-width:480px;
}

/* contact list */
.contact-details ul.contact-options {
  display:flex;
  flex-direction:column;
  gap:1.4em;
  padding:1.5em 0 0;
  margin:0 0 2rem;
  list-style:none;
}
.contact-details ul.contact-options li {
  position:relative;
  min-height:52px;
  padding:0 0 0 78px;
  margin:0;
  color:#202020;
}
.contact-details ul.contact-options li:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:52px;
  height:52px;
  border:1px solid var(--mwd-gold);
  border-radius:50%;
  background:none;
}
.contact-details ul.contact-options li:after {
  position:absolute;
  left:0;
  top:0;
  width:52px;
  height:52px;
  content:"";
  background-repeat:no-repeat;
  background-position:center;
  background-size:23px 23px;
  filter: var(--mwd-filter-gold);
}
.contact-details ul.contact-options li.icon-call:after  { background-image:url('/core_assets/icons/mobile-solid-01.svg'); }
.contact-details ul.contact-options li.icon-email:after { background-image:url('/core_assets/icons/envelope-solid.svg'); }
.contact-details ul.contact-options li.icon-pin:after   { background-image:url('/core_assets/icons/geo-pin-solid.svg'); }
.contact-details ul.contact-options b {
  display:block;
  color:#111;
  font-size:.78rem;
  font-weight: 700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:.0;
}
.contact-details ul.contact-options a,
.contact-details ul.contact-options span {
  display:block;
  color:#111;
  text-decoration:none;
  font-size:1.05rem;
}
.contact-details ul.contact-options a:hover { color:var(--mwd-gold); }

/* form override to keep existing form.css structure */
.form-header h2 { font-size: clamp(1.6rem, calc(1rem + 1.5vw), 2rem); font-weight: 700; }

.mwd-form,
.form-box {
  background:#fff;
  border:0;
  border-radius:4px;
  padding:40px;
  margin:0;
  box-shadow:var(--mwd-shadow);
  overflow: hidden;
}
.form-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg,#b98217,#e2b849,#b98217);
}
.mwd-form .form-content,
.form-box .form-content {
  background:none;
  border-radius:0;
  padding:0;
}
.mwd-form .form-fields { margin:0 -10px; }
.mwd-form fieldset { padding:.55em 10px !important; }
.mwd-form .label {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.mwd-form input[type=text],
.mwd-form input[type=email],
.mwd-form textarea {
  display:block;
  width:100%;
  background:#fff;
  border:1px solid #d4d4d4;
  border-radius:0;
  box-shadow:none;
  color:#111;
  font-size:1rem;
  padding:1.15em 1.2em;
  outline:none;
}
.mwd-form input:focus,
.mwd-form textarea:focus {
  border-color:var(--mwd-gold);
  box-shadow:0 0 0 3px rgba(215,169,59,.14);
}
.mwd-form textarea { min-height:210px !important; resize:vertical; }
.mwd-form .btn-row { padding:1em 10px 0 !important; margin:0; }

.mwd-contact-note {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 34px 0 2rem;
  padding: 22px 24px;
  background: #f7f2ea;
  border: 1px solid rgba(194, 137, 39, 0.18);
  border-radius: 10px;
  max-width: 450px;
}

.mwd-contact-note__icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mwd-gold-light);
  border-radius: 50%;
}

.mwd-contact-note__icon img {
  width: 70%;
  height: 70%;
  display: block;
}

.mwd-contact-note p {
  margin: 0;
  color: #081936;
  font-size: 0.85rem;
  line-height: 1.5;
}

@media only screen and (max-width:900px) {
  .contact-sections { flex-wrap:wrap; gap:3rem; }
  .contact-details,
  .contact-form { width:100%; }
  .contact-details p { max-width:720px; }
}
@media only screen and (max-width: 700px) {
  .mwd-contact-note {
    gap: 16px;
    padding: 20px;
  }

  .mwd-contact-note__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }

  .mwd-contact-note p {
    font-size: 0.85rem;
    line-height: 1.55;
  }
}
@media only screen and (max-width:600px) {
  .mwd-form,
  .form-box { padding:30px; }
  .form-fields .fieldset2 { width:100%; }
  .contact-details ul.contact-options li { padding-left:64px; }
}

@media only screen and (max-width:500px) {
  .contact-form {
    margin: 0 -30px;
    width: calc(100% + 60px);
  }
}
@media only screen and (max-width: 460px) {
  .mwd-contact-note {
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }

  .mwd-contact-note__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
  }

  .mwd-contact-note__icon img {
    width: 68%;
    height: 68%;
  }

  .mwd-contact-note p {
    font-size: 0.82rem;
    line-height: 1.5;
  }
}

/* ------------------------------------------------------------
   Contact confirmation / success screen
------------------------------------------------------------ */


.confirmation-top { background: #555; height: var(--header-height); }

.contact-confirmation {
  padding:80px 70px 110px;
}

.contact-success-wrap {
  display:flex;
  justify-content:center;
}

.contact-success-card {
  width:min(100%, 900px);
  background:#fff;
  padding:54px;
  box-shadow:var(--mwd-shadow);
}

.success-icon {
  position:relative;
  width:72px;
  height:72px;
  margin:0 0 28px;
  border:1px solid rgba(215,169,59,.45);
  border-radius:50%;
  background:rgba(215,169,59,.08);
}

.success-icon:after {
  content:"";
  position:absolute;
  left:24px;
  top:24px;
  width:22px;
  height:12px;
  border-left:3px solid var(--mwd-gold);
  border-bottom:3px solid var(--mwd-gold);
  transform:rotate(-45deg);
}

.contact-success-card h2 {
  max-width:760px;
}

.success-intro {
  max-width:760px;
  font-size:1.05rem;
}

.success-next-steps {
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:22px;
  margin:36px 0 34px;
  padding-top:32px;
  border-top:1px solid rgba(0,0,0,.08);
}
.contact-confirmation .success-next-steps { border: none; }


.success-next-steps article {
  padding:22px;
  background:#f7f5ef;
  border-left:3px solid var(--mwd-gold);
}

.success-next-steps b {
  display:block;
  color:#111;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 .7em;
}

.success-next-steps p {
  margin:0;
  color:#444;
}

.success-actions {
  margin-top:6px;
}

.btn--ghost-dark {
  background:transparent;
  color:#111;
  border:1px solid rgba(0,0,0,.18);
}

.btn--ghost-dark:hover {
  background:#111;
  color:#fff;
}

.success-contact-line {
  margin:30px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.08);
  color:#444;
}

.success-contact-line a {
  color:#111;
  text-decoration:none;
  font-weight:600;
}

.success-contact-line a:hover {
  color:var(--mwd-gold);
}

@media only screen and (max-width:900px) {

  .contact-confirmation {
    padding:50px 45px 65px;
  }
  .success-next-steps {
    grid-template-columns:1fr;
  }
  .success-next-steps b {
    font-size:.9rem;
  }
  .contact-success-card {
    padding:40px;
  }
}

@media only screen and (max-width:600px) {

  .contact-confirmation {
    padding: 0;
  }

  .contact-success-card {
    padding:35px 30px;
  }

  .success-icon {
    width:62px;
    height:62px;
  }

  .success-icon:after {
    left:20px;
    top:20px;
  }
}

@media only screen and (max-width:450px) {
  .success-next-steps article {
    padding:0;
    background:none;
    border-left:none;
  }
  .success-next-steps b { font-size:1em; }
}