/* ── Bottom bar: always visible, never hides on scroll ── */
.tb-bar.tb-hide {
  transform: translateX(-50%) !important;
  opacity: 1 !important;
}
@media (max-width: 767px) {
  .tb-bar.tb-hide {
    transform: none !important;
  }
  /* space at the end of the page so the bar never covers the footer */
  body {
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) {
  body {
    padding-bottom: 90px;
  }
}

/* ── Desktop hero image (background) ── */
@media (min-width: 992px) {
  .hero-desktop-bg {
    background-image: url('assets/images/dr-vipin-banner-desktop.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
  }
}

/* ── Mobile hero image (shown under the text) ── */
@media (max-width: 991px) {
  .hero-desktop-bg {
    background-image: none !important;
  }
  .hero-mobile-photo {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;               /* portrait crop made for phones */
    object-fit: cover;
    object-position: center top;
    border-radius: 22px;
  }
}


.blogp{
        font-size: 16px;
}

 .service-box:hover img.hover-effect {
                                                filter: brightness(0) invert(1); /* Makes the image white */
                                                transition: filter 0.3s ease, transform 0.3s ease; /* Smooth transition */
                                            }
                                            
                                            .hover-effect {
                                                transition: filter 0.3s ease, transform 0.3s ease; /* Initial smoothness */
                                            }
.hover-color {
    transition: filter 0.3s ease !important;
}

.hover-color:hover {
    filter: brightness(0) invert(1) !important;
}
.white-version a.rn-btn {
    background: var(--gradient-box-w);
    box-shadow: none;
    color: var(--color-primary);
}
.rn-service .over-link {
  pointer-events: none;
}

.rn-service .rn-btn {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.cd-words-wrapper{

top: -3px;}





.hero-bg .slide.slider-style-1 {
  position: relative;
  /*min-height: 100vh;*/
  display: flex;
  align-items: center;
  padding: 140px 0 90px;
  background: #ffffff url('../../assets/images/dr-vipin-banner.jpg') no-repeat right center / cover !important;
}
 
/* White fade on the left so the text sits on a clean white area; the doctor on the right stays visible */
.hero-bg .slide.slider-style-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgb(255 255 255 / 21%) 35%, rgba(255, 255, 255, 0.65) 52%, rgba(255, 255, 255, 0) 72%);
  z-index: 0;
}
.hero-bg .slide.slider-style-1 .container {
  position: relative;
  z-index: 1;
}
 
.hero-bg .slider-style-1 .content .inner .description {
  /*max-width: 520px;*/
  max-width: 633px;
}
 
/* ── Tablet & mobile ── */
@media (max-width: 991px) {
  .hero-bg .slide.slider-style-1 {
    min-height: auto;
    padding: 120px 0 70px;
    background-position: 72% center !important;
  }
  /* Full white wash on small screens: text sits over the photo */
  .hero-bg .slide.slider-style-1::before {
    background: rgba(255, 255, 255, 0.88);
  }
}

.slide.slider-style-1 .content {
    /*margin-top: 114px;*/
}
.white-version .rn-header .header-right a.rn-btn {
  background: var(--gradient-box-w);
  /*box-shadow: var(--shadow-white-3);*/
}


/* ── Video Testimonial Section ── */
.vt-section {
  background: var(--background-color-2, #212428);
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
}

/* Subtle animated gradient blob in background */
.vt-section::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,1,79,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Section header */
.vt-head {
  text-align: center;
  margin-bottom: 60px;
}
.vt-head .subtitle {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary, #ff014f);
  margin-bottom: 14px;
  position: relative;
}
.vt-head .subtitle::before,
.vt-head .subtitle::after {
  content: '';
  position: absolute;
  top: 50%; width: 28px; height: 1.5px;
  background: var(--color-primary, #ff014f);
  transform: translateY(-50%);
}
.vt-head .subtitle::before { right: calc(100% + 10px); }
.vt-head .subtitle::after  { left:  calc(100% + 10px); }

.vt-head h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}
.vt-head h2 span {
  background: linear-gradient(135deg, #ff014f, #d11414);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Video Cards Grid ── */
.vt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 960px;
  margin: 0 auto;
}

/* ── Single Video Card ── */
.vt-card {
  background: linear-gradient(145deg, #1e2024, #23272b);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
  transition: transform .36s cubic-bezier(.4,0,.2,1),
              box-shadow .36s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.vt-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.45),
              10px 10px 19px #1c1e22;
}

/* ── Video Wrapper ── */
.vt-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111315;
  overflow: hidden;
  cursor: pointer;
}

.vt-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .3s ease;
}

/* Play button overlay */
.vt-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.5) 100%
  );
  transition: opacity .3s ease;
  z-index: 2;
}
.vt-video-wrap.playing .vt-play-overlay {
  opacity: 0;
  pointer-events: none;
}

