@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=New+Rocker&family=Rubik+Dirt&family=Teko:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=New+Rocker&family=Teko:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@font-face {
  font-family: "BahijTitr";
  src: url("/fonts/Bahij Titr-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HamzaBabaZar';
  src: url('../fonts/hamza-baba-zar.ttf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TahzeebZar';
  src: url('../fonts/tahzeeb-zar.ttf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.TahzeebZar {
  font-family: 'TahzeebZar', sans-serif !important;
}

.HamzaBabaZar {
  font-family: 'HamzaBabaZar', sans-serif !important;
}
/* Apply BahijTitr only to headings, spans, paragraphs, links, buttons */
:is(.pashto-font h1, .pashto-font h2, .pashto-font h3, .pashto-font h4,
    .pashto-font h5, .pashto-font h6, .pashto-font p, .pashto-font span,
    .pashto-font a, .pashto-font button):not(:where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .bi)) {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl;
  text-align: right;
}
.rtl-text55 {
  direction: rtl;
  text-align: justify;
  text-justify: inter-word;
}
/* Font Awesome families/weights are managed by fontawesome-icons.css. */
/* Pashto font only for text */
.pashto-text {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl !important;
  text-align: right !important;
  display: inline-block; /* ensures animation works */
}
.pashto-text1 {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl !important;
  text-align: right !important;
  display: inline-block; /* ensures animation works */
  font-size: 5rem !important;
}
/* Keep Font Awesome icons intact */
.header-center i {
  direction: ltr;
  display: inline-block;
}

.experience-badge {
  display: flex;
  flex-direction: column; /* د متن او کرورډ ټیکسټ لپاره عمودي */
  align-items: center; /* سنټر کې سنټرایز */
  text-align: center; /* ټولو متنونو لپاره سنټرایز */
  gap: 5px; /* لږ فاصله د b او curved-text ترمنځ */
}

/* یوازې نمبر LTR وښایه */
.ltr-badge {
  direction: ltr;
  display: inline-block;
}

/* Pashto font یوازې curved-text لپاره */
.curved-text .pashto-font {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl;
  text-align: center;
}

.pashto-font *:not(:where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .bi)) {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl;
  text-align: right;
}

/* Apply Pashto font to all text except icons */
.pashto-font4 *:not(i):not(:where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .bi)) {
    font-family: "BahijTitr", sans-serif !important;
 
    text-align: right;
}

/* Apply Pashto font directly to spans, buttons, links, paragraphs (optional redundancy) */
:is(.pashto-font4 span, .pashto-font4 button, .pashto-font4 a, .pashto-font4 p):not(:where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .bi)) {
    font-family: "BahijTitr", sans-serif !important;
    direction: rtl;
    text-align: right;
}

