* {
  font-family: "Raleway", sans-serif;
}

#backToTopButton {
  display: inline-block;
  background-color: #ff6600;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#backToTopButton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#backToTopButton:hover {
  cursor: pointer;
  background-color: #333;
}
#backToTopButton:active {
  background-color: #555;
}
#backToTopButton.show {
  opacity: 1;
  visibility: visible;
}

#banner-section {
  background: url("../public/images/baner-image.jpg") !important;
  background-size: cover !important;
  height: 360px !important;
}

/* Hide banner section on devices with screen width less than or equal to 576px */
@media (max-width: 768px) {
  #banner-section {
    display: none !important;
  }
}

.person-name {
  background: black;
  color: white;
  font-weight: bold;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0.7;

  position: absolute;
  bottom: 1.7rem;
}

.project-name {
  position: absolute;
  width: 100%;
  height: 3rem;
  bottom: 0rem;
  opacity: 0.7;
  background: black;
  display: flex;
  padding-left: 1rem;
  align-items: center;
  color: white;
  font-weight: bold;
}

.project-type {
  position: absolute;

  top: 1rem;
  height: 1.8rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  color: white;
  font-weight: bold;
}

.bg-estimating {
  background: #29bcf9;
}

.bg-detailing {
  background: #01679c;
}

#portfolio-downalod-btn {
  border: 2px solid #ff6600;
  color: #ff6600;
}

#portfolio-downalod-btn:hover {
  background: #ff6600;
  color: white;
}

#portfolio-btn-download-nav {
  color: #29bcf9;
}
#portfolio-btn-download-nav i {
  margin-right: 0.5rem;
}

.whatWeDo {
  list-style-type: none;
  padding-left: 0;
}

@media only screen and (max-width: 500px) {
  /* #main-logo {
    min-width: 100%;
  } */
  #header-img {
    width: 60%;
  }

  #banner-section {
    height: 60%;
  }

  #main-logo {
    height: 150px;
  }
}

.modal.and.carousel {
  position: fixed;
}