@charset "utf-8";
/* CSS Document */

@media (min-width: 769px) {
  .goverlay {
    background: rgba(20, 71, 76, 0.67);
  }
}
.btn-explore:hover {
color:#fff;
    
}
 a.weiss {display: none;

}
.buchen{background-color:#eaf5f2;}
.teas{
    border-bottom: 6px solid #33adad;
}

#hero{min-height: 30vh;}
.box3, .box4, .box5{margin-top: 20px;}
.hero-3 .content .icon-box {

  padding: 20px 30px;

}

div.icon-box.box5 i {
  font-size: 20px;
}
img.boxprofil {
    max-height: 340px;
}
.bgdiv{background: #edf1ee;margin-bottom: 30px; }

.about .image-grid {

  min-height: 550px;
}

.doctors .team-member {

  padding: 0px 20px 0px 0px;

}.doctors .team-member .member-info {
  padding-left: 30px;
  padding-top: 20px;
}
.doctors .team-member .pic {

  width: 222px;
  border-radius: 8px 0px 0px 0px;

}
.services .service-card .service-hover {

  opacity: 0.3;

}
.services .service-card h3 {

  font-size: 20px;

}

.feature-list li {

  align-items: start;
}
.section-title h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.section-title h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.steps .steps-content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.steps .steps-content h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.steps h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}
#steps .pic {margin:0px 15px 0px 0px;
border-radius: 8px;}
#steps .member-info{margin:0px 15px 0px 0px;}
.steps-content-1{padding: 20px 20px 20px 0px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .box3, .box4, .box2, .box1{margin-top: 20px;}
    .footer-links .bi-check-circle-fill{display: none;}
	.section-title h2 {
  font-size: 24px;
}
	.doctors .team-member {
  padding: 20px 0px 20px 0px;
}
    .head2{display: none;}
    
    .steps h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0px;
}
    .section-title {
  padding-bottom: 30px;
}
.steps .steps-content h2 {
  font-size: 1.5rem;
  margin-top: 20px;
}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
        .box3, .box4, .box2, .box1{margin-top: 20px;}
    .weiss{display: none;}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.doctors .team-member {
  padding: 20px 0px 20px 0px;
}    .weiss{display: none;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	    .weiss{display: none;}
}

/* iPad 3 (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio : 2),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (min-resolution: 192dpi) { 
    .weiss{display: none;}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    .weiss{display: none;}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	    .weiss{display: none;}
}

/* Retina displays ----------- */
@media  only screen 
and (-webkit-min-device-pixel-ratio : 2), 
only screen 
and (min-resolution: 192dpi) {

}


.footer .footer-links, a.footer-links {
  color: #fff;
}

  .hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
      }
    .hero-btns {
      justify-content: center;
    }

    .btn-explore,
    .btn-contact {
      padding: 12px 32px;
      border-radius: 50px;
      font-weight: 500;
      font-size: 1rem;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .btn-explore {
      background-color: var(--accent-color);
      color: var(--contrast-color);
      border: 2px solid var(--accent-color);

    }
 .btn-explore:hover {
        background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
        border-color: color-mix(in srgb, var(--accent-color), transparent 15%);
      }

    .btn-contact {
      border: 2px solid var(--accent-color);
      color: var(--accent-color);

    }