body,
html {
  font-family: 'Titillium Web', sans-serif;
  color: #333333;
}

.contact-form-modal {
  background: #ec008c; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fc6767),
    to(#ec008c)
  );
  background: -o-linear-gradient(left, #fc6767, #ec008c);
  background: linear-gradient(
    to right,
    #fc6767,
    #ec008c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  margin: auto;
  border-radius: 15px;
  border: 2px solid white;
}

.marker {
  font-family: 'Permanent Marker', cursive;
  font-size: 2rem;
}

.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(/img/menu.jpg);
}

.cta-banner {
  height: 1rem;
  background: #348ac7;
}

.cta-banner2 {
  height: 1rem;
  background: #348ac7;
}

/* If the screen size is 992px wide or LARGER*/
@media screen and (min-width: 992px) {
  .cta-banner2 {
    margin-bottom: 5rem;
  }
}

.hero-header {
  font-size: 4.5rem;
  font-weight: 300;
}

.header-display {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

/* If the screen size is 1200px wide or less*/
@media screen and (max-width: 1200px) {
  .header-display {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
  }
}

/* If the screen size is 769px wide or less*/
@media screen and (max-width: 769px) {
  .header-display {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
  }
}

.open-p {
  font-size: 1.4rem;
  line-height: 2.8rem;
}

/* If the screen size is 769px wide or less*/
@media screen and (max-width: 769px) {
  .open-p {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }
}

/* If the screen size is 576px wide or less*/
@media screen and (max-width: 576px) {
  .open-p {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
}

.description {
  font-size: 2rem;
  line-height: 2rem;
}

/* If the screen size is 769px wide or less*/
@media screen and (max-width: 769px) {
  .description {
    font-size: 1.3rem;
    line-height: 1.7rem;
  }
}

/* If the screen size is 576px wide or less*/
@media screen and (max-width: 576px) {
  .description {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
}

.dark-card1 {
  background-image: url('/img/kitchen.jpg');
  background-position: bottom;
  background-size: cover;
  min-height: 35rem;
  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.dark-card2 {
  background-image: url('/img/coding.jpg');
  background-position: bottom;
  background-size: cover;
  min-height: 35rem;
  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.dark-card-content {
  min-height: 35rem;
  background: rgba(0, 0, 0, 0.3);
}

.dark-card-content p {
  font-size: 1.4rem;
  line-height: 3rem;
}

/* If the screen size is 1200px wide or less*/
@media screen and (max-width: 1200px) {
  .dark-card-content p {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
}

/* If the screen size is 769px wide or less*/
@media screen and (max-width: 769px) {
  .dark-card-content p {
    font-size: 1.1rem;
    line-height: 1.6rem;
  }
}

@media screen and (max-width: 576px) {
  .dark-card1 {
    min-height: 30rem;
  }

  .dark-card2 {
    min-height: 30rem;
  }

  .dark-card-content {
    min-height: 30rem;
  }

  .dark-card-content p {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
}

.pricing-card {
  width: 100%;
  border: 2px solid #348ac7;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.price-card li {
  background-color: transparent;
  outline: none;
  border-radius: 0;
}

.pricing-card-header2 {
  background: #ec008c;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  height: 100%;
  width: 100%;
}

.pricing-card-header1 {
  background: #348ac7;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  height: 100%;
  width: 100%;
}

.underline {
  -webkit-text-decoration: underline solid #ec008c;
  text-decoration: underline solid #ec008c;
}

.price-list {
  font-size: 1.5rem;
}

/* If the screen size is 575px wide or less */
@media screen and (max-width: 575px) {
  .price-list {
    font-size: 1.1rem;
  }
}

i {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fc6767),
    to(#ec008c)
  );
  background: -o-linear-gradient(top, #fc6767 0%, #ec008c 100%);
  background: linear-gradient(to bottom, #fc6767 0%, #ec008c 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-bright {
  background-color: #fa7d09 !important;
  border: 2px solid white;
}

.accent {
  display: inline-block;
  position: relative;
  text-align: center;
}

.accent:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 1px;
  bottom: 0;
  left: 25%;
  border-bottom: 5px solid #ec008c;
}

.footer {
  background-image: url('img/rocket5.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.contact-form {
  background: #ec008c; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fc6767),
    to(#ec008c)
  );
  background: -o-linear-gradient(left, #fc6767, #ec008c);
  background: linear-gradient(
    to right,
    #fc6767,
    #ec008c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  margin: auto;
  border-radius: 15px;
  z-index: 2000;
}

.btn-gradient {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#7474bf),
    to(#348ac7)
  );
  background: -o-linear-gradient(left, #7474bf, #348ac7);
  background: linear-gradient(to right, #7474bf, #348ac7);
}

.question {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

/* If the screen size is 575px wide or less */
@media screen and (max-width: 575px) {
  .question {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.2;
  }
}