/* IMAGE CONTAINER */
.home-about {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  position: relative; /* for absolute children */
  min-height: 400px;
  /* border-radius: 12px; */
  overflow: hidden;
}

/* IMAGE */
.mobile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* GET APPOINTMENT BUTTON */

.aa {
  position: absolute;
  top: 40%;
  left: 28px; /* left side */
  transform: translateY(-50%);
  padding: 10px 20px;
  background: #00a9a4;
  color: #feffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: 0.3s;
  z-index: 10; /* ensure it's above the image */
}

.aaa {
  padding: 12px 20px;
  background: #00a9a4;
  color: #feffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  /* transition: 0.3s; */
  z-index: 10; /* ensure it's above the image */
}

/* ABOUT CONTENT (GLASS EFFECT) */
.about-content {
  position: absolute;
  top: 50%;
  right: 30px; /* right side */
  transform: translateY(-50%);
  width: 40%;
  padding: 25px;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

  color: #000;
  text-align: left;
  animation: slideInRight 0.8s ease forwards;
}

/* ANIMATION */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate(50px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* TEXT */
.about-content h2 {
  margin-bottom: 12px;
  font-size: 28px;
}

.about-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* 📱 MOBILE VIEW */
@media (max-width: 768px) {
  .home-about {
    min-height: auto;
  }

  .aaa {
    /* position: static; */
    /* transform: none; */
    /* display: block; */
    width: 7.5rem;
    padding: 0;
    text-align: center;
    margin: 0 auto;
  }
  .aaa {
    padding: 12px 20px;
    background: #00a9a4;
    color: #feffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    /* transition: 0.3s; */
    z-index: 10; /* ensure it's above the image */
  }
  .about-content {
    position: static;
    transform: none;
    width: 92%;
    margin: 15px auto 25px;
    /* padding: 18px; */

    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    animation: none;
  }

  .about-content h2 {
    font-size: 22px;
  }

  .about-content p {
    font-size: 15px;
  }
}
/* about -get appointment button */

@media (max-width: 768px) {
  .aa {
    top: 45%;
    margin-left: 70%;

    padding: 10px 15px;
  }
}
@media (max-width: 650px) {
  .aa {
    top: 40%;
    margin-left: 65%;

    padding: 12px 20px;
  }
}
@media (max-width: 550px) {
  .aa {
    top: 35%;
    margin-left: 60%;

    padding: 5px 8px;
  }
}
@media (max-width: 450px) {
  .aa {
    top: 30%;
    margin-left: 55%;

    padding: 5px 8px;
  }
}
@media (max-width: 400px) {
  .aa {
    top: 27%;
    margin-left: 53%;
  }
}