/* =====================================================================
   Mahachai Petcharat – modern public-site theme (Thai + English)
   Loaded AFTER style.css / search.css, so it only overrides.
   To roll back the redesign, remove the <link> to this file.
   Palette: navy / blue / sky / white with red accents.
   ===================================================================== */

:root {
  --navy: #0a2a66;
  --navy-900: #06193f;
  --blue: #1d5fd0;
  --blue-600: #174fb0;
  --sky: #3b9cff;
  --sky-200: #bcdcff;
  --sky-100: #e6f1ff;
  --sky-50: #f5f9ff;
  --red: #e5383b;
  --red-600: #c92a2d;
  --ink: #1b2a41;
  --muted: #5d6c84;
  --line: #e1eaf6;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(10, 42, 102, .07);
  --shadow: 0 12px 34px rgba(10, 42, 102, .11);
  --shadow-lg: 0 22px 54px rgba(10, 42, 102, .18);
  --grad: linear-gradient(135deg, #0a2a66 0%, #1d5fd0 62%, #3b9cff 100%);
  --nav-h: 76px;

  /* cookie banner (cookieconsent reads these) */
  --cc-bg: #fff;
  --cc-text: #1b2a41;
  --cc-btn-primary-bg: #1d5fd0;
  --cc-btn-primary-hover-bg: #0a2a66;
  --cc-btn-secondary-bg: #e6f1ff;
  --cc-btn-secondary-text: #0a2a66;
  --cc-btn-secondary-hover-bg: #bcdcff;
  --cc-toggle-bg-on: #1d5fd0;
}

/* ---------- base ---------- */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: clip; }   /* clip (not hidden) => body never becomes a scroll container */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Kanit", "Open Sans", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: #fff !important;       /* drops the old grey texture */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
iframe, video, embed { max-width: 100%; }
p { color: var(--muted); }
a { color: var(--blue); transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a:hover, a:focus { color: var(--red); text-decoration: none; outline: 0; }
::selection { background: var(--sky-200); color: var(--navy); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Kanit", "Open Sans", sans-serif;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.3;
}
hr { border-top: 1px solid var(--line); }
.container { max-width: 100%; }
@media (min-width: 1400px) { .container { width: 1390px; } }
.text-center img.img-responsive, .img-responsive.center-block { margin-left: auto; margin-right: auto; }
/* long words / URLs never push the page wider than the screen */
.container, .modal-body, td, th, li, p { overflow-wrap: anywhere; word-wrap: break-word; }
table { max-width: 100%; }
@media (max-width: 767px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- section headings ---------- */
.home-section { padding-top: 70px; padding-bottom: 0px; }
.section-heading { margin-bottom: 8px; }
.section-heading h2, .section-heading h2.h-bold {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.2px;
  margin: 0 0 6px;
}
.section-heading p { color: var(--muted); font-size: 17px; margin: 0 auto; max-width: 720px; }
.divider-short {
  background: linear-gradient(90deg, var(--red), var(--sky)) !important;
  width: 84px !important;
  height: 4px !important;
  border-radius: 4px;
  margin: 14px auto 6px !important;
}

/* ---------- navbar ---------- */
.navbar.navbar-custom,
.navbar.navbar-custom.navbar-fixed-top,
.navbar.navbar-custom.top-nav-collapse {
  background: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(10, 42, 102, .07) !important;
}
.navbar.navbar-custom .navigation,
.navbar.navbar-custom.top-nav-collapse .navigation { padding-bottom: 8px; }
.navbar-brand { padding-top: 14px; margin-top: 2px; height: auto; }
.navbar-brand img { max-width: 100%; height: auto; width: auto; max-height: 46px; }
.navbar-custom ul.nav li a,
.navbar-custom.top-nav-collapse ul.nav li a {
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  border-radius: 999px;
  padding: 9px 15px;
}
.navbar.navbar-custom ul.nav.navbar-nav { margin-top: 18px; }
.navbar.navbar-custom.top-nav-collapse ul.nav.navbar-nav { margin-top: 6px; }
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom.navbar-fixed-top .nav li a:hover,
.navbar-custom.navbar-fixed-top .nav li a:focus,
.navbar-custom.top-nav-collapse .nav li a:hover,
.navbar-custom.top-nav-collapse .nav li a:focus,
.navbar-custom .nav .open > a, .navbar-custom .nav .open > a:hover, .navbar-custom .nav .open > a:focus {
  background: var(--sky-100) !important;
  color: var(--blue) !important;
}
.navbar-custom .nav li a .caret { margin-left: 4px; }
.navbar-custom .fa.circled, .fa.circled.bg-skin {
  width: 38px; height: 38px; line-height: 38px;
  border-radius: 50%;
  background: var(--grad) !important;
  color: #fff !important;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(29, 95, 208, .35);
}
.navbar-custom .nav li a .fa-globe { color: var(--blue) !important; font-size: 26px !important; }
.navbar-custom ul.nav ul.dropdown-menu {
  border: 0;
  border-radius: 14px;
  margin-top: 14px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 250px;
  background: #fff;
}
.navbar-custom ul.nav ul.dropdown-menu li { border: 0 !important; }
.navbar-custom ul.nav ul.dropdown-menu li a,
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
  padding: 9px 14px !important;
  font-size: 16px;
  text-transform: none;
  color: var(--ink);
  border-radius: 10px;
  white-space: normal;
}
.navbar-custom ul.nav ul.dropdown-menu li a .fa-caret-right { color: var(--red); margin-right: 4px; }
.navbar-custom ul.nav ul.dropdown-menu li a:hover { background: var(--sky-100) !important; color: var(--blue) !important; }
.navbar-custom ul.nav ul.dropdown-menu li > .row[style] { width: min(560px, 88vw) !important; margin: 0 !important; }
.navbar-custom ul.nav ul.dropdown-menu li > .row li { padding: 0 !important; }
.navbar-toggle {
  color: var(--navy) !important;
  background: var(--sky-100);
  border: 0;
  border-radius: 12px;
  padding: 9px 13px;
  margin-top: 16px;
  font-size: 18px;
}
.navbar-toggle:hover, .navbar-toggle:focus { background: var(--sky-200); }

#search { background: rgba(6, 25, 63, .94) !important; }
#search input[type="search"] { border-bottom: 2px solid var(--sky) !important; color: #fff; }
#search .btn-primary { background: var(--red) !important; border-color: var(--red) !important; border-radius: 999px; }

@media (max-width: 767px) {
  .navbar-header { display: flex; align-items: center; justify-content: space-between; }
  .navbar-header::before, .navbar-header::after { display: none; }
  .navbar-brand { padding-top: 10px; margin-top: 0; margin-left: 0 !important; }
  .navbar-brand img { max-height: 38px; }
  .navbar-toggle { margin: 0 4px 0 0; float: none; }
  .navbar.navbar-custom .navigation, .navbar.navbar-custom.top-nav-collapse .navigation { padding-bottom: 6px; }
  .navbar-collapse {
    background: #fff;
    border-radius: 16px;
    margin: 6px 0 4px;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border: 0;
  }
  .navbar.navbar-custom ul.nav.navbar-nav, .navbar.navbar-custom.top-nav-collapse ul.nav.navbar-nav { margin: 8px 6px; }
  .navbar-custom ul.nav li a { border-radius: 12px; }
  .navbar-custom ul.nav ul.dropdown-menu, .navbar-nav .open .dropdown-menu {
    box-shadow: none !important; margin: 0 0 4px 12px !important; background: var(--sky-50); min-width: 0; width: auto;
  }
  .navbar-custom ul.nav ul.dropdown-menu li > .row[style] { width: auto !important; }
  .navbar-custom ul.nav ul.dropdown-menu li > .row ul { width: 100%; }
}

/* ---------- hero slider ---------- */
#intro .carousel-inner > .item > img { width: 100%; height: auto; display: block; }
#intro .carousel-inner { border-radius: 0 0 clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px); overflow: hidden; }
.carousel-control.left, .carousel-control.right { background: none !important; width: 9%; text-shadow: none; opacity: 1; }
.carousel-control .glyphicon {
  width: 46px; height: 46px; line-height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--navy);
  font-size: 16px; margin-top: -23px; box-shadow: var(--shadow-sm);
}
.carousel-control:hover .glyphicon { background: #fff; color: var(--red); }
@media (max-width: 767px) { .carousel-control .glyphicon { width: 34px; height: 34px; line-height: 34px; font-size: 12px; margin-top: -17px; } }

/* ---------- "why us" call-out ---------- */
.callaction, .callaction.bg-gray {
  background: var(--grad) !important;
  border-radius: 22px;
  padding: 34px 38px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  border: 0;
}
.callaction::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none;
}
.callaction::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 5px;
  border-radius: 0 5px 5px 0; background: var(--red);
}
.callaction .cta-text, .callaction .cta-text p, .callaction h3 { color: #fff !important; }
.callaction h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; margin: 0 0 10px; }
.callaction .cta-text p { opacity: .93; }
@media (max-width: 767px) { .callaction, .callaction.bg-gray { padding: 24px 20px 24px 24px; border-radius: 18px; } }

