@charset "utf-8";
/* Marbella Website Design - Main Common Componants */
:root {
  --img-border-radius:7px;
}

@media only screen and (min-width:901px) {
  .ful-hide { display:none; }
}
@media only screen and (max-width:900px) {
  .tab-hide { display:none; }
}


/* ------------------------------------------------------------
    content reveal utility system
------------------------------------------------------------ */
.reveal {
  opacity:0.1;
  transform:translateY(3rem);
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}

.reveal.active {
  opacity:1;
  transform:none;
}

.reveal-delay-1 { transition-delay:.25s; }
.reveal-delay-2 { transition-delay:.50s; }
.reveal-delay-3 { transition-delay:.75s; }

.no-js .reveal {
  opacity:1;
  transform:none;
}

/* ------------------------------------------------------------
    /css/buttons.css - additions
------------------------------------------------------------ */
a.btn-box, .btn-box {
	  border:1px solid rgb(215,169,59,.4);
    color: var(--mwd-gold-dark);
}
.btn-box:hover {
    background: var(--mwd-gold);
    border-color: var(--mwd-gold-2);
    color: #111;
}
.btn-txt--gold, a.btn-txt--gold {
    color: var(--mwd-gold);
}
.btn-txt--gold:hover, a.btn-txt--gold:hover {
    color: #FFF;
}

/* page up button */
#pageUp a:hover {
  color: #FFF;
  background: var(--mwd-gold);
}

/* ------------------------------------------------------------
   MWD Reusable Layout / Design Utilities
------------------------------------------------------------ */

/* decorative accent line/eyebrow */
.accent-line {
  display:block;
  width:72px;
  height:2px;
  background:var(--mwd-gold);
  margin:1.4rem 0 1.5rem;
}
.accent-line--sm {
  width:48px;
}
.accent-line--center {
  margin-left:auto;
  margin-right:auto;
}
/* if needed 
.accent-line--white
.accent-line--lg
.accent-line--thin
*/

/* eyebrow text */
.eyebrow {
	margin:1rem 0 !important;
	color:var(--mwd-gold-dark);
	font-weight:700;
  font-size: 1rem !important;
	text-transform:uppercase;
	letter-spacing:.16rem;
}
.eyebrow--center { margin:1rem auto !important; }
.eyebrow--dark { color:var(--mwd-gold); }

/* section backgrounds */
.section--light {
  background:#f4f3ef;
  background: #F2F1EE;
}
.section--light--border-top {
  border-top: 1px solid rgba(215,169,59,.22);
}

.section--light-alt {
  background:#efeee9;
}
.section--light-alt--border-top {
  border-top: 1px solid rgba(0,0,0,.05);
}
.section--light-alt--border-bottom {
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.section--dark {
  background:#070707;
  color:#fff;
}

.section--image-dark {
  background:#060606;
  color:#fff;
  overflow:hidden;
}

/* section heading */
.section-heading {
  max-width:700px;
  margin:0 auto 4em;
  text-align:center;
  color:#555;
}

.section-heading h2 {
  color:#171717;
  /*font-size:clamp(2.1rem,2.6vw,3rem);*/
  font-weight:300;
  line-height:1.15;
  margin:0;
}

.section-heading p {
  max-width:850px;
  margin:0 auto;
  font-size:1.1rem;
  line-height:1.7;
}

.section-heading--dark h2 {
  color:#fff;
}

.section-heading--dark {
  color:rgba(255,255,255,.78);
}


/* ------------------------------------------------------------
   Split layout
------------------------------------------------------------ */
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  align-items:center;
  align-items:stretch; /* makes the image match the height of the text; */
}
.split--wide-img {
  grid-template-columns:1.05fr .95fr;
}
.split--wide-copy {
  grid-template-columns:.95fr 1.05fr;
}
.split__copy {
  max-width:570px;
  color:#303030;
  font-size:1.05rem;
}

.split__copy h2 {
  color:#171717;
  font-size:clamp(1.8rem, calc(0.9rem + 1.7vw), 41px);
  line-height:1.35;
  font-weight:400;
  letter-spacing:-.025em;
  margin:1rem 0 0;
}
.split__copy p {
  line-height:1.78;
  margin:0 0 1.4em;
}


/* ------------------------------------------------------------
   Contact Split Vetical line
------------------------------------------------------------ */
@media only screen and (min-width:901px) {
  .ful-content--v-line {
    padding-left:clamp(2rem, 4vw, 5em);
  }
  .ful-content--v-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 1px;
    background: linear-gradient( to bottom, transparent, rgba(185,138,34,.28) 12%, rgba(185,138,34,.28) 88%, transparent );
  }
}

/* Tablet / Mobile Layout */
@media only screen and (max-width:900px) {
  .tab-content--h-line {
    padding-top:clamp(4rem, 7vw, 8rem);
  }
  .tab-content--h-line::before {
    content: "";
    position: absolute;
    left:5%;
    right:5%;
    top:clamp(2rem, 3.5vw, 4rem);
    bottom:0;
    height:1px;
    background: linear-gradient( to right, transparent, rgba(185,138,34,.28) 12%, rgba(185,138,34,.28) 88%, transparent );
  }
}