.vt-play-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff014f, #d11414);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(255,1,79,0.5);
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s ease;
  border: none; cursor: pointer;
  flex-shrink: 0;
}
.vt-play-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 12px 40px rgba(255,1,79,0.65);
}
.vt-play-btn svg {
  width: 26px; height: 26px;
  fill: #ffffff;
  margin-left: 4px; /* optical centre for play icon */
}

/* Pause button (shown when playing) */
.vt-pause-btn {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background .2s;
  z-index: 3;
}
.vt-video-wrap.playing .vt-pause-btn { opacity: 1; }
.vt-pause-btn:hover { background: rgba(255,1,79,0.5); }
.vt-pause-btn svg {
  width: 14px; height: 14px;
  fill: #ffffff;
}

/* Progress bar -->*/
.vt-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
  z-index: 4;
}
.vt-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff014f, #ff6b8a);
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Card Footer ── */
.vt-card-footer {
  padding: 22px 24px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.vt-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff014f, #d11414);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px; font-weight: 700;
  color: #ffffff;
  
  box-shadow: 0 4px 14px rgba(255,1,79,0.3);
}

.vt-info { flex: 1; }
.vt-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 3px;
  
}
.vt-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary, #ff014f);
}

/* Stars -->*/
.vt-stars {
  display: flex; gap: 3px;
}
.vt-stars svg {
  width: 15px; height: 15px;
  fill: #F59E0B;
}

/* ── Google badge ── */
.vt-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  text-decoration: none;
}
.vt-google-badge svg { width: 14px; height: 14px; }

/* ── bottom CTA ── */
.vt-cta {
  text-align: center;
  margin-top: 52px;
}
.vt-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  border-radius: 100px;
  background: linear-gradient(145deg, #ff014f, #d11414);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(255,1,79,0.35);
  transition: transform .28s ease, box-shadow .28s ease;
}
.vt-cta-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(255,1,79,0.48);
  color: #ffffff;
}
.vt-cta-link svg {
  width: 16px; height: 16px;
  stroke: #fff; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .vt-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  .vt-section { padding: 70px 0 80px; }
}

.rn-service .title a:hover, a:focus, a:active {
    text-decoration: none;
    outline: none;
    color: #fff;
}





