@charset "utf-8";

/* Marbella Website Design - Website Design & Development page */

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

.mwd-hero {
  align-items:flex-end;
}
/*.mwd-hero-content {
  width: 65%;
}
@media only screen and (max-width: 800px) {
  .mwd-hero-content {
    width: 70%;
    max-width: 550px;
  }
}*/

/* ??? TO DO ??? Look at this later instead of .eyebrow text ???
.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  gap:.55em;
  align-items:center;
  margin:0 0 1.8em;
  color:var(--mwd-gold);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.breadcrumb a {
  color:var(--mwd-gold);
  text-decoration:none;
}

.breadcrumb a:hover {
  color:#fff;
}

.breadcrumb span {
  color:rgba(255,255,255,.72);
}

.breadcrumb span:last-child {
  color:var(--mwd-gold);
}

.mwd-hero h1 {
  max-width:760px;
  color:#fff;
  font-size:clamp(3rem,5vw,5.9rem);
  line-height:1.08;
  font-weight:300;
  letter-spacing:-.04em;
}

.mwd-hero p {
  max-width:620px;
  color:rgba(255,255,255,.92);
  font-size:1.3rem;
  line-height:1.65;
  margin:0;
}

.mwd-hero .btn-row {
  margin-top:2.5em;
}*/

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


/* ------------------------------------------------------------
   Intro Points
------------------------------------------------------------ */


/* ------------------------------------------------------------
   My Process
------------------------------------------------------------ */

.my-process {
  background:
    linear-gradient(180deg, #DAD7C9 0%, #efeee9 65%, #EAE8E0 100%);
}

.my-process .section-heading {
  margin-bottom:1rem;
}

.my-process .section-heading h2 {
  font-size:clamp(2rem,2.8vw,3rem);
}

.my-process .section-heading p {
  max-width:550px;
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
}

.process-step {
  padding:2em 2.2em 2.2em;
  text-align:center;
}

/* metallic vertical dividers */
.process-step::after,
.process-step:first-child::before,
.process-grid::after {
  content:"";
  position:absolute;
  top:10%;
  width:2px;
  height:80%;
  pointer-events:none;
  opacity:.5;

  background:
    linear-gradient(
      90deg,
      rgba(70,55,20,.45) 0%,
      rgba(177,126,28,.95) 35%,
      rgba(234,190,78,1) 52%,
      rgba(255,236,164,.9) 68%,
      rgba(255,255,255,.15) 100%
    );

  -webkit-mask-image:linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image:linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.process-step::after {
  right:0;
}

.process-step:first-child::before {
  left:0;
  transform:scaleX(-1);
}

.process-step:last-child::after {
  display:none;
}

.process-grid::after {
  right:0;
}

.process-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  margin-bottom:0.9rem;
  line-height:0;
}

.process-icon img {
  display:block;
  width:58px;
  height:58px;
  object-fit:contain;
  filter: var(--mwd-filter-gold);
}

.process-icon i {
  color:var(--mwd-gold);
  font-size:2.55rem;
  line-height:1;
}

.process-step-label {
  color:var(--mwd-gold-dark);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 .9em !important;
}

.process-step h3 {
  color:#151515;
  font-size:clamp(1rem,1.4vw,1.2rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0;
}

.process-step .accent-line {
  width:48px;
  margin:1.25em auto 1em;
}

.process-step p:last-child {
  max-width:240px;
  margin:0 auto;
}


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

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

  .process-step {
    padding-left:1.4em;
    padding-right:1.4em;
  }

  .process-step p:last-child {
    font-size:.98rem;
  }

}

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

  .process-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .process-step {
    padding:2.4em 2em;
  }

  .process-step::after,
  .process-step:first-child::before,
  .process-grid::after {
    display:none;
  }

  .process-step {
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .process-step:nth-child(odd) {
    border-right:1px solid rgba(0,0,0,.08);
  }

  .process-step:last-child {
    border-bottom:0;
  }

}

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

  .my-process .padding {
    padding-top:55px;
    padding-bottom:55px;
  }

  .my-process .section-heading {
    margin-bottom:2.5em;
  }

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

  .process-grid {
    grid-template-columns:1fr;
  }

  .process-step {
    padding:2.2em 0;
    border-right:0 !important;
  }

  .process-step:not(:last-child) {
    border-bottom:1px solid rgba(0,0,0,.08);
  }

}


/* ------------------------------------------------------------
   Why Work With Me
------------------------------------------------------------ */

.why-work h2 {
  font-size:clamp(2.2rem,3vw,3.7rem);
  line-height:1.3;
  font-weight:400;
  letter-spacing:-.05em;
}
.why-work-consultation {
  margin-top: 5rem;
}