/* ------------------------------------------------------------
   Image Cards
------------------------------------------------------------ */
.image-card {
  line-height:0;
  overflow:hidden;
  border-radius:var(--img-border-radius);
  box-shadow:0 22px 55px rgba(0,0,0,.13);
}
.split .image-card { margin: 1em 0; max-height: clamp(350px, calc(200px + 20vw), 500px); }
.image-card img {
  display:block;
  width:100%;
  height:auto;
}
.split .image-card img {
  height:100%;
  object-fit:cover;
}
@media only screen and (max-width:900px) {
  .split .image-card { margin: 1em 0; max-height: clamp(250px, 55vw, 500px); }
}

/* ------------------------------------------------------------
   Background image utility
------------------------------------------------------------ */
.bg-image {
  position:absolute;
  inset:0;
  line-height:0;
}

.bg-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.bg-image-overlay {
  position:absolute;
  inset:0;
  z-index:1;
}

/* basic card utilities */
.card {
  overflow:hidden;
  border-radius:8px;
}

.card--shadow {
  box-shadow:0 18px 45px rgba(0,0,0,.09);
}


/* ------------------------------------------------------------
   Free Consultation
------------------------------------------------------------ */
.consultation-grid {
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:40px;
  align-items:center;
  margin: 2em 0;
}

.consultation-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:150px;
    height:130px;
    border:3px solid var(--mwd-gold);
    border-radius:45px 4px 45px 45px;
    color:var(--mwd-gold);
    font-size:2rem;
    line-height:0;
}
.consultation-icon img { display:block; width: 50%; filter: var(--mwd-filter-gold); }

.consultation-copy {
  max-width:720px;
  font-size:1.05rem;
}

.consultation-copy h2 {
  color:#000;
  font-size:clamp(2rem,2.5vw,2.3rem);
  font-weight:400;
  line-height:1.2;
  margin:0 0 .5em;
}

.consultation-copy p {
  color:#444;
  line-height:1.7;
  margin:0;
}

.consultation-action {
  text-align:right;
}


.mwd-list {
  list-style:none;
  padding: 0 0 0 0.2em;
  margin:1.5em 0;
  font-size:1.05rem;
}
.mwd-list--compact {
  font-size:0.85rem;
}
.mwd-list--match {
  font-size:1em;
}

.mwd-list li {
  display:flex;
  align-items:flex-start;
  gap:1em;
  color:#222;
  font-size:1em;
  font-weight: 400;
  line-height:1.55;
  margin:1em 0;
}

.mwd-list li::before {
  content:"";
  flex:0 0 auto;
  display:block;
  width:1.625em;
  height:1.625em;
  background:url('../../core_assets/icons/circle-check-light.svg') no-repeat center / contain;
  filter: var(--mwd-filter-gold);
}


/* ------------------------------------------------------------
   Section Points
------------------------------------------------------------ */

.section-points {
  padding-top:1px;
}

.section-points article {
  display:grid;
  grid-template-columns:30px 1fr;
  gap:1.15em;
  align-items:start;
  margin:2em 0;
}

.section-points article:last-child {
  margin-bottom:0;
}

.section-points img {
  display:block;
  width:30px;
  height:30px;
  filter: var(--mwd-filter-gold);
}

.section-points .num {
  display: block;
  color: var(--mwd-gold-dark);
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.1;
}

.section-points i {
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:2px solid var(--mwd-gold);
  border-radius:50%;
  color:var(--mwd-gold);
  font-size:.78rem;
}

.section-points h3 {
  font-size:1.05em;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0.1em 0 .3em;
}

.section-points article p {
  font-size:0.85em;
  line-height:1.6 !important;
  margin:0;
  opacity: .8;
  font-style: italic;
}


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

  .section-points h3 {
    font-size:1.28rem;
  }

}

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

  .section-points article {
    grid-template-columns:38px 1fr;
    gap:1em;
  }

  .section-points h3 {
    font-size:1.18rem;
  }

  .section-points article p {
    font-size:.96rem;
  }

}


/* ------------------------------------------------------------
   Website FAQ
------------------------------------------------------------ */

.website-faq {
}

.website-faq .section-heading {
  margin-bottom:2.4em;
}

.website-faq .section-heading h2 {
  font-size:clamp(2rem,2.4vw,3rem);
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  margin-bottom:2.6em;
}

.faq-col details {
  border-top:1px solid rgba(0,0,0,.2);
}

.faq-col details:last-child {
  border-bottom:1px solid rgba(0,0,0,.2);
}

.faq-col summary {
  display:block;
  padding:1em 2.4em 1em 0;
  color:#111;
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
}

.faq-col summary::-webkit-details-marker {
  display:none;
}