/* ---------- service list ---------- */
.service-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 12px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-box:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-200); }
.service-icon span, .service-icon .fa, .service-icon i { color: var(--blue) !important; }
.service-desc h5, .service-desc h4 { color: var(--navy); font-weight: 500; margin-top: 0; }
.service-desc p { color: var(--muted); margin-bottom: 4px; }
#service img.img-responsive { border-radius: var(--radius); }

/* ---------- four quick-link circles (home) ---------- */
#doctor { background: linear-gradient(180deg, #fff 0%, var(--sky-50) 100%); }
#doctor a { display: block; text-decoration: none; }
#doctor img { max-width: 156px; width: 60%; transition: transform .3s ease, filter .3s ease; filter: drop-shadow(0 12px 18px rgba(10, 42, 102, .22)); }
#doctor a:hover img { transform: translateY(-8px) scale(1.04); }
#doctor h5 { color: var(--navy); font-weight: 500; margin-top: 12px; }
#doctor a:hover h5 { color: var(--red); }
@media (max-width: 767px) { #doctor [class*="col-"] { margin-bottom: 18px; } #doctor img { width: 62%; } }

/* ---------- carousels / galleries ---------- */
#facilities, #pricing { background: var(--sky-50); }
#facilities { border-radius: 0; }
.owl-carousel .item { padding: 6px 10px 14px; }
.owl-carousel .item img { border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.owl-carousel .item a:hover img { transform: translateY(-5px); box-shadow: var(--shadow); }
.owl-theme .owl-controls .owl-page span { background: var(--sky-200) !important; width: 10px; height: 10px; opacity: 1; border-radius: 10px; transition: all .25s ease; }
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls .owl-page:hover span { background: var(--blue) !important; width: 26px; }

/* ---------- activity / content cards ---------- */
.img22, img.img-rounded { border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-sm); }
.carousel .img22 { border-radius: var(--radius); }
.spac33, h5.spac33 { color: var(--navy); font-weight: 500; margin-top: 12px; }
a:hover .spac33 { color: var(--red); }
h4[style*="289dcd"] { color: var(--blue) !important; font-weight: 600; }
.fa-calendar, .fa-user, .fa-eye { color: var(--sky); }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 500; padding: 9px 22px; border: 0; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover, .btn:focus { transform: translateY(-2px); }
.btn-sm { padding: 6px 16px; }
.btn-primary, .btn-skin, .btn-info, .btn.normal-btn, .btn.dart-btn-xs {
  background: var(--grad) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(29, 95, 208, .32);
}
.btn-primary:hover, .btn-skin:hover, .btn-info:hover, .btn.normal-btn:hover { box-shadow: 0 12px 26px rgba(29, 95, 208, .42); color: #fff !important; }
.btn-danger, .btn-red {
  background: var(--red) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(229, 56, 59, .30);
}
.btn-danger:hover, .btn-red:hover { background: var(--red-600) !important; color: #fff !important; }
.btn-default { background: var(--sky-100); color: var(--navy); }
.btn-default:hover { background: var(--sky-200); color: var(--navy); }

/* ---------- forms ---------- */
.form-control {
  border-radius: 12px;
  border: 1px solid var(--line);
  min-height: 46px;
  box-shadow: none;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.form-control { min-height: 110px; }
.form-control:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(59, 156, 255, .18); }
label { font-weight: 500; color: var(--navy); }

/* contact / dark-blue form panel keeps its own look, tuned to the palette */
section[style*="004d7e"], .bg-skin, [style*="background: #004d7e"], [style*="background:#004d7e"] { background: var(--navy) !important; }
form#contact .form-control { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); border-radius: 0; color: #fff; }
form#contact .form-control:focus { box-shadow: none; border-bottom-color: #fff; }
form#contact .form-control::placeholder { color: rgba(255, 255, 255, .78); }
form#contact .btn { background: var(--red) !important; box-shadow: 0 8px 20px rgba(229, 56, 59, .35); }

/* ---------- tables, breadcrumbs, lists, modals ---------- */
.table > thead > tr > th { background: var(--sky-100); color: var(--navy); border-bottom: 0; font-weight: 500; }
.table > tbody > tr > td { border-top: 1px solid var(--line); vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--sky-50); }
.breadcrumb { background: var(--sky-50); border-radius: 999px; padding: 8px 18px; }
.breadcrumb > li + li:before { color: var(--red); }
.pagination > li > a, .pagination > li > span { border-radius: 10px !important; margin: 0 3px; border: 1px solid var(--line); color: var(--blue); }
.pagination > .active > a, .pagination > .active > span, .pagination > li > a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.list-group-item { border-color: var(--line); }
.modal-content { border: 0; border-radius: 20px; box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }
.modal-body h2 { color: var(--navy); }

/* inner-page title banner (job page etc.) */
.text-center[style*="slide3/bg.jpg"] { background-size: cover !important; background-position: center !important; position: relative; padding: 56px 18px !important; }
.text-center[style*="slide3/bg.jpg"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 42, 102, .80), rgba(29, 95, 208, .55)); }
.text-center[style*="slide3/bg.jpg"] > * { position: relative; }
.text-center[style*="slide3/bg.jpg"] h2, .text-center[style*="slide3/bg.jpg"] h1 { color: #fff; }

/* rich content written in the admin editor */
.container img[style*="width"], .container img[width] { max-width: 100%; height: auto; }
.container table[style*="width"] { max-width: 100%; }
.j_detail { border-radius: var(--radius); }

/* ---------- footer ---------- */
footer {
  background: linear-gradient(180deg, #0f59b3 0%, #06193f 100%) !important;
  color: rgba(255, 255, 255, .86);
  padding-top: 54px;
  position: relative;
}
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--sky), var(--blue)); }
footer p, footer li, footer .widget { color: rgba(255, 255, 255, .86); }
footer h5 { color: #fff; font-weight: 500; font-size: 19px; margin-bottom: 14px; position: relative; padding-bottom: 10px; }
footer h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: var(--red); }
footer a { color: #cfe4ff; }
footer a:hover { color: #fff; }
footer ul { padding-left: 0; list-style: none; }
footer .widget ul li { margin-bottom: 8px; }
footer .fa-stack .fa-circle { color: var(--blue); }
footer .fa-stack .fa-inverse { color: #fff; }
footer .fa-chevron-circle-right { color: var(--sky); }
footer .fb-page, footer iframe { border-radius: 12px; overflow: hidden; }
.hospital-network {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 20px 0 16px;
}
.hospital-network a, .hospital-network-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 42px; width: 42px; height: 36px; min-height: 36px; margin: 0; padding: 3px;
  overflow: hidden;
  background: #fff; border: 1px solid rgba(255, 255, 255, .72); border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hospital-network a:hover, .hospital-network a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
}
.hospital-network-mark { cursor: default; }
.hospital-network img { display: block; width: 34px !important; height: 28px !important; max-width: 34px; max-height: 28px; object-fit: contain; }
.sub-footer, footer .sub-footer { background: #041333 !important; color: rgba(255, 255, 255, .8) !important; padding: 14px 0; margin-top: 30px; }
.sub-footer p, .sub-footer a { color: rgba(255, 255, 255, .8) !important; margin: 0; font-size: 14px; }
.sub-footer a:hover { color: #fff !important; }
@media (max-width: 767px) { footer { padding-top: 38px; } footer .col-md-4 { margin-bottom: 8px; } }

/* back-to-top */
.scrollup, a.scrollup {
  width: 46px; height: 46px; line-height: 46px; border-radius: 50%;
  background: var(--grad) !important; color: #fff !important; text-align: center;
  box-shadow: 0 10px 24px rgba(29, 95, 208, .4); opacity: .95;
}
.scrollup:hover { background: var(--red) !important; }

/* (the old blanket "prefers-reduced-motion" override was removed: it switched off the fade-in and the promotion slider glide) */

/* ---------- small-screen polish ---------- */
@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .home-section { padding-top: 46px; padding-bottom: 46px; }
  .paddingtop-80, .paddingtop-100 { padding-top: 46px; }
  .paddingtop-60 { padding-top: 34px; }
  .marginbot-50 { margin-bottom: 26px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .section-heading p { font-size: 15px; }
  .btn { padding: 9px 20px; }
  .img22[style*="height"] { height: 14em !important; }
  .modal-dialog { margin: 14px; }
}
@media (max-width: 480px) { .navbar-brand img { max-height: 34px; } }

/* ---------- compact carousel dots (many pages of promotions) ---------- */
.owl-theme .owl-controls { margin-top: 6px; }
.owl-theme .owl-controls .owl-page { display: inline-block; margin: 0 1px; }
.owl-theme .owl-controls .owl-page span { margin: 4px 3px !important; width: 8px; height: 8px; }
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls .owl-page:hover span { width: 20px; }
@media (max-width: 767px) { .owl-theme .owl-controls .owl-page span { margin: 4px 2px !important; width: 7px; height: 7px; } .owl-theme .owl-controls .owl-page.active span { width: 16px; } }

/* ---------- contact page: blue info/form band ---------- */
.row[style*="004d7e"] {
  margin-left: 0 !important; margin-right: 0 !important;
  background: var(--grad) !important;
  padding: 44px 0 52px;
}
.row[style*="004d7e"] > br { display: none; }
.row[style*="004d7e"] .map iframe { width: 100%; border-radius: 16px; box-shadow: var(--shadow); min-height: 320px; }
.row[style*="004d7e"] h4, .row[style*="004d7e"] .contact-block, .row[style*="004d7e"] .contact-block a, .row[style*="004d7e"] p { color: #fff !important; }
.row[style*="004d7e"] .divider-short { margin-left: 0 !important; }
.row[style*="004d7e"] .col-md-5 { margin-bottom: 8px; }

/* ---------- panels (activity list, details) ---------- */
.panel, .panel.panel-default {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.panel:hover { box-shadow: var(--shadow); }
.panel-body { padding: 20px; }
@media (max-width: 767px) { .panel-body { padding: 14px; } }

/* ---------- sub-footer links had an inline dark background ---------- */
.sub-footer a, footer .sub-footer a { background: transparent !important; color: rgba(255, 255, 255, .85) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.sub-footer a:hover { color: #fff !important; text-decoration-color: var(--red); }

/* ---------- quick-link circles: equal-height grid instead of staggered floats ---------- */
#doctor .row > .wow { display: flex; flex-wrap: wrap; }
#doctor .row > .wow > [class*="col-"] { float: none; }
#doctor h5 { line-height: 1.25; }
@media (max-width: 767px) { #doctor h5 { font-size: 16px; } }

/* ---------- list-group rows used as cards (rooms, programs, cards...) ---------- */
.list-group { margin-bottom: 0; }
a.list-group-item, .list-group-item {
  display: flow-root;                 /* contains the floated columns inside */
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  margin-bottom: 18px;
  padding: 18px 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.list-group-item:hover, a.list-group-item:focus { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky-200) !important; }
.list-group-item::after { content: ""; display: table; clear: both; }
.list-group-item-heading { color: var(--navy); font-weight: 500; font-size: 22px; }
.list-group-item-text { color: var(--muted); }
.list-group-item .divider-short { margin-left: 0 !important; width: 56px !important; }
.list-group-item .media-object, .list-group-item figure img { border-radius: 14px; }
.list-group-item h1 { color: var(--red) !important; font-size: 34px; margin: 4px 0; }
@media (max-width: 991px) { .list-group-item .col-md-4, .list-group-item .col-md-6, .list-group-item .col-md-2 { margin-bottom: 8px; } }

/* ---------- service cards: icon column + text column (text never wraps under the icon) ---------- */
.service-box { display: flex; align-items: flex-start; gap: 14px; overflow: hidden; }
.service-box::before, .service-box::after { content: none; display: none; }
.service-box .service-icon { float: none !important; flex: 0 0 52px; width: 52px; margin: 2px 0 0 !important; text-align: center; }
.service-box .service-desc { float: none !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; width: auto !important; }
.service-box .service-desc h5 { margin: 0 0 4px; line-height: 1.3; }

/* =====================================================================
   Top bar (phone · Facebook · search · TH/EN flags) above the white navbar
   ===================================================================== */
:root { --topbar-h: 42px; }
/* the bar lives inside the fixed navbar, so the page content moves down by its height */
body { padding-top: var(--topbar-h); }

.topbar {
  background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy) 55%, var(--blue-600) 100%);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  max-height: var(--topbar-h);
  overflow: hidden;
  transition: max-height .3s ease;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar a.tb-item, .topbar a.tb-flag { color: #fff !important; text-decoration: none; }
.tb-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; font-weight: 400; letter-spacing: .2px;
}
.tb-item .fa { font-size: 15px; color: var(--sky-200); }
.tb-item:hover { background: rgba(255, 255, 255, .14); }
.tb-icon, .topbar a.tb-icon {
  width: 32px; height: 32px; padding: 0; justify-content: center;
  background: rgba(255, 255, 255, .13);
}
.tb-icon .fa { color: #fff; font-size: 16px; }
.topbar a.tb-icon:hover { background: var(--red); }
.topbar a.tb-icon:hover .fa { color: #fff; }
.tb-flag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 5px; border-radius: 999px;
  border: 1px solid transparent; font-size: 14px; font-weight: 500;
  opacity: .78; transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}
.tb-flag img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.tb-flag:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.tb-flag.is-active { opacity: 1; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.top-nav-collapse .topbar { max-height: 0; }          /* tucks away once the page is scrolled */

/* ---------- main menu text: 20px on desktop, stepping down so it never wraps ---------- */
.navbar-custom ul.nav li a,
.navbar-custom.top-nav-collapse ul.nav li a { font-size: 20px !important; padding: 9px 16px; }
.navbar-custom ul.nav ul.dropdown-menu li a,
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a { font-size: 18px; }
.navbar.navbar-custom ul.nav.navbar-nav { margin-top: 14px; }
@media (max-width: 1199px) {
  .navbar-custom ul.nav li a, .navbar-custom.top-nav-collapse ul.nav li a { font-size: 18px !important; padding: 9px 12px; }
  .navbar-custom ul.nav ul.dropdown-menu li a { font-size: 17px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-custom ul.nav li a, .navbar-custom.top-nav-collapse ul.nav li a { font-size: 16px !important; padding: 9px 9px; }
  .navbar-brand img { max-height: 38px; }
}
@media (max-width: 767px) {
  :root { --topbar-h: 38px; }
  .topbar { font-size: 14px; }
  .topbar-inner { padding-left: 10px; padding-right: 10px; }
  .topbar-left, .topbar-right { gap: 4px; }
  .tb-item { padding: 6px 8px; }
  .tb-flag { padding: 3px; }
  .tb-flag span { display: none; }                      /* flags only on phones */
  .navbar-custom ul.nav li a, .navbar-custom.top-nav-collapse ul.nav li a { font-size: 19px !important; }
  .navbar-custom ul.nav ul.dropdown-menu li a { font-size: 17px; }
  .navbar-collapse { max-height: calc(100vh - 130px); }
}
@media (max-width: 359px) { .tb-item span { display: none; } }

/* Bootstrap's clearfix pseudo-elements would become flex items and push the groups inward */
.topbar-inner::before, .topbar-inner::after { content: none; display: none; }

/* ---------- no loading screen / fade between pages (language switch is instant) ---------- */
#preloader, .preloader, #page-loader { display: none !important; }

/* ---------- inline search: the blue top bar turns into a search field ---------- */
.topbar-search { display: none; flex: 1 1 auto; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto; }
.topbar.is-searching .topbar-left, .topbar.is-searching .topbar-right { display: none; }
.topbar.is-searching .topbar-search { display: flex; }
.top-nav-collapse .topbar.is-searching { max-height: var(--topbar-h); }
.topbar-search > .fa { color: var(--sky-200); font-size: 16px; }
.topbar-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 14px;
  border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 15px; outline: 0;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s ease;
}
.topbar-search input[type="search"]:focus { box-shadow: inset 0 0 0 2px var(--sky); }
.topbar-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.topbar-search .tb-go {
  height: 30px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--red); color: #fff; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .2s ease;
}
.topbar-search .tb-go:hover { background: var(--red-600); }
.topbar-search .tb-close {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
}
.topbar-search .tb-close:hover { background: rgba(255, 255, 255, .3); }
button.tb-search-toggle { border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 767px) { .topbar-search { gap: 6px; } .topbar-search > .fa { display: none; } .topbar-search .tb-go { padding: 0 12px; } }
/* =====================================================================
   Phone header: logo on the left, hamburger on the right;
   the menu panel grows with its content and fills the rest of the screen when it is longer.
   ===================================================================== */
@media (max-width: 767px) {
  .navbar-header { flex-direction: row; }
  .navbar-header .navbar-brand { order: 1; margin-left: 0 !important; padding-left: 0; }
  .navbar-header .navbar-toggle { order: 2; margin: 0 0 0 auto; float: none; }

  /* Bootstrap caps .navbar-fixed-top .navbar-collapse at 340px (200px in landscape) – replace the cap with "rest of the screen" */
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-top .navbar-collapse.in,
  .navbar-custom .navbar-collapse {
    height: auto;
    max-height: calc(100vh - var(--topbar-h) - 66px) !important;
    max-height: calc(100dvh - var(--topbar-h) - 66px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .top-nav-collapse .navbar-collapse { max-height: calc(100vh - 66px) !important; max-height: calc(100dvh - 66px) !important; }
  .navbar-collapse.in { padding-bottom: 6px; }
}

/* ---------- fade-in on scroll stays; what is visible on first paint appears instantly ---------- */
.wow.wow-now {
  -webkit-animation-duration: .01s !important; animation-duration: .01s !important;
  -webkit-animation-delay: 0s !important; animation-delay: 0s !important;
}

/* ---------- sub-heading rules sit under their heading (left), only the page-title rule is centred ---------- */
.divider-short[style*="289dcd"], .divider-short[style*="#fff"] { margin-left: 0 !important; margin-right: auto !important; }
.divider-short[style*="EC1C24"] { margin-left: auto !important; margin-right: auto !important; }

/* ---------- wave banner above the footer ---------- */
.footer-wave { background: var(--sky-50); line-height: 0; margin: 0; overflow: hidden; }
.footer-wave svg { display: block; width: 100%; height: clamp(70px, 9vw, 140px); }

/* the wave already ends in the footer colour, so the footer's own top line is dropped right after it */
.footer-wave + footer::before { display: none; }
.footer-wave + footer { padding-top: 34px; }

/* text pasted into the editor often carries a white highlight – show it on the real page background */
.container [style*="background-color: rgb(255, 255, 255)"],
.container [style*="background-color:#fff"],
.container [style*="background-color: #fff"],
.container [style*="background: #fff;"],
.container [style*="background:#fff"] { background-color: transparent !important; }

/* =====================================================================
   Home: service cards – 3 columns x 2 rows, equal width and height
   ===================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  padding: 6px 0 4px;
}
.service-grid > .wow { display: flex; min-width: 0; }
.service-grid .service-box {
  flex: 1 1 auto; width: 100%; margin: 0;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm), inset 0 4px 0 var(--sky-200);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-grid .service-box:hover {
  transform: translateY(-6px);
  border-color: var(--sky-200);
  box-shadow: var(--shadow), inset 0 4px 0 var(--red);
}
.service-grid .service-icon {
  flex: 0 0 64px; width: 64px; height: 64px; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: var(--sky-100);
  transition: background .28s ease, transform .28s ease;
}
.service-grid .service-icon > .wow { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.service-grid .service-icon .fa { font-size: 30px !important; line-height: 1; color: var(--blue) !important; transition: color .28s ease; }
.service-grid .service-box:hover .service-icon { background: var(--grad); transform: scale(1.06) rotate(-3deg); }
.service-grid .service-box:hover .service-icon .fa { color: #fff !important; }
.service-grid .service-desc { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.service-grid .service-desc h5 { font-size: 20px !important; font-weight: 600 !important; color: var(--navy); margin: 0 0 6px; line-height: 1.3; }
.service-grid .service-desc p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

@media (max-width: 991px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) {
  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-grid .service-box { padding: 20px 18px; gap: 14px; }
  .service-grid .service-icon { flex-basis: 56px; width: 56px; height: 56px; border-radius: 16px; }
  .service-grid .service-icon .fa { font-size: 26px !important; }
}
#service.home-section { padding-top: 40px !important; padding-bottom: 20px; }
@media (max-width: 575px) { .service-grid .service-box { min-height: 124px; align-items: center; } }

/* =====================================================================
   Room cards: picture | details | price panel  (more striking, still easy to read)
   ===================================================================== */
.room-card.list-group-item {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr) 210px;
  gap: 30px;
  align-items: start;
  padding: 28px 28px 28px 36px;
  margin-bottom: 28px;
  border: 1px solid var(--sky-200) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
  box-shadow: 0 14px 38px rgba(10, 42, 102, .12);
  overflow: hidden;
}
.room-card.list-group-item::after { display: none; }                      /* the clearfix pseudo-element must not become a grid cell */
.room-card.list-group-item::before {                                        /* gradient spine on the left edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: linear-gradient(180deg, var(--red) 0%, var(--blue) 46%, var(--sky) 100%);
}
.room-card.list-group-item:hover, .room-card.list-group-item:focus {
  background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 100%);
  border-color: var(--blue) !important;
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(10, 42, 102, .20);
}
.room-card > [class*="col-"] { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.room-card > .media figure { float: none !important; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 28px rgba(10, 42, 102, .22); background: var(--sky-100); }
.room-card > .media figure img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; transition: transform .5s ease; }
.room-card:hover > .media figure img { transform: scale(1.05); }
.room-card > .media br { display: none; }

/* details */
.room-card .list-group-item-heading { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; color: var(--navy); margin: 2px 0 6px; line-height: 1.25; }
.room-card .divider-short { width: 72px !important; height: 4px !important; margin: 10px 0 18px 0 !important; }
.room-card .list-group-item-text { margin: 0; }
.room-card > .col-md-6 > p {
  margin: 0 0 8px; padding: 9px 14px;
  color: var(--ink); font-size: 17px; font-weight: 400; line-height: 1.5;
  background: rgba(29, 95, 208, .07);
  border-left: 3px solid var(--sky);
  border-radius: 10px;
}
.room-card > .col-md-6 > p:nth-of-type(even) { background: rgba(59, 156, 255, .11); }
.room-card > .col-md-6 > p:last-of-type { margin-bottom: 0; }

/* price panel */
.room-card > .col-md-2 {
  align-self: stretch; min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 14px 22px !important;
  border-radius: 22px;
  background: var(--grad);
  color: #fff;
  text-align: center;
  box-shadow: 0 14px 30px rgba(29, 95, 208, .38);
  position: relative;
}
.room-card > .col-md-2 h5 { margin: 0; color: #d6e8ff; font-size: 17px; font-weight: 400; letter-spacing: .3px; }
.room-card > .col-md-2 h1 { margin: 4px 0 8px !important; color: #fff !important; font-size: 50px; font-weight: 600 !important; line-height: 1; text-shadow: 0 3px 12px rgba(0, 0, 0, .25); }
.room-card > .col-md-2 h2 { margin: 0; font-size: 15px; }
.room-card > .col-md-2 h2 small { display: inline-block; padding: 4px 16px; border-radius: 999px; background: var(--red); color: #fff; font-size: 15px; font-weight: 500; box-shadow: 0 6px 14px rgba(229, 56, 59, .4); }
.room-card > .col-md-2::after {                                              /* arrow = "open the details" hint, no text so it works in both languages */
  content: "\f061"; font-family: FontAwesome; position: absolute; right: 14px; bottom: 12px;
  width: 30px; height: 30px; line-height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .2); font-size: 14px; transition: transform .25s ease, background .25s ease;
}
.room-card:hover > .col-md-2::after { transform: translateX(4px); background: rgba(255, 255, 255, .35); }

@media (max-width: 991px) {
  .room-card.list-group-item { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px 22px 28px; }
  .room-card > .col-md-2 { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 16px 52px 16px 16px !important; }
  .room-card > .col-md-2 h1 { font-size: 40px; margin: 0 !important; }
  .room-card > .col-md-2::after { bottom: auto; top: 50%; margin-top: -15px; }
}
@media (max-width: 575px) { .room-card.list-group-item { padding: 18px 16px 18px 24px; border-radius: 22px !important; } .room-card > .col-md-6 > p { font-size: 16px; padding: 8px 12px; } }
/* the stored details are <p> inside <p>, which the browser splits into siblings; hide the empty leftovers */
.room-card > .col-md-6 > p:empty, .room-card > .col-md-6 > p.list-group-item-text:empty { display: none; }
.room-card > .col-md-6 > p.list-group-item-text { margin: 0; padding: 0; background: none; border: 0; }
.room-card .list-group-item-heading, .room-card:hover .list-group-item-heading { color: var(--navy) !important; }

/* =====================================================================
   Detail modals (room): above the header/top bar, title row with a coloured X
   ===================================================================== */
.modal { z-index: 2050 !important; }
/* Bootstrap 3.3.0 puts the backdrop INSIDE .modal, so it must sit below the dialog within the modal's own stacking context */
.modal-backdrop, .modal-backdrop.in { z-index: -1 !important; }
.modal-dialog { position: relative; z-index: 1; }
.modal-backdrop.in { opacity: 1; background: rgba(6, 25, 63, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal.paddingtop-80 { padding-top: 0 !important; }
.modal.paddingtop-80 .modal-dialog { width: min(700px, calc(100% - 24px)); margin: 4vh auto; }
.modal.paddingtop-80 .modal-content { border: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }

.room-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px 18px 28px;
  background: var(--grad);
  position: relative;
}
.room-modal-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--sky)); }
.room-modal-head h4 { margin: 0; color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.room-modal-close {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0 0 3px;
  border: 3px solid #fff; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 30px; line-height: 1; font-family: Arial, sans-serif; font-weight: 400; cursor: pointer;
  box-shadow: 0 8px 18px rgba(229, 56, 59, .55);
  transition: transform .25s ease, background .2s ease, box-shadow .2s ease;
}
.room-modal-close:hover, .room-modal-close:focus { background: var(--red-600); transform: rotate(90deg) scale(1.08); box-shadow: 0 10px 22px rgba(229, 56, 59, .7); outline: 0; }

.modal.paddingtop-80 .modal-body { padding: 24px 28px 28px; background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%); }
.modal.paddingtop-80 .modal-body > img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 30px rgba(10, 42, 102, .22); margin: 0 0 22px; }
.modal.paddingtop-80 .modal-body > br { display: none; }
.modal.paddingtop-80 .modal-body > p {
  margin: 0 0 8px; padding: 9px 14px; color: var(--ink); font-size: 17px; font-weight: 400; line-height: 1.5;
  background: rgba(29, 95, 208, .07); border-left: 3px solid var(--sky); border-radius: 10px;
}
.modal.paddingtop-80 .modal-body > p:nth-of-type(even) { background: rgba(59, 156, 255, .11); }
.modal.paddingtop-80 .modal-body > p:empty, .modal.paddingtop-80 .modal-body > p.list-group-item-text { display: none; }
.modal.paddingtop-80 .modal-body .text-right { display: flex; justify-content: flex-end; margin-top: 18px; }
.modal.paddingtop-80 .modal-body .text-right h1 {
  display: inline-flex; align-items: baseline; gap: 10px; margin: 0;
  padding: 10px 26px 12px; border-radius: 999px;
  background: var(--grad); color: #fff !important; font-size: 38px; font-weight: 600 !important; line-height: 1.1;
  box-shadow: 0 12px 26px rgba(29, 95, 208, .38);
}
.modal.paddingtop-80 .modal-body .text-right h1 small { color: #cfe4ff; font-size: 17px; font-weight: 400; }
@media (max-width: 575px) {
  .modal.paddingtop-80 .modal-dialog { margin: 2vh auto; }
  .room-modal-head { padding: 14px 14px 14px 20px; }
  .room-modal-close { width: 40px; height: 40px; font-size: 27px; }
  .modal.paddingtop-80 .modal-body { padding: 18px 16px 22px; }
  .modal.paddingtop-80 .modal-body .text-right h1 { font-size: 32px; padding: 8px 22px 10px; }
}

/* =====================================================================
   Program list: one long rounded card per item
   ===================================================================== */
.program-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.program-list > li { margin: 0; padding: 0; }
a.program-card {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 20px 14px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm), inset 5px 0 0 var(--sky-200);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
a.program-card:hover, a.program-card:focus {
  transform: translateY(-4px) translateX(2px);
  background: linear-gradient(90deg, #f1f7ff 0%, #ffffff 70%);
  border-color: var(--sky-200);
  box-shadow: var(--shadow), inset 5px 0 0 var(--red);
  color: var(--navy); outline: 0;
}
.pc-num {
  flex: 0 0 54px; width: 30px; height: 35px; margin-left: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: var(--grad);
  color: #fff; font-size: 21px; font-weight: 600; line-height: 1;
  box-shadow: 0 8px 18px rgba(29, 95, 208, .32);
  transition: transform .25s ease, background .25s ease;
}
a.program-card:hover .pc-num { background: linear-gradient(135deg, var(--red) 0%, #ff6b6e 100%); transform: rotate(-4deg) scale(1.06); box-shadow: 0 8px 18px rgba(229, 56, 59, .35); }
.pc-title { flex: 1 1 auto; min-width: 0; font-size: 19px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.pc-go {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sky-100); color: var(--blue);
  font-size: 24px; line-height: 1; padding-bottom: 2px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
a.program-card:hover .pc-go { background: var(--blue); color: #fff; transform: translateX(4px); }
@media (max-width: 575px) {
  .program-list { gap: 12px; }
  a.program-card { gap: 12px; padding: 11px 14px 11px 10px; border-radius: 18px; }
  .pc-num { flex-basis: 44px; width: 44px; height: 44px; margin-left: 4px; font-size: 18px; border-radius: 13px; }
  .pc-title { font-size: 17px; }
  .pc-go { flex-basis: 32px; width: 32px; height: 32px; font-size: 21px; }
}
/* the page <style> gives every a / li a 10px vertical margin; the card list controls its own spacing with grid gap */
.program-list > li, a.program-card { margin: 0 !important; }

.promotion-gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
  margin: 0; padding: 0; list-style: none;
}
.promotion-gallery-item { min-width: 0; margin: 0 !important; }
.promotion-gallery-item a {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; margin: 0; padding: 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.promotion-gallery-item a:hover, .promotion-gallery-item a:focus-visible {
  transform: translateY(-5px); border-color: var(--sky-200); box-shadow: var(--shadow);
}
.promotion-gallery-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.promotion-gallery-item a::after {
  content: "\f00e"; position: absolute; right: 12px; bottom: 12px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(10, 42, 102, .82); color: #fff;
  font: normal normal normal 16px/1 FontAwesome; opacity: 0;
  transition: opacity .2s ease;
}
.promotion-gallery-item a:hover::after, .promotion-gallery-item a:focus-visible::after { opacity: 1; }
@media (max-width: 991px) { .promotion-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) {
  .promotion-gallery { grid-template-columns: 1fr; gap: 14px; }
  .promotion-gallery-item a { border-radius: 14px; }
}
.promotion-lightbox-open { overflow: hidden !important; }
.promotion-lightbox[hidden] { display: none !important; }
.promotion-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0, 0, 0, .94);
}
.promotion-lightbox img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
.promotion-lightbox-close {
  position: absolute; top: 16px; right: 20px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff;
  font: 32px/1 Arial, sans-serif; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.promotion-lightbox-close:hover, .promotion-lightbox-close:focus-visible {
  background: var(--red); transform: rotate(90deg); outline: 2px solid #fff; outline-offset: 2px;
}
@media (max-width: 575px) {
  .promotion-lightbox { padding: 12px; }
  .promotion-lightbox-close { top: 10px; right: 10px; width: 42px; height: 42px; }
}

/* ---------- opening a modal must not move the page ----------
   Bootstrap sets overflow:hidden on <body>; with our html{overflow-x:hidden} that makes <body> (height:100%) a clipping box,
   the document collapses to one screen and the scroll position jumps to the top. Lock the scroll on <html> instead. */
body.modal-open { overflow: visible !important; height: auto !important; }
html.modal-lock { overflow: hidden !important; }

/* =====================================================================
   Board of directors: equal cards, photo cropped on the centre, lift on hover
   ===================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.team-grid::before, .team-grid::after { content: none; display: none; }
.team-item { display: flex; min-width: 0; }
.team-item > .wow { display: flex; width: 100%; }
.team-card {
  flex: 1 1 auto; display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.team-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--sky-200); }
.team-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sky-100); }
.team-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; transition: transform .7s ease; }
.team-card:hover .team-photo img { transform: scale(1.06) translateY(-6px); }
.team-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--red), var(--sky) 60%, var(--blue)); }
.team-info { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 18px 24px; }
.team-name { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.team-name::before { content: ""; display: block; width: 44px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--blue)); }
.team-role { margin: 0 0 4px; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.45; }
.team-org { margin: auto 0 0; padding-top: 8px; color: var(--blue); font-size: 14.5px; font-weight: 500; line-height: 1.4; }
@media (max-width: 991px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 575px) {
  .team-grid { gap: 14px; }
  .team-card { border-radius: 18px; }
  .team-info { padding: 14px 10px 16px; }
  .team-name { font-size: 16.5px; }
  .team-name::before { width: 34px; margin-bottom: 9px; }
  .team-role { font-size: 14px; }
  .team-org { font-size: 12.5px; }
}

/* =====================================================================
   About: Arokaya Paramalapa - hero picture, soft text card, picture gallery, picture viewer
   ===================================================================== */
.aro-title { position: relative; padding-left: 20px; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 600 !important; color: var(--navy) !important; margin: 0 0 4px; }
.aro-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 7px; border-radius: 7px; background: linear-gradient(180deg, var(--red), var(--blue)); }
.aro-intro { max-width: 860px; margin: 22px auto 24px; text-align: center; font-size: 19px; line-height: 1.7; color: var(--ink); }
.aro-intro p { color: var(--ink); }
.aro-hero {
  position: relative; width: min(450px, 100%); margin: 0 auto 30px; padding: 10px;
  background: linear-gradient(135deg, #fff 0%, var(--sky-100) 100%);
  border: 1px solid var(--sky-200); border-radius: 30px; box-shadow: var(--shadow-lg);
}
.aro-hero img { display: block; width: 100%; height: auto; border-radius: 22px; }
.aro-desc {
  max-width: 900px; margin: 0 auto; padding: 22px 28px;
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--sky); border-radius: 22px; box-shadow: var(--shadow-sm);
  color: var(--ink); font-size: 17px; line-height: 1.75;
}
.aro-desc p { color: var(--ink); }
.aro-desc > :last-child { margin-bottom: 0; }
.aro-hint {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
  margin: 26px auto 28px; padding: 9px 22px; border-radius: 999px;
  background: var(--sky-100); color: var(--blue); font-size: 16px; font-weight: 500; text-align: center;
}
.aro-hint .fa { color: var(--red); font-size: 20px; animation: aroNudge 1.8s ease-in-out infinite; }
@keyframes aroNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.aro-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 26px; }
.aro-gallery > .wow { min-width: 0; }
.aro-tile {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 26px; border: 5px solid #fff; outline: 1px solid var(--sky-200);
  background: var(--sky-100); box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.aro-tile img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; transition: transform .7s ease; border-radius: 0; }
.aro-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 42, 102, 0) 45%, rgba(10, 42, 102, .62) 100%); opacity: 0; transition: opacity .35s ease; }
.aro-tile:hover, .aro-tile:focus { transform: translateY(-9px); box-shadow: var(--shadow-lg); outline-color: var(--blue); }
.aro-tile:hover img, .aro-tile:focus img { transform: scale(1.1); }
.aro-tile:hover::after, .aro-tile:focus::after { opacity: 1; }
.aro-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 19px; box-shadow: 0 10px 22px rgba(229, 56, 59, .55);
  opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity .3s ease, transform .3s ease;
}
.aro-tile:hover .aro-zoom, .aro-tile:focus .aro-zoom { opacity: 1; transform: scale(1) rotate(0); }
@media (hover: none) { .aro-zoom { opacity: 1; transform: none; width: 38px; height: 38px; font-size: 16px; } }
@media (max-width: 991px) { .aro-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) {
  .aro-gallery { gap: 12px; }
  .aro-tile { border-radius: 20px; border-width: 4px; }
  .aro-desc { padding: 16px 18px; font-size: 16px; border-radius: 18px; }
  .aro-hero { border-radius: 24px; padding: 8px; }
  .aro-hero img { border-radius: 17px; }
  .aro-intro { font-size: 17px; }
}

/* picture viewer: the big picture always fits inside the screen */
.modal.img-modal .modal-dialog { width: min(980px, calc(100% - 20px)); margin: 2vh auto; }
.modal.img-modal .modal-content {
  position: relative; display: flex; flex-direction: column; max-height: 96vh;
  border: 0; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.img-modal-close { position: absolute; top: 14px; right: 14px; z-index: 6; }
.img-modal-stage {
  flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: radial-gradient(circle at 50% 30%, #1d5fd0 0%, var(--navy) 65%, var(--navy-900) 100%);
}
.img-modal-stage img { display: block; max-width: 100%; width: auto; height: auto; max-height: 66vh; object-fit: contain; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.img-modal-text { flex: 0 1 auto; overflow-y: auto; max-height: 26vh; padding: 18px 26px 24px; color: var(--ink); font-size: 17px; line-height: 1.7; }
.img-modal-text:empty { display: none; }
.img-modal-text p { color: var(--ink); }
.modal.img-modal .img-modal-stage:last-child img { max-height: 88vh; }
@media (max-width: 575px) {
  .modal.img-modal .modal-dialog { margin: 1.5vh auto; }
  .modal.img-modal .modal-content { border-radius: 20px; max-height: 97vh; }
  .img-modal-stage { padding: 12px; }
  .img-modal-stage img { max-height: 58vh; border-radius: 10px; }
  .img-modal-text { padding: 14px 18px 20px; font-size: 16px; max-height: 30vh; }
}

/* ---------- hero slider arrows: hidden until the pointer is over the picture ---------- */
.carousel-control .glyphicon {
  opacity: 0;
  transform: scale(.82);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}
.carousel:hover .carousel-control .glyphicon,
.carousel-control:focus .glyphicon,
.carousel-control:focus-visible .glyphicon {
  opacity: 1;
  transform: scale(1);
}
.carousel-control:hover .glyphicon { transform: scale(1.08); }
/* touch screens have no hover: keep the arrows (small and subtle) so the slider can still be moved by hand */
@media (hover: none), (pointer: coarse) {
  .carousel-control .glyphicon { opacity: .85; transform: scale(1); }
}