/* Section background */
.doctor-section {
  background: #ffffff;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: #1E3A8A;
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  margin-bottom: 40px;
  text-align: center;
  flex: 1;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background: linear-gradient(to right, #1E3A8A, #600018);
  border-radius: 3px;
}

/* Intro Box */
.doctor-intro {
  /* background: #ffffff; */
  border-radius: 12px;
  /* box-shadow: 0px 5px 15px rgba(0,0,0,0.1); */
  overflow: hidden;
  background: linear-gradient(to bottom, #eef5fa, #91aaca);
}

/* Video Styling */
.video-box {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* Doctor Info */
.doctor-info h4 {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

.doctor-info p {
  font-size: 15px;
  color: #444;
  text-align: left;
}


/* CSS (separate file recommended) */
.seamless-carousel {
  --scroller-height: 110px;
  --gap: 12px;
  --duration: 20s;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.seamless-carousel__track {
  display: flex;
  gap: var(--gap);
  align-items: center;
  /* track will contain two identical sets of images */
  animation: seamless-scroll var(--duration) linear infinite;
  will-change: transform;
}

.seamless-carousel__track img {
  height: var(--scroller-height);
  width: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #600018;
  user-select: none;
  pointer-events: none;
}

/* Move by 50% (half of the track width) -> one set width */
@keyframes seamless-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.seamless-carousel:hover .seamless-carousel__track {
  animation-play-state: paused;
}


.btn-doctor {
  background: linear-gradient(to bottom, #122a51, #445263);
  /* gradient blue */
  color: #fff;
  font-weight: 700;
  border: 2px solid #0a5fbf;
  border-radius: 8px;
  padding: 12px 24px;
  text-align: left;
  width: fit-content;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.6),
    0px 4px 6px rgba(0, 0, 0, 0.15);
}

/* Hover effect */
.btn-doctor:hover {
  background: linear-gradient(to bottom, #0a5fbf, #084a96);
  border-color: #084a96;
}

/* Optional: focus effect */
.btn-doctor:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 95, 191, 0.3);
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .doctor-info {
    text-align: center;
  }

  .doctor-info h4,
  .doctor-info p {
    text-align: center;
  }

  .doctor-gallery {
    justify-content: center;
  }
}

.video-thumb {
  position: relative;
  cursor: pointer;
}

.video-thumb img {
  width: 100%;
  border-radius: 6px;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px 14px;
  border-radius: 50%;
  font-size: 22px;
}

@media (max-width: 992px) {
  .main-video-section {
    flex-direction: column-reverse !important;
  }

  /* Optional: spacing fix when reversed */
  .main-video-section > div {
    margin-bottom: 20px;
  }
}