/* ── Bar ── */
.tb-bar{
  position:fixed; left:50%; bottom:18px; z-index:1000;
  transform:translateX(-50%);
  width:min(440px, calc(100% - 32px));
  display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
  padding:10px 6px 8px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(17,24,39,.06);
  border-radius:22px;
  box-shadow:0 12px 40px rgba(17,24,39,.14);
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.tb-bar.tb-hide{ transform:translate(-50%,140%); opacity:0; }
 
/* ── Items ── */
.tb-item{
  appearance:none; -webkit-appearance:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin:0; padding:4px 0; border:none; background:none; box-shadow:none;
  font-family:inherit; font-size:11px; font-weight:600; line-height:1.2; letter-spacing:.01em;
  color:#3c3f45 !important; text-decoration:none !important; cursor:pointer;
}
.tb-item svg{ width:22px; height:22px; transition:transform .25s ease; }
.tb-item:hover svg{ transform:translateY(-2px); }
.tb-item:hover{ color:#1e2125 !important; }
.tb-call svg{ color:#ff014f; }
.tb-wa   svg{ color:#25D366; }
.tb-ig   svg{ color:#d6249f; }
.tb-yt   svg{ color:#FF0000; }
 
/* ── Raised centre Book button ── */
.tb-book{ margin-top:-34px; }
.tb-book-circle{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#ff014f,#d11414);
  border:5px solid #ffffff;
  box-shadow:0 10px 24px rgba(255,1,79,.40);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tb-book-circle svg{ width:24px; height:24px; color:#ffffff; }
.tb-book:hover .tb-book-circle{ transform:scale(1.07); box-shadow:0 14px 30px rgba(255,1,79,.50); }
.tb-book:hover svg{ transform:none; }
.tb-book .tb-label{ color:#ff014f; }
 
/* ── Location sheet ── */
.tb-overlay{
  position:fixed; inset:0; z-index:1001;
  background:rgba(17,24,39,.40);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.tb-overlay.open{ opacity:1; visibility:visible; }
 
.tb-sheet{
  position:fixed; left:50%; bottom:110px; z-index:1002;
  width:min(360px, calc(100% - 32px));
  transform:translate(-50%,20px);
  background:#ffffff; border-radius:20px; padding:20px 18px 18px;
  box-shadow:0 20px 60px rgba(17,24,39,.20);
  opacity:0; visibility:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility .3s;
}
.tb-sheet.open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
 
.tb-sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
.tb-sheet-title{ margin:0; font-size:17px; font-weight:700; color:#1e2125; }
.tb-sheet-sub{ margin:2px 0 0; font-size:13px; color:#6b7280; }
.tb-close{
  appearance:none; border:none; background:#f3f4f6; box-shadow:none;
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#1e2125; padding:0;
}
.tb-close svg{ width:16px; height:16px; }
 
.tb-loc{
  display:flex; align-items:center; gap:12px;
  margin-top:10px; padding:12px; border-radius:14px;
  border:1px solid #eef0f3; background:#ffffff;
  color:#1e2125 !important; text-decoration:none !important;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.tb-loc:hover{ border-color:#ff014f; background:#fff5f8; transform:translateX(2px); }
.tb-pin{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff0f4; color:#ff014f;
}
.tb-pin svg{ width:19px; height:19px; }
.tb-loc-text{ flex:1; min-width:0; }
.tb-loc-text strong{ display:block; font-size:15px; font-weight:700; }
.tb-loc-text small{ display:block; font-size:12px; color:#6b7280; }
.tb-arrow{ width:18px; height:18px; color:#9ca3af; }
 
/* ── Mobile: attach to the bottom edge, sheet slides up ── */
@media (max-width:767px){
  .tb-bar{
    left:0; right:0; bottom:0; width:100%; transform:none;
    border-radius:20px 20px 0 0; border-bottom:none;
    padding:10px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 30px rgba(17,24,39,.10);
  }
  .tb-bar.tb-hide{ transform:translateY(120%); }
 
  .tb-sheet{
    left:0; right:0; bottom:0; width:100%;
    transform:translateY(100%);
    border-radius:22px 22px 0 0;
    padding:12px 18px calc(20px + env(safe-area-inset-bottom));
  }
  .tb-sheet.open{ transform:translateY(0); }
  .tb-sheet::before{
    content:''; display:block; width:40px; height:4px; border-radius:4px;
    background:#e5e7eb; margin:0 auto 14px;
  }
 
  /* keep template's back-to-top button above the bar */
  .backto-top{ bottom:100px !important; }
}
 
@media (prefers-reduced-motion:reduce){
  .tb-bar, .tb-sheet, .tb-overlay, .tb-item svg, .tb-book-circle{ transition:none; }
}

  /* Hospital name under location title */
.rn-service .content .title {
    margin-bottom: 4px;
}
.rn-service .content .tag {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #ff014f);
    margin-bottom: 14px;
    letter-spacing: .01em;
    transition: color .4s ease;
}
/* Template turns the card dark/red on hover, so switch the tag to white */
.rn-service:hover .content .tag {
    color: #fff;
}
.rn-service .inner .content .title {
    font-family: var(--color-primary);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 6px;
    color: var(--color-lightn);
}

 /*ACHIEVEMENTS — 3D COVERFLOW CAROUSEL*/


.cf-section{
  --cw: clamp(250px, 27vw, 360px);          /* card width */
  --red:#ff014f;
  padding:110px 0 100px;
  overflow:hidden;                           /* clips the side cards */
  scroll-margin-top:90px;
}
.cf-section .section-title{ margin-bottom:50px; }

/* ── Stage ── */
.cf-stage{
  position:relative;
  height:calc(var(--cw) * .75 + 210px);
  perspective:1400px;
  outline:none;
  touch-action:pan-y;                        /* vertical scroll still works on phones */
  user-select:none; -webkit-user-select:none;
}
.cf-stage:focus-visible{ box-shadow:0 0 0 3px rgba(255,1,79,.25); border-radius:24px; }

/* ── Card ── */
.cf-card{
  position:absolute; top:20px; left:50%;
  width:var(--cw); margin-left:calc(var(--cw) / -2);
  background:#fff; border-radius:22px; overflow:hidden;
  border:1px solid #eceef2;
  box-shadow:0 18px 44px rgba(27,29,34,.10);
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.22,.61,.36,1), opacity .65s ease, box-shadow .5s ease, border-color .5s ease;
  cursor:pointer;
  will-change:transform;
}
.cf-card.no-anim{ transition:none !important; }
.cf-card.is-active{
  border-color:rgba(255,1,79,.25);
  box-shadow:0 34px 80px rgba(255,1,79,.20), 0 10px 30px rgba(27,29,34,.10);
  cursor:zoom-in;
}
.cf-card.is-active.cf-noimg-card{ cursor:default; }

/* image */
.cf-img{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:#f4f5f7;
}
.cf-img img{
  width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.cf-card.is-active:hover .cf-img img{ transform:scale(1.06); }
.cf-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(12,13,16,.35), transparent 50%);
  opacity:0; transition:opacity .4s;
}
.cf-card.is-active:hover .cf-img::after{ opacity:1; }

.cf-noimg{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:#fff; text-align:center; padding:20px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.2) 0%, transparent 45%),
    linear-gradient(145deg,#ff014f 0%,#b30f2c 100%);
}
.cf-noimg svg{ width:62px; height:62px; }
.cf-noimg span{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.9; }

.cf-num{
  position:absolute; top:14px; left:14px; z-index:2;
  height:30px; min-width:44px; padding:0 12px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.95); color:var(--red);
  font-size:13px; font-weight:800; letter-spacing:.05em;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.cf-zoom{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.95); color:#1b1d22;
  opacity:0; transform:scale(.8); transition:opacity .35s, transform .35s;
}
.cf-zoom svg{ width:18px; height:18px; }
.cf-card.is-active .cf-zoom{ opacity:1; transform:scale(1); }

/* body */
.cf-body{
  height:150px; padding:20px 22px 22px;
  display:flex; flex-direction:column; gap:8px;
  transition:opacity .5s;
}
.cf-card:not(.is-active) .cf-body{ opacity:.55; }
.cf-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red);
}
.cf-tag svg{ width:14px; height:14px; }
.cf-title{
  margin:0; color:#1b1d22;
  font-size:17px; line-height:1.45; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── Controls ── */
.cf-controls{
  display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px;
}
.cf-arrow{
  width:52px; height:52px; border-radius:50%; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#1b1d22; border:1.5px solid #e4e6eb; box-shadow:none;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.cf-arrow:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:scale(1.06); }
.cf-arrow svg{ width:20px; height:20px; }
.cf-dots{ display:flex; align-items:center; gap:8px; }
.cf-dot{
  width:8px; height:8px; border-radius:999px; padding:0; border:none; cursor:pointer;
  background:#d6d9df; box-shadow:none;
  transition:width .35s ease, background .35s ease;
}
.cf-dot.on{ width:28px; background:var(--red); }
.cf-count{ min-width:58px; text-align:center; font-size:14px; font-weight:700; color:#9aa0ab; letter-spacing:.06em; }
.cf-count b{ color:#1b1d22; }

/* ── Lightbox ── */
.cf-lb{
  position:fixed; inset:0; z-index:99999; padding:30px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,13,16,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.cf-lb.open{ opacity:1; visibility:visible; }
.cf-lb-inner{ max-width:min(1000px,100%); text-align:center; transform:scale(.94); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.cf-lb.open .cf-lb-inner{ transform:scale(1); }
.cf-lb img{ max-width:100%; max-height:78vh; border-radius:14px; display:block; margin:0 auto; }
.cf-lb-cap{ color:#fff; font-size:16px; font-weight:600; margin-top:16px; line-height:1.5; }
.cf-lb-close{
  position:absolute; top:22px; right:22px; width:46px; height:46px; border-radius:50%;
  border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .25s;
}
.cf-lb-close:hover{ background:var(--red); }
.cf-lb-close svg{ width:20px; height:20px; }

/* ── Responsive ── */
@media (max-width:991px){
  .cf-section{ --cw: clamp(240px, 42vw, 340px); padding:80px 0; }
}
@media (max-width:575px){
  .cf-section{ --cw: 74vw; padding:64px 0; }
  .cf-section .section-title{ margin-bottom:36px; }
  .cf-body{ height:140px; padding:16px 18px 18px; }
  .cf-title{ font-size:16px; }
  .cf-controls{ gap:14px; margin-top:26px; }
  .cf-arrow{ width:44px; height:44px; }
  .cf-count{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cf-card, .cf-img img, .cf-lb, .cf-lb-inner, .cf-dot{ transition:none; }
}


@media only screen and (max-width: 479px) {
    .slide .content .inner .title {
        font-size: 30px;
        line-height: 36px;
    }
}
/* stop anything in the hero from pushing past the screen edge */
.hero-bg,
.hero-bg .slide.slider-style-1 { overflow-x: hidden; }
.hero-mobile-img img { max-width: 100%; }

/* Read More sits right under the description */
.hero-bg .button-group {
  padding-top: 0 !important;
  text-align: left !important;
}
@media (max-width: 575px) {
  .hero-bg .slider-style-1 .content .inner .title {
    font-size: 6.9vw;                 /* scales with screen width */
    line-height: 1.25;
    word-break: normal;
  }
  /* force the same three lines everywhere */
  .hero-bg .slider-style-1 .content .inner .title br { display: none; }
  .hero-bg .slider-style-1 .content .inner .title > span:first-of-type { display: block; }
  .hero-bg .header-caption { display: block; }

  .hero-bg .slider-style-1 .content .inner .subtitle { font-size: 13px; letter-spacing: .14em; }
  .hero-bg .slider-style-1 .content .inner .description { font-size: 15px; line-height: 1.75; }
}

.rn-header .header-wrapper.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.header-wrapper .header-right {
    margin-left: auto;
}


  .hero-bg .slide.slider-style-1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 90px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

/* Tablet & mobile: no background photo, image shows below the text */
@media (max-width: 991px) {
  .hero-bg .slide.slider-style-1 {
    background-image: none !important;
    min-height: auto;
    padding: 110px 0 50px;
  }
  .hero-bg .slide.slider-style-1::before {
    display: none;                      /* remove the white fade overlay */
  }
  .hero-mobile-img {
    margin-top: 40px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(27, 29, 34, .12);
  }
  .hero-mobile-img img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /*object-position: 85% center;     */
    /* keeps Dr. Vipin in frame */
  }
}
@media (max-width: 575px) {
  .hero-mobile-img img {
    /*aspect-ratio: 1 / 1;*/
  }
}
.hero-mobile-img { margin-top: 30px; }

.hero-mobile-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 32px;
  text-align: center;
}
.hero-mobile-actions .social-share-inner-left { margin-top: 0; }
.hero-mobile-actions .social-share { justify-content: center; }



/* ── First card: profile photo fills the whole box ── */
.bn-hero { position: relative; overflow: hidden; }

.bn-hero .bn-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;                 /* remove the old pattern/gradient */
}
.bn-hero .bn-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;      /* keeps his face in view */
  display: block;
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}
.bn-hero:hover .bn-hero-bg img { transform: scale(1.05); }

/* dark fade at the bottom so the white text stays readable */
.bn-hero .bn-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(12,13,16,.92) 0%,
    rgba(12,13,16,.65) 40%,
    rgba(12,13,16,.15) 75%,
    rgba(12,13,16,0) 100%);
}
.bn-hero .bn-hero-num,
.bn-hero .bn-hero-body { z-index: 2; }

/* ── Bigger icons on cards 02 to 09 ── */
.bn-sm-icon,
.bn-btm-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  border-radius: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(255, 1, 79, .25);
}
.bn-sm-icon img,
.bn-btm-icon img {
  width: 36px !important;           /* overrides the inline 25px */
  height: 36px;
  object-fit: contain;
}

@media (max-width: 575px) {
  .bn-sm-icon, .bn-btm-icon { width: 54px !important; height: 54px !important; min-width: 54px; border-radius: 15px !important; }
  .bn-sm-icon img, .bn-btm-icon img { width: 30px !important; height: 30px; }
}

/* number stays top-right now that the icon is gone */
.bn-sm-top { justify-content: flex-end; }

/* ── 3D institute logo (cards 02 to 05) ── */
.bn-sm .bn-logo {
  position: absolute;
  left: 50%;
  top: 37%;
  z-index: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .3s ease;      /* fade only, no movement */
}
.bn-logo-tile {
  width: 120px;
  height: 120px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #eef0f4 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),       /* top highlight */
    inset 0 -4px 0 rgba(27,29,34,.06),         /* bottom edge thickness */
    0 22px 34px -12px rgba(27,29,34,.30),      /* main drop shadow */
    0 6px 14px rgba(27,29,34,.08);
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-14deg);
  animation: bnFloat 5.5s ease-in-out infinite;
}
.bn-logo-tile img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  transform: translateZ(28px);                  /* logo pops off the tile */
  filter: drop-shadow(0 8px 10px rgba(27,29,34,.18));
}
/* soft shadow on the "floor" under the tile */
.bn-logo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 90px;
  height: 14px;
  margin-left: -45px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(27,29,34,.22), transparent 70%);
  animation: bnShadow 5.5s ease-in-out infinite;
}
@keyframes bnFloat {
  0%, 100% { transform: rotateX(14deg) rotateY(-14deg) translateY(0); }
  50%      { transform: rotateX(6deg)  rotateY(10deg)  translateY(-9px); }
}
@keyframes bnShadow {
  0%, 100% { transform: scaleX(1);   opacity: 1; }
  50%      { transform: scaleX(.8);  opacity: .6; }
}

/* hover: logo just fades out, stays in place */
.bn-sm:hover .bn-logo {
  opacity: 0;
}

/* ── wide cards 06 to 09: smaller tile in the left column ── */
.bn-logo-sm { position: relative; perspective: 600px; }
.bn-logo-sm .bn-logo-tile { width: 76px; height: 76px; border-radius: 20px; animation: none; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.bn-logo-sm .bn-logo-tile img { transform: translateZ(18px); }
.bn-logo-sm::after { display: none; }
.bn-btm:hover .bn-logo-sm .bn-logo-tile { transform: rotateX(-12deg) rotateY(18deg) scale(1.05); }

/* dark final card: tile matches the dark theme */
.bn-final .bn-logo-tile { background: linear-gradient(145deg, #2a2d33, #1b1d22); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 30px -12px rgba(0,0,0,.6); }

@media (max-width: 575px) {
  .bn-logo-tile { width: 96px; height: 96px; border-radius: 24px; }
  .bn-logo-sm .bn-logo-tile { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-logo-tile, .bn-logo::after { animation: none; }
}


/* ── Institute logo (cards 02 to 05): stable, bigger, 3D depth ── */
.bn-sm .bn-logo {
  position: absolute;
  left: 50%;
  top: 37%;
  z-index: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.bn-logo-tile {
  width: 150px;
  height: 150px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #ffffff 0%, #f1f3f6 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),          /* top highlight */
    inset 0 -6px 0 rgba(27,29,34,.06),          /* bottom edge = thickness */
    0 1px 0 rgba(27,29,34,.04),
    0 20px 36px -14px rgba(27,29,34,.28),       /* drop shadow */
    0 8px 16px rgba(27,29,34,.06);
}
.bn-logo-tile img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(27,29,34,.15));
}
/* no floating shadow underneath */
.bn-logo::after { display: none; }

/* hover: logo hides as the description slides up */
.bn-sm:hover .bn-logo {
  opacity: 0;
  transform: translate(-50%, -60%) scale(.92);
}

@media (max-width: 575px) {
  .bn-logo-tile { width: 120px; height: 120px; border-radius: 28px; }
  .bn-logo-sm .bn-logo-tile { width: 64px; height: 64px; }
}

/* ── Keep all institute logos completely still ── */
.bn-logo-tile,
.bn-logo-sm .bn-logo-tile,
.bn-btm:hover .bn-logo-sm .bn-logo-tile {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
.bn-logo-tile img {
  transform: none !important;
}

/* ── Logo only: no tile background ── */
.bn-logo-tile {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 150px;
  height: 150px;
}
.bn-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}
.bn-logo::after { display: none; }

/* ═══ BENTO: mobile — stacked cards, tap works like desktop hover ═══ */
@media (max-width: 767px) {

  /* stack cards so nothing overlaps */
  .bn-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
  }
  .bn-grid > .bn-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: auto !important;
    cursor: pointer;                    /* lets iPhones apply :hover on tap */
    -webkit-tap-highlight-color: transparent;
  }

  /* ── 01: photo card, full text always visible ── */
  .bn-grid > .bn-hero {
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .bn-hero .bn-hero-bg img { object-position: center 12%; }
  .bn-hero .bn-hero-body {
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    padding: 24px !important;
  }
  .bn-hero .bn-hero-body,
  .bn-hero .bn-hero-body *,
  .bn-hero:hover .bn-hero-body,
  .bn-hero:hover .bn-hero-body * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
  }
  .bn-hero .bn-hero-desc {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    margin: 10px 0 16px !important;
  }

  /* ── 02 to 05: logo + text; tap shows the coloured panel like desktop ── */
  .bn-sm {
    display: flex !important;
    flex-direction: column !important;
    min-height: 300px !important;       /* room for the panel text */
    padding: 22px 22px 24px !important;
  }
  .bn-sm .bn-logo {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center;
    margin: 4px 0 18px;
    transition: opacity .3s ease;
  }
  .bn-sm .bn-logo-tile { width: 110px !important; height: 110px !important; }
  .bn-sm .bn-sm-body {
    position: relative !important;
    inset: auto !important;
    margin-top: auto;                   /* keeps title at the bottom */
  }
  .bn-sm:hover .bn-logo { opacity: 0; } /* same as desktop */

  /* ── 06 to 09: wide cards ── */
  .bn-btm { flex-direction: row !important; align-items: center; gap: 16px; padding: 20px !important; }
}

.bn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-style: italic;
    letter-spacing: 3px;
    color: #ee2850 !important;
    margin-bottom: 14px;
}
.bn-eyebrow::before, .bn-eyebrow::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #df0e26 !important;
}
h4.title {
    font-size: 23px;
    font-weight: 600;
    color: #1e2125;
}
h3.title {
    color: black !important;
}
.contact-about-area h3.title {
    font-size: 25px;
}
.white-version .rn-service .inner .content h3.title {
    color: var(--color-heading-wv);
}
div#about h2.title {
    font-size: 25px;
}
.breadcrumb-inner .title {
    font-weight: 600 !important;
}
.contant h3.title {
    font-size: 22px;
}