@charset "utf-8";

/* Marbella Website Design - Website Hosting & Email page */

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

.mwd-hero {
  background-color: #558FC7;
}

@media only screen and (min-width:800px) {
  .mwd-hero-content p {
    max-width: 600px;
  }
}


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


/* ------------------------------------------------------------
   Feature Grid - Managed Hosting
------------------------------------------------------------ */


/* ------------------------------------------------------------
   Hosting Options
------------------------------------------------------------ */

.hosting-options {
  background:
    linear-gradient(180deg, #f7f5ef 0%, #efeee9 58%, #f6f4ee 100%);
  text-align: center;
}

.hosting-options .section-heading {
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:3.5em;
}

.hosting-options .section-heading h2 {
  font-size:clamp(2.1rem,3vw,3.6rem);
  line-height:1.1;
}

.hosting-options .section-heading p:last-child {
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
}

.hosting-options-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:1020px;
  margin:0 auto;
}

.hosting-option {
  position:relative;
  padding:0 3em;
  text-align:center;
}

.hosting-option:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0.2em;
  right:0;
  width:1px;
  height:100%;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(177,126,28,.35) 12%,
      rgba(218,166,55,.95) 50%,
      rgba(177,126,28,.35) 88%,
      transparent 100%
    );
}

.hosting-option h3 {
  color:#171717;
  font-size:clamp(1.35rem,1.7vw,1.8rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.03em;
  margin:0 0 1.2em;
}

.hosting-option p {
  max-width:260px;
  margin:0 auto;
  color:#3f3f3f;
  font-size:1.02rem;
  line-height:1.7;
}

.hosting-options-note {
  max-width:760px;
  margin:4em auto 0;
  color:#6f6f6f;
  font-size:1.08rem;
  line-height:1.7;
  text-align:center;
}

.hosting-cta {
  padding-top: 5rem;
  margin: 1em auto;
  text-align: center;
  width: 60%;
  max-width: 700px;
}
.hosting-cta h2 { font-weight: 400; }
.hosting-cta .btn-row { justify-content: center; }


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

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

  .hosting-options .section-heading {
    margin-bottom:2.8em;
  }

  .hosting-options-grid {
    grid-template-columns:1fr;
    max-width:400px;
  }

  .hosting-option {
    padding:2em 0;
  }

  .hosting-option:not(:last-child)::after {
    display:none;
  }

  .hosting-option:not(:last-child) {
    border-bottom:1px solid rgba(177,126,28,.28);
  }

  .hosting-option h3 {
    margin-bottom:.7em;
  }

  .hosting-option p {
    max-width:420px;
  }

  .hosting-options-note {
    margin-top:2.5em;
  }
  .hosting-cta {
    padding-top: 2rem;
    width: 100%;
  }

}

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

  .hosting-options .padding {
    padding-top:55px;
    padding-bottom:55px;
  }

  .hosting-options .section-heading {
    margin-bottom:2em;
  }

  .hosting-options .section-heading h2 {
    font-size:clamp(2rem,9vw,2.7rem);
  }

  .hosting-options-grid {
    grid-template-columns: 1fr;
    max-width: 260px;
  }

  .hosting-option {
    padding:1.8em 0;
  }

  .hosting-option p,
  .hosting-options-note {
    font-size:1rem;
  }

}