@import url(header.css);
@import url(slider.css);
@import url(footer.css);
@import url(contact.css);
@import url(frontpage.css);
@import url(blog.css);
@import url(aboutus.css);
@import url(hekimlerimiz.css);
@import url(comment.css);
@import url(randevu-al.css);
@import url(keyframes.css);
@import url(blog-details.css);
@import url(tedavi-detay.css);
@import url(product-category-list.css);
@import url(productdetails.css);
@import url(responsive.css);




* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}
.mt-50{
margin-top:50px;
}
.mt-25{
margin-top:25px;
}
.mb-50{
margin-bottom:50px;
}

.mb-25{
margin-bottom:25px;
}

a {
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 16px);
  color: #505050;
}

span {
  font-size: clamp(12px, 1vw, 16px);
}

button {
  font-size: clamp(12px, 1vw, 16px);

}
p{
  color: #505050;
  font-size: clamp(12px,2vw,16px);
  font-weight: 500;
}


/* Sayfa içeriği karartma efekti */
.container-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Siyahımsı yarı saydam renk */
  z-index: 10;
  /* Sayfa içeriğinin önüne geçsin */
  pointer-events: none;
  /* Katman tıklamaları engellemesin */
  opacity: 0;
  /* Başlangıçta görünmez */
  transition: opacity 0.3s ease;
  /* Yumuşak geçiş efekti */
}

/* Karartma aktif olduğunda */
.container-wrapper.dim::before {
  opacity: 1;
  /* Görünür hale getir */
}

.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 0px 70px 0px;
}
.content
{
  max-width: 85%;
  width: 100%;
  height: 100%;
}
.darkBackG {
  background-color: #070d13;
}
.banner{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.banner img
{
  width:100%;
  height: 100%;
  object-fit: cover;
  animation:bannerAnimate 10s infinite;
}

.banner-header a:hover
{
  transform: scale(1.05);
}
.banner-header a{
  font-size: clamp(15px,3vw,35px);
  color: #fff;
  transition: all 0.3s ease;
}

.banner-header
{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50px;
  max-width: 40%;
}
.mt-10
{
  margin-top: 10px;
}


/* Before after slider baslangic */
.image-comparison {
  max-width: 700px;
  margin: 20px auto;
  border-radius: 70px;
  overflow: hidden;
}

.image-comparison img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-comparison .images-container {
  position: relative;
  display: flex;
}

.image-comparison .images-container .before-image {
  position: absolute;
  top: 0;
  width: 50%;
}

.image-comparison .slider {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.image-comparison .slider-line {
  position: absolute;
  height: 100%;
  width: 3px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
}

.image-comparison .slider-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  color: #fff;
  transform: translate(-50%, -50%) rotateZ(90deg);
background: #ea4b068a;
    border-radius: 100%;
}
/* Before After Slider Bitis*/