@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,800;1,700&display=swap');

body {
  font-family: 'Poppins', sans-serif !important;
  overflow-x: hidden;
}

/* Custom Scroll Bar  */
::-webkit-scrollbar {
  width: 0.625rem;
}

::-webkit-scrollbar-track {
  background-color: #fff;
  -webkit-border-radius: 0.625rem;
  border-radius: 0.625rem;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0.625rem;
  border-radius: 0.625rem;
  background: #dadce0;
}


/* Navbar
================  */
.nav-bg {
  background: #FFFFFF;
  opacity: 0.87;

}

.logo {
  width: 271px;
  height: 32px;
}

.nav-link {
  font-size: 16;
  font-weight: 400;
  color: #000 !important;
  padding: 6px 0px !important;
}

.nav-item {
  margin: 0px 10px;
}

.active {
  border-bottom: 3px solid #3B7B7D;
  color: #3B7B7D !important;
}

.navbar-toggler {
  border: none !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

/* home-banner
================== */
.home-banner {
  background-image: url('../images/home-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 282px 0 223px 0;
}

.custom-row {
  display: flex;
  align-items: center;
  gap: 76px;
  justify-content: center;
}

.left-box {
  /* width: 452px; */
  background: #FFFFFF;
  opacity: 0.92;
  border-radius: 10px;
  padding: 24px;
}

.right-box {
  width: 612px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

.inner-content {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
  justify-content: center;
}

.inner-content__third-step {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.inner-card {
  background: #F1F9F9;
  border-radius: 6px;
  padding: 20px 0 12px 0;
  cursor: pointer;
  width: 172px;
  height: auto;
  border: 2px solid transparent;
}

.inner-card:hover {
  border: 2px solid #3B7B7D;
}

.inner-card__third {
  background: #F1F9F9;
  border-radius: 6px;
  padding: 20px 0 0px 0;
  cursor: pointer;
  width: 123px;
  height: auto;
  border: 2px solid transparent;
}

.inner-card__third:hover {
  border: 2px solid #3B7B7D;
}

.angebot-btn {
  width: 175px;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 6px;
  background-color: #000000;
}

.weiter-btn {
  width: 74px;
  height: 40px;
  background-color: #000;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: 2px solid transparent;
}

.zuruck-btn {
  width: 74px;
  height: 40px;
  background-color: transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #3B7B7D;
  border: 2px solid #3B7B7D;
}

.vollstandige-input {
  width: 100%;
  border-radius: 6px;
  height: 40px;
  padding-left: 16px;
  background: #F3F3F3;
  border: none;
  outline: none;
}

.vollstandige-input::placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #A4A4A4;
}

.bluite-point {
  margin-top: 22px;
  margin-left: 9rem;
}

.bluite-point li {
  list-style-type: none;
}


/* intro
============  */
.intro-wrap {
  padding: 102px 0 48px 0;
}

.intro-custom__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #FFFFFF;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.11);
  border-radius: 8px;
  padding: 16px 16px 16px 32px;
  justify-content: center;
  gap: 48px;
  margin-top: -10rem;
}


.intro-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #E8F3F3;
  text-align: center;
  padding-top: 0.7rem;
  margin: 0 auto;
  margin-bottom: 8px;
}


/* Kontaktieren Sie Uns!
=========================== */
.kontaktieren__wrap {
  background: #F1F9F9;
  padding: 48px;
  text-align: center;
}


/* Footer
====================== */
.footer-bg {
  background: #F3F3F3;
  padding: 44px;
}

.footer-logo {
  width: 271px;
  height: 32;
}

.custom-border {
  width: 2px;
  height: 15px;
  background: #3B7B7D;
  border-radius: 1px;
}

.kontakt-title {
  font-size: 28px;
  font-weight: 600;
}

.legal-items {
  display: flex;
  align-items: center;
  gap: 19px;
}


/* submit data
=================== */
.wrapper-box {
  width: 720px;
  max-width: 100%;
  padding: 76px 0 20px 20px;
  margin: 0 auto;
}

.data-wrap {
  display: flex;
  gap: 48px;
  margin-top: 50px;
  margin-bottom: 50px;
}

button:disabled,
button[disabled] {
  background: rgba(14, 4, 4, 0.16);
  color: #0a0000;
}