.brand-color {
  background-color: #4c331f;
  color: #fbd2b6;
}
.brand-color-2 {
  color: #fbd2b6;
}
.brand-bg-2 {
  background-color: #faeadc;
}
.brand-color-3 {
  color: #fdfbf0;
}
body,
html {
  font-family: "Nunito", sans-serif;
  background-color: #fbfaf7;
  color: #4c331f;
}
.pacifico {
  font-family: "Pacifico", sans-serif;
  color: #ff4600;
}
.site-navbar .site-navigation .site-menu > li > a {
  color: #fff6ee;
  border: 2px solid transparent;
  padding: 0.5rem;
}
.site-navbar .site-navigation .site-menu > li > a:hover {
  color: #fff6ee;
  border-bottom: 2px solid #f8150e;
  transition: all 0.4s ease-in-out;
}
.site-navbar .site-navigation .site-menu .active > a {
  color: #fff6ee;
}
.site-navbar .site-navigation .site-menu .active > a {
  background-color: #4c331f;
  color: #fbd2b6;
}

.btn-primary {
  background-color: #ff4600 !important;
  color: #fff !important;
}

.service-type {
  min-height: 25rem;
}
.process-card {
  box-shadow: 0 0.5rem 1rem #e2e2e261;
  border-color: #fffbf7;
}
.text-stroke {
  padding: 1rem;
  width: fit-content;
  border-radius: 0.5rem;
}

@supports (-webkit-text-stroke: 1px #4c331f) {
  .text-stroke {
    -webkit-text-stroke: 1px #4c331f;
    -webkit-text-fill-color: #faeadc;
  }
}
.wcu-img {
  background: url("../images/hero-img/andy-li-CpsTAUPoScw-unsplash.jpg"),
    #4c331f;
  height: 31.25rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: luminosity;
}

.footer-59391 {
  /* background-color: #eff6ff; */
  border-top: 1px solid #efefef;
  padding: 4rem 0;
}

.footer-59391 .nav-links.nav-left li:first-child {
  padding-left: 0;
}

.footer-59391 .nav-links li {
  display: inline-block;
}

.footer-59391 .nav-links li a {
  color: #4c331f;
  padding: 10px;
}

.not-upper {
  text-transform: none;
}
.box-delivered {
  top: 27.5rem;
  right: -0.5rem;
  height: 12.25rem;
  border-radius: 1rem;
}
.no-overflow {
  overflow: hidden;
}

.about-img {
  margin-top: -8rem;
  border: 10px solid currentColor;
  border-radius: 1.6rem;
}
.img-about-round {
  border-radius: 0.8rem;
}
#hero {
  overflow-x: hidden;
  position: relative;
}

#hero::before {
  content: "";
  position: absolute; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    179deg,
    #00000069,
    #100b079c
  ); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

video#bgvideo {
}
#hero-overlay {
  transform: translate(10%, -50%);
  top: 55%;
  left: 0%;
  position: absolute;
  z-index: 5;
}

#about {
  background-image: url("../images/hero-img/lcz9nxhoslo-brooke-lark.jpg");
  height: 60rem;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#try {
  background-image: url("../images/hero-img/bg_4.jpg");
  height: 45rem;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#services {
  background-image: url("../images/hero-img/Group.html\ 3503.svg");
  /* height: 45rem; */
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-position: 1rem 8rem;
  background-size: 76rem;
}

#try .overlay {
  content: "";
  position: absolute; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    179deg,
    rgba(0, 0, 0, 0.429),
    #100b078e
  ); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

h1.detail-info {
  font-size: 3rem;
  width: fit-content;
}

.font-5 {
  line-height: 1.5;
  font-size: 4rem;
}

.menu-block::before {
  content: "";
  border-bottom: 2px dashed #ccc;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 30%;
}
.mission-section::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  bottom: 0;
  z-index: 0;
  background: url("../images/hero-img/about_overlay.png") bottom right no-repeat;
  background-size: 15% 60%;
  right: 0px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body,
  #request,
  .site-wrap {
    overflow-x: hidden;
  }
  #hero {
    height: 50rem;
  }
  #about {
    height: 90rem;
  }
  #try {
    height: 60rem;
  }

  #services {
    height: 208rem;
  }

  .font-5 {
    line-height: 1.7;
    font-size: 3rem;
  }
  /* Styles */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1000px) {
  .mission-section::after {
    content: none;
  }
}