.faq-col summary::after {
  content:"⌄";
  position:absolute;
  right:.35em;
  top:50%;
  transform:translateY(-50%);
  color:#111;
  font-size:1.1rem;
  font-weight:700;
  transition:transform .2s ease;
}

.faq-col details[open] summary::after {
  transform:translateY(-50%) rotate(180deg);
}

.faq-col details p {
  max-width:720px;
  color:#444;
  font-size:.98rem;
  line-height:1.65;
  margin:0;
  padding:0 2.5em 1.2em 0;
}


/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

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

  .faq-cta {
    grid-template-columns:90px 1fr;
    gap:1.5em;
  }

  .faq-cta-action {
    grid-column:2;
    text-align:left;
  }

}

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

  .faq-grid {
    grid-template-columns:1fr;
    gap:0;
  }

}

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

  .website-faq .padding {
    padding-top:55px;
    padding-bottom:55px;
  }

}


/* ------------------------------------------------------------
   Card Frame Gold
------------------------------------------------------------ */
.card-frame-gold {
  display:flex;
  align-content: stretch;
  padding: 2px;
  border-radius: 10px;
  background: transparent; /* transparent interior */
  z-index: 0;
}
.card-frame-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border thickness */
  border-radius: 7px;
  background: 
    linear-gradient(110deg, #50462D 0%, #736748 23%, #B5A57B 66%, #50462D 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
.card-frame-gold-content {
  padding:44px 46px 44px;
  border-radius: 6px;
  background:linear-gradient(110deg, rgba(0,0,0,.65), rgba(0,0,0,.9));
  text-align:center;
  color:#d8d8d8;
}
.card-icon {
	display: flex;
	width: 70px;
  height: 70px;
	justify-content:center;
	margin: 0 auto 1em;
	line-height:0;
}
.card-icon img { display:block; width:50%; filter: var(--mwd-filter-gold); }
.card-icon:after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  border: 2px solid var(--mwd-gold);
  border-radius: 50%;
}


/* ------------------------------------------------------------
   MWD Reusable Responsive Utilities
------------------------------------------------------------ */
@media only screen and (max-width:1300px) {

    .consultation-grid {
        grid-template-columns:160px 1fr;
        gap:1rem 34px;
        align-items:start;
    }
    .consultation-copy { max-width: 760px; }
    .consultation-copy h2 {
        font-size: clamp(2rem,2.7vw,3rem);
    }
    .consultation-action {
        grid-column:2;
        text-align:left;
        margin-top:.5em;
    }

}
@media only screen and (max-width:1200px) {
    .split__copy {
        font-size:1rem;
    }
    .split__copy .btn-row { padding-top:0.5em; }
}
@media only screen and (min-width:769px) and (max-width:1024px) {
    .split__copy h2 {
        font-size:clamp(1.7rem, calc(0.9rem + 1.6vw), 3.2rem);
    }
    .split__copy .btn-row { padding-top:1.2em; }
    .image-card {
        max-height: 500px;
    }
}

@media only screen and (max-width:950px) {
    .split__copy .btn-row { padding-top:0; }
    .image-card {
        max-height: 450px;
    }
    .consultation-copy { font-size: 1rem; }
    .consultation-copy h2 {
        font-size: clamp(1.6rem,3.3vw,2.5rem);
    }

    .consultation-grid {
      grid-template-columns:130px 1fr auto;
      gap:1rem 36px;
    }
    .consultation-icon {
        width:130px;
        height:112px;
        border-radius:40px 3px 40px 40px;
    }
}

@media only screen and (max-width:900px) {
  .split,
  .split--wide-img,
  .split--wide-copy {
    grid-template-columns:1fr;
    gap:3rem;
  }

  .split__copy {
    max-width:none;
  }

  .section-heading {
    margin-bottom:3.2em;
  }
}

@media only screen and (max-width:600px) {
  .section-heading {
    margin-bottom:2.4em;
  }

  .section-heading p {
    font-size:1rem;
  }

  .image-card {
    border-radius:6px;
  }

  .split__copy h2 {
    font-size:2rem;
  }

  .split__copy p {
    font-size:.98rem;
    line-height:1.7;
  }

    .consultation-grid {
      grid-template-columns:1fr;
      gap:1.4em;
      text-align:left;
    }

    .consultation-icon,
    .consultation-copy,
    .consultation-action {
      grid-column:1 / -1;
    }

    .consultation-icon {
      width:110px;
      height:95px;
      border-radius:35px 2px 35px 35px;
      margin:0 0 .4em;
    }

    .consultation-copy {
      max-width:none;
    }

    .consultation-action {
      text-align:left;
      margin-top:.4em;
    }

    .consultation-icon {
      grid-row:1;
    }

    .consultation-copy {
      grid-row:2;
    }

    .consultation-action {
      grid-row:3;
    }

    .consultation-copy h2 {
      /*font-size:1.8rem;*/
    }

    .consultation-copy p {
      font-size:.95rem;
    }
}