/* Icon family, weight and direction belong to fontawesome-icons.css. */
@font-face {
  font-family: "MSAbdali";
  src: url("/fonts/MSAbdali-Megasoft.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Pashto paragraph font */
.pashto-paragraph {
  font-family: "MSAbdali", sans-serif !important; /* MS Abdali فونټ */
  direction: rtl;
  text-align: right;
}

.bahij-heading {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl;
  text-align: center;
}
.bahij-heading22 {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl;
  text-align: right;
}
/* Only sets BahijTitr font for Pashto text */
.font-bahij {
  font-family: "BahijTitr", sans-serif !important;
}

.font-bahij-22 {
  font-family: "BahijTitr", sans-serif !important;
  text-align: center;
}
.font-bahij-d {
  font-family: "BahijTitr", sans-serif !important;
  text-align: center;
}
/* When table is RTL (Pashto), push download button to the left */
.download-table[dir="rtl"] td:last-child {
  text-align: left;
}

.download-table[dir="rtl"] .download-btn {
  float: left;
}

/* Your Pashto font */
.font-bahij-download {
  font-family: "BahijTitr", sans-serif !important;
  direction: ltr;
}

.font-bahij-hero {
  font-family: "BahijTitr", sans-serif !important;
  font-size: 50px !important;
}
.font-bahij1 {
  font-family: "BahijTitr", sans-serif !important;
  direction: rtl; /* ensures right-to-left text flow */
  text-align: right; /* aligns text to the right */
}
/* Only sets MSAbdali font for Pashto descriptions */
.font-abdali {
  font-family: "MSAbdali", sans-serif !important;
  text-align: center;
}
/* MS Abdali font + RTL for Pashto text */
.font-abdali1 {
  font-family: "MSAbdali", sans-serif !important;
  direction: rtl; /* ensures right-to-left text flow */
  text-align: right; /* aligns text to the right */
}

.rtl-text {
  direction: rtl;
  text-align: right;
}

/* CSS */
.rtl-text7 {
  direction: rtl !important;
  text-align: right !important;
  display: block;
}
.rtl-text3 {
  direction: rtl;          /* Right-to-left text */
  text-align: right;       /* Align text to the right */
  padding-right: 30px;     /* Add a little space from the right edge */
  padding-left: 5px;       /* Optional: small padding on left */
}
/* د پښتو اکارډیون سرلیک لپاره */


.ward-menu {
  display: flex;
  gap: 10px;
}

.rtl-menu {
  direction: rtl;
  justify-content: flex-start;
}




:root {
  --brand-green: #4cb648;
  --brand-blue: #009fe3;
  --brand-gradient: linear-gradient(
    90deg,
    var(--brand-green) 0%,
    var(--brand-blue) 100%
  );
  --gray-tab: #e0e0e0;
  --gray-hover: #c2c2c2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  cursor: default;
  overflow-x: hidden;
}


/* Search Page Design */
.search-hero {
  width: 100%;
  background: linear-gradient(to right, #0060ff, #00b8ff);
  color: white;
  padding: 50px 20px;
  text-align: center;
  margin-bottom: 40px;
}

.search-hero h1 {
  font-size: 34px;
  margin-bottom: 10px;
}

.search-hero p {
  font-size: 18px;
  opacity: 0.9;
}

/* Search Box */
.search-box input {
  width: 100%;
  padding: 15px 30px;
  font-size: 18px;
  border: 2px solid #0077ff;
  border-radius: 8px;
  outline: none;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* Results Container */
.results {
  margin-top: 35px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Result Card */
.result-item {
  padding: 20px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  margin-bottom: 15px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  transition: 0.3s;
}

.result-item:hover {
  background: #eef7ff;
}

/* Title */
.result-item h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #0050b3;
  cursor: pointer;
}

/* Description */
.result-item p {
  margin: 0 0 10px;
  color: #444;
}

/* Link */
.result-item a {
  color: #0066ff;
  font-weight: bold;
  text-decoration: none;
}

/* Search Page Design */

/* End of Header/Menu Bar/Logo Section */

/* Organizational Structure Section */
.org-structure-section {
  background: #f9f9f9;
  padding: 50px 20px;
  font-family: Arial, sans-serif;
}

.org-structure-section h2 {
  text-align: center;
  color: #0600a7;
  font-size: 30px;
  opacity: 0;
  transform: translateX(100px);
  animation: slideInFromRight 1s forwards;
  animation-delay: 0.3s;

  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.3),
    4px 4px 8px rgba(0, 0, 0, 0.2),
    6px 6px 12px rgba(0, 0, 0, 0.1);
}

@keyframes slideInFromRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.org-structure-section p {
  text-align: justify;
  margin: 0 50px;
  padding: 20px;
  line-height: 1.7;
  max-width: calc(100% - 60px);
  word-wrap: break-word;
}

.org-structure-section p[dir="rtl"] {
  direction: rtl;
  text-align: justify;      /* دا مهم دی */
  text-align-last: right;
}

@media (max-width: 576px) {
  .org-structure-section p {
    margin: 10px 20px;
    padding: 5px 5px 5px 5px;
    font-size: 15px;
    line-height: 1.6;
    text-align: justify;
    text-align-last: left;
  }
}
.toggle-btn {
  display: block;
  margin: 0 auto 30px;
  padding: 12px 200px;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(135deg, #0027e8, #00c6ff);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .toggle-btn {
    padding: 12px 100px;
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .toggle-btn {
    width: 90%;
    padding: 12px 0;
    font-size: 16px;
    border-radius: 6px;
  }
}

@media (max-width: 400px) {
  .toggle-btn {
    width: 95%;
    font-size: 15px;
    padding: 10px 0;
  }
}

.toggle-btn:hover {
  opacity: 0.9;
}

.org-chart {
  max-width: 500px;
  margin: 0 auto;
}

.org-node {
  margin-left: 20px;
  margin-top: 15px;
}

.node-header {
  display: flex;
  align-items: center;
  background: #a7c2e2;
  border-radius: 8px;
  padding: 5px 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.node-img {
  width: 90px;
  height: 110px;
  border-radius: 8px;
  padding: 3px;
  margin-right: 15px;
  object-fit: cover;
  border: 2px solid #7eeddc;
}

.node-info {
  flex-grow: 1;
}

.node-info strong {
  display: block;
  font-size: 16px;
  color: #0015f9;
}

.node-info span {
  font-size: 14px;
  color: #000000;
}

.expand-btn {
  background: #0027e8;
  color: #fff;
  width: 50px;
  height: 50px;
  border: none;
  padding: 5px 8px;
  border-radius: 50%;
  cursor: pointer;
}

.expand-btn:hover {
  background: #001a9c;
}

.children {
  margin-left: 40px;
}

/* Keep deep branches readable without overflowing narrow viewports. */
.org-chart .org-node {
  margin-left: 0;
  margin-inline-start: 20px;
}

.org-chart .children {
  margin-left: 0;
  margin-inline-start: 20px;
}

.org-chart .node-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

.org-chart .node-img,
.org-chart .expand-btn {
  flex-shrink: 0;
}

.org-chart .node-img {
  margin-right: 0;
  margin-inline-end: 15px;
}

@media (max-width: 576px) {
  .org-chart .org-node,
  .org-chart .children {
    margin-inline-start: 8px;
  }

  .org-chart .node-img {
    width: 54px;
    height: 66px;
    margin-inline-end: 8px;
  }
}

.hidden {
  display: none;
}
/* Large desktop screens */
@media (min-width: 1201px) {
  .node-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .expand-btn {
    order: 2;
    margin-left: 10px;
  }
}

/* Medium screens / Tablets */
@media (max-width: 1200px) and (min-width: 769px) {
  .node-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .expand-btn {
    order: 2;
    margin-left: 10px;
  }
}

/* Small screens / Large phones */
@media (max-width: 768px) and (min-width: 481px) {
  .node-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .expand-btn {
    order: 2;
    margin-left: 10px;
    width: 40px;
    height: 40px;
  }
}

/* Extra small screens / Mobile phones */
@media (max-width: 480px) {
  .node-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .expand-btn {
    order: 2;
    margin-left: 10px;
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}

/* <!-- Start of Our History Section --> */
.hospital-image {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

.hospital-image img {
  width: 800px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  object-fit: cover;
  transition: all 0.4s ease;
}

.hospital-image img:hover {
  transform: scale(1.02);
}
/* Timeline container */
.timeline-container {
  margin: 20px auto;
  max-width: 1100px;
  padding: 0 20px;
}

/* Timeline title */
.timeline-container h2 {
  font-family: bahijTitrBold, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #0d6efd;
  margin: 60px 10px 10px 10px;
  padding-left: 15px;
  text-align: center;
}

/* Timeline description */
.timeline-container p {
  font-family: "Arial", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #495057;
  background-color: #f8f9fa; /* light card-like background */
  padding: 15px 20px;
  margin: 10px 0 25px 0; /* spacing above and below */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-left: 20px; /* left margin for indentation */
  margin-right: 20px; /* right margin */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  text-align: justify;
  white-space: pre-line;
}

.timeline-container p:hover {
  transform: translateX(5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #e9f5ff; /* hover highlight */
}

/* ===== MISSION HIGHLIGHT ===== */
.mission-highlight {
  background: linear-gradient(120deg, #0a5c7e, #3fb8af);
  color: white;
  text-align: center;
  padding: 20px 20px;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  margin-top: 3px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.mission-highlight h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  background: linear-gradient(270deg, #ff6a00, #ffb347, #ff6a00);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Gradient او bounce animation چټک شوي */
  animation:
    gradientMove 4s ease infinite,
    bounce 1.5s ease-in-out infinite;
  /* text-shadow لږه کم شوی */
  text-shadow:
    1px 1px 4px rgba(0, 0, 0, 0.2),
    0 0 6px rgba(255, 255, 255, 0.3),
    0 0 10px rgba(255, 182, 71, 0.25);
  transition: transform 0.3s ease;
}

/* Hover effect: scale text slightly + underline */
.mission-highlight h2:hover {
  transform: scale(1.12);
}

/* Neon underline effect */
.mission-highlight h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  border-radius: 3px;
  background: #ffb347;
  box-shadow:
    0 0 8px #ffb347,
    0 0 15px #ff6a00;
  transition: width 0.5s ease;
}

.mission-highlight h2:hover::after {
  width: 100%;
}

/* Gradient animation */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Subtle bounce */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.mission-highlight p {
  font-size: 1.1rem;
  line-height: 1.9;
  margin: 0;
  padding: 0 20px;
  font-weight: 300;
  text-align: center;
  text-justify: inter-word;
  width: 100%;
  box-sizing: border-box;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .hospital-image img {
    max-width: 95%;
  }
  .timeline-container {
    padding: 60px 15px;
  }
  .timeline-container h2 {
    font-size: 2rem;
  }
  .mission-highlight {
    padding: 60px 20px;
  }
}

@media (max-width: 768px) {
  .hospital-image img {
    max-height: 350px;
  }
  .timeline-container h2 {
    font-size: 1.8rem;
  }
  .timeline-item .content {
    padding: 15px 20px;
  }
  .mission-highlight h2 {
    font-size: 1.6rem;
  }
  .mission-highlight p {
    font-size: 1rem;
  }
}

/* <!-- End of Our History Section --> */

/* <!-- Start of Director Message Section --> */
.director-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 40px;
  background: #e0f7fa;
}

.director-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}

.director-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2);
}

.director-image {
  flex: 1 1 350px;
  min-width: 350px;
  max-height: 450px;
  overflow: hidden;
  position: relative; /* د pseudo-element لپاره */
}

.director-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

/* Right side animated line */
.director-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 0%;
  background: radial-gradient(circle, #0027e8 0%, #ed0735 100%);
  border-radius: 2px;
  transition: height 1s ease;
  pointer-events: none;
}

.director-card:hover .director-image::after,
.director-image.visible::after {
  height: 100%;
}

.director-card:hover .director-image img {
  transform: scale(1.05);
}

.director-content {
  flex: 2 1 500px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.director-title {
  font-size: 2rem;
  color: #1e3c72;
  margin-bottom: 20px;
}

.director-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  text-align: justify; /* دواړه خواوې مساوي کړي */
  text-justify: inter-word; /* د ټکو په اساس justification */
  overflow: hidden;
  max-height: 150px; /* ابتدایي محدودیت */
  transition: max-height 0.5s ease;
}

.director-text.expanded {
  max-height: 1000px; /* بشپړ متن ښکاره شي */
}

.read-more-btn {
  align-self: flex-start;
  padding: 10px 25px;
  border: none;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.3s;
}

.read-more-btn:hover {
  background: linear-gradient(90deg, #2a5298, #1e3c72);
  transform: translateY(-3px);
}

/* <!-- End of Director Message Section --> */

/* <!-- Start of Our Strategic Direction Section --> */
.strategic-section {
  padding: 80px 40px;
  background: #f0f7fa;
  font-family: Arial, sans-serif;
}

/* Keep long database headings inside the existing responsive cards. */
.strategic-section .section-header,
.strategic-section .shape-card,
.strategic-section .click-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2.5rem;
  color: #1e3c72;
  margin: 0 auto 15px auto;
  display: inline-block;
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.section-header h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 5px;
  background: radial-gradient(circle, #0027e8 0%, #ed0735 100%);
  border-radius: 15px;
  transition: width 0.4s ease;
}

.section-header h2:hover::after {
  width: 100%;
}

.section-header p {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: #000;
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;
  width: 100%;
  max-width: none;
  padding: 0 20px;
  box-sizing: border-box;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}
.shape-card {
  flex: 1 1 280px;
  background: linear-gradient(360deg, #334d50, #cbcaa5);
  border-radius: 30px 5px 30px 5px;
  padding: 30px 20px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}

.shape-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #1e3c72;
}

.shape-card h3 i {
  margin-right: 10px;
  color: #039611;
}

.shape-card p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: #ffffff; 
}

.shape-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

@media (max-width: 992px) {
  .shape-card {
    flex: 1 1 45%;
  }
}

@media (max-width: 600px) {
  .shape-card {
    flex: 1 1 100%;
  }
}

.click-card {
  flex: 1 1 280px;
  background: linear-gradient(90deg, #536976, #bbd2c5);
  border-radius: 15px;
  padding: 30px 20px;
  color: #333;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}

.click-card h3 {
  font-size: 1.5rem;
  color: #1500ff;
}
.click-card p {
  color: #ffffff;
}
.click-card,
.click-card a {
  text-decoration: none;
  color: inherit;
}

.click-card h3 i {
  margin-right: 10px;
  color: #003cff;
}

.click-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

@media (max-width: 992px) {
  .card-row {
    gap: 20px;
  }
  .shape-card,
  .click-card {
    flex: 1 1 45%;
  }
}

@media (max-width: 600px) {
  .shape-card,
  .click-card {
    flex: 1 1 100%;
  }
}
/* <!-- End of Our Strategic Direction Section --> */

/* <!-- Start of Core Values Section --> */
/* the intro (hero) design in the html sub-file */
/* ===== Core Values Cards ===== */
.core-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 25px;
  padding: 60px 10%;
  background: linear-gradient(360deg, #257ed7, #e5e5be);
}

.value-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
}

.value-card:last-child {
  grid-column: 1 / -1;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

@media (max-width: 992px) {
  .core-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .core-values {
    grid-template-columns: 1fr;
  }
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 153, 204, 0.25);
}

.value-card i {
  font-size: 2.5rem;
  color: #1e3c72;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

.value-card:hover i {
  color: #00bfa6;
}

.value-card h3 {
  color: #1e3c72;
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.value-card p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
}

/* <!-- End of Core Values Section --> */
/* Start of Strategic Goals Page */
/* Section */
.objectives-section {
  padding: 60px 20px;
  background: linear-gradient(0deg, #f7f8f8, #acbb78);
}

/* List container */
.objectives-list {
  max-width: 1000px;
  margin: auto;
}

/* Each row */
.objective-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  position: relative;
}

/* hover effect */
.objective-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Number style */
.objective-number {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0027e8, #ed0735);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Icon */
.objective-icon i {
  font-size: 1.8rem;
  color: #ff3d6b;
  transition: 0.3s;
}

.objective-row:hover .objective-icon i {
  color: #009688;
  transform: scale(1.2);
}

/* Text */
.objective-text h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #0027e8;
}

.objective-text p {
  margin: 5px 0 0;
  color: #555;
  font-size: 0.95rem;
  text-align: justify;
}

/* Responsive */
@media (max-width: 600px) {
  .objective-row {
    flex-direction: column;
    text-align: center;
  }

  .objective-number {
    margin-bottom: 10px;
  }
}

/* Download Strategic Plan  */
.download-section {
  padding: 60px 5px;
  background: linear-gradient(0deg, #acbb78, #f7f8f8);

  text-align: center;
}

.download-section .section-title {
  font-size: 2.2rem;
  color: #1e3c72;
  margin-bottom: 30px;
}

.download-table {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-collapse: collapse;
}

.download-center .container-photos {
  max-width: 100%;
  overflow-x: auto;
}

.download-table th,
.download-table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.download-table th {
  background-color: #1e3c72;
  color: #fff;
  text-transform: uppercase;
}

.download-btn {
  display: inline-block;
  padding: 8px 15px;
  background-color: #0f75bc;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease;
  float: right;
  margin-top: 5px;
}

.download-btn i {
  margin-right: 8px;
}

.download-btn:hover {
  background-color: #094a78;
}

@media (max-width: 600px) {
  .download-table th,
  .download-table td {
    padding: 12px 10px;
    font-size: 0.9rem;
  }
}
/* End of Strategic Goals Section */

/* <!-- Start of Strategic Progress Section --> */
.title-section {
  background: linear-gradient(90deg, #000c40, #607d8b);
  text-align: center;
  padding: 80px 20px;
  color: white;
}

.title-section h2 {
  font-size: 3rem;
  font-weight: bold;
  position: relative;
}

.text-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #333;
}

/* IMPORTANT FIX */
.text-section p {
  text-align: justify;
}
.cards-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
  margin: 40px auto;
  padding: 0 15px;
}

.year-card {
  position: relative;
  background: linear-gradient(90deg, #c4d5d5, #acbb78);
  padding: 20px 25px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #0277bd;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  width: 900px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  overflow: hidden;
}

.year-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(61, 0, 230, 0.3);
  transition: width 0.9s ease;
  border-radius: 20px;
  pointer-events: none;
}

.year-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.year-card:hover::after {
  width: 100%;
}

.download-icon {
  font-size: 1.4rem;
  color: #0277bd;
  animation: bounce 1.5s infinite;
  margin-left: 10px;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@media (max-width: 768px) {
  .year-card {
    width: 100%;
    border-radius: 15px;
    padding: 20px 15px;
  }
}
/* <!-- End of Strategic Progress Section --> */

/* <!--  Start of Milestones in Healthcare --> */
.milestones-hero-title {
  background: linear-gradient(
    0deg,
    rgba(68, 68, 132, 1) 0%,
    rgba(180, 172, 164, 1) 100%
  );
  color: #fff;
  padding: 120px 20px;
  text-align: center;
}
.milestones-hero-title h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay: 0.3s;
  text-align: center;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.milestones-hero-title p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* ===================== MILESTONE CARDS SECTION ===================== */
.milestones-section {
  padding: 80px 40px;
  background: #f7fbff;
  text-align: center;
}

.intro-text {
  max-width: 850px;
  margin: 0 auto 50px;
  color: #444;
  font-size: 1.1rem;
  line-height: 1.6;
}

.milestone-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.milestone-card {
  flex: 0 1 calc(25% - 15px);
  box-sizing: border-box;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-family: "Arial", sans-serif;
  overflow: hidden;
  perspective: 1000px;
  height: 300px; /* ثابت لوړوالی د text د سنټر کولو لپاره */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
}

.milestone-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* FRONT SIDE */
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center; /* عمودي مرکز */
  align-items: center; /* افقي مرکز */
  text-align: center;
  padding: 10px 0;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}

.milestone-card:hover .card-front {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* BACK SIDE */
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ICON */
.card-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

/* GRADIENTS */
.card-2005 .card-front {
  background: linear-gradient(353deg, #00467f, #a5cc82);
}
.card-2010 .card-front {
  background: linear-gradient(182deg, #00467f, #a5cc82);
}
.card-2017 .card-front {
  background: linear-gradient(353deg, #00467f, #a5cc82);
}
.card-2025 .card-front {
  background: linear-gradient(182deg, #00467f, #a5cc82);
}

/* TEXT */
.card-front h3 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.card-front p {
  font-size: 1rem;
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .milestone-card {
    flex: 0 1 calc(50% - 15px);
    height: 300px;
  }
}

@media (max-width: 600px) {
  .milestone-card {
    flex: 0 1 100%;
    height: 300px;
  }
}

/* <!-- End of Milestones in Healthcare --> */

/* <!-- Start of Milestones in Healthcare  2009 to 2024 --> */
/* hero design in the milestones main section */
.hospital-progress {
  padding: 80px 20px;
  background: #f7fbff;
  font-family: Arial, sans-serif;
}

.intro-text {
  text-align: justify;
  max-width: 800px;
  margin: 0 auto 20px;
  color: #333;
}

.milestones-hero h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 15px;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline-item {
  display: flex;
  align-items: stretch;
  margin-bottom: 60px;
  position: relative;
}

.timeline-item:last-child .timeline-shape::after {
  display: none;
}

.timeline-content {
  background: #c1eee5;
  padding: 15px 25px;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: justify;
  justify-content: center;
}

.timeline-content h3 {
  margin-top: 0;
  color: #0277bd;
}

.timeline-content p {
  margin: 0;
  color: #555;
}
/* <!-- End of Milestones in Healthcare  2009 to 2024 --> */

/* <!-- Start of Facts & Figures Section --> */
.facts-hero {
  background: linear-gradient(135deg, #00bfa5, #004d40);
  padding: 80px 20px;
  text-align: center;
}
.facts-hero .hero-content-f h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay: 0.3s;
  color: #004992;
  text-align: center;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.facts-hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  color: white;
}
.facts-cards {
  padding: 60px 20px;
  background: #f5f5f5;
}

.facts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.fact-card {
  position: relative;
  background: linear-gradient(179deg, #f7f8f8, #acbb78);
  border-radius: 15px;
  padding: 25px;
  border: 0.5px solid #5d5deb;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* د لاندې بارډر لپاره pseudo-element */
.fact-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 6px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: #5d5deb;
  transition: width 0.5s ease;
}

.fact-card:hover::after {
  width: 100%;
}

.fact-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.fact-card {
  text-align: center;
  position: relative;
}

.fact-card h3 {
  color: #004d40;
  margin-bottom: 15px;
  font-size: 1.3rem;
  display: inline-block;
  position: relative;
}

.fact-card h3::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  border-radius: 100%;
  height: 3px;
  background: radial-gradient(circle, #0027e8 0%, #ed0735 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.fact-card:hover h3::after {
  transform: scaleX(1);
}

.fact-card ul {
  list-style: disc inside;
  color: #013c2e;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
  direction: ltr;
  padding-left: 0.2em;
}

.fact-card ul li {
  border-bottom: 1.5px solid #d2b0b0;
  padding: 0.1em 0;
}
.fact-card b {
  color: #e73007;
}
/* Default LTR (English) arrow */
li b::after {
  content: " ➤";
  color: rgb(45, 26, 255);
}

/* RTL (Pashto) arrow */
.rtl-text b::after {
  content: "  ➤ ";
  transform: rotate(180deg);  /* flip the arrow */
  display: inline-block;      /* needed for rotation */
  color: rgb(45, 26, 255);
}

@media (max-width: 767px) {
  .facts-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .fact-card {
    padding: 20px;
  }

  .fact-card h3 {
    font-size: 1.1rem;
  }

  .facts-hero h1 {
    font-size: 2rem;
  }

  .facts-hero p {
    font-size: 1rem;
    max-width: 90%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .facts-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .fact-card h3 {
    font-size: 1.2rem;
  }

  .facts-hero h1 {
    font-size: 2.5rem;
  }

  .facts-hero p {
    font-size: 1.1rem;
    max-width: 90%;
  }
}

@media (min-width: 1025px) {
  .facts-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .fact-card h3 {
    font-size: 1.3rem;
  }

  .facts-hero h1 {
    font-size: 3rem;
  }

  .facts-hero p {
    font-size: 1.2rem;
    max-width: 700px;
  }
}

/* <!-- End of Facts & Figures Section --> */

/* <!-- Start of Cardiology Specialist Ward Section --> */

/* * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } */

.hero-cardiology {
  position: relative;
  height: 400px;
  background: linear-gradient(332deg, #076585, #fff);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
}
.hero-heart {
  width: 320px;
  height: 280px;
  margin-bottom: 5px;
  display: inline-block;
  background: transparent;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5));
  animation: heartbeat 0.8s ease-in-out infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.hero-content-h h1 {
  font-size: 2.5rem;
  color: #ffffff;
  z-index: 2;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
}
.animated-hearts span {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(179, 0, 0, 0.3);
  clip-path: polygon(
    50% 0%,
    61% 12%,
    75% 15%,
    80% 30%,
    75% 50%,
    50% 100%,
    25% 50%,
    20% 30%,
    25% 15%,
    39% 12%
  );
  animation: floatHearts 6s linear infinite;
}
.animated-hearts span:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.animated-hearts span:nth-child(2) {
  left: 20%;
  animation-delay: 1s;
}
.animated-hearts span:nth-child(3) {
  left: 30%;
  animation-delay: 2s;
}
.animated-hearts span:nth-child(4) {
  left: 40%;
  animation-delay: 3s;
}
.animated-hearts span:nth-child(5) {
  left: 50%;
  animation-delay: 4s;
}
.animated-hearts span:nth-child(6) {
  left: 60%;
  animation-delay: 2s;
}
.animated-hearts span:nth-child(7) {
  left: 70%;
  animation-delay: 3s;
}
.animated-hearts span:nth-child(8) {
  left: 80%;
  animation-delay: 1s;
}
.animated-hearts span:nth-child(9) {
  left: 90%;
  animation-delay: 0s;
}
.animated-hearts span:nth-child(10) {
  left: 95%;
  animation-delay: 4s;
}

@keyframes floatHearts {
  0% {
    transform: translateY(400px) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}

/* Refine the existing cardiology hero without affecting other hero sections. */
.hero-cardiology {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 400px;
  padding: 32px clamp(20px, 5vw, 80px) 40px;
  isolation: isolate;
}

.hero-cardiology::before,
.hero-cardiology::after {
  content: "";
  position: absolute;
  width: clamp(240px, 35vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.2), transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: cardioAmbient 18s ease-in-out infinite alternate;
}

.hero-cardiology::before { inset-inline-start: -12%; top: -50%; }
.hero-cardiology::after { inset-inline-end: -12%; bottom: -65%; animation-delay: -9s; }

.hero-cardiology .hero-content-h {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: cardioEntrance 900ms ease-out both;
}

.hero-cardiology .hero-heart {
  width: clamp(200px, 24vw, 300px);
  height: clamp(190px, 20vw, 240px);
  max-width: 100%;
  margin: 0;
  transform-origin: center center;
  animation: cardioHeartbeat 0.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(139, 25, 40, 0.25));
}

.hero-cardiology .hero-content-h h1 {
  position: relative;
  margin: 0;
  padding-bottom: 20px;
  max-width: 100%;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 2px 4px rgba(3, 49, 67, 0.65), 0 8px 24px rgba(3, 49, 67, 0.25);
}

.hero-cardiology[dir="rtl"] .hero-content-h h1 {
  line-height: 1.65;
  letter-spacing: normal;
  text-align: center;
}

.hero-cardiology h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 88px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff, #b43849, transparent);
}

.hero-cardiology .cardiology-hero-decor,
.hero-cardiology .animated-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-cardiology .cardio-symbol {
  position: absolute;
  color: #fff;
  opacity: 0.22;
  font-size: clamp(24px, 3vw, 44px);
  animation: cardioAmbient 12s ease-in-out infinite alternate;
}
.hero-cardiology .cardio-symbol-heart { inset-inline-start: 12%; top: 24%; }
.hero-cardiology .cardio-symbol-scope { inset-inline-end: 12%; top: 35%; animation-delay: -4s; }
.hero-cardiology .cardio-symbol-plus { inset-inline-start: 23%; bottom: 18%; animation-delay: -8s; }
.hero-cardiology .cardio-ecg {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 100%;
  height: 85px;
  opacity: 0.16;
}
.hero-cardiology .cardio-ecg path {
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hero-cardiology .animated-hearts span {
  top: 0;
  opacity: 0;
  animation-duration: 14s;
}

@keyframes cardioEntrance {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardioAmbient {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to { transform: translate3d(8px, -14px, 0) rotate(5deg); }
}
@keyframes cardioHeartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.35); }
  35% { transform: scale(1.10); }
  50% { transform: scale(1.45); }
  75% { transform: scale(1); }
}
@media (max-width: 576px) {
  .hero-cardiology { min-height: 360px; padding: 28px 18px 32px; }
  .hero-cardiology .hero-content-h { gap: 14px; }
  .hero-cardiology .cardio-symbol-heart { inset-inline-start: 5%; top: 18%; }
  .hero-cardiology .cardio-symbol-scope { inset-inline-end: 5%; top: 28%; }
  .hero-cardiology .cardio-symbol-plus { display: none; }
  .hero-cardiology .animated-hearts span:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cardiology::before,
  .hero-cardiology::after,
  .hero-cardiology .hero-content-h,
  .hero-cardiology .hero-heart,
  .hero-cardiology .cardio-symbol,
  .hero-cardiology .animated-hearts span { animation: none; }
}

.promo-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 70px; /* مخکې 20px و، اوس 40px شو */
  margin: 50px 0;
}

.promo-card {
  position: relative;
  width: 250px;
  background: linear-gradient(196deg, #acb6e5, #86fde8);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 50px 20px 20px 20px; /* پورته padding د price-tag لپاره */
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.promo-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Top shape for old price */
.price-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #00c7c7;
  padding: 20px 50px;
  border-radius: 0 0 50% 50%;
  font-weight: bold;
  color: #fff;
  font-size: 18px;
  text-decoration: line-through;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 10;
  line-height: 1.2;
  gap: 3px;
}

/* که span دننه وي */
.price-tag span {
  color: #c60000;
  font-weight: bold;
  font-size: 18px;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
/* Title */
.promo-card h3 {
  margin-top: 50px; /* adjust for top shape */
  font-size: 24px;
  color: #2d3436;
}

/* New price */
.new-price {
  font-size: 22px;
  font-weight: bold;
  color: #00914b;
  margin-top: 10px;
}

.new-price .br {
  color: #500609;
}

/* Cardiology Experts Section */
.cardiology-experts {
  padding: 60px 20px;
  background: linear-gradient(135deg, #f0f4f8, #e6f2ff);
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.cardiology-experts h2 {
  font-size: 2rem;
  color: #003366;
  margin-bottom: 40px;
  position: relative;
}

.cardiology-experts h2::after {
  content: "";
  width: 80px;
  height: 4px;
  background-color: #00a651;
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

.experts-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.expert-card {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  width: 280px;
  height: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #333;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.expert-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.expert-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.expert-info {
  padding: 20px;
}

.expert-info h3 {
  font-size: 1.4rem;
  color: #003366;
  margin-bottom: 8px;
}

.expert-info p:first-of-type {
  font-size: 1rem;
  color: #6100e0;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
}

.expert-info p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #6100e0, #00a651);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.expert-card:hover .expert-info p::after {
  width: 100%;
}

/* Responsive */
@media (max-width: 900px) {
  .experts-container {
    flex-direction: column;
    align-items: center;
  }
}

/* Cards Section */
.cardiology-cards h2 {
  font-size: 2rem;
  color: #003366;
  margin-bottom: 40px;
  position: relative;
  text-align: center;
}

.cardiology-cards h2::after {
  content: "";
  width: 80px;
  height: 4px;
  background-color: #00a651;
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}
.cardiology-cards {
  padding: 60px 20px;
  background: #f9f9f9;
}
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.flip-card {
  perspective: 1000px;
  text-decoration: none;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 300px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background: linear-gradient(332deg, #076585, #fff);
  border: 0.5px solid #5d5deb;
}
.flip-card-front i {
  margin-bottom: 15px;
  color: #b30000;
}
.flip-card-front h3 {
  margin-bottom: 10px;
  color: #00376b;
}
.flip-card-front p {
  font-size: 0.95rem;
  color: #000000;
  text-align: center;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: #ffe6e6;
  border-radius: 15px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* <!-- End of Cardiology Specialist Ward Section --> */
/* <!-- Start of Angiography Section --> */
.hero-section4 {
  position: relative;
  height: 60vh;
  background: radial-gradient(circle at center, #003d66 10%, #001a33 90%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
}

.hero-content4 h1 {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.heartbeat-line {
  width: 90%;
  max-width: 600px;
}

.heartbeat-line svg {
  width: 100%;
  height: 100px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 3s linear infinite;
}

@keyframes drawLine {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#veinCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== INTRODUCTION SECTION ===== */
/* Angiography-only enhancements; retain the original navy background and ECG. */
.hero-section4 {
  width: 100%;
  box-sizing: border-box;
  min-height: 380px;
  padding: 48px clamp(20px, 5vw, 80px);
  isolation: isolate;
}
.hero-section4::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(58, 156, 207, 0.16), transparent 58%);
  animation: angioAmbientGlow 14s ease-in-out infinite alternate;
  z-index: 0;
}
.hero-section4 .hero-content4 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vw, 36px);
  width: 100%;
  max-width: 1100px;
  animation: angioHeroEntrance 1s ease-out both;
}
.hero-section4 .hero-content4 h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.065em;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-align: center;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 32px rgba(134, 208, 244, 0.2);
}
.hero-section4[dir="rtl"] .hero-content4 h1 {
  letter-spacing: normal;
  line-height: 1.65;
  text-transform: none;
  text-align: center;
}
.hero-section4 .heartbeat-line {
  width: min(100%, 600px);
  margin-inline: auto;
  padding-block: 8px;
  border-block: 1px solid rgba(130, 199, 232, 0.12);
  border-radius: 16px;
  background: linear-gradient(90deg, transparent, rgba(0, 26, 51, 0.25), transparent);
  filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.45));
}
.hero-section4 .heartbeat-line svg { display: block; }
.hero-section4 .heartbeat-line polyline { stroke-linecap: round; stroke-linejoin: round; }
.hero-section4 .veins-lines,
.hero-section4 .angio-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-section4 .angio-orbit {
  position: absolute;
  width: clamp(200px, 30vw, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(132, 205, 239, 0.14);
  box-shadow: inset 0 0 40px rgba(100, 191, 234, 0.04);
  animation: angioDrift 16s ease-in-out infinite alternate;
}
.hero-section4 .angio-orbit-one { inset-inline-start: -8%; top: -25%; }
.hero-section4 .angio-orbit-two { inset-inline-end: -7%; bottom: -35%; animation-delay: -8s; }
.hero-section4 .angio-medical-icon {
  position: absolute;
  font-size: clamp(22px, 3vw, 38px);
  color: #9dd9f1;
  opacity: 0.22;
  animation: angioDrift 10s ease-in-out infinite alternate;
}
.hero-section4 .angio-icon-heart { inset-inline-start: 12%; top: 26%; }
.hero-section4 .angio-icon-scope { inset-inline-end: 12%; bottom: 24%; animation-delay: -5s; }
.hero-section4 .angio-icon-plus { inset-inline-end: 23%; top: 17%; font-size: 18px; animation-delay: -3s; }
.hero-section4 .angio-vessels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.16;
}
.hero-section4 .angio-vessels path {
  stroke: #7dc5e4;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@keyframes angioHeroEntrance {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes angioDrift {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(8px, -16px, 0) rotate(4deg); }
}
@keyframes angioAmbientGlow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}
@media (max-width: 576px) {
  .hero-section4 { min-height: 320px; padding: 36px 18px; }
  .hero-section4 .heartbeat-line svg { height: 80px; }
  .hero-section4 .angio-icon-heart { inset-inline-start: 6%; top: 14%; }
  .hero-section4 .angio-icon-scope { inset-inline-end: 6%; bottom: 12%; }
  .hero-section4 .angio-icon-plus { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section4::before,
  .hero-section4 .hero-content4,
  .hero-section4 .angio-orbit,
  .hero-section4 .angio-medical-icon,
  .hero-section4 .heartbeat-line svg { animation: none; }
  .hero-section4 .heartbeat-line svg,
  .hero-section4 .heartbeat-line polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
}

.intro-section4 {
  padding: 20px 0;
  background: white;
  text-align: center;
  color: #003d66;
}

.intro-section4 h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.intro-section4 p {
  width: 100%;
  margin: 0 auto;
  line-height: 1.9;
  font-size: 1.15rem;
  color: #003d66;
  text-align: justify;
  text-justify: inter-word;
  padding: 0 5vw;
  word-spacing: 0.05em;
}

/* ===== TESTIMONIAL SECTION ===== */
.testimonial-section4 {
  padding: 20px 10%;
  background: linear-gradient(340deg, #334d50, #cbcaa5);
  text-align: center;
  color: #fff;
}

.testimonial-section4 h2 {
  font-size: 2.5rem;
  margin-bottom: 50px;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.testimonial-section4 h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 0;
  background: radial-gradient(circle, #0027e8 0%, #ed0735 100%);
  transition: width 0.5s ease;
  border-radius: 15px;
}

.testimonial-section4 h2:hover::after {
  width: 100%;
}

/* ===== TESTIMONIAL CARDS ===== */
.testimonial-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.testimonial-card4 {
  position: relative;
  flex: 1 1 calc(33.333% - 40px);
  max-width: 350px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  background: #002a4d;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.testimonial-card4:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.15);
}

.testimonial-card4 img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ===== PLAY ICON OVERLAY ===== */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card4:hover .overlay {
  opacity: 1;
}

.overlay i {
  font-size: 2rem;
  color: #a70000;
  background: #fff;
  padding: 15px 15px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(222, 0, 0, 0.5);
}

/* ===== CARD TITLE ===== */
.testimonial-card4 h3 {
  margin: 15px 0 20px;
  font-size: 1.2rem;
  color: #fff;
  font-weight: 500;
}

/* <!-- End of Angiography Section --> */

/* <!-- Start of Angioplasty Section --> */
.hero-section {
  position: relative;
  height: 60vh;
  background:
    linear-gradient(rgba(0, 29, 51, 0.7), rgba(0, 26, 51, 0.7)),
    /* شفاف رنګ */ url("../staticimges/angioplastyhero.PNG") center/cover no-repeat; /* انځور */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
}

.hero-content1 h1 {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.heartbeat-line {
  width: 90%;
  max-width: 600px;
}

.heartbeat-line svg {
  width: 100%;
  height: 100px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 3s linear infinite;
}

@keyframes drawLine {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#veinCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== INTRODUCTION SECTION ===== */
/* Scoped refinements retain the Angioplasty background image and ECG graphic. */
.angioplasty-hero {
  width: 100%;
  min-height: 380px;
  box-sizing: border-box;
  padding: 48px clamp(20px, 5vw, 80px);
  isolation: isolate;
}
.angioplasty-hero::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(ellipse at 50% 45%, rgba(97, 186, 222, 0.16), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: angioplastyGlow 16s ease-in-out infinite alternate;
}
.angioplasty-hero .hero-content1 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vw, 36px);
  width: 100%;
  max-width: 1100px;
  animation: angioplastyEntrance 1s ease-out both;
}
.angioplasty-hero .hero-content1 h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.065em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 28px rgba(137, 210, 238, 0.2);
}
.angioplasty-hero[dir="rtl"] .hero-content1 h1 {
  line-height: 1.65;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}
.angioplasty-hero .heartbeat-line {
  width: min(100%, 600px);
  margin-inline: auto;
  padding-block: 8px;
  border-block: 1px solid rgba(164, 216, 236, 0.15);
  border-radius: 16px;
  background: linear-gradient(90deg, transparent, rgba(0, 26, 51, 0.3), transparent);
  filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.45));
}
.angioplasty-hero .heartbeat-line svg { display: block; }
.angioplasty-hero .heartbeat-line polyline { stroke-linecap: round; stroke-linejoin: round; }
.angioplasty-hero .veins-lines,
.angioplasty-hero .angioplasty-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.angioplasty-hero .angioplasty-ring {
  position: absolute;
  width: clamp(200px, 30vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(157, 216, 239, 0.17);
  border-radius: 50%;
  box-shadow: inset 0 0 36px rgba(115, 194, 226, 0.05);
  animation: angioplastyFloat 18s ease-in-out infinite alternate;
}
.angioplasty-hero .angioplasty-ring-one { inset-inline-start: -8%; top: -28%; }
.angioplasty-hero .angioplasty-ring-two { inset-inline-end: -6%; bottom: -38%; animation-delay: -9s; }
.angioplasty-hero .angioplasty-icon {
  position: absolute;
  font-size: clamp(22px, 3vw, 38px);
  color: #a5dcee;
  opacity: 0.24;
  animation: angioplastyFloat 12s ease-in-out infinite alternate;
}
.angioplasty-hero .angioplasty-icon-heart { inset-inline-start: 12%; top: 25%; }
.angioplasty-hero .angioplasty-icon-scope { inset-inline-end: 12%; top: 28%; animation-delay: -6s; }
.angioplasty-hero .angioplasty-icon-plus { inset-inline-start: 23%; bottom: 20%; font-size: 18px; animation-delay: -3s; }
.angioplasty-hero .angioplasty-vessel {
  position: absolute;
  inset-inline-end: 7%;
  bottom: 7%;
  width: clamp(120px, 16vw, 220px);
  height: auto;
  opacity: 0.18;
  stroke: #a5dcee;
  stroke-width: 1.5;
  stroke-linecap: round;
}
@keyframes angioplastyEntrance {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes angioplastyFloat {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(8px, -14px, 0) rotate(4deg); }
}
@keyframes angioplastyGlow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.07); }
}
@media (max-width: 576px) {
  .angioplasty-hero { min-height: 320px; padding: 36px 18px; }
  .angioplasty-hero .heartbeat-line svg { height: 80px; }
  .angioplasty-hero .angioplasty-icon-heart { inset-inline-start: 6%; top: 14%; }
  .angioplasty-hero .angioplasty-icon-scope { inset-inline-end: 6%; bottom: 12%; top: auto; }
  .angioplasty-hero .angioplasty-icon-plus,
  .angioplasty-hero .angioplasty-vessel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .angioplasty-hero::before,
  .angioplasty-hero .hero-content1,
  .angioplasty-hero .angioplasty-ring,
  .angioplasty-hero .angioplasty-icon,
  .angioplasty-hero .heartbeat-line svg { animation: none; }
  .angioplasty-hero .heartbeat-line svg,
  .angioplasty-hero .heartbeat-line polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
}

.intro-section {
  padding: 20px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    /* شفاف سپین پوښ */ url("/images/222.jpg") center/cover no-repeat; /* انځور */
  text-align: center;
  color: #003d66;
}

.intro-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.intro-section p {
  width: 100%;
  margin: 0 auto;
  line-height: 1.9;
  font-size: 1.15rem;
  color: #003d66;
  text-align: justify;
  text-justify: inter-word;
  padding: 0 5vw;
  word-spacing: 0.05em;
}

/* ===== TESTIMONIAL SECTION ===== */
.testimonial-section {
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(184deg, #f7f8f8, #acbb78);
}

.testimonial-section h2 {
  font-size: 2.5rem;
  color: #1a3d6d;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
}

.testimonial-section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: radial-gradient(circle, #0027e8 0%, #ed0735 100%);
  margin: 10px auto 0 auto;
  border-radius: 2px;
}

.testimonial-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

.testimonial-card {
  width: 350px;
  height: 300px;
  perspective: 1000px;
  position: relative;
  margin-bottom: 20px;
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

.testimonial-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-front {
  background: linear-gradient(90deg, #4b6cb7, #182848);
  color: #fff;
  justify-content: flex-start;
  padding-top: 15px;
}

.card-back {
  background: linear-gradient(135deg, #00a651, #72c6ef);
  color: #fff;
  transform: rotateY(180deg);
  justify-content: flex-start;
  padding-top: 15px;
}

.card-front img,
.card-back img {
  width: 90%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 0 1px;
}

.card-front h3,
.card-back h3 {
  font-size: 1.3rem;
  margin: 2px 0 0 0;
}

.card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  z-index: 2;
}

/* Responsive: درې کارتونه په یوه قطار */
@media (max-width: 1024px) {
  .testimonial-container {
    justify-content: space-around;
  }
}

@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
    align-items: center;
  }
}

/* <!-- End of Angioplasty Section --> */

/* Start of Pacemaker page */
.pacemaker-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2a43, #007ea7, #00c6b8);
  text-align: center;
  padding: 120px 20px;
  font-family: "Poppins", sans-serif;
}

/* glowing animated pulse line */
.pulse-bg {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 120px;
  opacity: 0.6;
}

.pulse-bg svg {
  width: 100%;
  height: 100%;
}

.pulse-line {
  fill: none;
  stroke: #00ffcc;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation:
    drawPulse 3s linear infinite,
    glowPulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #00ffcc);
}

@keyframes drawPulse {
  0% {
    stroke-dashoffset: 500;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -500;
  }
}

@keyframes glowPulse {
  0%,
  100% {
    stroke: #00ffcc;
    filter: drop-shadow(0 0 5px #00ffcc);
  }
  50% {
    stroke: #ffffff;
    filter: drop-shadow(0 0 10px #ffffff);
  }
}

/* hero text animation */
.hero-content-p {
  position: relative;
  z-index: 2;
  animation: fadeInUp 1.5s ease-in-out;
  text-align: center;
}

.hero-content-p h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: #d8e3e7;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

.hero-content .subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content .subtitle {
    font-size: 1rem;
  }
}

/* ================= PACEMAKER FAQ ACCORDION ================= */
/* FAQ Intro Text */
.faq-intro-text {
  max-width: 1000px;
  margin: 0 auto 35px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  background: #f8fbfc;
  padding: 15px 18px;
  border-radius: 10px;
}

/* RTL support */
.rtl-text {
  direction: rtl;
  text-align: right !important;
}

/* Title spacing fix */
.pacemaker-faq-title {
  margin-top: 10px;
}
.pacemaker-faq {
  max-width: 1100px;
  margin: 0 auto;
}

/* Title */
.pacemaker-faq-title {
  text-align: center;
  font-size: 26px;
  color: #006c72;
  margin-bottom: 30px;
  font-weight: 700;
}

/* Item */
.pacemaker-faq-item {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: 0.3s;
}

/* Header */
.pacemaker-faq-header {
  width: 100%;
  border: none;
  padding: 16px 18px;
  cursor: pointer;

  background: linear-gradient(135deg, #007b8f, #00a6b4);
  color: #fff;

  font-size: 16px;
  font-weight: 600;

  display: flex;
  justify-content: space-between;
  align-items: center;

  transition: 0.3s;
}

.pacemaker-faq-header:hover {
  background: linear-gradient(135deg, #00a6b4, #007b8f);
}

/* Arrow */
.pacemaker-faq-icon {
  transition: 0.3s;
}

/* Body */
.pacemaker-faq-body {
  max-height: 0;
  overflow: hidden;
  background: rgb(221, 210, 188);
  transition: max-height 0.35s ease;

}

.pacemaker-faq-body p {
  padding: 16px 20px;
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  text-align: justify;
  
}

/* ACTIVE STATE */
.pacemaker-faq-item.active .pacemaker-faq-body {
  max-height: 500px;
}

.pacemaker-faq-item.active .pacemaker-faq-icon {
  transform: rotate(180deg);
}

/* RTL Support */
.pacemaker-faq-header.rtl {
  direction: rtl;
  text-align: right;
}

/* <!-- Start of Doctor & Specialist Section --> */


/* <!-- End of Doctor & Specialist Section --> */
/* <!-- Start of Doctor & Specialist (Doctor/Specialist) Section  --> */
.doctor-hero-doctors {
  position: relative;
  width: 100%;
  height: 550px;
  background: linear-gradient(
    to right,
    rgba(0, 123, 255, 0.7),
    rgba(0, 200, 180, 0.7)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.hero-content-doctor {
  z-index: 2;
}

.hero-content-doctor h1 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 15px;
  animation: fadeInUp 1.5s ease forwards;
  color: #004992;
}
.hero-content-doctor p {
  font-size: 1.2rem;
  color: #1d00ae;
  margin-top: 10px;
  animation: fadeInUp 2s ease forwards;
}

.doctor-icon,
.stethoscope-icon {
  position: absolute;
  width: 250px;
  opacity: 0;
  transition: all 0.6s ease;
}

.doctor-icon {
  right: 10%;
  top: 50%;
  transform: translateY(-50%) translateX(50px);
}

.stethoscope-icon {
  left: 10%;
  top: 50%;
  transform: translateY(-50%) translateX(-50px);
}

.doctor-hero-doctors:hover .doctor-icon {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.doctor-hero-doctors:hover .stethoscope-icon {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
@media (max-width: 768px) {
  .doctor-hero-doctors {
    padding: 0 10px;
  }

  .hero-content-doctor h1 {
    font-size: 2rem;
  }

  .hero-content-doctor p {
    font-size: 1rem;
  }

  .doctor-icon,
  .stethoscope-icon {
    width: 50px;
  }

  .doctor-icon {
    right: 5%;
    transform: translateY(-50%) translateX(20px);
  }

  .stethoscope-icon {
    left: 5%;
    transform: translateY(-50%) translateX(-20px);
  }
}

/*  Start Doctor Card Section */
.doctors-section {
  padding: 40px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.doctors-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  justify-items: center;
}

.doctor-card {
  display: flex;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: linear-gradient(90deg, #9796f0, #fbc7d4);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
}

.doctor-card:hover {
  transform: translateY(-5px);
}

.doctor-info {
  flex: 1.5;
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.doctor-info h3 {
  font-size: 22px;
  margin-bottom: 5px;
  color: #000000;
}

.specialty {
  font-size: 16px;
  font-weight: 500;
  color: #0122de;
  margin-bottom: 10px;
}

.short-bio {
  font-size: 10px;
  color: #000000;
  margin-bottom: 15px;
}

.view-profile-btn {
  align-self: flex-start;
  text-decoration: none;
  background-color: #0077b6;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.3s;
}

.view-profile-btn:hover {
  background-color: #005f87;
}

.doctor-photo {
  flex: 1.5;
  position: relative;
  min-width: 150px;
  overflow: hidden;
  border-radius: 12px;
}

.doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.doctor-photo:hover img {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .doctors-container {
    grid-template-columns: 1fr;
  }

  .doctor-card {
    flex-direction: row;
    max-width: 100%;   /* دا هم بدل کړه */
    height: auto;      /* مهم اصلاح */
  }

  .doctor-info {
    flex: 1;
    padding: 10px;
  }

  .doctor-info h3 {
    font-size: 16px;
  }

  .specialty {
    font-size: 14px;
  }

  .short-bio {
    font-size: 12px;
  }

  .view-profile-btn {
    font-size: 12px;
    padding: 5px 10px;
  }

  .doctor-photo {
    flex: 1;
    height: auto;  /* دا هم auto کړه */
  }

  .doctor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
}

/* <!-- End of Doctor & Specialist (Doctor/Specialist) Section  --> */

/* <!-- Start of Doctor & Specialist (Doctor Profile) Section  --> */
.faculty-profile {
  max-width: 1100px;
  margin: 40px auto;
  background: #d7f4d7;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-family: "Poppins", sans-serif;
}

.profile-header {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #07c9c2;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.profile-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  margin-right: 20px;
  object-fit: cover;
  box-shadow: 0 0 30px rgba(0, 154, 154, 0.3);
}

.profile-info h2 {
  margin: 0;
  color: #4822b8;
}

.designation,
.department {
  color: #013127;
  margin: 3px 0;
}

.accordion-item {
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.accordion-header {
  background-color: #007b8f;
  color: #fff;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.accordion-header:hover {
  background-color: #005f6a;
}

.accordion-content2 {
  display: none;
  padding: 15px;
  background: #fff;
  color: #333;
  border-top: 1px solid #e0e0e0;

  /* ✅ مهم حل */
  text-align: justify !important;
  text-justify: inter-word;
}

.accordion-content2 {
  display: none;
  padding: 15px;
  background: #fff;
  color: #333;
  border-top: 1px solid #e0e0e0;

  /* ✅ FORCE ALIGNMENT */
  text-align: justify !important;
}

/* ✅ FORCE ALL CHILD ELEMENTS */
.accordion-content2 * {
  text-align: justify !important;
}

/* ✅ PARAGRAPH FIX */
.accordion-content2 p {
  text-align: justify !important;
  margin: 0;
}

/* ✅ LIST FIX */
.accordion-content2 ul {
  text-align: justify !important;
  padding-left: 20px;
}
/* Apply RTL font to all text inside accordion-content */
.rtl-text {
    direction: rtl;
    text-align: right;
    font-family: 'Abdali', sans-serif; /* ensures all <p>, <ul>, <li> inherit */
}

/* UL inside RTL content */
.rtl-text ul {
    list-style-position: inside; /* bullets inside for RTL */
    padding-left: 0;
    padding-right: 20px;
    margin: 0;
}

.rtl-text ul li {
    text-align: right; /* double insurance */
}
.accordion-header.active {
  background-color: #006970;
}
@media (max-width: 600px) {
  .profile-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px auto;
    display: block;
  }

  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* <!-- End  of Doctor & Specialist (Doctor Profile) Section  --> */

/* Start of General Internal Medicine Ward */
.internal-medicine-ward {
  background-color: #f8fafb;
  padding: 60px 20px;
  font-family: "Poppins", sans-serif;
  color: #333;
}

.internal-medicine-ward .container {
  max-width: 1000px;
  margin: 0 auto;
}

.ward-description {
  text-align: justify;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #000000;
}

.ward-features {
  background: linear-gradient(90deg, #f7f8f8, #acbb78);
  border-radius: 12px;
  padding: 30px;
  margin-top: 40px;
  box-shadow: 0 4px 18px rgba(0, 90, 100, 0.08);
  border: 1px solid #9dc6ca;
}

.ward-features h3 {
  font-size: 1.3rem;
  color: #00758f;
  margin-bottom: 15px;
  border-left: 4px solid #00a0a0;
  padding-left: 10px;
}

.ward-features ul {
  list-style-type: disc;
  padding-left: 25px;
  line-height: 1.7;
  color: #333;
}

.ward-features ul li {
  margin-bottom: 8px;
  font-size: 0.96rem;
  margin-left: 10px;
  transition: color 0.3s ease;
}

.ward-features ul li:hover {
  color: blue;
}
/* End  of General Internal Medicine Ward */

/* Start of Surgery & Allied Specialties Sub-Menu */
.surgery-hero {
  background:
    linear-gradient(rgba(0, 70, 120, 0.6), rgba(0, 70, 120, 0.6)),
    url("/images/surgeryhero.jpg") center/cover no-repeat;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

.surgery-hero-content {
  max-width: 800px;
}

.surgery-hero-title {
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
}

.surgery-hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #d0eaff;
}

.surgery-hero-line {
  width: 100px;
  height: 4px;
  background: #00cfff;
  margin: 0 auto;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .surgery-hero-title {
    font-size: 20px;
  }
  .surgery-hero-subtitle {
    font-size: 10px;
    padding: 0 15px;
  }
  .surgery-hero {
    height: 330px;
  }
}


/* ================= CATEGORY DROPDOWN 3D STYLE ================= */

    .category-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 1.2rem;
      justify-content: center;
      /* 🔥 center alignment */
      align-items: center;
    }

    .category-btn {
  width: 260px;              /* 🔥 fixed width */
  height: 52px;              /* 🔥 fixed height */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;                /* مهم: padding remove */
  border: none;
  border-radius: 10px;
  cursor: pointer;

  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;

  background: linear-gradient(145deg, #4286f4, #373b44);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease;

  text-align: center;
  white-space: nowrap;       /* 🔥 text wrap نه شي */
  overflow: hidden;
  text-overflow: ellipsis;   /* که متن اوږد شي ... */
}

    .category-btn:hover {
      transform: translateY(-2px);
      box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
    }

    .category-btn.active {
      background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
      color: #000;
      font-weight: 600;
    }
    @media (max-width: 576px) {
  .category-buttons {
    justify-content: center;
    gap: 10px;
    margin: 1rem 0.5rem;
    padding: 0.5rem;
  }

  .category-btn {
    width: 90%;          
    max-width: 320px;  
    height: 50px;  
    text-align: center;
    padding: 12px 14px;  
    font-size: 1rem;
    border-radius: 12px;
  }

    
}
.departments {
  background: #dae5ec;
  padding: 60px 0;
  display: flex;
  justify-content: center;
}

.departments {
  background: #dae5ec;
  padding: 60px 30px;
  width: 100%;
}

.departments-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;

  display: grid;

  /* Desktop */
  grid-template-columns: repeat(4, 1fr);

  gap: 25px;
}



.dept-card {
  background: linear-gradient(175deg, #f7f8f8, #acbb78);
  border-radius: 15px;
  text-align: center;
  border: 1px solid #b9b8b8;
  padding: 30px 20px;

  /* ✅ IMPORTANT FIX */
  max-width: 320px;
  width: 100%;
  margin: 0 auto;   /* center horizontally */

  display: flex;
  flex-direction: column;
  align-items: center;
}

.dept-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 12px;
  background-color: #00bcd4;
  transition: width 0.4s ease;
}

.dept-card:hover::after {
  width: 100%;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.dept-card-s {
  background: linear-gradient(175deg, #f7f8f8, #acbb78);
  border-radius: 15px;
  text-align: center;
  border: 1px solid #b9b8b8;
  padding: 30px 20px;

  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  overflow: hidden;

  transition: 0.3s ease;
}

.dept-card-s::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  background-color: #00bcd4;

  transform: scaleX(0);   
  transform-origin: left;

  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;

  transition: transform 0.4s ease;
}

.dept-card-s:hover::after {
  width: 100%;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  transform: scaleX(1);
}

.dept-card i,
.dept-card-s i {
  font-size: 45px;
  color: #007b8f;
  margin-bottom: 15px;
  transition: 0.3s ease;
  display: block;
}
.dept-card h3,
.dept-card-s h3 {
  font-size: 20px;
  color: #003a5f;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.dept-card h3,
.dept-card-s h3 {
  position: relative;
  font-size: 20px;
  color: #003a5f;
  margin-bottom: 10px;
  display: inline-block;
}

.dept-card h3::after,
.dept-card-s h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 3px;
  background-color: #00bcd4;
  border-radius: 50%;
  transition:
    width 0.4s ease,
    left 0.4s ease;
}

.dept-card:hover h3::after,
.dept-card-s:hover h3::after {
  left: 0;
  width: 100%;
}

.dept-card p,
.dept-card-s p {
  color: #555;
  font-size: 15px;
  min-height: 70px;
}

.dept-card .btn,
.dept-card-s .btn {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 18px;
  border-radius: 20px;
  background: #007b8f;
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.dept-card:hover,
.dept-card-s:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dept-card:hover i,
.dept-card-s:hover i {
  color: #00bcd4;
}

.dept-card:hover .btn,
.dept-card-s:hover .btn {
  background: #8600d4;
}

.dept-card h3,
.dept-card-s h3 {
  position: relative;
  font-size: 20px;
  color: #003a5f;
  margin-bottom: 10px;
  display: inline-block;
}

.dept-card h3::after,
.dept-card-s h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 3px;
  background-color: #00bcd4;
  border-radius: 50%;
  transition:
    width 0.4s ease,
    left 0.4s ease;
}

.dept-card:hover h3::after,
.dept-card-s:hover h3::after {
  left: 0;
  width: 100%;
}
/* Laptop */
@media (max-width: 1200px) {
  .departments-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet */
@media (max-width: 900px) {
  .departments-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {

  .departments {
    padding: 40px 15px;
  }

  .departments-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dept-card-s {
    padding: 25px 18px;
  }

  .dept-card-s h3 {
    font-size: 18px;
  }

  .dept-card-s p {
    font-size: 14px;
  }
}
/* End of Surgery & Allied Specialties Sub-Menu */
/* Start of Internal Medicine Sub-Menu */
.internal-medicine {
  background:
    linear-gradient(rgba(0, 70, 120, 0.6), rgba(0, 70, 120, 0.6)),
    url("/images/internal medicine hero.jpg") center/cover no-repeat;
  height: 400px;
  display: flex;
  align-items: center;
  color: #ffffff;
}
.internal-medicine-content {
  max-width: 900px;
}

.internal-medicine-title {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 15px;
  padding: 8px 14px;
  margin-left: 30px;
  text-align: left;
  background: #015396;
  margin-right: 200px;
  border-bottom-left-radius: 40px;
  border-top-right-radius: 40px;
  line-height: 1.2;
  color: #ffffff;

  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
}

.internal-medicine-subtitle {
  font-size: 22px;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 25px;
  margin-left: 30px;
  margin-right: 230px;
  font-family: "New Rocker", system-ui;
  color: #ededed;
}
@media (max-width: 768px) {
  .internal-medicine-title {
    font-size: 20px;
  }
  .internal-medicine-subtitle {
    font-size: 10px;
    margin-right: 150px;
  }
  .internal-medicine {
    height: 300px;
  }
}
/* End of Internal Medicine Sub-Menu */

/* <!-- Start of Diagnosis & Digital Imaging hero Section --> */
.doctor-hero-doctors11 {
  position: relative;
  width: 100%;
  height: 80vh;
  background:
    linear-gradient(rgba(0, 70, 120, 0.6), rgba(0, 70, 120, 0.6)),
    url("/images/diagnosis.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.doctor-hero-doctors11 h1 {
  color: #fff;
  font-size: 3em;
}
.doctor-hero-doctors11 p {
  color: #cdc7c7;
}
/* <!-- End of Diagnosis & Digital Imaging hero Section --> */

/* <!-- Start of  Research Guidelines & Policies Section --> */
.research-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  background: url("../staticimges/researchhero.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.research-hero h1 {
  color: #ffffff;
  font-size: 2.8em;
  text-align: left;
  margin-left: 80px;
  animation: fadeInUp 1.5s ease forwards;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
}
.research-hero h1 span {
  color: #baffc5;
  font-size: 2.2em;
  text-align: left;
  margin-left: 4px;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1.5s ease forwards;
}

.research-hero p {
  color: #250060;
  font-size: 20px;
  margin-left: 90px;
  animation: fadeInUp 2s ease forwards;
}
.research-faq-section h1 {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #003a5f;
}
.research-faq-section p {
  text-align: justify;
  margin-left: 80px;
  margin-right: 80px;
  color: #333;
  font-size: 18px;
  font-family: 'times new roman', serif;
}
@media (max-width: 768px) {
   .research-hero {
    height: 30vh;              /* balanced height */
    background-size: cover;    /* keep image full */
    background-position: center top; /* مهم: face/center نه crop کیږي */
    padding: 20px;
  }
  .research-hero h1 {
    font-size: 1em;
    margin: 0 20px;
  }
  .research-hero h1 span {
    font-size: 2em;
  }
  .research-hero p {
    font-size: 16px;
    margin: 0 20px;
  }
  .research-faq-section h1 {
    font-size: 1.6em;
  }
  .research-faq-section p {
    font-size: 15px;
    margin: 0 20px;
  }
}

/* <!-- End of  Research Guidelines & Policies Section --> */

/* Start of Research Publications Section */
.research-publications-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  background: url("../staticimges/publication.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column; /* Put items in column */
  align-items: center;
  justify-content: center; /* Center horizontally */
  text-align: center;
  overflow: hidden;
}

.research-publications-hero h1 {
  color: #f3f3f3;
  font-size: 4em;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1.5s ease forwards;
}

.research-publications-hero h1 span {
  color: #ffffff;
  font-size: 1.35em;
  text-shadow:
    4px 4px 0 rgba(192, 62, 62, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1.5s ease forwards;
}

.research-section p {
  text-align: justify;
  margin: 30px 60px 40px 65px;
  color: #333;
}

@media (max-width: 768px) {
  .research-publications-hero {
    height: 30vh;
  }
  .research-publications-hero h1 {
    font-size: 1.6em;
  }
  .research-publications-hero h1 span {
    font-size: 1.2em;
  }
  .research-publications-hero p {
    font-size: 16px;
  }
}
/* Publications hero refinements: retain the photograph and centered layout. */
.research-publications-hero {
  box-sizing: border-box;
  min-height: 400px;
  padding: 48px clamp(20px, 5vw, 80px);
  isolation: isolate;
}
.research-publications-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
  z-index: 0;
}
.research-publications-hero::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.13), transparent 60%);
  animation: publicationGlow 16s ease-in-out infinite alternate;
  z-index: 0;
}
.research-publications-hero .research-publications-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  animation: publicationEntrance 1s ease-out both;
}
.research-publications-hero h1 {
  position: relative;
  margin: 0;
  padding-bottom: 26px;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.22;
  font-weight: 800;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  animation: none;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.28);
}
.research-publications-hero h1 span {
  display: inline-block;
  animation: none;
  text-shadow: inherit;
  transition: transform 300ms ease, text-shadow 300ms ease;
}
.research-publications-hero h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
.research-publications-hero[dir="rtl"] h1 {
  font-size: clamp(1.65rem, 3.2vw, 3.125rem) !important;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: center;
}
.research-publications-hero[dir="rtl"] h1 span { font-size: 1.1em; }
.research-publications-hero .publications-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.research-publications-hero .publications-orbit {
  position: absolute;
  width: clamp(180px, 28vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  animation: publicationFloat 18s ease-in-out infinite alternate;
}
.research-publications-hero .publications-orbit-one { inset-inline-start: -9%; top: -25%; }
.research-publications-hero .publications-orbit-two { inset-inline-end: -8%; bottom: -35%; animation-delay: -9s; }
.research-publications-hero .publications-float {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(48px, 6vw, 80px);
  aspect-ratio: 1;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  animation: publicationFloat 12s ease-in-out infinite alternate;
}
.research-publications-hero .publications-float-book { inset-inline-start: 8%; top: 20%; }
.research-publications-hero .publications-float-document { inset-inline-end: 8%; bottom: 18%; animation-delay: -6s; }
.research-publications-hero .publications-microscope {
  position: absolute;
  inset-inline-end: 20%;
  top: 16%;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.25);
  animation: publicationFloat 14s ease-in-out infinite alternate;
}
@keyframes publicationEntrance {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes publicationFloat {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to { transform: translate3d(8px, -14px, 0) rotate(5deg); }
}
@keyframes publicationGlow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .research-publications-hero h1:hover span {
    transform: translateY(-2px);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 255, 255, 0.3);
  }
}
@media (max-width: 768px) {
  .research-publications-hero { min-height: 320px; padding: 36px 20px; }
  .research-publications-hero .publications-float-book { inset-inline-start: 5%; top: 8%; }
  .research-publications-hero .publications-float-document { inset-inline-end: 5%; bottom: 7%; }
  .research-publications-hero .publications-microscope { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .research-publications-hero::after,
  .research-publications-hero .research-publications-content,
  .research-publications-hero .publications-orbit,
  .research-publications-hero .publications-float,
  .research-publications-hero .publications-microscope { animation: none; }
  .research-publications-hero h1 span { transition: none; }
}

.publications-section {
  margin-top: 4px;
  margin-bottom: 25px;
  background: #f5f9fc;
}

.search-box {
  width: 90%;
  margin: 0 auto 20px auto;
  text-align: right;
}

.search-box input {
  width: 400px;
  font-weight: 500;
  padding: 10px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: 0.3s;
  background: rgb(162, 229, 148);
}

.search-box input:focus {
  border-color: #0012dd;
}

.table-wrapper {
  width: 90%;
  margin: auto;
  overflow-x: auto;
}

.research-table {
  width: 100%;
  border-collapse: collapse;
  background: #d0e3eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.research-table thead {
  background: #0d5ab9;
  color: #fff;
}

.research-table th,
.research-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 1px solid #eee;
}

.research-table tbody tr:nth-child(even) {
  background: #d6d8da;
}

.view-btn {
  background: #0d5ab9;
  color: #fff;
  padding: 6px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: 0.3s;
}

.view-btn:hover {
  background: #093e80;
}

/* Pagination container */
.pagination {
  margin-top: 20px;
  text-align: center;
}

/* All buttons default */
.page-btn {
  padding: 8px 15px;
  margin: 0 5px;
  background: #ffffff;       /* سپینه پس‌زمینه */
  color: #0d5ab9;            /* نیلي نمبر */
  border: 1px solid #0d5ab9; /* حد نیلي */
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

/* Hover effect */
.page-btn:hover {
  background: #0d5ab9;       /* پس‌زمینه نیلي */
  color: #fff;               /* نمبر سپین */
}

/* Active button */
.page-btn.active {
  background: #0d5ab9;       /* نیلي پس‌زمینه */
  color: #fff;               /* سپین نمبر */
  border-color: #0d5ab9;    
}

/* End of Research Publications Section */

/* Start of Researcher of SMCTH Section */
.hero-section-researchers {
  width: 100%;
  height: 70vh;
  background: #00416a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-inner-researchers {
  background: linear-gradient(358deg, #005e7d, #c1bfbf);
  padding: 40px 60px;
  width: 100%;
  max-width: 1150px;
  height: 310px;
  border-radius: 18px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  transform: translateY(-5px);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-inner-researchers:hover {
  transform: translateY(-12px);
}
.hero-inner-researchers h1 {
  font-size: 70px;
  margin-bottom: 15px;
  color: #e0e1e3;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
}
.hero-inner-researchers p {
  font-size: 22px;
  color: #ffffff;
  line-height: 1.7;
}
@media (max-width: 768px) {

  .hero-section-researchers {
    height: auto;
    padding: 40px 15px;
  }

  .hero-inner-researchers {
    width: 100%;
    max-width: 100%;

    height: auto;            /* مهم fix */
    padding: 25px 20px;

    border-radius: 14px;
    transform: translateY(0); /* mobile کې hover lift ختم */
  }

  .hero-inner-researchers h1 {
    font-size: 28px;        /* 70px → mobile safe */
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .hero-inner-researchers p {
    font-size: 16px;
    line-height: 1.6;
  }

  /* optional: hover effect off mobile */
  .hero-inner-researchers:hover {
    transform: translateY(0);
  }
}
.researchers-section {
  width: 95%;
  max-width: 1200px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.intro-text {
  text-align: center;
  margin-bottom: 20px;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  text-align: justify;
}

.search-container {
  text-align: right;
  margin: 25px;
  
}

.search-container input {
  padding: 8px 12px;
  width: 400px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: wheat;
}

#researchersTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

#researchersTable th,
#researchersTable td {
  padding: 15px 15px;
  text-align: center;
  vertical-align: middle;
}

#researchersTable th {
  background-color: #00416a;
  color: #fff;
  font-weight: bold;
}

#researchersTable td {
  padding: 4px 5px;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 200px;
}

#researchersTable tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #d8e6ee;
}

.researcher-photo {
  width: 90px;
  height: 100px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid #00416a;
}

.publications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.publications-list li {
  margin: 3px 0;
  font-size: 14px;
  color: #333;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination button {
  padding: 6px 12px;
  margin: 0 3px;
  border: none;
  border-radius: 5px;
  background-color: #00416a;
  color: #fff;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007bff;
}

.pagination button:hover {
  background-color: #005f8a;
}
@media (max-width: 768px) {
  .hero-section {
    height: 80vh;
    padding: 10px;
  }
  .hero-inner {
    padding: 20px 30px;
    height: auto;
  }
  .hero-inner h1 {
    font-size: 40px;
  }
  .hero-inner p {
    font-size: 16px;
    line-height: 1.5;
  }
  .researchers-section {
    width: 95%;
    margin: 20px auto;
  }
  .intro-text p {
    font-size: 14px;
  }
  .search-container input {
    width: 100%;
    max-width: 100%;
    padding: 6px 10px;
    font-size: 13px;
  }
  #researchersTable th,
  #researchersTable td {
    padding: 8px 5px;
    font-size: 12px;
  }
  .researcher-photo {
    width: 60px;
    height: 70px;
  }

  .publications-list li {
    font-size: 12px;
  }
  .pagination button {
    padding: 4px 8px;
    margin: 0 2px;
    font-size: 12px;
  }
}
/* End of Researcher of SMCTH Section */

/* Start of Latest News Section */
.hero-section-news {
  width: 100%;
  background: #00416a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.hero-inner-news {
  background: linear-gradient(358deg, #005e7d, #c1bfbf);
  padding: 40px 60px;
  width: 100%;
  max-width: 1150px;
  border-radius: 18px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  transform: translateY(-5px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-inner-news:hover {
  transform: translateY(-12px);
}
.hero-inner-news h1 {
  font-size: 85px;
  font-family: "New Rocker", system-ui;
  margin-bottom: 15px;
  color: #e0e1e3;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
}
.hero-inner-news p {
  font-size: 22px;
  color: #ffffff;
  line-height: 1.7;
}
@media (max-width: 768px) {

  .hero-section-news {
    min-height: 40vh;   /* now it will grow bigger */
    padding: 60px 20px;
  }

  .hero-inner-news {
    padding: 40px 25px;
  }

  .hero-inner-news h1 {
    font-size: 42px;
  }

  .hero-inner-news p {
    font-size: 18px;
  }
}

/* start of news cards */
/* Scope these enhancements to the listing hero, leaving news details intact. */
.latest-news-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  padding: 54px clamp(20px, 4vw, 60px);
}
.latest-news-hero::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at 50% 35%, rgba(193, 191, 191, 0.16), transparent 60%);
  pointer-events: none;
  animation: latestNewsGlow 16s ease-in-out infinite alternate;
}
.latest-news-hero .hero-inner-news {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 5vw, 72px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 36px rgba(0, 25, 44, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.latest-news-hero .hero-inner-news h1 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 18px;
  max-width: 100%;
  font-size: clamp(2.6rem, 6vw, 5.3125rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  animation: latestNewsEntrance 900ms ease-out both;
}
.latest-news-hero .hero-inner-news h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #e0e1e3, transparent);
}
.latest-news-hero .hero-inner-news p {
  margin: 0;
  max-width: 760px;
  font-size: clamp(1rem, 1.8vw, 1.375rem);
  line-height: 1.8;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 2px 6px rgba(0, 25, 44, 0.24);
  animation: latestNewsEntrance 1.1s 100ms ease-out both;
}
.latest-news-hero[dir="rtl"] .hero-inner-news h1 {
  font-size: clamp(1.9rem, 4vw, 3.125rem) !important;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: center;
}
.latest-news-hero .latest-news-decor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.latest-news-hero .latest-news-orbit {
  position: absolute;
  width: clamp(160px, 25vw, 320px);
  aspect-ratio: 1;
  border: 1px solid rgba(224, 225, 227, 0.12);
  border-radius: 50%;
  animation: latestNewsFloat 18s ease-in-out infinite alternate;
}
.latest-news-hero .latest-news-orbit-one { inset-inline-start: -10%; top: -35%; }
.latest-news-hero .latest-news-orbit-two { inset-inline-end: -9%; bottom: -45%; animation-delay: -9s; }
.latest-news-hero .latest-news-float {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(40px, 5vw, 62px);
  aspect-ratio: 1;
  font-size: clamp(20px, 2.5vw, 30px);
  color: rgba(255, 255, 255, 0.48);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  animation: latestNewsFloat 12s ease-in-out infinite alternate;
}
.latest-news-hero .latest-news-newspaper { inset-inline-start: 6%; top: 19%; }
.latest-news-hero .latest-news-document { inset-inline-end: 6%; bottom: 17%; animation-delay: -6s; }
.latest-news-hero .latest-news-media-icon {
  position: absolute;
  inset-inline-end: 13%;
  top: 14%;
  font-size: 21px;
  color: rgba(255, 255, 255, 0.2);
  animation: latestNewsFloat 14s ease-in-out infinite alternate;
}
@keyframes latestNewsEntrance {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes latestNewsFloat {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to { transform: translate3d(6px, -12px, 0) rotate(5deg); }
}
@keyframes latestNewsGlow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .latest-news-hero .hero-inner-news:hover {
    transform: translateY(-9px);
    box-shadow: 0 22px 40px rgba(0, 25, 44, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}
@media (max-width: 768px) {
  .latest-news-hero { padding: 40px 20px; }
  .latest-news-hero .latest-news-newspaper { inset-inline-start: 5%; top: 5%; }
  .latest-news-hero .latest-news-document { inset-inline-end: 5%; bottom: 5%; }
  .latest-news-hero .latest-news-media-icon { display: none; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .latest-news-hero .hero-inner-news:hover { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .latest-news-hero::before,
  .latest-news-hero .hero-inner-news h1,
  .latest-news-hero .hero-inner-news p,
  .latest-news-hero .latest-news-orbit,
  .latest-news-hero .latest-news-float,
  .latest-news-hero .latest-news-media-icon { animation: none; }
  .latest-news-hero .hero-inner-news { transition: none; }
}

.news-section {
  width: 90%;
  margin: 30px auto;
}
.search-title {
    font-size: 18px;
    font-weight: 500;
    color: #0077b6;      /* ستاسو theme color */
    margin-bottom: 20px;  /* سرلیک او سرچ row تر منځ فاصله */
}

.search-year-row {
    display: flex;
    justify-content: space-between; /* سرچ بکس چپ، بټنونه ښي */
    align-items: center;
    flex-wrap: wrap;                /* که سکرین کوچنی شي، لاندې راشي */
    gap: 10px;                      /* لږه فاصله که wrap وشي */
    margin-bottom: 20px;
}

/* ===== Search Input ===== */
#searchInput {
    padding: 10px 30px;       /* دننه فاصله */
    width: 450px;              /* د کوچني سکرین لپاره یو فکس عرض */
    max-width: 100%;           /* د والد ډیو مطابق پراخیږي */
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    background: rgb(247, 214, 214);
}

/* Focus effect */
#searchInput:focus {
    border-color: #0077b6;
    box-shadow: 0 6px 18px rgba(0,119,182,0.25);
}

/* ===== Year Filter Buttons ===== */
.year-filter {
    display: flex;
    gap: 5px; /* د هر بټن تر منځ فاصله */
}

.year-filter button {
    padding: 10px 20px;
    margin: 0; /* ځکه چې موږ gap کاروو */
    border: none;
    border-radius: 10px;
    background: linear-gradient(to bottom, #e2e2e2, #c9d6ff);
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    position: relative;
}

.year-filter button::after {
    content: attr(data-count);
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff4d4d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.year-filter button:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #0077b6, #0096c7);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,119,182,0.25);
}
.year-filter button.active {
    background: linear-gradient(135deg, #0077b6, #0096c7);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,119,182,0.25);
}

/* ===== Modern Pagination ===== */
.pagination button {
    padding: 8px 16px;
    margin: 0 5px;
    border: none;
    border-radius: 7px;
    background: #e0e0e0;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.pagination button:hover {
    background: #0077b6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,119,182,0.25);
}
.pagination button.active {
    background: #0077b6;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,119,182,0.25);
}

/* News Section */
.news-section {
    padding: 60px 20px;
}

.news-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 کارتونه په هر row کې */
    gap: 20px; /* د کارتونو ترمنځ فاصله */
    justify-items: center; /* کارتونه په center کې */
}
.news-card {
    background: linear-gradient(to bottom, #e9e4f0, #d3cce3);
    border-radius: 16px;
    overflow: hidden;
    border: 0.5px solid #918a8a;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    width: 100%; /* هر کارت به د ستون width ډک کړي */
    max-width: 280px; /* د کارت اعظمي عرض */
    text-align: center;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 200px;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.news-image img {
    width: 100%;
    height: 150px; /* کمول د عکس لوړوالی */
    object-fit: cover;
    display: block;
}

.news-content {
    padding: 8px; /* لږ padding */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-title {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #0d3b66;
    line-height: 1.2;
    margin-bottom: 8px; /* لږ فاصله */
}

.news-meta {
    font-size: 13px;
    color: #6c757d;
    display: flex;
    flex-direction: column;
    gap: 4px; /* لږ فاصله */
    margin-bottom: 10px;
    align-items: center;
}

.news-btn {
    display: inline-block;
    padding: 5px 10px;
    background: linear-gradient(135deg, #0077b6, #0096c7);
    color: #fff;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: center;
}

.news-btn:hover {
    background: linear-gradient(135deg, #005f8a, #0077b6);
}
/* ================= TABLET ================= */
@media (max-width: 1024px) {
  .news-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .news-card {
    max-width: 100%;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {

  .news-section {
    padding: 40px 12px;
  }

  .news-container {
    grid-template-columns: 1fr; /* 1 card per row */
    gap: 15px;
  }

  .news-card {
    max-width: 100%;
    border-radius: 14px;
  }

  .news-image img {
    height: 180px; /* لږ لوی image mobile کې */
  }

  .news-title {
    font-size: 16px;
  }

  .news-meta {
    font-size: 12px;
  }

  .news-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}
/* end of news cards */

/* start of news details  */
  .news-detail-container {
  max-width: 1100px;
  width: 95%;              /* 👈 important */
  margin: 30px auto;
  background: #ece9e6;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

    /* Header three images */
    .news-images {
      display: flex;
      gap: 5px;
      overflow: hidden;
    }

    .news-images img {
      width: calc(33.333% - 3.33px);
      height: 250px;
      object-fit: cover;
    }

    /* Title */
    .news-title1 {
      padding: 20px;
      font-size: 28px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      text-align: center;
      color: rgb(255, 255, 255);
      background: linear-gradient(to top, #000c40, #f0f2f0);
    }

    /* Date/time and location */
  .news-meta {
  display: flex;
  flex-direction: row !important;   /* force horizontal */
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: 17px;
  color: #0013e7;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}

    /* News content */
    .news-content {
      padding: 20px;
      line-height: 1.7;
      font-size: 16px;
      color: #444;
      text-align: justify;
    }

    /* Responsive */
    @media (max-width: 768px) {
       .news-detail-container {
    width: 95%;
  }
      .news-images {
        flex-direction: column;
      }
      .news-images img {
        width: 100%;
        margin-bottom: 5px;
      }
      .news-meta {
    display: flex;
    flex-direction: row;      /* force horizontal */
    justify-content: space-between;
    align-items: center;
  }
    }
/* end of news details */

/* Start  of Community Programs Section */
.community-hero {
  position: relative;
  width: 100%;
  height: 85vh;
  background: url("/images/community cover.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.community-hero h1 {
  color: white;
  font-size: 70px;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1.5s ease forwards;
  margin-bottom: 200px;
}

.community-hero h1 span {
  color: gold;
  font-size: 80px;
  text-shadow:
    4px 4px 0 rgba(192, 62, 62, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1.5s ease forwards;
}
@media (max-width: 768px) {
  .community-hero {
    height: 90vh;
  }
  .community-hero h1 {
    font-size: 1.9em;
  }
  .community-hero h1 span {
    font-size: 1.4em;
  }
}

/* Start of Patients Stories-Testimonial Section */
.hero-section-patients {
  width: 100%;
  background: linear-gradient(90deg, #1d976c, #93f9b9);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-inner-patients {
  background: url("../staticimges/patienthero.jpg") center/cover no-repeat;
  padding: 40px 60px;
  width: 100%;
  max-width: 1150px;
  border-radius: 18px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
}

.hero-inner-patients h1 {
  font-size: 65px;
  /* font-family: "New Rocker", system-ui; */
  margin-bottom: 15px;
  color: transparent;
  background-image: linear-gradient(90deg, #20bdff, #a5fecb);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
}
.hero-inner-patients p {
  font-size: 22px;
  color: #ffffff;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 768px) {
  .hero-inner-patients {
    padding: 20px 15px;
    height: auto;
  }

  .hero-inner-patients h1 {
    font-size: 40px;
  }

  .hero-inner-patients p {
    font-size: 16px;
  }
}
.patient-stories-section {
  padding: 60px 20px;
  background: #e4f4f7;
  font-family: Arial, sans-serif;
}

/* Intro text aligned with cards */
.stories-intro {
  max-width: 1100px; /* same width as grid container */
  margin: 0 auto 30px auto;
  text-align: center; /* optional: center text */
}

.stories-intro p {
  font-size: 16px;
  color: #555;
  text-align: justify; /* optional: justify text */
  margin: 0 auto;
}

/* Search bar aligned with cards */
.stories-search {
  max-width: 1100px;
  margin: 0 auto 30px auto; /* same horizontal alignment as cards */
  text-align: left; /* optional: keep input left aligned */
}

.stories-search input {
  padding: 8px 12px;
  width: 100%; /* input takes full container width */
  max-width: 350px; /* limit width */
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Grid container */
.stories-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1100px; /* same as intro and search */
  margin: 0 auto; /* center horizontally */
  justify-content: flex-start; /* align cards to the left if row isn't full */
}

/* Cards */
.story-card {
  background: #c8e6d4;
  width: calc(25% - 15px); /* fixed 4 per row width */
  min-width: 250px; /* optional, ensures cards don't shrink too small */
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s;
}

/* Responsive */
@media (max-width: 1024px) {
  .story-card {
    width: calc(33.33% - 15px);
  }
}

@media (max-width: 768px) {
  .story-card {
    width: calc(50% - 15px);
  }
}

@media (max-width: 480px) {
  .story-card {
    width: 100%;
  }
}

.story-card:hover {
  transform: translateY(-5px);
  background: #cea9e8;
}

.story-thumbnail {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.story-content {
  padding: 15px;
  text-align: center;
}

.story-title {
  font-size: 18px;
  color: #1d3557;
  margin: 0 0 8px 0;
  text-align: center;
}

.story-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  text-align: center;
}

.story-rating {
  margin-bottom: 10px;
  color: #f39c12;
  text-align: center;
}

.watch-video {
  display: inline-block;
  padding: 6px 12px;
  background: #457b9d;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.watch-video:hover {
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
}

.stories-pagination {
  margin-top: 30px;
  text-align: center;
}

.stories-pagination button {
  padding: 8px 16px;
  margin: 0 5px;
  background: #457b9d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.stories-pagination button:hover {
  background: #1d3557;
}

/* Responsive */
@media (max-width: 1024px) {
  
  .stories-search {
    text-align: center;
    margin-bottom: 20px;
  }
}

/* Start of Download Center */
.hero-section-DownloadCenter {
  width: 100%;
  height: 70vh;
  background: linear-gradient(90deg, #1d976c, #93f9b9);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-inner-downloadcenter {
  background: url("../staticimges/downloadcenter.jpg") center/cover no-repeat;
  padding: 40px 60px;
  width: 100%;
  max-width: 1150px;
  height: 310px;
  border-radius: 18px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
}

.hero-inner-downloadcenter h1 {
  font-size: 55px;
  margin-bottom: 5px;
  color: white;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.2),
    5px 5px 0 rgba(0, 0, 0, 0.2),
    6px 6px 0 rgba(0, 0, 0, 0.2),
    8px 8px 8px rgba(0, 0, 0, 0.4);
}
.hero-inner-downloadcenter ul {
  font-size: 17px;
  color: blueviolet;
  line-height: 0.9;
  text-align: justify;
  font-weight: 600;
  margin-right: 550px;
  margin-left: 40px;
  list-style: none;
  padding-left: 0;
}

.hero-inner-downloadcenter li {
  margin-bottom: 8px;
}

@media (max-width: 576px) {
  .hero-section-DownloadCenter {
    height: auto;
    padding: 15px;
  }

  .hero-inner-downloadcenter {
    padding: 20px 15px;
    height: auto;
  }

  .hero-inner-downloadcenter h1 {
    font-size: 28px;
    margin-bottom: 10px;
    text-align: left;
  }

  .hero-inner-downloadcenter ul {
    font-size: 14px;
    line-height: 1.4;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  .hero-inner-downloadcenter li {
    margin-bottom: 10px;
  }
}

/* Download hero: retain its green gradient, photograph and title/list layout. */
.download-hero {
  position: relative;
  min-height: 420px;
  box-sizing: border-box;
  padding: 32px clamp(16px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
.download-hero::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, 0.24), transparent 60%);
  animation: downloadHeroGlow 16s ease-in-out infinite alternate;
}
.download-hero .hero-inner-downloadcenter {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  height: auto;
  min-height: 310px;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 60px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 18px 40px rgba(10, 80, 55, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: box-shadow 300ms ease;
}
.download-hero .download-hero-copy {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  max-width: min(100%, 560px);
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: downloadHeroEntrance 900ms ease-out both;
}
.download-hero .hero-inner-downloadcenter h1 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4vw, 3.4375rem);
  line-height: 1.25;
  font-weight: 800;
  text-align: start;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(10, 70, 50, 0.25);
}
.download-hero .hero-inner-downloadcenter ul {
  margin: 0;
  padding: 0;
  line-height: 1.65;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  text-align: start;
}
.download-hero .hero-inner-downloadcenter li {
  margin: 0 0 8px;
  transition: transform 250ms ease;
}
.download-hero .hero-inner-downloadcenter li:last-child { margin-bottom: 0; }
.download-hero[dir="rtl"] .hero-inner-downloadcenter h1 { line-height: 1.6; letter-spacing: normal; }
.download-hero .download-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.download-hero .download-hero-ring {
  position: absolute;
  width: clamp(150px, 25vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  animation: downloadHeroFloat 18s ease-in-out infinite alternate;
}
.download-hero .download-hero-ring-one { inset-inline-end: -9%; top: -35%; }
.download-hero .download-hero-ring-two { inset-inline-start: -12%; bottom: -55%; animation-delay: -9s; }
.download-hero .download-hero-file {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(38px, 5vw, 60px);
  aspect-ratio: 0.85;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(20px, 2.5vw, 30px);
  box-shadow: 0 8px 20px rgba(10, 80, 55, 0.12);
  animation: downloadHeroFloat 12s ease-in-out infinite alternate;
}
.download-hero .download-hero-pdf { inset-inline-end: 7%; top: 13%; }
.download-hero .download-hero-excel { inset-inline-end: 16%; bottom: 12%; animation-delay: -6s; }
.download-hero .download-hero-arrow { inset-inline-end: 30%; top: 9%; animation-delay: -3s; opacity: 0.45; }
@keyframes downloadHeroEntrance {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes downloadHeroFloat {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to { transform: translate3d(6px, -12px, 0) rotate(5deg); }
}
@keyframes downloadHeroGlow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .download-hero .hero-inner-downloadcenter:hover { box-shadow: 0 22px 44px rgba(10, 80, 55, 0.3); }
  .download-hero .hero-inner-downloadcenter li:hover { transform: translateX(3px); }
  .download-hero[dir="rtl"] .hero-inner-downloadcenter li:hover { transform: translateX(-3px); }
}
@media (max-width: 768px) {
  .download-hero { height: auto; min-height: 380px; padding: 28px 16px; }
  .download-hero .hero-inner-downloadcenter { padding: 24px 18px; }
  .download-hero .download-hero-copy { padding: 18px; }
  .download-hero .download-hero-arrow { display: none; }
  .download-hero .download-hero-pdf { inset-inline-end: 3%; top: 4%; opacity: 0.35; }
  .download-hero .download-hero-excel { inset-inline-end: 3%; bottom: 4%; opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .download-hero::before,
  .download-hero .download-hero-copy,
  .download-hero .download-hero-ring,
  .download-hero .download-hero-file { animation: none; }
  .download-hero .hero-inner-downloadcenter,
  .download-hero .hero-inner-downloadcenter li { transition: none; }
}

.download-center {
  padding: 60px 20px;
  background: linear-gradient(360deg, #abbaab, #ffffff);
}

.download-center .container {
  max-width: 1200px;
  margin: auto;
}

.download-center .intro {
  text-align: justify;
  text-justify: inter-word;
  max-width: 1135px;
  margin: 0 auto 40px;
  font-size: 17px;
  padding: 0 20px;
}

.download-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.download-table th {
  background: #0a3d62;
  color: white;
  padding: 14px 10px;
  font-size: 16px;
  text-align: left;
}

.download-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.download-table tr:hover {
  background: linear-gradient(93deg, #abbaab, #ffffff);
}

.download-btn {
  background: #0a3d62;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.download-btn:hover {
  background: #145a86;
}

/* End of Download Center */

/* Start of Photos & Videos Gallery Section */
.hero-section-gallery {
  width: 100%;
  height: 70vh;
  background: linear-gradient(90deg, #2193b0, #6dd5ed);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-inner-gallery {
  background: url("../staticimges/videohero.jpg") center/cover no-repeat;
  padding: 40px 60px;
  width: 100%;
  max-width: 1200px;
  height: 350px;
  border-radius: 18px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
}
.hero-inner-gallery h1 {
  font-size: 55px;
  margin-bottom: 15px;
  color: white;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
}
.hero-inner-gallery p {
  font-size: 17px;
  color: wheat;
  line-height: 1.7;
  text-align: justify;
  text-align-last: left;
  margin-right: 500px;
}
@media (max-width: 768px) {
  .hero-section-gallery {
    height: auto;
    padding: 10px;
  }

  .hero-inner-gallery {
    padding: 20px 15px;
    height: auto;
    border-radius: 12px;
    flex-direction: column;
    text-align: center;
  }

  .hero-inner-gallery h1 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: left;
  }

  .hero-inner-gallery p {
    font-size: 12px;
    color: #000d85;
    line-height: 1;
    margin-right: 200px;
    margin-left: 0;
  }
}
.section-gallery {
  padding: 20px;
}

.gallery-header-new {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

#search-dept-new {
  padding: 10px;
  font-size: 14px;
  width: 380px;
  border-radius: 15px;
  margin: 5px 0;
}

.btn-gallery-new {
  padding: 8px 30px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid #2193b0;
  background: white;
  color: #2193b0;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-gallery-new.active {
  background-color: #2193b0;
  color: white;
  border: none;
}

.gallery-buttons-new {
  display: flex;
  gap: 10px;
}

.dept-scroll-container-new {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.dept-list-new {
  display: flex;
  overflow-x: auto;
  padding: 0;
  margin: 0 10px;
  list-style: none;
  gap: 8px;
}

.dept-list-new .dept-item-new {
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}

.dept-list-new .dept-item-new.active {
  background: #2193b0;
  color: white;
}

.btn-scroll-new {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.gallery-media-new {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.gallery-media-item-new {
  display: none;
}

.gallery-media-item-new.active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gallery-photo-new img {
  width: 320px;
  height: 230px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery-photo-new img:hover {
  transform: scale(1.05);
}

.gallery-video-new {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 230px;
  background: #ff0000;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

.gallery-video-new .play-icon-new {
  font-size: 60px;
  color: white;
  z-index: 2;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.gallery-video-new .video-title-new {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  padding: 6px 0;
  border-radius: 0 0 8px 8px;
}

#lightbox-new {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#lightbox-new img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  object-fit: cover;
}

@keyframes zoomInNew {
  0% { transform: scale(0.8); opacity:0; }
  100% { transform: scale(1); opacity:1; }
}

.gallery-photo-new.active img {
  animation: zoomInNew 0.5s ease forwards;
}

/* Responsive */
@media (max-width: 768px){
  #search-dept-new { width: 100%; margin:10px 0; }
  .btn-gallery-new { padding: 8px 16px; font-size:14px; }
  .dept-list-new .dept-item-new { padding: 6px 12px; font-size:13px; border-radius:15px; }
  .gallery-media-new { flex-direction: column; }
  .gallery-photo-new img, .gallery-video-new { width: 100%; max-width:320px; height:auto; }
}

/* End of Photos & Videos Gallery Section */

/* Start of Help Desk & Support Section */
.hero-section-helpdesk {
  width: 100%;
  height: 75vh;
  background: #00416a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-inner-helpdesk {
  background: url("../staticimges/helpdeskhero.jpg") center/cover no-repeat;
  padding: 40px;
  width: 100%;
  max-width: 1150px;
  height: 350px;
  border-radius: 18px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
  justify-content: center;

  transform: translateY(-5px);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-inner-helpdesk:hover {
  transform: translateY(-12px);
}
.hero-inner-helpdesk h1 {
  font-size: 50px;
  /* font-family: "New Rocker", system-ui; */
  margin-bottom: 15px;
  color: #ffffff;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
  text-align: left;
}
.hero-inner-helpdesk p {
  font-size: 17px;
  color: #ffffff;
  line-height: 1.7;
  text-align: left;
}
.hero-inner-helpdesk p b {
  color: #c50000;
  font-size: 20px;
}

/* Mobile Devices (up to 767px) */
/* ===== MOBILE FIX ONLY ===== */
@media (max-width: 767px) {

  .hero-section-helpdesk {
    height: 230px;
    padding: 10px;
  }

  .hero-inner-helpdesk {
    height: auto;
    min-height: 190px;

    padding: 18px 14px;

    /* مهم */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 12px;
  }

  .hero-inner-helpdesk h1 {
    font-size: 22px;
    text-align: center;
    margin-bottom: 8px;
  }

  .hero-inner-helpdesk p {
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
  }
}
/* Container */
/* Help Desk hero only; contact cards, search and fee accordions stay unchanged. */
.helpdesk-support-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  height: auto;
  min-height: 520px;
  padding: clamp(32px, 5vw, 64px) clamp(18px, 4vw, 60px);
  overflow: hidden;
}
.helpdesk-support-hero::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background: radial-gradient(ellipse at 65% 30%, rgba(126, 210, 237, 0.16), transparent 60%);
  animation: helpdeskSupportGlow 16s ease-in-out infinite alternate;
}
.helpdesk-support-hero .hero-inner-helpdesk {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  height: auto;
  min-height: 350px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0, 25, 44, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.helpdesk-support-hero .helpdesk-support-copy {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  width: min(100%, 660px);
  box-sizing: border-box;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 65, 106, 0.76), rgba(0, 65, 106, 0.52));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0, 25, 44, 0.16);
  animation: helpdeskSupportEntrance 900ms ease-out both;
}
.helpdesk-support-hero .helpdesk-support-emblem {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 23px;
  transition: transform 250ms ease;
}
.helpdesk-support-hero .hero-inner-helpdesk h1 {
  margin: 0 0 18px;
  font-size: clamp(1.8rem, 3.6vw, 3.125rem);
  line-height: 1.22;
  font-weight: 800;
  text-align: start;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 3px 10px rgba(0, 25, 44, 0.35);
}
.helpdesk-support-hero .hero-inner-helpdesk p {
  margin: 0;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.85;
  text-align: start;
}
.helpdesk-support-hero .hero-inner-helpdesk p b {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  font-size: clamp(0.9rem, 1.5vw, 1.125rem);
  line-height: 1.5;
}
.helpdesk-support-hero[dir="rtl"] .hero-inner-helpdesk h1 { line-height: 1.6; letter-spacing: normal; }
.helpdesk-support-hero .helpdesk-support-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.helpdesk-support-hero .helpdesk-support-orbit {
  position: absolute;
  width: clamp(180px, 28vw, 360px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: helpdeskSupportFloat 18s ease-in-out infinite alternate;
}
.helpdesk-support-hero .helpdesk-support-orbit-one { inset-inline-end: -10%; top: -25%; }
.helpdesk-support-hero .helpdesk-support-orbit-two { inset-inline-start: -12%; bottom: -45%; animation-delay: -9s; }
.helpdesk-support-hero .helpdesk-support-float {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(38px, 5vw, 64px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(20px, 2.5vw, 30px);
  animation: helpdeskSupportFloat 12s ease-in-out infinite alternate;
}
.helpdesk-support-hero .helpdesk-support-heart { inset-inline-end: 7%; top: 15%; }
.helpdesk-support-hero .helpdesk-support-cross { inset-inline-end: 17%; bottom: 13%; animation-delay: -6s; }
.helpdesk-support-hero .helpdesk-support-scope {
  position: absolute;
  inset-inline-end: 25%;
  top: 12%;
  font-size: 25px;
  color: rgba(255, 255, 255, 0.25);
  animation: helpdeskSupportFloat 14s ease-in-out infinite alternate;
}
@keyframes helpdeskSupportEntrance {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes helpdeskSupportFloat {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to { transform: translate3d(7px, -12px, 0) rotate(5deg); }
}
@keyframes helpdeskSupportGlow {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .helpdesk-support-hero .hero-inner-helpdesk:hover { transform: translateY(-9px); box-shadow: 0 22px 46px rgba(0, 25, 44, 0.34); }
  .helpdesk-support-hero .helpdesk-support-copy:hover .helpdesk-support-emblem { transform: translateY(-2px) rotate(-4deg); }
}
@media (max-width: 767px) {
  .helpdesk-support-hero { min-height: 0; padding: 30px 16px; }
  .helpdesk-support-hero .hero-inner-helpdesk { padding: 20px 14px; }
  .helpdesk-support-hero .hero-inner-helpdesk p br { display: none; }
  .helpdesk-support-hero .helpdesk-support-copy { width: 100%; }
  .helpdesk-support-hero .helpdesk-support-heart { inset-inline-end: 3%; top: 3%; opacity: 0.3; }
  .helpdesk-support-hero .helpdesk-support-cross,
  .helpdesk-support-hero .helpdesk-support-scope { display: none; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .helpdesk-support-hero .hero-inner-helpdesk:hover { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .helpdesk-support-hero::before,
  .helpdesk-support-hero .helpdesk-support-copy,
  .helpdesk-support-hero .helpdesk-support-orbit,
  .helpdesk-support-hero .helpdesk-support-float,
  .helpdesk-support-hero .helpdesk-support-scope { animation: none; }
  .helpdesk-support-hero .hero-inner-helpdesk,
  .helpdesk-support-hero .helpdesk-support-emblem { transition: none; }
}

.helpdesk-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Contact Cards */
.helpdesk-contact-cards {
  display: flex;
  gap: 60px;
  justify-content: center;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.helpdesk-contact-card {
  background: linear-gradient(90deg, #79d0dd, #cbe9ef);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #ccc;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  flex: 1 1 200px;
  max-width: 320px;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.helpdesk-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}

.helpdesk-contact-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #1e90ff;
}

.helpdesk-contact-card p {
  font-weight: 500;
}
@media (max-width: 767px) {
  .helpdesk-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 15px;
    align-items: center;
  }

  .helpdesk-contact-card {
    flex: 0 0 auto;
    width: 95%;
    max-width: 390px;
    margin-bottom: 15px;
  }
}

/* Departments Table */
.helpdesk-departments {
  margin-bottom: 40px;
  /* background:linear-gradient(90deg, #cfd9df, #e2ebf0); */
}

.helpdesk-departments h2 {
  font-size: 26px;
  background: linear-gradient(90deg, #4ca1af, #c4e0e5);
  color: #00478f;
  margin-bottom: 15px;
  text-align: left;
  margin-left: 40px;
  margin-right: 40px;
  padding: 10px 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.helpdesk-departments p {
  font-size: 16px;
  margin-bottom: 15px;
  text-align: left;
  margin-left: 40px;
  margin-right: 40px;

}

.helpdesk-departments-table {
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: center;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
}

.helpdesk-departments-table th,
.helpdesk-departments-table td {
  padding: 14px 20px;
}

.helpdesk-departments-table th {
  background: #1e90ff;
  color: #fff;
}

.helpdesk-departments-table tr:nth-child(even) {
  background: #e0f0ff;
}

.helpdesk-departments-table tr:hover {
  background: #aec8e0;
}

/* Accordion Header: Title + Search */
.helpdesk-accordion-header {
  display: flex;
  margin-left: 40px;
  margin-right: 40px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.helpdesk-accordion-title {
  font-size: 26px;
  color: #1e90ff;
  margin: 0;
}

#helpdesk-search {
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  width: 330px;
}

@media (max-width: 768px) {
  .helpdesk-accordion-header {
    flex-direction: column;
    align-items: flex-start;
  }
  #helpdesk-search {
    width: 100%;
    margin-top: 10px;
  }
}

/* Accordion Items */
.helpdesk-accordion-item {
  margin-bottom: 15px;
  border-radius: 10px;
  margin-left: 40px;
  margin-right: 40px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Accordion Buttons */
.helpdesk-accordion-button {
  background: linear-gradient(90deg, #00467f, #a5cc82);
  color: #ffffff;
  padding: 18px 20px;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.helpdesk-accordion-button:hover {
  background: linear-gradient(90deg, #a5cc82, #00467f);
  color: white;
}

/* Accordion Content */
.helpdesk-accordion-content {
  display: none; /* Closed initially */
  padding: 20px;
  background-color: #bfdcf7;
}

/* Rates Grid Cards – 5 columns */
.helpdesk-grid-rates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  justify-items: center;
}

@media (max-width: 1200px) {
  .helpdesk-grid-rates {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.rate-card {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-weight: 600;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.rate-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.helpdesk-discount-container {
  margin-top: 40px;
  padding: 0;
  margin-left: 40px;
  margin-right: 40px;
  background: #f8fbff;
  border-radius: 12px;
  border: 1px solid #ccc;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.discount-content {
    display: none;
    margin-top: 10px;
}

/* clickable style */
.discount-toggle {
    cursor: pointer;
    transition: 0.3s;
}

.discount-toggle:hover {
    opacity: 0.8;
}

.discount-note {
  font-size: 0.7em;
  color: #555; 
  margin-left: 5px;
}
/* Title Full Width Bar */
.helpdesk-discount-title {
  font-size: 26px;
  color: black;
  background: linear-gradient(90deg, #0288b5, #d9ddff);
  display: flex;
  align-items: center;

  width: 100%;
  padding: 15px 20px;
  gap: 10px;
  margin: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.helpdesk-departments.rtl-box h2,
.helpdesk-departments.rtl-box p {
    text-align: right !important;
    direction: rtl !important;
}
/* Icon inside the title */
.helpdesk-discount-title i {
  font-size: 24px;
  color: #fff;
}

/* Body text inside the card */
.helpdesk-discount-text {
  padding: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: justify;
}

/* Appointment Button */
.helpdesk-appointment-button {
  text-align: center;
  margin: 60px 0 30px 0;
}

.helpdesk-appointment-button a {
  display: inline-block;
  padding: 20px 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #1e90ff, #00d1b2);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}
.helpdesk-appointment-button a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

/* End of Help Desk & Support Section */

/* Start of Make an Appointment Section */
.hero-section-appointment {
  width: 100%;
  height: 78vh;
  background: linear-gradient(
    90deg,
    var(--brand-green) 0%,
    var(--brand-blue) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-inner-appointment {
  background: url("../staticimges/appointmenthero2.jpg") center/cover no-repeat;
  padding: 40px;
  width: 100%;
  max-width: 1200px;
  height: 380px;
  border-radius: 18px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
  justify-content: center;

  transform: translateY(-5px);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-inner-appointment h1 {
  font-size: 55px;
  /* font-family: "New Rocker", system-ui; */
  margin-bottom: 35px;
  color: #ffffff;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
  text-align: left;
}
.hero-inner-appointment p {
  font-size: 17px;
  color: #ffffff;
  line-height: 1.7;
  text-align: left;
  margin-right: 600px;
}
@media (max-width: 767px) {

  .hero-section-appointment {
    height: auto;
    padding: 10px;
  }

  .hero-inner-appointment {
    height: 160px;          /* مهم: کم fixed height */
    min-height: unset;

    padding: 14px;

    border-radius: 14px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transform: none; /* موبایل کې hover/translate مه کاروه */
  }

  .hero-inner-appointment h1 {
    font-size: 20px;
    margin-bottom: 6px;
    text-align: center;
  }

  .hero-inner-appointment p {
    font-size: 12px;
    line-height: 1.4;
    text-align: center;

    margin: 0;        /* مهم: لوی margin ختم شو */
    padding: 0;
  }
}
body.appointment-page {
  background: linear-gradient(346deg, #076585, #fff);
}

.appointment-section {
  max-width: 1000px;
  margin: 40px auto;
  background: linear-gradient(341deg, #abbaab, #ffffff);
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.title {
  text-align: center;
  font-size: 26px;
  color: #02457a;
  margin-bottom: 30px;
}

.form-title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(90deg, #00467f, #a5cc82);
  padding: 7px 15px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
  color: rgb(0, 49, 39);
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #9cc7ee;
  border-radius: 8px;
}

textarea {
  height: 90px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Visit Type Flex Container */
.visit-type-group .visit-options {
  display: flex;
  gap: 40px; /* spacing between checkboxes */
  margin-top: 10px;
}

/* Individual Checkbox Styling */
.visit-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #4caf50;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;
  font-weight: 500;
}

/* Hover Effect */
.visit-option:hover {
  background: #4caf50;
  color: white;
}

/* Checkbox Input Styling */
.visit-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #0077cc;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 600;
}

.submit-btn:hover {
  background: #005fa3;
}

.extra-note {
  text-align: center;
  margin: 20px 0 10px;
  color: #444;
  font-size: 14px;
}

.links-box {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
}

.info-btn {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: #eeeeee;
  font-weight: 600;
  border: 1px solid #bcd9f5;
  background: linear-gradient(90deg, #5433ff, #20bdff, #5433ff);
  overflow: hidden;
  transition: color 0.3s ease;
}

.info-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00467f, #a5cc82);
  transition: all 0.5s ease;
  z-index: 0;
}

.info-btn:hover::before {
  left: 0;
}

.info-btn span {
  position: relative;
  z-index: 1; /* text above the gradient */
}

.info-btn:hover {
  color: white;
}

/* Popup Overlay */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Popup Box */
.popup-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: popupShow 0.3s ease;
}

/* Heading */
.popup-content h2 {
  margin-bottom: 15px;
  font-size: 24px;
  color: #4caf50; /* green title */
}

/* Paragraph */
.popup-content p {
  font-size: 16px;
  color: #333;
  margin-bottom: 25px;
}

/* Button */
.popup-content button {
  padding: 10px 25px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #4caf50, #45a049);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.2s;
}

.popup-content button:hover {
  background: linear-gradient(90deg, #45a049, #4caf50);
  transform: scale(1.05);
}

/* Popup Animation */
@keyframes popupShow {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {

  /* ===== Main container ===== */
  .appointment-section {
    margin: 20px 10px;
    padding: 15px;
    border-radius: 12px;
  }

  .title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  /* ===== 2 column → 1 column ===== */
  .two-col {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ===== Inputs ===== */
  input,
  select,
  textarea {
    padding: 9px;
    font-size: 14px;
  }

  textarea {
    height: 80px;
  }

  /* ===== Visit type (checkbox row fix) ===== */
  .visit-type-group .visit-options {
    flex-direction: column;
    gap: 10px;
  }

  .visit-option {
    width: 100%;
    justify-content: flex-start;
  }

  /* ===== Submit button ===== */
  .submit-btn {
    font-size: 15px;
    padding: 10px;
  }

  /* ===== Links box ===== */
  .links-box {
    flex-direction: column;
    gap: 10px;
  }

  .info-btn {
    width: 100%;
    text-align: center;
  }

  /* ===== Form title ===== */
  .form-title {
    font-size: 16px;
    padding: 6px 10px;
  }

  /* ===== Popup ===== */
  .popup-content {
    max-width: 90%;
    padding: 18px;
  }

  .popup-content h2 {
    font-size: 18px;
  }

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

  .popup-content button {
    font-size: 14px;
    padding: 8px 18px;
  }
}

/* End of Make an Appointment Section */

/* Start of Feedback on Services Section */
/* Feedback Section Scoped CSS */
.feedback-section {
  background: linear-gradient(90deg, #f7941e, #72c6ef, #00a651);
  color: #fff;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
}

.feedback-section .container {
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(90deg, #02aab0, #00cdac);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.feedback-section h1 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 2rem;
}

.feedback-section p {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1rem;
}

.feedback-section .rating-guide {
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 0.95rem;
  margin: 15px 0 25px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.feedback-section .rating-guide p {
  margin: 0;
  font-weight: 500;
}

.feedback-section .rating-guide strong {
  color: #ffeb3b;
}

/* Form Styling */
.feedback-section form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
}

.feedback-section fieldset {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 15px 10px;
}

.feedback-section legend {
  font-weight: bold;
  padding: 0 5px;
  font-size: 1rem;
}

.feedback-section .rating-options {
  display: flex;
  justify-content: space-between;
  margin: 5px 0 10px 0;
  flex-wrap: nowrap;
}

.feedback-section .rating-options label {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition:
    background 0.3s,
    transform 0.2s;
}

.feedback-section .rating-options label:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.feedback-section textarea {
  grid-column: span 3;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: none;
  margin-bottom: 15px;
  font-size: 0.95rem;
}

.feedback-section button[type="submit"] {
  grid-column: span 3;
  padding: 12px;
  background: #fff;
  color: #007bff;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition:
    background 0.3s,
    transform 0.2s;
}

.feedback-section button[type="submit"]:hover {
  background: #f0f0f0;
  transform: scale(1.02);
}

.feedback-section .privacy-note {
  grid-column: span 3;
  font-size: 0.8rem;
  margin-bottom: 10px;
  text-align: center;
}

.feedback-section .success-message {
  grid-column: span 3;
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  color: #ffeb3b;
}

/* Responsive Mobile */
@media screen and (max-width: 768px) {
  .feedback-section form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .feedback-section fieldset {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .feedback-section legend {
    font-size: 1rem;
  }

  .feedback-section .rating-options {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
  }

  .feedback-section .rating-options label {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    font-size: 0.9rem;
  }

  .feedback-section textarea {
    width: 100%;
    font-size: 0.95rem;
    padding: 8px;
    box-sizing: border-box;
  }

  .feedback-section button[type="submit"] {
    width: 100%;
    font-size: 1rem;
    padding: 12px;
  }

  .feedback-section .privacy-note,
  .feedback-section .success-message {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
  }
}

/* End of Feedback on Services Section */



/* House Job Start */
/* HERO */
.hero-housejob{
    background-image: linear-gradient(to top, #330867 0%, #30cfd0 100%);
    color:white;
    padding:70px 0;
    text-align:center;
}

.container-1{
    width:90%;
    margin:auto;
}
.hero-housejob h1{
    font-size:32px;
    font-weight:bold;
    margin-bottom:15px;
    letter-spacing:0.5px;
    text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.15);
    font-family: "New Rocker", system-ui;
}

.hero-housejob p{
    font-size:18px;
    line-height:1.8;
    max-width:900px;
    margin:auto;
    background:rgba(255,255,255,0.12);
    padding:40px 20px;
    border-radius:10px;
    backdrop-filter: blur(6px);
    box-shadow:0 25px 25px rgba(0,0,0,0.2);
    color: white;
}

/* CARD DESIGN */
.card{
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    margin:20px 0;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

/* CENTER */
.center{
    text-align:center;
}

/* INPUT */
input{
    padding:10px;
    width:250px;
    border:1px solid #ccc;
    border-radius:6px;
}

button{
    padding:10px 15px;
    background:#0b3d91;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* ACCORDION */
/* ACCORDION BUTTON */
.accordion{
    width:100%;
    padding:16px 20px;
    background:linear-gradient(135deg,#0b3d91,#1456c3);
    color:#fff;
    border:none;
    text-align:left;
    margin-top:12px;
    cursor:pointer;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:0.3s;
}

/* HOVER */
.accordion:hover{
    background:linear-gradient(135deg,#092f70,#0b3d91);
    transform:translateY(-2px);
}

/* ACTIVE */
.accordion.active{
    border-radius:10px 10px 0 0;
}

/* ICON (+ / -) */
.accordion::after{
    content:"+";
    font-size:20px;
    transition:0.3s;
}

.accordion.active::after{
    content:"−";
}

/* PANEL */
.panel{
    display:none;
    background:#fff;
    padding:15px;
    border-radius:0 0 12px 12px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(-5px);}
    to{opacity:1; transform:translateY(0);}
}

/* TABLE */
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:10px;
}

/* HEADER */
th{
    background:#0b3d91;
    color:#fff;
    padding:12px;
    text-align: center;
}

/* DATA */
td{
    padding:12px;
    background:#f7faff;
    border-bottom:1px solid #e3e8f0;
    transition:0.3s;
    text-align: center;
}

/* ZEBRA ROWS */
tr:nth-child(even) td{
    background:#eef4ff;
}

/* HOVER EFFECT */
tr:hover td{
    background:#dbe7ff;
    transform:scale(1.01);
}

/* LAST ROW */
tr:last-child td{
    border-bottom:none;
}
/* RESULT TABLE */
.result-table{
    width:100%;
}

.result-table img{
    width:120px;
    height:120px;
    border-radius:10px;
    object-fit:cover;
    border:1px solid #0b3d91;
}

#resultBox{
    display:none;
}
.section-title{
    text-align:center;
    color:#0b3d91;
    margin-bottom:15px;
    font-size:22px;
    font-weight:bold;
}
    .result-box{
    margin-top:20px;
    display:none;
}

.title{
    text-align:center;
    color:#0b3d91;
    margin-bottom:20px;
}

/* MAIN LAYOUT */
.profile{
    display:flex;
    gap:30px;
    align-items:center;
    background:#ffffff;
    padding:25px;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

/* IMAGE */
.image-box{
    flex:1;
    display:flex;
    justify-content:center;
}

.image-box img{
    width:200px;
    height:300px;
    object-fit:cover;
    border-radius:16px;
    border:1px solid #0b3d91;
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    transition:0.3s;
}

.image-box img:hover{
    transform:scale(1.05);
}

/* INFO BOX */
.info-box{
    flex:3;
}

/* TABLE STYLE */
.info-box table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

/* HEADER */
.info-box th{
    background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
    color:#fff;
    text-align:left;
    padding:14px;
    font-weight:600;
}

/* DATA */
.info-box td{
    padding:14px;
    background:#f7faff;
    border-bottom:1px solid #e3e8f0;
    transition:0.3s;
}

/* ZEBRA ROWS */
.info-box tr:nth-child(even) td{
    background:#eef4ff;
}

/* HOVER EFFECT */
.info-box tr:hover td{
    background:#2459c4;
    transform:scale(1.01);
    color: white;
}

/* LAST ROW FIX */
.info-box tr:last-child td{
    border-bottom:none;
}
   h2 small{
    font-size:14px;
    color:#666;
    font-weight:normal;
}
/* RESPONSIVE */
@media(max-width:768px){
    .profile{
        flex-direction:column;
        text-align:center;
    }

    .image-box img{
        width:160px;
        height:160px;
    }
}
.rtl {
  direction: rtl;
  text-align: right;
}

.rtl table {
  direction: rtl;
}

.rtl th,
.rtl td {
  text-align: right;
}

/* Pashto font for table */
.rtl table,
.rtl th,
.rtl td {
  font-family: "BahijTitr", "MSAbdali", sans-serif !important;
}

/* Keep numbers & IDs LTR (important) */
.rtl td#faculty,
.rtl td#name,
.rtl td#fname,
.rtl td#sid,
.rtl td#year,
.rtl td#tyear,
.rtl td#start,
.rtl td#end {
  direction: ltr;
  text-align: center;
}
    /* ===== DEFAULT (ENGLISH) ===== */
.panel table th,
.panel table td {
  text-align: center;
}

/* ===== PASHTO MODE ===== */
.rtl .panel table {
  direction: rtl;
}

.rtl .panel table th,
.rtl .panel table td {
  text-align: right;
  font-family: "BahijTitr", "MSAbdali", sans-serif !important;
}

/* ===== KEEP NUMBERS CENTER ===== */
.rtl .panel table td:first-child {
  text-align: center;
  direction: ltr;
}
/* smart-lab start */

.hero{
    width:100%;
    min-height:350px;
    background:linear-gradient(135deg,#1e3a5f,#2563eb);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    margin-bottom:30px;
    padding:40px 20px;
}

/* text */
.hero-inner{
    text-align:center;
    color:white;
    max-width:900px;
    z-index:2;
}

.hero-inner h1{
    font-size:45px;
    font-weight:700;
    margin-bottom:10px;
    color: #e6cf00;
}

.hero-inner p{
    font-size:20px;
    color:#ebeae5;
    line-height:1.6;
    margin-top: 30px;
}

/* floating icons */
.floating-icons span{
    position:absolute;
    font-size:24px;
    opacity:0.2;
    animation:floatUp 10s linear infinite;
}

/* random positions */
.floating-icons span:nth-child(1){left:5%;  bottom:-50px; animation-delay:0s;}
.floating-icons span:nth-child(2){left:20%; bottom:-60px; animation-delay:2s;}
.floating-icons span:nth-child(3){left:40%; bottom:-70px; animation-delay:4s;}
.floating-icons span:nth-child(4){left:60%; bottom:-80px; animation-delay:1s;}
.floating-icons span:nth-child(5){left:80%; bottom:-90px; animation-delay:3s;}
.floating-icons span:nth-child(6){left:90%; bottom:-100px; animation-delay:5s;}

@keyframes floatUp{
    0%{
        transform:translateY(0) rotate(0deg);
        opacity:0;
    }
    20%{
        opacity:0.3;
    }
    100%{
        transform:translateY(-300px) rotate(360deg);
        opacity:0;
    }
}

/* mobile */
@media(max-width:600px){
    .hero-inner h1{
        font-size:24px;
    }
    .hero-inner p{
        font-size:14px;
    }
}
.container{
max-width:900px;
margin:auto;
background:rgb(237, 224, 224);
margin-top: 45px;
padding:40px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
margin-bottom: 45px;
}


p{
text-align:center;
color:#002c85;
margin-bottom:35px;
line-height:1.6;
}

label{
font-weight:600;
color:#3e3751;
display:block;
margin-bottom:6px;
}

/* Inputs and dropdown */
input[type="number"], select, #searchDropdown{
width:100%;
padding:12px 14px;
border-radius:8px;
border:1px solid #d1d5db;
font-size:15px;
background:#fafafa;
transition:0.25s;
margin-bottom:10px;
}

input:focus, select:focus, #searchDropdown:focus{
outline:none;
border-color:#3b82f6;
background:white;
box-shadow:0 0 0 3px rgba(59,130,246,0.15);
}

/* Suggestions box */
.suggestions{
border:1px solid #d1d5db;
border-radius:8px;
background:white;
max-height:150px;
overflow-y:auto;
display:none;
position:absolute;
width:100%;
z-index:10;
}

.suggestions div{
padding:10px;
cursor:pointer;
}

.suggestions div:hover{
background:#f0f0f0;
}

.smart-btn{
width:100%;
padding:13px;
border:none;
border-radius:8px;
font-size:16px;
font-weight:600;
color:white;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
cursor:pointer;
transition:0.25s;
}

.smart-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(37,99,235,0.35);
}

/* Table */
table{
width:100%;
border-collapse:collapse;
margin-top:35px;
overflow:hidden;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

thead{
background:#1e3a5f;
color:white;
}

th{
padding:14px;
font-weight:600;
font-size:14px;
}

td{
padding:12px;
border-bottom:1px solid #eee;
font-size:14px;
text-align:center;
}

.low{background-color:#facc15;color:#92400e;font-weight:600;}
.normal{background-color:#22c55e;color:white;font-weight:600;}
.high{background-color:#ef4444;color:white;font-weight:600;}

table tr.low td, table tr.normal td, table tr.high td{
background-color:inherit;
color:inherit;
}

#hiddenTable{display:none;}

/* Mobile responsive table for screens <= 600px */
@media (max-width: 600px) {
  #resultTable {
    display: block;
    width: 100%;
    overflow-x: auto; /* horizontal scroll if needed */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  }

  /* Hide the table header */
  #resultTable thead {
    display: none;
  }

  /* Make each row a block */
  #resultTable tbody tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
  }

  /* Make each cell a flex row with label */
  #resultTable tbody td {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  /* Remove border for last cell in row */
  #resultTable tbody tr td:last-child {
    border-bottom: 0;
  }

  /* Add labels before each cell using data-label */
  #resultTable tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    width: 40%;
    display: inline-block;
  }
}

.custom-alert{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.alert-box{
    background:white;
    padding:25px;
    border-radius:12px;
    width:300px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    animation:pop 0.2s ease-in-out;
}

.alert-box p{
    font-size:16px;
    color:#333;
    margin-bottom:15px;
}

.alert-box button{
    background:#2563eb;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
}

.alert-box button:hover{
    background:#1d4ed8;
}

.hidden{
    display:none;
}

@keyframes pop{
    from{transform:scale(0.8);opacity:0;}
    to{transform:scale(1);opacity:1;}
}
/* ================= ALERT OVERLAY ================= */
.alert-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.hidden{
  display:none;
}

.alert-box{
  background:white;
  width:320px;
  padding:25px;
  border-radius:14px;
  text-align:center;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
  animation:pop 0.25s ease;
}

@keyframes pop{
  from{transform:scale(0.8);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

.alert-icon{
  font-size:40px;
  margin-bottom:10px;
}

.alert-title{
  font-size:20px;
  margin-bottom:8px;
  color:#1e3a5f;
}

.alert-message{
  font-size:14px;
  color:#555;
  margin-bottom:20px;
  line-height:1.5;
}

.alert-btn{
  background:#2563eb;
  color:white;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

.alert-btn:hover{
  background:#1d4ed8;
}

/* =================Job Announcement */
.rtl {
  direction: rtl;
  text-align: right;
}

.rtl *:not(:where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .bi)) {
  font-family: "Bahij", "Noto Sans Arabic", sans-serif;
}

/* ================= HERO (MODERN PREMIUM) ================= */
.job-hero {
  position: relative;
  padding: 90px 20px;
  text-align: center;
  color: white;
  overflow: hidden;
 background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

/* animated glow blobs */
.job-hero::before,
.job-hero::after {
  content: "";
  position: absolute;
  filter: blur(30px);
  opacity: 0.35;
}

.job-hero::before {
  width: 320px;
  height: 320px;
  background: #00c6ff;
  top: -80px;
  left: -80px;
}

.job-hero::after {
  width: 350px;
  height: 350px;
  background: #ff4ecd;
  bottom: -100px;
  right: -100px;
}

.job-hero h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.job-hero p {
  font-size: 18px;
  max-width: 750px;
  margin: auto;
  opacity: 0.9;
  line-height: 1.7;
}

/* ================= TABLE WRAPPER ================= */
.table-wrapper {
  max-width: 1150px;
  margin: -50px auto 70px;
  padding: 20px;
}

/* ================= CARD TABLE ================= */
.job-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

/* HEADER */
.job-table thead {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.job-table th {
  padding: 18px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-align: left;
}

/* ROWS */
.job-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #333;
}

.job-table tbody tr {
  transition: all 0.25s ease;
}

.job-table tbody tr:hover {
  background: #f7f9ff;
  transform: scale(1.01);
}

/* BUTTON */
.job-button {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  transition: 0.3s;
}

.job-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,114,255,0.3);
}

/* empty state */
.empty-row {
  text-align: center;
  padding: 40px;
  color: #777;
  font-size: 15px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .job-hero h1 {
    font-size: 32px;
  }

  .job-table th,
  .job-table td {
    padding: 12px;
    font-size: 13px;
  }
}
/* ================= RTL TABLE FIX (FULL CONTROL) ================= */
.rtl .job-table {
  direction: rtl;
}

/* 👉 HEADERS CENTER + CLEAN */
.rtl .job-table thead th {
  text-align: center !important;
  vertical-align: middle;
}

/* 👉 DATA CENTER */
.rtl .job-table tbody td {
  text-align: center !important;
  vertical-align: middle;
}

/* 👉 FIRST COLUMN (#) */
.rtl .job-table th:first-child,
.rtl .job-table td:first-child {
  text-align: center !important;
}

/* 👉 REMOVE LEFT ALIGN OVERRIDE */
.job-table th {
  text-align: center !important;
}


/* Job Details Page */

    :root {
      color-scheme: light;
      --bg: #f6f8ff;
      --surface: rgba(255, 255, 255, 0.92);
      --surface-strong: #ffffff;
      --text: #112d4e;
      --muted: #5f6c7b;
      --primary: #2f80ed;
      --accent: #7b61ff;
      --success: #2cb67d;
      --border: rgba(47, 128, 237, 0.14);
      --shadow: 0 24px 70px rgba(34, 64, 110, 0.08);
    }


    .job-details-page {
      max-width: 1240px;
      margin: 0 auto;
      padding: 32px 22px 60px;
    }

    .job-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, rgba(47, 128, 237, 0.95), rgba(123, 97, 255, 0.92));
      border-radius: 28px;
      color: white;
      padding: 40px 32px;
      box-shadow: var(--shadow);
      margin-bottom: 32px;
    }

    .job-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 380px;
      height: 380px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: 50%;
      filter: blur(18px);
    }

    .job-hero::after {
      content: '';
      position: absolute;
      bottom: -40px;
      left: -80px;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }

    .job-hero-content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 24px;
    }

    .job-title {
      margin: 0;
      font-size: clamp(2.1rem, 1.8rem + 1vw, 3.2rem);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .job-subtitle {
      margin: 0;
      color: rgba(255,255,255,0.9);
      font-size: 1.05rem;
      max-width: 800px;
    }

    .job-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .job-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      font-size: 0.94rem;
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(6px);
    }

    .job-body {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
      gap: 30px;
      align-items: start;
    }

    .job-main,
    .job-sidebar {
      display: grid;
      gap: 24px;
    }

    .job-card {
      background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 28px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .job-card h2 {
      margin-top: 0;
      margin-bottom: 18px;
      font-size: 1.35rem;
      color: var(--text);
    }

    .job-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .job-stat {
      display: grid;
      gap: 8px;
      padding: 20px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid rgba(47, 128, 237, 0.08);
      transition: transform 0.25s ease;
    }

    .job-stat:hover {
      transform: translateY(-2px);
    }

    .job-stat-title {
      font-size: 0.95rem;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .job-stat-value {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
    }

    .job-details-section {
      display: grid;
      text-align: justify;
      gap: 18px;
    }

    .job-details-section p {
      margin: 0;
      color: #4f5c72;
      line-height: 1.8;
            text-align: justify;

      white-space: pre-line;
    }

    .job-sidebar .sidebar-card {
      padding: 28px;
      text-align: center;
    }

    .sidebar-card h3 {
      margin: 0 0 18px;
      font-size: 1.2rem;
      color: var(--text);
    }

    .sidebar-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 16px;
    }

    .sidebar-card li {
      display: grid;
      gap: 6px;
      text-align: left;
      border-radius: 18px;
      padding: 14px 16px;
      background: white;
      color: var(--text);
    }

    .sidebar-card li strong {
      display: block;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .action-group {
      display: grid;
      gap: 14px;
      margin-top: 8px;
    }

    .button-primary,
    .button-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 14px 18px;
      border-radius: 18px;
      font-size: 1rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .button-primary {
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: white;
      box-shadow: 0 18px 40px rgba(47, 128, 237, 0.22);
    }

    .button-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 45px rgba(47, 128, 237, 0.28);
    }

    .button-secondary {
      background: white;
      border: 1px solid rgba(17, 45, 78, 0.1);
      color: var(--text);
    }

    .button-secondary:hover {
      transform: translateY(-1px);
      background: #f2f6ff;
    }

    @media (max-width: 960px) {
      .job-body {
        grid-template-columns: 1fr;
      }

      .job-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      .job-details-page {
        padding: 24px 16px 48px;
      }

      .job-hero {
        padding: 28px 24px;
      }

      .job-title {
        font-size: 2.2rem;
      }

      .job-pill {
        width: 100%;
        justify-content: center;
      }
    }/* ✅ Pashto specific styling */
/* ✅ Scoped RTL (only inside main content) */
.rtl-scope {
  direction: rtl;
}

/* Sidebar fix */
.rtl-scope .sidebar-card li {
  text-align: center;
}

.rtl-scope .sidebar-card li span {
  text-align: center;
  display: block;
}

/* Auto text */
.auto-text {
  line-height: 1.8;
  text-align: justify;
  direction: ltr;
  font-family: 'Inter', sans-serif;
}

.rtl-scope .auto-text {
  direction: rtl;
  font-family: 'Bahij', sans-serif;
}
.auto-text {
  line-height: 1.8;
  text-align: justify;   /* 👈 مهم */
  direction: ltr;
  font-family: 'Inter', sans-serif;
}

/* Pashto mode base */
.rtl .auto-text {
  text-align: justify;   /* 👈 دلته هم */
  direction: rtl;
  font-family: 'Bahij', sans-serif;
}


/* Job Apply Page */

    :root {
      color-scheme: light;
      --bg: #eef4ff;
      --surface: rgba(255,255,255,0.92);
      --surface-strong: #ffffff;
      --text: #112d4e;
      --muted: #5f6c7b;
      --primary: #3b82f6;
      --accent: #7c3aed;
      --button: #2563eb;
      --button-hover: #1d4ed8;
      --border: rgba(59, 130, 246, 0.18);
      --shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
    }


    

    .apply-page {
      width: min(100%, 1040px);
      margin: 0 auto;
      padding: 0 18px 56px;
    }

    .apply-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 24px;
      align-items: start;
    }

    .hero-card,
    .form-card,
    .info-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 28px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      min-width: 0;
    }

    .hero-card {
      position: relative;
      overflow: hidden;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      width: 100vw;
      padding: 40px 18px;
      grid-column: 1 / -1;
      margin-bottom: 24px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(124, 58, 237, 0.9));
      color: white;
      border-radius: 0;
      box-shadow: none;
    }

    .hero-card::before,
    .hero-card::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      opacity: 0.24;
    }

    .hero-card::before {
      width: 260px;
      height: 260px;
      top: -80px;
      right: -80px;
      background: rgba(255,255,255,0.16);
      filter: blur(20px);
    }

    .hero-card::after {
      width: 180px;
      height: 180px;
      bottom: -50px;
      left: -40px;
      background: rgba(255,255,255,0.12);
      filter: blur(18px);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 18px;
      max-width: 1040px;
      margin: 0 auto;
    }

    .hero-title {
      margin: 0;
      font-size: clamp(2.4rem, 2rem + 1vw, 3.4rem);
      line-height: 1.02;
    }

    .hero-copy {
      margin: 0;
      max-width: 760px;
      color: rgba(255,255,255,0.92);
      font-size: 1.03rem;
      line-height: 1.75;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 16px;
    }

    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.16);
      color: white;
      font-size: 0.96rem;
    }

    .form-card {
      padding: 30px;
    }

    .form-card h2,
    .info-card h2 {
      margin: 0 0 20px;
      font-size: 1.45rem;
      color: var(--text);
    }

    .form-group {
      display: grid;
      gap: 10px;
      margin-bottom: 20px;
    }

    .form-group label {
      font-weight: 700;
      color: var(--text);
    }

    .form-control,
    .form-control:focus {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 16px;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      background: #fff;
      color: var(--text);
    }

    .form-control:focus {
      border-color: rgba(59, 130, 246, 0.38);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
    }

    .file-upload {
      position: relative;
    }

    .file-upload input[type="file"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .file-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      border-radius: 16px;
      border: 2px dashed rgba(15, 23, 42, 0.16);
      background: #f8fafc;
      color: var(--text);
      font-weight: 600;
      cursor: pointer;
      min-height: 68px;
    }

    .file-label span {
      display: block;
      max-width: 75%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .button-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding: 16px 18px;
      border-radius: 18px;
      border: none;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: white;
      font-size: 1rem;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .button-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(59, 130, 246, 0.24);
      background: var(--button-hover);
    }

    .success-message {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 20px;
      border-radius: 18px;
      background: #ecfdf5;
      color: #166534;
      border: 1px solid #bbf7d0;
      margin-bottom: 24px;
    }

    .info-card {
      padding: 28px;
      display: grid;
      gap: 20px;
    }

    .info-card p {
      margin: 0;
      color: #475569;
      line-height: 1.8;
    }

    .info-list {
      display: grid;
      gap: 16px;
    }

    .info-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-radius: 18px;
      background: #f8fafc;
      border: 1px solid rgba(15, 23, 42, 0.08);
    }

    .info-item strong {
      color: var(--text);
      font-weight: 700;
    }

    @media (max-width: 980px) {
      .apply-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 660px) {
      .apply-page {
        padding: 22px 16px 40px;
      }

      .hero-card {
        padding: 28px 22px;
      }

      .file-label {
        flex-direction: column;
        align-items: flex-start;
      }
    }
    /* ✅ Pashto Scoped RTL (only this page) */
.rtl-scope {
  direction: rtl;
}

/* Form labels */
.rtl-scope label {
  text-align: right;
  display: block;
}

/* Inputs */
.rtl-scope .form-control {
  direction: rtl;
  text-align: right;
  font-family: 'Bahij', sans-serif;
}

/* Select dropdown */
.rtl-scope select {
  direction: rtl;
  text-align: right;
}

/* File upload */
.rtl-scope .file-label {
  direction: rtl;
  text-align: right;
  font-family: 'Bahij', sans-serif;
}

/* Sidebar */
.rtl-scope .info-card,
.rtl-scope .info-item {
  text-align: right;
  direction: rtl;
}

/* Hero section */
.rtl-scope .hero-content {
  text-align: right;
}

/* General text */
.rtl-scope {
  font-family: 'Bahij', sans-serif;
}
/* =========================
   JOB APPLY INFO CARD (NEW CLEAN VERSION)
========================= */

.job-info-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;

  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);

  transition: all 0.3s ease;
}

.job-info-card h2 {
  margin: 0;
  font-size: 1.45rem;
  color: var(--text);
}

.job-info-card p {
  margin: 0;
  color: #475569;
  line-height: 1.8;
  text-align: justify;
}

/* List */
.job-info-list {
  display: grid;
  gap: 14px;
}

/* Item */
.job-info-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);

  transition: all 0.25s ease;
}

.job-info-item:hover {
  transform: translateY(-3px);
  background: #eef5ff;
  border-color: rgba(59, 130, 246, 0.25);
}

.job-info-item strong {
  color: var(--text);
  font-weight: 700;
}

/* =========================
   MOBILE FIX
========================= */
@media (max-width: 768px) {
  .job-info-card {
    padding: 18px;
    border-radius: 20px;
  }

  .job-info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .job-info-card p {
    font-size: 0.9rem;
  }
}
/* =========================
   PAGE LOADER
========================= */

.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transition: all 0.3s ease;
}

.page-loader.show {
  opacity: 1;
  visibility: visible;
}

.loader-box {
  width: 320px;
  background: #fff;
  border-radius: 28px;
  padding: 35px 30px;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0,0,0,0.18);
}

.loader-box h3 {
  margin: 18px 0 10px;
  color: var(--text);
  font-size: 1.4rem;
}

.loader-box p {
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}

.spinner {
  width: 70px;
  height: 70px;
  margin: auto;
  border-radius: 50%;
  border: 5px solid #dbeafe;
  border-top-color: #2563eb;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================
   SUCCESS MODAL
========================= */

.success-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 999999;

  opacity: 0;
  visibility: hidden;

  transition: 0.3s ease;
}

.success-modal.show {
  opacity: 1;
  visibility: visible;
}

.success-modal-content {
  width: min(92%, 460px);
  background: white;
  border-radius: 30px;
  padding: 40px 30px;
  text-align: center;

  animation: popup 0.35s ease;
}

@keyframes popup {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.success-icon {
  width: 90px;
  height: 90px;
  margin: auto auto 22px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg,#22c55e,#16a34a);

  color: white;
  font-size: 2.2rem;

  box-shadow: 0 15px 40px rgba(34,197,94,0.3);
}

.success-modal-content h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1.8rem;
}

.success-modal-content p {
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 25px;
}

.success-btn {
  border: none;
  padding: 14px 26px;
  border-radius: 16px;

  background: linear-gradient(135deg,#2563eb,#7c3aed);
  color: white;

  font-size: 1rem;
  font-weight: 700;

  cursor: pointer;
  transition: 0.3s ease;
}

.success-btn:hover {
  transform: translateY(-2px);
}

  .job-info-card {
    position: relative;
    padding-bottom: 60px; /* space for floating button */
}

/* =========================
   FLOATING HELP DESK BUTTON
========================= */
.floating-help-btn {
    position: absolute;

    /* نصف داخل / نصف بهر */
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;

    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;

    font-size: 14px;
    font-weight: 600;

    border-radius: 50px;

    text-decoration: none;

    box-shadow: 0 10px 25px rgba(59,130,246,0.35);

    transition: all 0.3s ease;

    z-index: 10;
}

/* HOVER EFFECT */
.floating-help-btn:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 15px 30px rgba(59,130,246,0.45);
    opacity: 0.95;
}