/* ========== Base styles ========== */
.sticky-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  z-index: 9999;
  padding: 0;
  color: #fff;
  border: none;
  font-weight: 600;
  transition: all .3s ease;
}

/* ========= Button appearance ========= */
.sticky-btn .btn-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2a93c9, #2a93c9);
  padding: 14px 18px;
  border-radius: 999px 0 0 999px;
  
  transform: translateX(120%);
  animation: slideInLTR 0.8s ease forwards;
  
}

.sticky-btn.ltr { right: 0; }
.sticky-btn.rtl { left: 0; }
.sticky-btn.rtl .btn-inner {
  border-radius: 0 999px 999px 0;
  flex-direction: row-reverse;
  background: linear-gradient(135deg, #2a93c9, #2a93c9);
  animation: slideInRTL 0.8s ease forwards;
  
}

/* ========= Hover effects ========= */
.sticky-btn:hover .btn-inner {
  background: linear-gradient(135deg, #2a93c9, #2a93c9);
  box-shadow: 0 10px 28px rgba(13,110,253,0.4);
  transform: translateX(0) scale(1.05);
  color:#fff
}

/* ========= Icons ========= */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========= Animations ========= */
@keyframes slideInLTR {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRTL {
  from { transform: translateX(-120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ========= Responsive ========= */
@media (max-width: 600px) {
  .sticky-btn .btn-inner {
    padding: 12px 14px;
    font-size: 14px;
  }
}

.hero-section {
    position: relative;
    background-blend-mode: overlay;
}
.breadcrumb a {
    color: #f8f9fa;
    text-decoration: none;
}
.breadcrumb-item+.breadcrumb-item::before { color: #ddd; }

/* Card hover animation */
.profile-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.profile-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* Gradient button */
.btn-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}
.btn-gradient:hover {
    background: linear-gradient(45deg, #6610f2, #0d6efd);
    transform: translateY(-2px);
}

/* Social buttons */
.btn-social {
    width: 35px; height: 35px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    transition: all 0.3s ease;
}
.btn-social:hover {
    background: #0d6efd;
    color: #fff;
}

/* Blog card */
.blog-card img { height: 240px; object-fit: cover; }
.bg-gradient {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: #fff;
}

/* Certificate thumbnails */
.cert-thumb img {
    transition: transform .3s ease;
}
.cert-thumb:hover img {
    transform: scale(1.05);
}
.text-justify {
    text-align: justify;
}

/* Modern Gradient & Glass Theme */
.text-gradient {
  background: linear-gradient(45deg, #007bff, #17a2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dept-badge {
        /*  background: linear-gradient(135deg, #43cea2, #185a9d);*/
		background: linear-gradient(135deg, #69beea,#2a93c9);
          padding: 10px 16px; 
          border-radius: 50px; 
          box-shadow: 0 3px 10px rgba(24, 90, 157, 0.25);
}

.btn-gradient {
  /*background: linear-gradient(135deg, #69beea,#1f7bb0);*/
  background:#2a93c9;
  color: #fff;
  border: none;
  padding: 10px 20px;
  
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-gradient:hover {
 /* background: linear-gradient(135deg, #1f7bb0, #69beea);*/
 background:#69beea;
  box-shadow: 0 4px 10px rgba(42, 147, 201, 0.4);
  color: #fff;
}

.doctor-card {
  border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.doctor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.card-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.doctor-card:hover .card-overlay {
  opacity: 1;
}
.greengrad{background: linear-gradient(135deg, #43cea2, #185a9d);
          padding: 10px 16px; 
          border-radius: 50px; 
          box-shadow: 0 3px 10px rgba(24, 90, 157, 0.25);
}

.text-subline {
    width: 70px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg, #1abc9c, #16a085);
    margin: 6px 0 18px 0;
}

/* -----------------------------------------
   MEMBER PROFILE CARD
------------------------------------------ */
.member-block-type-5 {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    transition: 0.3s ease;
}

.member-block-type-5:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.member-block-type-5 img {
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* -----------------------------------------
   MODERN BUTTONS
------------------------------------------ */
/* .btn-gradient, .btn-ellipse, .btn-primary {
    background: linear-gradient(90deg, #16a085, #1abc9c) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    color: #fff !important;
    transition: 0.3s;
}

.btn-gradient:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
} */

/* -----------------------------------------
   CONTACT INFO
------------------------------------------ */
.contact-info li {
    padding: 6px 0;
    font-size: 15px;
}
.contact-info a {
    color: #34495e !important;
    font-weight: 500;
}
.contact-info a:hover {
    color: #1abc9c !important;
}

/* -----------------------------------------
   SOCIAL ICONS MODERN LOOK
------------------------------------------ */
.list-inline-xs a {
    background: #f2f5f8;
    padding: 10px;
    display: inline-block;
    border-radius: 50%;
    font-size: 14px;
    transition: 0.3s;
}
.list-inline-xs a:hover {
    background: #1abc9c;
    color: #fff !important;
    transform: translateY(-3px);
}

/* -----------------------------------------
   CERTIFICATES GALLERY
------------------------------------------ */
.row-certificates figure img {
    border-radius: 10px;
    transition: 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.row-certificates figure img:hover {
    transform: scale(1.08);
}

/* -----------------------------------------
   RIGHT SIDE SECTION HEADINGS
------------------------------------------ */
.text-start h6 {
    font-size: 20px;
    font-weight: 700;
}

.offset-top-66, .offset-top-60 {
    margin-top: 50px !important;
}

/* -----------------------------------------
   BULLET LIST STYLING (Automatic bullets)
------------------------------------------ */
.modern-ul {
    padding-left: 20px;
}

.modern-ul li {
    list-style-type: none;
    padding-left: 25px;
    margin-bottom: 6px;
    font-size: 15px;
    position: relative;
}

/* modern bullet icon */
.modern-ul li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #1abc9c;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
}

/* -----------------------------------------
   BLOG GRID BEAUTIFICATION
------------------------------------------ */
.post-modern {
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.post-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.15);
}

.post-modern img {
    border-bottom: 4px solid #1abc9c;
}

/* -----------------------------------------
   SIMPLE FADE-IN ANIMATION
------------------------------------------ */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Apply fade-in to main sections */
.section-lg, .member-block-body, .post-modern {
    animation: fadeIn 0.9s ease-out;
}

/* -----------------------------------------
    Responsive Tweaks
------------------------------------------ */
@media (max-width: 768px) {
    .member-block-type-5 {
        padding: 18px;
    }
    .text-start h6 {
        font-size: 18px;
    }
}


/* Universal modern card */
.profile-info-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
    transition: 0.3s ease;
}
.profile-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

/* Card Titles */
.section-title {
    font-weight: 700;
    color: #1b2a49;
    font-size: 20px;
}

/* Card Text */
.section-text {
    font-size: 15px;
    line-height: 1.6;
    color: #34495e;
}

/* Bullet list beautification */
.modern-ul {
    padding-left: 18px;
}
.modern-ul li {
    list-style-type: none;
    padding-left: 22px;
    margin-bottom: 6px;
    position: relative;
}
.modern-ul li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #1abc9c;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
}

/* Card spacing for mobile */
@media (max-width: 768px) {
    .profile-info-card {
        padding: 18px;
    }
}

.doctor-info-header {
    text-align: center;
}

.doctor-name {
    text-align:left;
	
}

/* .doctor-designation {
    font-size: 15px;
    color: #4f627a;
    font-weight: 500;
} */


/* Card Wrapper */


.department-card-modern:hover {
    transform: translateY(-6px);
}

/* Image */
.department-card-modern .dept-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.department-card-modern:hover .dept-img {
    transform: scale(1.1);
}

/* Gradient Overlay */
.dept-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 25px 20px;
    background: linear-gradient(45deg, #0d6efdcc, #2a93c9b5);
    color: #fff;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    opacity: 0;
    transform: translateY(-40%);
    transition: all .45s ease;
}

.department-card-modern:hover .dept-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Title Always Visible */
.dept-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Description Hidden Initially */
.dept-desc {
    font-size: 0.9rem;
    opacity: 0;
    margin-top: 10%;
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease;
	text-align:justify;
}

/* .department-card-modern:hover .dept-desc {
    opacity: 1;
    max-height: 300px;
} */

/* Button */
.dept-btn {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    transition: all .4s ease .1s;
}

.department-card-modern:hover .dept-btn {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255,255,255,0.15);
	
}

.dept-btn:hover {
    background: #fff;
    /* color: #6610f2; */
	color:##2a93c9
}
/* -------------------------------------------------------
   Base Card
------------------------------------------------------- */
.department-card-modern {
    height: 400px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: transform .3s ease;
}

.department-card-modern:hover {
    transform: translateY(-6px);
}

/* -------------------------------------------------------
   Image
------------------------------------------------------- */
.department-card-modern .dept-img-wrapper img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover;
	transition: transform .40s ease;
}

.department-card-modern:hover .dept-img-wrapper img {
    transform: scale(1.1);
}

/* -------------------------------------------------------
   Glassmorphism Overlay (Hidden initially)
------------------------------------------------------- */
.department-card-modern .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;

    padding: 30px 18px;
    opacity: 0;
    transform: translateY(30%);
    transition: all .45s ease;

    /* Glass style */
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.3);
}

/* HOVER REVEAL */
.department-card-modern:hover .card-body {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------
   Title (Always visible on top of image)
------------------------------------------------------- */
.department-card-modern h5 {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width:100%;
    padding: 6px 18px;
    /* border-radius: 50px; */
    font-weight: 700;
   /*  background: rgba(255,255,255,0.25); 
    backdrop-filter: blur(6px);*/
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
	
}
.department-card-modern h6 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 6px 18px;
   /*  border-radius: 50px; */
    font-weight: 700;
    /* background: rgba(255, 255, 255, 0.25); */
    backdrop-filter: blur(6px);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    width: 100% !important;
    text-align: center;
}

/* Prevent Body Title From Showing Before Hover */
.department-card-modern .card-body h5 {
    opacity: 0 !important;
}

/* -------------------------------------------------------
   Description Reveal
------------------------------------------------------- */
/* .department-card-modern p {
    color: #fff !important;
    font-size: .92rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .35s ease;
} */

.department-card-modern:hover p {
    max-height: 130px;
    opacity: 1;
	
}

/* -------------------------------------------------------
   Button Reveal
------------------------------------------------------- */
.department-card-modern .btn-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    border: none;
    color: #fff;
    border-radius: 50px;
    opacity: 0;
    transform: translateY(20px);
    transition: all .35s ease .1s;
}

.department-card-modern:hover .btn-gradient {
    opacity: 1;
    transform: translateY(0);
}

.department-card-modern .btn-gradient:hover {
    background: #fff;
    color: #6610f2;
}

/* -------------------------------------------------------
   MOBILE (No Hover — Tap to toggle)
------------------------------------------------------- */
@media (max-width: 768px) {
    .department-card-modern {
        transform: none !important;
    }
    .department-card-modern .card-body {
        opacity: 0;
        transform: translateY(40%);
    }
    .department-card-modern.active .card-body {
        opacity: 1;
        transform: translateY(0);
    }
    .department-card-modern.active p,
    .department-card-modern.active .btn-gradient {
        opacity: 1;
        max-height: 130px;
        transform: translateY(0);
    }
}
/* --- Always Visible Title Area (Gradient at the bottom) --- */
.dept-title-area {
    position: absolute;
    bottom: 0px;
    /* margin: 10px; */
    left: 0;
    width: 100%;
    padding: 20px 20px 15px;
    height: 50px;
    z-index: 5;
    background: linear-gradient(45deg, #0d6efdcc, #2a93c9b5);
}

.dept-title-text {
    color: #fff;
    font-size: .90rem; /* Make title bigger for visibility */
    font-weight: 700;
    margin-bottom: 10px;
   /*  line-height: 1.2; */
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
	text-transform: capitalize;
}

/* When hovering overlay, hide the title area */
.department-card-modern:hover .dept-title-area {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
}

/* Optional: Smooth show on load */
.dept-title-area {
    opacity: 1;
    visibility: visible;
    transition: all .3s ease;
}

.hr-glass {
    height: 5px;
    border: 1px solid #fff;
    background: #2a93c9;
    border-radius: 50px;
    width: 70%;
    margin: 15px auto;
}

/*///////new doctors/////*/
/* ----------------------------------------------------
   GLOBAL UI ENHANCEMENTS
---------------------------------------------------- */
.section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 12px;
}

/* Smooth paragraphs */
.section-text p {
    line-height: 1.65;
    color: #444;
    margin-bottom: 10px;
}

/* Modern bullet list */


/* ----------------------------------------------------
   DOCTOR IMAGE + HEADER SECTION
---------------------------------------------------- */
.member-block-type-5 img {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* Doctor Title Area */
.doctor-info-header {
    padding: 18px 12px;
    text-align: center;
}

.doctor-designation {
    font-size: 1rem;
    color: #6c6c6c;
    font-weight: 600;
}

/* Description Modern Look */
 .section-text {
    padding: 10px 15px;
    margin: 10px 0;
    /* border-left: 4px solid #0d6efd; */
    background: #f6faff;
    border-radius: 6px;
    color: #444;
	text-align:justify
}

/* ----------------------------------------------------
   CONTACT INFO
---------------------------------------------------- */
.contact-info li {
    padding: 3px 0;
    font-size: 0.95rem;
}
.contact-info a {
    font-weight: 600;
}

/* Social icons */
.list-inline-xs .icon {
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    font-size: 13px;
    color: #0d6efd;
    transition: all .3s ease;
}
.list-inline-xs .icon:hover {
    background: #0d6efd;
    color: #fff;
}

/* ----------------------------------------------------
   PROFILE INFO CARD
---------------------------------------------------- */
.profile-info-card {
    background: #ffffff;
    padding: 28px 28px;
    border-radius: 14px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    transition: all .3s ease;
}
.profile-info-card:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

/* ----------------------------------------------------
   CERTIFICATES
---------------------------------------------------- */
.row-certificates img {
    border-radius: 10px;
    transition: all .3s ease;
    border: 1px solid #ddd;
}
.row-certificates img:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

/* ----------------------------------------------------
   BUTTONS
---------------------------------------------------- */


/* ----------------------------------------------------
   BLOG POSTS (Modern Look)
---------------------------------------------------- */
.post-modern-classic {
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 20px rgba(0,0,0,0.07);
    transition: all .3s ease;
}
.post-modern-classic:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}

.post-modern-classic .post-media img {
    border-radius: 14px 14px 0 0;
}

/* Blog title */
.post-modern-classic h5 a {
    color: #2b2b2b;
    font-weight: 700;
    transition: color .3s ease;
}
.post-modern-classic h5 a:hover {
    color: #0d6efd;
}

/* ----------------------------------------------------
   RESPONSIVE TWEAKS
---------------------------------------------------- */
@media (max-width: 768px) {
    .doctor-name {
        font-size: 1.45rem;
    }
    .profile-info-card {
        padding: 20px;
    }
}
.bgblue{background:#2a93c9;}
.bgwhite{background:#fff;}
.txtwhite{color:#fff;}
.txttheme{color:#2a93c9;}
.txt30{font-size:30px}
.txt20{font-size:20px}
.txt17{font-size:17px}
.txtleft{text-align:left}
.deco{text-decoration:underline}
.p2{width:75%;float:left;font-size:17px}

/* Certificates grid spacing */
.row-certificates img {
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Card spacing inside tabs */
.profile-info-card {
    padding: 10px 5px;
}

/* Make the doctor image stay fixed inside the sticky column */
.member-block-type-5 img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optional: prevent left column from growing taller than needed */
.member-block-type-5 {
    position: relative;
}

.slot-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 12px;
    margin: auto;
    display: inline-block;
    min-width: 70%;
    box-shadow: 0 3px 8px rgba(255,255,255,0.15);
}

.slot-box h6 {
    font-weight: 600;
}

/* Sticky left column */
.doctor-sticky {
    position: sticky;
    top: 100px;
    z-index: 10;
    border-radius: 15px;
}

/* UL Style */
.availability-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.availability-list li {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(6px);
    color: #000;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s ease;
    border-left: 4px solid rgba(255,255,255,0.4);
}

/* Hover Effect */
.availability-list li:hover {
    background: rgba(255,255,255,0.25);
    border-left-color: #fff;
    transform: translateX(3px);
    cursor: pointer;
}

/* Glossy gradient background for the entire card */

/* Main Doctor Card */
.doctor-card-pro {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    height: 330px; /* SMALLER uniform height */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
}

.doctor-card-pro:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.15);
}

/* Image Box */
.doctor-img-box {
    position: relative;
    height: 180px; /* Smaller height */
    overflow: hidden;
}

.doctor-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

/* Image Zoom on hover */
.doctor-card-pro:hover .doctor-img-box img {
    transform: scale(1.15);
}

/* Overlay */
.doctor-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .35s ease, transform .35s ease;
    transform: translateY(20px);
}

.doctor-card-pro:hover .doctor-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* View Profile Button */
.profile-btn {
    transform: translateY(20px);
    transition: transform .35s ease;
    border-radius: 30px;
}

.doctor-card-pro:hover .profile-btn {
    transform: translateY(0);
}

/* Content Section */
.doctor-content {
    padding: 12px 10px;
    flex-grow: 1;
}

.doctor-content h6.name {
    font-size: 16px;
    color: #000;
}

.doctor-content p.designation {
    font-size: 13px;
}

/* Department Badge */
.dept-badge {
    background: linear-gradient(45deg, #0080ff, #00aaff);
    border-radius: 30px;
    color: #fff;
    padding: 5px 12px;
    font-size: 12px;
}

/* Make Cards Uniform Height on all screens */
.row .col-lg-3,
.row .col-md-4,
.row .col-sm-6 {
    display: flex;
    margin-bottom: 20px;
}

.row .col-lg-3 > .doctor-card-pro,
.row .col-md-4 > .doctor-card-pro,
.row .col-sm-6 > .doctor-card-pro {
    width: 100%;
}
/* Main Flip Card Container */
.doctor-flip-card {
    width: 100%;
    height: 340px;
    perspective: 1000px;
    margin-bottom: 25px;
}

/* Inner wrapper */
.doctor-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .7s;
    transform-style: preserve-3d;
}

/* Flip on hover */
.doctor-flip-card:hover .doctor-flip-inner {
    transform: rotateY(180deg);
}

/* FRONT side */
.doctor-flip-front,
.doctor-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* FRONT styling */
.doctor-flip-front {
    background: #fff;
}

/* BACK side */
.doctor-flip-back {
   /*  background: linear-gradient(135deg, #0066ff, #00aaff); */
	background: linear-gradient(135deg, #2a93c9, #2a93c987);
    transform: rotateY(180deg);
    padding: 20px 10px;
    color: #fff;
}

/* Doctor Image */
.doctor-img-box {
    height: 180px;
    overflow: hidden;
}

.doctor-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* FIXES CUTTING FROM TOP */
    transition: transform .35s ease;
}

.doctor-flip-front:hover .doctor-img-box img {
    transform: scale(1.12);
}

/* Content */
.doctor-content h6 {
    font-size: 16px;
    margin-top: 10px;
}

.designation {
    font-size: 13px;
}

/* Department Badge */
.dept-badge {
    background: linear-gradient(45deg, #0080ff, #00aaff);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    color: #fff;
}

/* Buttons */
.flip-btn {
    width: 80%;
    border-radius: 30px;
}

/* Animated Department Title */
.dept-title-animated {
    font-size: 22px;
    font-weight: bold;
    color: #0077cc;
    border-left: 5px solid #0077cc;
    padding-left: 12px;
    animation: fadeSlideIn .7s ease-out;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}