/* =====================================================================
   PHYSIODOOR — DESIGN TOKENS  (colors pulled from the logo)
   ===================================================================== */
:root{
  --deep:      #0f2f3c;   /* deep petrol navy  (logo background)   */
  --deep-2:    #143f4e;   /* lighter panel navy                    */
  --teal:      #12a89b;   /* primary accent    (logo teal)         */
  --teal-2:    #0d8f84;   /* teal pressed                          */
  --teal-lt:   #4ecbc0;   /* soft teal                             */
  --sky:       #5ba3bc;   /* light blue ring   (logo outline)      */
  --paper:     #f2f7f8;   /* light section bg                      */
  --paper-2:   #e6f0f1;
  --ink:       #123039;   /* body text on light                    */
  --muted:     #5b727b;   /* secondary text                        */
  --white:     #ffffff;
  --line:      #dce8ea;
  --wa:        #25d366;   /* whatsapp green                        */
  --bkash:     #e2136e;   /* bKash pink                            */

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 18px 50px -20px rgba(15,47,60,.35);
  --shadow-sm: 0 8px 24px -12px rgba(15,47,60,.25);

  /* "Hind Siliguri" sits behind the Latin fonts so Bangla glyphs
     (missing from Jakarta Sans / Inter) fall through to it automatically */
  --font-head: "Plus Jakarta Sans", "Hind Siliguri", system-ui, sans-serif;
  --font-body: "Inter", "Hind Siliguri", system-ui, sans-serif;
  --font-bn:   "Hind Siliguri", system-ui, sans-serif;

  --wrap: 1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; transition:color .25s ease, opacity .25s ease; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.15; color:var(--deep); font-weight:800; }
section{ scroll-margin-top:90px; }
.bn{ font-family:var(--font-bn); font-weight:500; }

/* ---- Bootstrap container: custom max-widths ----
   viewport ladder → ≥1400: 1400px · ≥1200: 1140 · ≥992: 960 · ≥768: 720 · ≥576: 540 · else 100%
   (only xxl needs overriding; the rest are Bootstrap defaults) */
@media (min-width:1400px){
  .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{ max-width:1400px; }
}
/* legacy alias, in case any .wrap remains */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 12px; }

/* ---- reusable bits (map cleanly to Elementor widgets) ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-2);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--teal); border-radius:2px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  padding:15px 30px; border-radius:100px; cursor:pointer; border:0;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s cubic-bezier(.2,.7,.3,1), background .3s ease, color .25s ease, border-color .25s ease;
}
/* subtle press feedback for every button */
.btn:active{ transform:translateY(0) scale(.97); transition-duration:.08s; }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 12px 24px -10px rgba(18,168,155,.7); }
.btn-primary:hover{ background:var(--teal-2); transform:translateY(-3px); box-shadow:0 18px 30px -10px rgba(18,168,155,.85); }
.btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); }
.btn-outline{ background:transparent; color:var(--deep); border:1.5px solid var(--line); }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal-2); transform:translateY(-3px); box-shadow:0 12px 24px -12px rgba(18,168,155,.5); }
.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 12px 24px -10px rgba(37,211,102,.7); }
.btn-wa:hover{ background:#1eb955; transform:translateY(-3px); box-shadow:0 18px 30px -10px rgba(37,211,102,.85); }
.btn-wa svg{ width:20px; height:20px; fill:#fff; stroke:none; }
/* icon inside the PD Button widget — scales with the button text */
.btn .tp-btn-icon{ display:inline-flex; align-items:center; line-height:0; }
.btn .tp-btn-icon svg{ width:1.15em; height:1.15em; }
.btn .tp-btn-icon i{ font-size:1.05em; line-height:1; }
.tp-btn-wrap .btn{ text-decoration:none; }
.tp-btn-wrap .btn.btn-block{ width:100%; justify-content:center; }

.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:14px; }
.section-head p{ color:var(--muted); font-size:1.05rem; }

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar{ background:var(--deep); color:rgba(255,255,255,.85); font-size:1rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:44px; }
.topbar-left{ display:flex; gap:26px; }
.topbar-left a{
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.85); text-decoration:none; cursor:pointer;
  transition:color .35s ease, transform .35s ease;
}
/* contact icons pop as tiny teal chips */
.topbar-left svg{
  width:24px; height:24px; padding:5px; flex:none; box-sizing:border-box;
  stroke:var(--teal-lt); border-radius:50%;
  background:rgba(78,203,192,.16); border:1px solid rgba(78,203,192,.3);
  transition:background .35s ease, border-color .35s ease,
             stroke .35s ease, transform .35s ease, box-shadow .35s ease;
}
/* hover: the whole item (icon + text) lifts together, text brightens,
   the icon chip fills teal with a soft glow */
.topbar-left a:hover{ color:#fff; transform:translateY(-2px); }
.topbar-left a:hover svg{
  background:linear-gradient(135deg, var(--teal), var(--teal-lt));
  border-color:transparent; stroke:#fff;
  transform:scale(1.08);
  box-shadow:0 5px 14px rgba(18,168,155,.4);
}
.topbar-social{ display:flex; gap:10px; align-items:center; }
/* social icons in small round chips; hover fills teal with a soft glow + lift */
.topbar-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  transition:background .35s cubic-bezier(.16,1,.3,1), border-color .35s ease,
             transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.topbar-social a svg{ width:14px; height:14px; stroke:rgba(255,255,255,.85); transition:stroke .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.topbar-social a:hover{
  background:linear-gradient(135deg, var(--teal), var(--teal-lt));
  border-color:transparent;
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 6px 16px rgba(18,168,155,.45);
}
.topbar-social a:hover svg{ stroke:#fff; transform:scale(1.08); }
.topbar-badge{ font-family:var(--font-bn); color:var(--teal-lt); font-weight:600; }
/* mobile topbar: phone on the left, social on the right (space-between).
   email + badge dropped so the row stays uncluttered on small screens */
@media(max-width:780px){
  .topbar .container{ justify-content:space-between; }
  .topbar-left a:nth-child(2){ display:none; } /* email */
  .topbar-badge{ display:none; }
  .topbar-social{ display:flex; }
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.header{ position:relative; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
/* sticky header — Customizer → Theme Settings → Header Sticky (adds body.header-sticky) */
.header-sticky .header{ position:sticky; top:0; }
/* GSAP ScrollSmoother + STICKY header: the wrapper is pinned, so the topbar +
   header (which then live outside it) float above as fixed bars — JS sets the
   header `top` and the #smooth-content padding to their combined height.
   When sticky is OFF the header sits inside the wrapper and scrolls normally,
   so this fixed treatment is scoped to .header-sticky only. */
.header-sticky.pd-smooth .topbar,
.header-sticky.pd-smooth .header{ position:fixed; left:0; right:0; }
.header-sticky.pd-smooth .topbar{ top:0; z-index:1001; }
.header-sticky.pd-smooth .header{ z-index:1000; }
/* menu sits left, right after the logo; CTA group pushed to the far right */
.nav{ display:flex; align-items:center; justify-content:flex-start; gap:44px; padding:15px 0; }
/* menu alignment (customizer: mine_menu_align) — desktop only, the mobile
   menu is an absolutely-positioned dropdown so these margins don't apply */
.nav-align-center .menu{ margin-left:auto; margin-right:auto; }
.nav-align-center .nav-cta{ margin-left:0; }
.nav-align-right .menu{ margin-left:auto; }
.nav-align-right .nav-cta{ margin-left:0; }
.nav ul {margin: 0px;}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-name{ font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--deep); letter-spacing:-.01em; }
.brand-name b{ color:var(--teal-2); }
.menu{ display:flex; align-items:center; gap:30px; list-style:none; }
.menu li{ position:relative; list-style:none; }
.menu > li{ display:flex; align-items:center; }
.menu a{ font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--ink); position:relative; padding:6px 0; white-space:nowrap; transition:color .25s ease; }
/* gradient underline that grows out from the center */
.menu > li > a::after{
  content:""; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  width:0; height:2.5px; border-radius:4px;
  background:linear-gradient(90deg, var(--teal), var(--teal-lt));
  box-shadow:0 2px 8px rgba(18,168,155,.35);
  transition:width .32s cubic-bezier(.65,.05,.36,1);
}
.menu > li > a:hover{ color:var(--teal-2); }
.menu > li > a:hover::after,
.menu > li.current-menu-item > a::after,
.menu > li.current-menu-ancestor > a::after,
.menu > li.current_page_item > a::after,
.menu > li.current_page_ancestor > a::after{ width:100%; }
.menu > li.current-menu-item > a,
.menu > li.current-menu-ancestor > a,
.menu > li.current_page_item > a,
.menu > li.current_page_ancestor > a{ color:var(--teal-2); }

/* caret for items with children */
.menu li.menu-item-has-children > a,
.menu li.page_item_has_children > a{ padding-right:16px; }
.menu li.menu-item-has-children > a::before,
.menu li.page_item_has_children > a::before{
  content:""; position:absolute; right:0; top:50%;
  width:7px; height:7px; margin-top:-5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s, margin-top .25s;
}
.menu li.menu-item-has-children:hover > a::before,
.menu li.page_item_has_children:hover > a::before{ transform:rotate(225deg); margin-top:-2px; }

/* ---- dropdown (desktop) ---- */
.menu .sub-menu,
.menu .children{
  position:absolute; top:100%; left:-18px; z-index:60;
  min-width:240px; padding:10px; margin:0;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  list-style:none; display:block;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
/* invisible hover bridge so the dropdown doesn't close crossing the gap */
.menu .sub-menu::before,
.menu .children::before{
  content:""; position:absolute; top:-16px; left:0; right:0; height:16px;
}
.menu li:hover > .sub-menu,
.menu li:hover > .children{
  opacity:1; visibility:visible; transform:translateY(6px);
}
.menu .sub-menu li,
.menu .children li{ width:100%; display:block; }
.menu .sub-menu a,
.menu .children a{
  display:block; padding:11px 16px; border-radius:8px;
  font-weight:500; color:var(--ink); white-space:normal;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
.menu .sub-menu a:hover,
.menu .children a:hover,
.menu .sub-menu li.current-menu-item > a{
  background:var(--paper); color:var(--teal-2); padding-left:22px;
}
/* caret points right for nested flyouts */
.menu .sub-menu li.menu-item-has-children > a::before{
  right:14px; transform:rotate(-45deg);
}
.menu .sub-menu li.menu-item-has-children:hover > a::before{ transform:rotate(-45deg); margin-top:-5px; }
/* third level flies out to the side */
.menu .sub-menu .sub-menu,
.menu .children .children{
  top:-10px; left:100%; margin-left:6px; transform:translateX(10px);
}
.menu .sub-menu .sub-menu::before,
.menu .children .children::before{ top:0; bottom:0; left:-16px; right:auto; width:16px; height:auto; }
.menu li:hover > .sub-menu .sub-menu{ transform:none; opacity:0; visibility:hidden; }
.menu .sub-menu li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateX(0); }
.nav-cta{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:24px; height:2px; background:var(--deep); margin:5px 0; border-radius:2px; transition:.3s; }
@media(max-width:1040px){ .menu{ gap:22px; } }
@media(max-width:960px){
  /* smooth drop-down: animate max-height/opacity/slide instead of the
     instant display:none <-> flex snap */
  .menu{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:0 24px;
    box-shadow:var(--shadow-sm); display:flex;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transform:translateY(-10px);
    transition:max-height .42s cubic-bezier(.4,0,.2,1), opacity .3s ease,
               transform .4s cubic-bezier(.4,0,.2,1), padding .42s ease, visibility .42s;
  }
  .menu.open{
    max-height:calc(100vh - 140px); overflow-y:auto;
    opacity:1; visibility:visible; transform:translateY(0);
    padding:10px 24px 20px;
  }
  .menu li,
  .menu > li{ width:100%; display:block; }
  .menu a{ display:block; padding:14px 0; border-bottom:1px solid var(--paper-2); white-space:normal; }
  .menu > li > a::after{ display:none; }
  /* submenus: inline accordion-style list, always expanded */
  .menu .sub-menu,
  .menu .children{
    position:static; min-width:0; padding:0 0 0 18px; margin:0;
    border:0; border-left:2px solid var(--paper-2); border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .menu .sub-menu::before,
  .menu .children::before{ display:none; }
  .menu .sub-menu a,
  .menu .children a{ padding:12px 0; border-radius:0; border-bottom:1px solid var(--paper-2); }
  .menu .sub-menu a:hover,
  .menu .children a:hover{ background:transparent; padding-left:6px; }
  .menu .sub-menu .sub-menu{ margin-left:0; }
  .menu li.menu-item-has-children > a::before{ right:6px; }
  .burger{ display:block; }
  .nav-cta .btn{ display:none; }
  /* logo left, hamburger right — spaced apart no matter the desktop
     menu-alignment setting */
  .nav{ justify-content:space-between; gap:16px; }
  .nav-cta{ margin-left:0; }
}

/* =====================================================================
   HEADER SEARCH OVERLAY
   ===================================================================== */
.header-search-open{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.header-search-open svg{ width:18px; height:18px; stroke:var(--deep); transition:stroke .2s ease; }
.header-search-open:hover{ background:var(--teal); border-color:var(--teal); }
.header-search-open:hover svg{ stroke:#fff; }

.header-search{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-start; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.header-search.open{ opacity:1; visibility:visible; }
.header-search-backdrop{
  position:absolute; inset:0;
  background:rgba(15,47,60,.72); backdrop-filter:blur(6px);
}
.header-search-body{
  position:relative; width:min(680px, calc(100% - 48px));
  margin-top:18vh; padding:40px 44px 44px;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  transform:translateY(-24px); transition:transform .3s ease;
}
.header-search.open .header-search-body{ transform:translateY(0); }
.header-search-body h3{
  font-family:var(--font-head); font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  color:var(--deep); margin-bottom:22px;
}
.header-search-body form{ display:flex; gap:12px; }
.header-search-body input[type="search"]{
  flex:1; min-width:0; height:54px; padding:0 20px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.header-search-body input[type="search"]:focus{ border-color:var(--teal); background:#fff; }
.header-search-body input[type="search"]::placeholder{ color:var(--muted); }
.header-search-body .btn{ height:54px; padding:0 28px; }
.header-search-close{
  position:absolute; top:14px; right:14px;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--paper); border:0; cursor:pointer;
  transition:background .2s ease;
}
.header-search-close svg{ width:16px; height:16px; stroke:var(--deep); transition:stroke .2s ease; }
.header-search-close:hover{ background:var(--deep); }
.header-search-close:hover svg{ stroke:#fff; }
@media(max-width:600px){
  .header-search-body{ margin-top:12vh; padding:32px 22px 26px; }
  .header-search-body form{ flex-direction:column; }
  .header-search-body .btn{ justify-content:center; }
}

/* =====================================================================
   BLOG ARCHIVE — modern editorial card grid (Behance/Awwwards style).
   Breadcrumb page-hero sits above (mine_breadcrumb_func), so the top
   padding is light. First post becomes a wide "featured" card.
   ===================================================================== */
.blog-archive{ padding:64px 0 96px; }
.blog-archive .blog-grid{ grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-archive .blog-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.blog-archive .post-thumb{ aspect-ratio:16/10; }
/* refined card surface just for the archive (leaves the homepage widget as-is) */
.blog-archive .blog-grid .post{ border-radius:20px; border-color:var(--line); box-shadow:0 8px 24px -16px rgba(15,47,60,.28); }
.blog-archive .blog-grid .post:hover{ box-shadow:0 26px 50px -22px rgba(15,47,60,.4); }

/* featured first post — image beside the copy, spanning the whole row */
.blog-archive .blog-grid .post:first-child{ grid-column:1 / -1; flex-direction:row; }
.blog-archive .blog-grid .post:first-child .post-thumb{ aspect-ratio:auto; flex:0 0 54%; min-height:340px; }
.blog-archive .blog-grid .post:first-child .post-body{ justify-content:center; padding:40px 46px; }
.blog-archive .blog-grid .post:first-child h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.3; }
.blog-archive .blog-grid .post:first-child p{ font-size:1.05rem; }

@media(max-width:1024px){
  .blog-archive .blog-grid,
  .blog-archive .blog-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  .blog-archive .blog-grid .post:first-child .post-thumb{ min-height:280px; }
}
@media(max-width:640px){
  .blog-archive{ padding:44px 0 64px; }
  .blog-archive .blog-grid,
  .blog-archive .blog-grid.cols-2{ grid-template-columns:1fr; }
  .blog-archive .blog-grid .post:first-child{ flex-direction:column; }
  .blog-archive .blog-grid .post:first-child .post-thumb{ flex:none; aspect-ratio:16/10; min-height:0; }
  .blog-archive .blog-grid .post:first-child .post-body{ padding:24px 26px 28px; }
}

/* =====================================================================
   BLOG PAGINATION
   ===================================================================== */
.mn-pagination{ margin-top:56px; }
.mn-pagination ul{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px; list-style:none; margin:0; padding:0;
}
.mn-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; height:48px; padding:0 8px;
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  color:var(--deep); background:#fff;
  border:1.5px solid var(--line); border-radius:50%;
  transition:background .2s ease, border-color .2s ease, color .2s ease,
             transform .2s ease, box-shadow .2s ease;
}
.mn-pagination a.page-numbers:hover{
  background:var(--paper); border-color:var(--teal); color:var(--teal-2);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.mn-pagination .page-numbers.current{
  background:var(--teal); border-color:var(--teal); color:#fff;
  box-shadow:0 12px 24px -10px rgba(18,168,155,.7);
}
.mn-pagination .page-numbers.dots{
  border:0; background:transparent; color:var(--muted);
  min-width:32px; box-shadow:none;
}
.mn-pagination .page-numbers.prev,
.mn-pagination .page-numbers.next{
  background:var(--paper); color:var(--deep);
}
.mn-pagination .page-numbers.prev:hover,
.mn-pagination .page-numbers.next:hover{
  background:var(--teal); border-color:var(--teal); color:#fff;
}
.mn-pagination .page-numbers i{ font-size:1rem; line-height:1; }
@media(max-width:600px){
  .mn-pagination{ margin-top:40px; }
  .mn-pagination ul{ gap:8px; }
  .mn-pagination .page-numbers{ min-width:42px; height:42px; }
}

/* =====================================================================
   BLOG SIDEBAR
   ===================================================================== */
.sidebar-wrapper{
  display:flex; flex-direction:column; gap:28px;
  position:sticky; top:104px;
}

/* widget card */
.sidebar-wrapper .sidebar-widget{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; margin:0;
}

/* widget title — supports classic (h3.sidebar-widget-title) & block widgets (h2) */
.sidebar-wrapper .sidebar-widget-title,
.sidebar-wrapper .sidebar-widget > h2,
.sidebar-wrapper .sidebar-widget .wp-block-heading{
  position:relative;
  font-family:var(--font-head); font-size:1.15rem; font-weight:800; color:var(--deep);
  margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--paper-2);
}
.sidebar-wrapper .sidebar-widget-title::after,
.sidebar-wrapper .sidebar-widget > h2::after,
.sidebar-wrapper .sidebar-widget .wp-block-heading::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:38px; height:2px; background:var(--teal); border-radius:2px;
}

/* lists: recent posts, comments, categories, archives, meta */
.sidebar-wrapper .sidebar-widget ul{ list-style:none; margin:0; padding:0; }
.sidebar-wrapper .sidebar-widget ul li{
  padding:11px 0; border-bottom:1px solid var(--paper-2);
  color:var(--muted); font-size:1rem; line-height:1.5;
}
.sidebar-wrapper .sidebar-widget ul li:first-child{ padding-top:0; }
.sidebar-wrapper .sidebar-widget ul li:last-child{ padding-bottom:0; border-bottom:0; }
.sidebar-wrapper .sidebar-widget ul li a{
  display:inline-block; color:var(--ink); font-weight:500;
  transition:color .2s ease, transform .2s ease;
}
.sidebar-wrapper .sidebar-widget ul li a:hover{
  color:var(--teal-2); transform:translateX(4px);
}
.sidebar-wrapper .sidebar-widget ul ul{ margin-top:11px; padding-left:16px; }
.sidebar-wrapper .sidebar-widget li > ul li:last-child{ padding-bottom:11px; }

/* post counts / dates rendered as small muted text */
.sidebar-wrapper .sidebar-widget .post-date,
.sidebar-wrapper .sidebar-widget .wp-block-latest-posts__post-date{
  display:block; color:var(--muted); font-size:1rem; margin-top:2px;
}

/* search — block widget & classic search form */
.sidebar-wrapper .wp-block-search__inside-wrapper,
.sidebar-wrapper .search-form{
  display:flex; gap:10px; border:0; padding:0;
}
.sidebar-wrapper .wp-block-search__input,
.sidebar-wrapper .search-form .search-field{
  flex:1; min-width:0; height:50px; padding:0 18px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.sidebar-wrapper .wp-block-search__input:focus,
.sidebar-wrapper .search-form .search-field:focus{ border-color:var(--teal); background:#fff; }
.sidebar-wrapper .wp-block-search__button,
.sidebar-wrapper .search-form .search-submit{
  height:50px; padding:0 20px; flex-shrink:0;
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:#fff;
  background:var(--teal); border:0; border-radius:var(--radius-sm); cursor:pointer;
  transition:background .2s ease;
}
.sidebar-wrapper .wp-block-search__button:hover,
.sidebar-wrapper .search-form .search-submit:hover{ background:var(--teal-2); }
.sidebar-wrapper .wp-block-search__label{ display:none; }

/* tag cloud */
.sidebar-wrapper .tagcloud,
.sidebar-wrapper .wp-block-tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.sidebar-wrapper .tagcloud a,
.sidebar-wrapper .wp-block-tag-cloud a{
  display:inline-flex; align-items:center;
  padding:8px 16px; font-size:1rem !important; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:100px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.sidebar-wrapper .tagcloud a:hover,
.sidebar-wrapper .wp-block-tag-cloud a:hover{
  background:var(--teal); border-color:var(--teal); color:#fff;
}

/* select (archives/categories dropdown) */
.sidebar-wrapper .sidebar-widget select{
  width:100%; height:50px; padding:0 14px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  outline:none;
}

/* recent comments: highlight the commenter/post link nicely */
.sidebar-wrapper .wp-block-latest-comments{ padding-left:0; }
.sidebar-wrapper .wp-block-latest-comments__comment{
  margin-bottom:0; padding:11px 0; border-bottom:1px solid var(--paper-2);
  font-size:1rem; line-height:1.5; color:var(--muted);
}
.sidebar-wrapper .wp-block-latest-comments__comment:last-child{ padding-bottom:0; border-bottom:0; }
.sidebar-wrapper .wp-block-latest-comments__comment a{ color:var(--ink); font-weight:500; transition:color .2s ease; }
.sidebar-wrapper .wp-block-latest-comments__comment a:hover{ color:var(--teal-2); }

@media(max-width:991px){
  .sidebar-wrapper{ position:static; margin-top:48px; }
}
/* =====================================================================
   HERO SLIDER
   ===================================================================== */
.hero{ position:relative; overflow:hidden; }
.slides{ position:relative; height:660px; }
.slide{
  position:absolute; inset:0; opacity:0; z-index:1; pointer-events:none;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
  display:flex; align-items:flex-end;
}
.slide.active{ opacity:1; z-index:2; pointer-events:auto; }
.slide .hero-content > *{ opacity:0; transform:translateY(22px); }
.slide.active .hero-content > *{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.slide.active .hero-content > *:nth-child(1){ transition-delay:.15s; }
.slide.active .hero-content > *:nth-child(2){ transition-delay:.28s; }
.slide.active .hero-content > *:nth-child(3){ transition-delay:.4s; }
.slide.active .hero-content > *:nth-child(4){ transition-delay:.52s; }
.slide.active .hero-content > *:nth-child(5){ transition-delay:.62s; }
/* photo "center top" so heads are never cropped. Cinematic bottom fade:
   the top ~55% is nearly untouched so the faces show, then the photo melts
   into deep navy where the copy sits — no boxes or strips over the image */
.slide-1{ background:linear-gradient(180deg, rgba(15,47,60,0) 0%, rgba(15,47,60,.06) 42%, rgba(15,47,60,.55) 62%, rgba(15,47,60,.88) 78%, rgba(11,36,46,.98) 100%), url("../images/banner-1.jpg") center top / cover no-repeat; }
.slide-2{ background:linear-gradient(180deg, rgba(15,47,60,0) 0%, rgba(15,47,60,.06) 42%, rgba(15,47,60,.55) 62%, rgba(15,47,60,.88) 78%, rgba(11,36,46,.98) 100%), url("../images/banner-2.jpg") center top / cover no-repeat; }
/* custom Elementor slide image — same overlay recipe, image via --hero-bg */
.slide.has-bg{ background:linear-gradient(180deg, rgba(15,47,60,0) 0%, rgba(15,47,60,.06) 42%, rgba(15,47,60,.55) 62%, rgba(15,47,60,.88) 78%, rgba(11,36,46,.98) 100%), var(--hero-bg) center top / cover no-repeat; }
/* mobile: the overlay must hit FULL opacity before the slide's bottom edge —
   at .98 the photo bleeds through and draws a visible seam where the solid
   navy dots/feature area starts below the slides box */
@media(max-width:960px){
  .slide-1{ background:linear-gradient(180deg, rgba(15,47,60,0) 0%, rgba(15,47,60,.08) 30%, rgba(15,47,60,.6) 52%, rgba(15,47,60,.92) 70%, rgba(11,36,46,1) 88%), url("../images/banner-1.jpg") center top / cover no-repeat; }
  .slide-2{ background:linear-gradient(180deg, rgba(15,47,60,0) 0%, rgba(15,47,60,.08) 30%, rgba(15,47,60,.6) 52%, rgba(15,47,60,.92) 70%, rgba(11,36,46,1) 88%), url("../images/banner-2.jpg") center top / cover no-repeat; }
  .slide.has-bg{ background:linear-gradient(180deg, rgba(15,47,60,0) 0%, rgba(15,47,60,.08) 30%, rgba(15,47,60,.6) 52%, rgba(15,47,60,.92) 70%, rgba(11,36,46,1) 88%), var(--hero-bg) center top / cover no-repeat; }
  /* gradient-only slide: fade its diagonal wash into the same navy so the
     strip below continues seamlessly */
  .slide-3{ background:linear-gradient(180deg, rgba(11,36,46,0) 45%, rgba(11,36,46,1) 90%), linear-gradient(120deg, var(--deep) 0%, #123f4e 60%, #145a5a 130%); }
}
.slide-3{ background:linear-gradient(120deg, var(--deep) 0%, #123f4e 60%, #145a5a 130%); }
/* hide the circle motifs on the photo slides so the photos read cleanly */
.slide-1::before,.slide-1::after,.slide-2::before,.slide-2::after,
.slide.has-bg::before,.slide.has-bg::after{ display:none; }

.slide::before{
  content:""; position:absolute; right:-120px; top:50%; transform:translateY(-50%);
  width:560px; height:560px; border-radius:50%;
  border:2px solid rgba(91,163,188,.25);
  box-shadow:inset 0 0 0 18px rgba(78,203,192,.06);
}
.slide::after{
  content:""; position:absolute; right:60px; bottom:-40px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(18,168,155,.35), transparent 70%);
  filter:blur(6px);
}
/* split hero: copy on the left, CTA on the right, sitting near the bottom
   so the team faces at the top stay fully visible (editorial / Dribbble style) */
.hero-content{ position:relative; z-index:2; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:44px; padding-bottom:66px; text-align:left; color:#fff; }
/* no panel, no strips — the copy sits in the dark bottom fade of the photo */
.hero-copy{ max-width:620px; }
.hero-content h1{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.1; margin-bottom:14px; text-shadow:0 2px 18px rgba(11,36,46,.55); }
.hero-content h1 span{ color:var(--teal-lt); }
/* badge as a solid brand-teal pill so it pops on any photo */
.hero-bn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-bn); font-weight:600; font-size:1rem; color:#fff;
  background:linear-gradient(135deg, var(--teal), #0f8a80);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 22px rgba(18,168,155,.4);
  padding:7px 16px; border-radius:100px; margin-bottom:16px; letter-spacing:.01em;
}
.hero-bn::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:none;
  background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation:hero-dot 2.2s ease-out infinite;
}
@keyframes hero-dot{ 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce){ .hero-bn::before{ animation:none; } }
.hero-content p{ font-size:1.05rem; line-height:1.65; color:rgba(255,255,255,.9); max-width:470px; margin:0; text-shadow:0 1px 12px rgba(11,36,46,.5); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; flex:none; }
/* ghost button gets a frosted fill so it doesn't vanish over bright photos */
.hero-actions .btn-ghost{
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
@media(max-width:860px){
  /* keep the copy in the dark bottom fade so the faces above stay clear */
  .slide{ align-items:flex-end; }
  .hero-content{ flex-direction:column; align-items:flex-start; gap:22px; padding-bottom:72px; }
  .hero-copy{ max-width:100%; }
}
.hero-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:1rem; font-weight:600; font-family:var(--font-head); color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:7px 14px; border-radius:100px; }
.hero-trust svg{ width:15px; height:15px; stroke:var(--teal-lt); }

/* dots sit in a frosted pill so they read clearly on any photo */
.slider-dots{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; z-index:3;
  padding:9px 14px; border-radius:100px;
  background:rgba(11,36,46,.35);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.slider-dots button{
  width:12px; height:12px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.5);
  transition:background .3s, width .3s, transform .25s, box-shadow .3s;
}
.slider-dots button:hover{ background:#fff; transform:scale(1.25); }
.slider-dots button.active{
  width:34px; border-radius:6px; transform:none;
  background:linear-gradient(90deg, var(--teal), var(--teal-lt));
  box-shadow:0 0 14px rgba(78,203,192,.75);
}
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:54px; height:54px; border-radius:50%; color:#fff; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(11,36,46,.35);
  transition:background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.slider-arrow:hover{
  background:linear-gradient(135deg, var(--teal), var(--teal-lt));
  border-color:transparent;
  box-shadow:0 10px 28px rgba(18,168,155,.55);
  transform:translateY(-50%) scale(1.08);
}
/* active / focused arrow → theme color (hover keeps its own look above) */
.slider-arrow:active,
.slider-arrow:focus-visible{
  background:linear-gradient(135deg, var(--teal), var(--teal-lt));
  border-color:transparent;
  box-shadow:0 10px 28px rgba(18,168,155,.55);
  outline:none;
}
.slider-arrow.prev{ left:24px; } .slider-arrow.next{ right:24px; }
.slider-arrow svg{ width:22px; height:22px; stroke:#fff; }
@media(max-width:960px){ .slides{ height:auto; min-height:600px; padding:70px 0; } .slider-arrow{ display:none; } .slide::before{ opacity:.4; } }

/* =====================================================================
   FULL-VIEWPORT HERO — slider + glass feature strip merged in one section.
   Fills the first screen: 100vh minus topbar (44px) + sticky header (60px).
   ===================================================================== */
.hero-full{
  --hero-offset:104px;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:calc(100vh - var(--hero-offset));
  min-height:max(640px, calc(100svh - var(--hero-offset)));
  background:#0b242e;
}
/* slides become a full-bleed backdrop so the glass cards blur the photo */
.hero-full .slides{ position:absolute; inset:0; height:auto; }
/* copy clears the in-flow dots + feature strip at the bottom */
.hero-full.has-strip .hero-content{ padding-bottom:196px; }
/* arrows centred on the photo area above the strip */
.hero-full .slider-arrow{ top:calc(50% - 80px); }
/* dots leave the section edge and flow between the copy and the strip */
.hero-full .slider-dots{
  position:relative; bottom:auto; left:auto; transform:none; z-index:3;
  margin:auto auto 18px;
}

/* ---- glass feature strip ---- */
.hero-features{ position:relative; z-index:3; padding-bottom:28px; }
/* column count follows the number of cards (--hf-cols, set inline, capped at 4)
   so 3 items fill the row evenly instead of leaving an empty 4th slot */
.hero-features-grid{ display:grid; grid-template-columns:repeat(var(--hf-cols,4),1fr); gap:14px; }
.hero-feature{
  display:flex; align-items:flex-start; gap:13px;
  padding:17px 18px 16px; border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background .3s, transform .3s, border-color .3s;
}
.hero-feature:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(78,203,192,.5);
  transform:translateY(-4px);
}
/* no description → center the icon + title in the (grid-stretched) card */
.hero-feature.no-desc{ align-items:center; }
.hero-feature .fico{
  flex:none; width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, var(--teal), var(--teal-lt));
  display:grid; place-items:center;
}
.hero-feature .fico svg{ width:20px; height:20px; stroke:#fff; }
.hero-feature .fico i{ font-size:20px; color:#fff; line-height:1; }
.hero-feature .fico img{ width:20px; height:20px; object-fit:contain; }
.hero-feature h4{ font-size:.98rem; color:#fff; margin-bottom:3px; }
.hero-feature p{ font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.68); margin:0; }

@media(max-width:960px){
  /* photo back in normal flow; the strip continues on the navy fade below */
  .hero-full{ justify-content:flex-start; }
  .hero-full .slides{ position:relative; inset:auto; flex:1; min-height:520px; padding:60px 0 46px; }
  .hero-full.has-strip .hero-content{ padding-bottom:12px; }
  .hero-full .slider-dots{ margin:16px auto; }
  .hero-features{ padding-bottom:24px; }
  .hero-features-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}
@media(max-width:560px){
  .hero-feature{ flex-direction:column; gap:10px; padding:14px 14px 13px; }
  .hero-feature p{ display:none; }
}

/* =====================================================================
   FEATURE STRIP
   ===================================================================== */
/* no negative overlap — keeps the hero slider dots visible */
.features{ padding:72px 0 12px; position:relative; }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 28px; overflow:hidden;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.feature::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--teal-lt));
  transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.feature:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:transparent; }
.feature:hover::before{ transform:scaleX(1); }
.feature .fico{
  width:56px; height:56px; margin-bottom:18px; border-radius:14px;
  background:linear-gradient(135deg, rgba(18,168,155,.1), rgba(78,203,192,.18));
  display:grid; place-items:center; color:var(--teal-2); transition:background .3s;
}
.feature .fico svg{ width:26px; height:26px; stroke:var(--teal-2); transition:stroke .3s; }
.feature .fico i{ font-size:26px; color:var(--teal-2); line-height:1; transition:color .3s; }
.feature .fico img{ width:26px; height:26px; object-fit:contain; }
.feature:hover .fico{ background:linear-gradient(135deg, var(--teal), var(--teal-lt)); }
.feature:hover .fico svg{ stroke:#fff; }
.feature:hover .fico i{ color:#fff; }
.feature h4{ font-size:1.08rem; margin-bottom:8px; }
.feature p{ font-size:1rem; color:var(--muted); line-height:1.55; }
/* per-card color variants — soft tinted cards, each with its own accent.
   --fc / --fc-2 drive the icon chip, top bar and hover state */
.feature.fv-1{ --fc:#12a89b; --fc-2:#4ecbc0; background:#ecf8f6; border-color:#d5ede9; }
.feature.fv-2{ --fc:#3d8fb5; --fc-2:#7cc0dd; background:#edf5fa; border-color:#d8e8f1; }
.feature.fv-3{ --fc:#d9930d; --fc-2:#f2bb4a; background:#fdf6e9; border-color:#f2e4c8; }
.feature.fv-4{ --fc:#7c6fd0; --fc-2:#a89ce8; background:#f3f1fb; border-color:#e2def4; }
.feature[class*="fv-"]::before{ background:linear-gradient(90deg, var(--fc), var(--fc-2)); }
.feature[class*="fv-"] .fico{ background:#fff; box-shadow:0 4px 14px rgba(15,47,60,.07); }
.feature[class*="fv-"] .fico svg{ stroke:var(--fc); }
.feature[class*="fv-"] .fico i{ color:var(--fc); }
.feature[class*="fv-"]:hover{ box-shadow:0 14px 34px rgba(15,47,60,.12); }
.feature[class*="fv-"]:hover .fico{ background:linear-gradient(135deg, var(--fc), var(--fc-2)); box-shadow:none; }
.feature[class*="fv-"]:hover .fico svg{ stroke:#fff; }
.feature[class*="fv-"]:hover .fico i{ color:#fff; }
@media(max-width:860px){ .features{ padding-top:56px; } .features-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:460px){ .features-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   ABOUT  (modern: organic image shape, glass badge, pill list, stat tiles)
   ===================================================================== */
.about{ padding:110px 0 100px; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-visual{ position:relative; }
.about-visual .card-img{
  aspect-ratio:4/3.4; border-radius:28px 140px 28px 28px;
  background:linear-gradient(150deg,#134350,var(--deep)); position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
/* offset outline frame behind the image */
.about-visual::before{
  content:""; position:absolute; inset:auto; left:-16px; top:16px; right:16px; bottom:-16px;
  border:2px solid rgba(18,168,155,.35); border-radius:28px 140px 28px 28px; z-index:-1;
}
/* dotted accent, top-right */
.about-visual::after{
  content:""; position:absolute; width:120px; height:120px; right:-26px; top:-26px; z-index:-1;
  background-image:radial-gradient(var(--teal-lt) 2px, transparent 2px);
  background-size:14px 14px; opacity:.4;
}
.about-visual .card-img img{ width:100%; height:100%; object-fit:cover; }
.about-visual .card-img svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
/* glass badge floating over the image edge */
.about-badge{
  position:absolute; right:14px; bottom:-26px; text-align:center;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9); border-radius:18px;
  padding:20px 26px; box-shadow:var(--shadow-sm);
}
.about-badge b{ font-family:var(--font-head); font-size:2.2rem; color:var(--teal-2); display:block; line-height:1; }
.about-badge span{ font-size:1rem; color:var(--muted); }
.about-text h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:20px; }
.about-text > p{ color:var(--muted); font-size:1.06rem; line-height:1.8; margin-bottom:40px; }
/* stats as an editorial row — big gradient numbers over a thin rule that
   fills with teal on hover; numbers count up on scroll */
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.about-stats > div{ position:relative; padding:18px 0 0; border-top:2px solid var(--line); }
.about-stats > div::before{
  content:""; position:absolute; top:-2px; left:0; height:2px; width:44px;
  background:linear-gradient(90deg, var(--teal), var(--teal-lt));
  transition:width .4s cubic-bezier(.2,.7,.2,1);
}
.about-stats > div:hover::before{ width:100%; }
.about-stats b{
  font-family:var(--font-head); font-size:2.4rem; line-height:1.1; display:block;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--deep) 30%, var(--teal));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--deep);
}
.about-stats span{ font-size:1rem; color:var(--muted); display:block; margin-top:4px; }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:60px; } .about{ padding:80px 0; } }
@media(max-width:460px){ .about-stats{ grid-template-columns:1fr 1fr; } }

/* ---- scroll reveal (generic, used via data-reveal attribute) ---- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =====================================================================
   CONDITIONS WE TREAT
   ===================================================================== */
.conditions{ padding:100px 0; background:var(--paper); }
.cond-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cond{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; display:flex; gap:14px; align-items:flex-start; transition:transform .2s, box-shadow .2s, border-color .2s; }
.cond:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:transparent; }
.cond .cico{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--paper); display:grid; place-items:center; }
.cond .cico svg{ width:24px; height:24px; stroke:var(--teal-2); }
.cond .cico i{ font-size:24px; color:var(--teal-2); line-height:1; }
.cond .cico img{ width:24px; height:24px; object-fit:contain; }
.cond h4{ font-size:1rem; margin-bottom:2px; }
.cond span{ font-family:var(--font-bn); font-size:1rem; color:var(--muted); font-weight:500; }
@media(max-width:1000px){ .cond-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .cond-grid{ grid-template-columns:repeat(2,1fr); } .conditions{ padding:76px 0; } }
@media(max-width:440px){ .cond-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services{ padding:100px 0; }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.service-card .sico{ width:62px; height:62px; border-radius:16px; background:linear-gradient(150deg,var(--teal),var(--teal-2)); display:grid; place-items:center; margin-bottom:22px; }
.service-card .sico svg{ width:30px; height:30px; stroke:#fff; }
.service-card .sico i{ font-size:30px; color:#fff; line-height:1; }
.service-card .sico img{ width:30px; height:30px; object-fit:contain; }
.service-card h3{ font-size:1.25rem; margin-bottom:10px; }
.service-card p{ color:var(--muted); font-size:1rem; margin-bottom:18px; }
.service-link{ font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--teal-2); display:inline-flex; align-items:center; gap:7px; }
.service-link svg{ width:16px; height:16px; stroke:var(--teal-2); transition:transform .2s; }
.service-card:hover .service-link svg{ transform:translateX(4px); }
@media(max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .services-grid{ grid-template-columns:1fr; } .services{ padding:76px 0; } }

/* =====================================================================
   WHY CHOOSE US
   ===================================================================== */
/* soft aurora background instead of flat paper — the section reads as its
   own colored zone, not another white block */
.whyus{
  padding:100px 0; position:relative; overflow:hidden;
  background:
    radial-gradient(720px 420px at 6% 8%, rgba(18,168,155,.12), transparent 62%),
    radial-gradient(640px 440px at 94% 90%, rgba(91,163,188,.14), transparent 62%),
    radial-gradient(500px 340px at 80% 6%, rgba(124,111,208,.07), transparent 60%),
    linear-gradient(180deg, #f1f7f6, #edf3f5);
}
.why-grid{ display:grid; grid-template-columns:1fr 350px 1fr; gap:34px; align-items:center; margin-top:8px; }
.why-col{ list-style:none; display:grid; gap:20px; margin:0; padding:0; }
.why-item{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.85); border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(15,47,60,.05);
  padding:22px 24px; display:flex; gap:16px; align-items:flex-start;
  transition:transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.why-item:hover{ transform:translateY(-4px); background:#fff; box-shadow:0 16px 38px rgba(15,47,60,.11); border-color:var(--wc, rgba(18,168,155,.35)); }
.why-left .why-item{ flex-direction:row-reverse; text-align:right; }
/* four rotating accents — chip, hover ring and the Bangla line follow --wc */
.why-item.wv-1{ --wc:#12a89b; --wc-2:#4ecbc0; --wc-bg:rgba(18,168,155,.13); }
.why-item.wv-2{ --wc:#3d8fb5; --wc-2:#7cc0dd; --wc-bg:rgba(61,143,181,.13); }
.why-item.wv-3{ --wc:#d9930d; --wc-2:#f2bb4a; --wc-bg:rgba(217,147,13,.13); }
.why-item.wv-4{ --wc:#7c6fd0; --wc-2:#a89ce8; --wc-bg:rgba(124,111,208,.13); }
.wico{
  flex:none; width:48px; height:48px; border-radius:14px;
  background:var(--wc-bg, rgba(18,168,155,.1));
  display:grid; place-items:center; transition:background .3s;
}
.wico svg{ width:22px; height:22px; stroke:var(--wc, var(--teal-2)); fill:none; transition:stroke .3s; }
.wico i{ font-size:22px; color:var(--wc, var(--teal-2)); line-height:1; transition:color .3s; }
.wico img{ width:22px; height:22px; object-fit:contain; }
.why-item:hover .wico{ background:linear-gradient(135deg, var(--wc, var(--teal)), var(--wc-2, var(--teal-lt))); }
.why-item:hover .wico svg{ stroke:#fff; }
.why-item:hover .wico i{ color:#fff; }
.why-item h4{ font-size:1.02rem; margin-bottom:4px; }
.why-item p{ color:var(--muted); font-size:1rem; line-height:1.55; }
.why-item .bn{ display:block; color:var(--wc, var(--teal-2)); font-size:1rem; margin-top:4px; }
.why-figure{ position:relative; }
/* one soft aurora blob behind the arch — quiet, offset, no hard edges */
.why-figure::before{
  content:""; position:absolute; inset:-10% -18%; z-index:0;
  background:
    radial-gradient(46% 40% at 30% 28%, rgba(78,203,192,.26), transparent 70%),
    radial-gradient(44% 38% at 74% 74%, rgba(124,111,208,.14), transparent 70%);
  filter:blur(20px);
}
/* thin offset keyline instead of the busy dashed ring */
.why-figure::after{
  content:""; position:absolute; inset:-16px; z-index:0;
  border:1.5px solid rgba(18,168,155,.22);
  border-radius:210px 210px 34px 34px;
}
.why-photo{
  position:relative; z-index:1;
  aspect-ratio:4/5; border-radius:999px 999px 26px 26px; overflow:hidden;
  border:6px solid #fff;
  background:linear-gradient(180deg, #e6f4f1 0%, #cdeae5 60%, #aedcd4 100%);
  box-shadow:0 34px 70px -22px rgba(15,47,60,.35);
}
/* .why-figure prefix beats Elementor's `.elementor img{height:auto}` reset,
   so the photo always fills the arch shape */
.why-figure .why-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
/* subtle bottom fade grounds the subjects inside the arch — no colour cast */
.why-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,36,46,0) 68%, rgba(11,36,46,.16) 100%);
}
/* frosted badges, tucked neatly onto the arch edge */
.why-chip{
  position:absolute; z-index:2; border-radius:100px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 14px 34px -8px rgba(15,47,60,.28);
  padding:9px 16px; display:flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--deep); white-space:nowrap;
}
.why-chip svg{
  width:26px; height:26px; padding:6px; flex:none; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-lt)); stroke:#fff; fill:none;
  box-shadow:0 4px 10px rgba(18,168,155,.35);
}
.why-chip b{ color:var(--teal-2); font-size:1.05rem; }
.why-chip.c1{ top:30px; left:-22px; animation:chip-float 5s ease-in-out infinite; }
.why-chip.c2{ bottom:34px; right:-22px; animation:chip-float 6s ease-in-out 1.2s infinite; }
@keyframes chip-float{ 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){ .why-chip.c1, .why-chip.c2{ animation:none; } }
@media(max-width:1100px){ .why-grid{ grid-template-columns:1fr 300px 1fr; gap:24px; } }
@media(max-width:900px){
  .whyus{ padding:76px 0; }
  .why-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .why-figure{ order:-1; width:100%; max-width:300px; margin:0 auto 14px; }
  .why-left .why-item{ flex-direction:row; text-align:left; }
  .why-chip.c1{ left:-8px; }
  .why-chip.c2{ right:-8px; }
}

/* =====================================================================
   PRICING
   ===================================================================== */
.pricing{ padding:100px 0; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.price-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 30px; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.price-card.popular{ border:2px solid var(--teal); position:relative; box-shadow:var(--shadow); }
.price-card.popular::before{ content:"সবচেয়ে জনপ্রিয়"; font-family:var(--font-bn); position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:1rem; font-weight:600; padding:5px 16px; border-radius:100px; white-space:nowrap; }
.price-card h3{ font-size:1.2rem; margin-bottom:4px; }
.price-card .p-sub{ font-family:var(--font-bn); color:var(--muted); font-size:1rem; margin-bottom:20px; }
.price-card .amount{ font-family:var(--font-head); font-weight:800; color:var(--deep); font-size:2.4rem; line-height:1; }
.price-card .amount small{ font-size:1rem; color:var(--muted); font-weight:600; }
.price-card .per{ color:var(--muted); font-size:1rem; margin-bottom:24px; }
.price-list{ list-style:none; display:grid; gap:12px; margin-bottom:28px; flex:1; }
.price-list li{ display:flex; gap:10px; align-items:flex-start; font-size:1rem; }
.price-list svg{ flex:none; width:18px; height:18px; stroke:var(--teal-2); margin-top:3px; }
.price-note{ text-align:center; margin-top:34px; color:var(--muted); font-size:1rem; }
.price-note b{ color:var(--bkash); }
@media(max-width:900px){ .price-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } .pricing{ padding:76px 0; } }

/* =====================================================================
   FINAL CTA (before footer)
   ===================================================================== */
.cta-mid{ padding:80px 0; background:#fff; }
.cta-box{
  background:linear-gradient(120deg,var(--deep),#134855 70%,#0f6b63);
  border-radius:24px; padding:56px; display:flex; align-items:center; justify-content:space-between;
  gap:40px; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.cta-box::after{ content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%; border:2px solid rgba(91,163,188,.25); }
.cta-box h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); max-width:560px; position:relative; z-index:2; }
.cta-box p{ color:rgba(255,255,255,.8); margin-top:10px; position:relative; z-index:2; font-family:var(--font-bn); }
.cta-box .cta-actions{ position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.cta-phone{ color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:10px; }
.cta-phone svg{ width:20px; height:20px; stroke:var(--teal-lt); }
@media(max-width:820px){ .cta-box{ flex-direction:column; align-items:flex-start; padding:40px 30px; } }

/* =====================================================================
   TEAM
   ===================================================================== */
.team{ padding:100px 0; }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
/* team slider — scroll-snap viewport with edge fade, arrows and autoplay (JS) */
.team-slider{ position:relative; }
.team-viewport{
  display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:10px 4px 18px; scrollbar-width:none;
}
.team-viewport::-webkit-scrollbar{ display:none; }
.team-viewport .member{ flex:0 0 calc((100% - 78px) / 4); scroll-snap-align:start; }
@media(max-width:900px){ .team-viewport .member{ flex-basis:calc((100% - 26px) / 2); } }
@media(max-width:460px){ .team-viewport .member{ flex-basis:100%; } }
.tm-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  display:grid; place-items:center; transition:.25s;
}
.tm-arrow svg{ width:19px; height:19px; stroke:var(--deep); fill:none; transition:stroke .25s; }
.tm-arrow:hover{ background:var(--teal); border-color:var(--teal); }
.tm-arrow:hover svg{ stroke:#fff; }
.tm-arrow.prev{ left:-16px; }
.tm-arrow.next{ right:-16px; }
@media(max-width:640px){ .tm-arrow.prev{ left:-6px; } .tm-arrow.next{ right:-6px; } }
.team-more{ text-align:center; margin-top:48px; }
/* editorial overlay card (Awwwards/Behance style): photo fills the whole
   card, the name/role/institute sit on a gradient scrim, and a teal accent
   bar + gentle zoom animate in on hover */
.member{
  position:relative; aspect-ratio:3/4; border-radius:22px; overflow:hidden;
  isolation:isolate; text-align:left; background:linear-gradient(155deg,#16505e,var(--deep));
  box-shadow:0 12px 30px -14px rgba(15,47,60,.3);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.member:hover{ transform:translateY(-8px); box-shadow:0 30px 58px -18px rgba(15,47,60,.45); }
/* photo fills the card */
.member-photo{
  position:absolute; inset:0; margin:0; border-radius:0; overflow:hidden;
  display:grid; place-items:center; background:transparent;
}
/* .member prefix beats Elementor's `.elementor img{height:auto}` reset */
.member .member-photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.member:hover .member-photo img{ transform:scale(1.07); }
.member-photo .initials{ font-family:var(--font-head); font-weight:800; font-size:3rem; color:rgba(78,203,192,.85); }
/* legibility scrim, deepens a touch on hover */
.member-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(11,36,46,.22) 60%, rgba(8,28,36,.92) 100%);
  transition:opacity .45s;
}
/* info overlaid at the bottom of the card */
.member-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 22px 20px; color:#fff;
}
.member-info::before{
  content:""; display:block; width:26px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--teal), var(--teal-lt));
  margin-bottom:12px; transition:width .4s cubic-bezier(.16,1,.3,1);
}
.member:hover .member-info::before{ width:54px; }
.member-info h4{ color:#fff; font-size:1.18rem; margin:0 0 3px; letter-spacing:-.01em; }
.member-info span{ display:block; color:var(--teal-lt); font-size:.98rem; font-weight:600; font-family:var(--font-head); }
.member-info em{ display:block; color:rgba(255,255,255,.72); font-size:.92rem; font-style:normal; margin-top:4px; }
@media(max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } .team{ padding:76px 0; } }
@media(max-width:460px){ .team-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   TESTIMONIALS SLIDER
   ===================================================================== */
.testimonials{ padding:100px 0; background:var(--deep); position:relative; overflow:hidden; }
.testimonials::before{ content:""; position:absolute; left:-100px; bottom:-100px; width:360px; height:360px; border-radius:50%; border:2px solid rgba(91,163,188,.15); }
.testimonials .section-head h2{ color:#fff; }
.testimonials .section-head p{ color:rgba(255,255,255,.7); }
.t-slider{ position:relative; }
.t-viewport{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 2px 10px; scrollbar-width:none;
}
.t-viewport::-webkit-scrollbar{ display:none; }
.t-card{
  flex:0 0 calc((100% - 48px)/3); scroll-snap-align:start;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .25s, background .25s;
}
.t-card:hover{ border-color:rgba(78,203,192,.4); background:rgba(255,255,255,.08); }
.t-stars{ display:flex; gap:4px; }
.t-stars svg{ width:16px; height:16px; fill:var(--teal-lt); stroke:none; }
.t-quote{ font-family:var(--font-bn); font-weight:500; font-size:1.02rem; line-height:1.8; color:rgba(255,255,255,.85); flex:1; }
.t-person{ display:flex; align-items:center; gap:12px; }
.t-avatar{ flex:none; width:46px; height:46px; border-radius:50%; background:linear-gradient(150deg,var(--teal),var(--teal-2)); display:grid; place-items:center; font-family:var(--font-head); font-weight:800; color:#fff; font-size:1rem; }
.t-person .who b{ color:#fff; font-family:var(--font-head); display:block; font-size:1rem; }
.t-person .who span{ color:var(--teal-lt); font-size:1rem; font-family:var(--font-bn); }

/* video review cards */
.t-thumb{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; display:grid; place-items:center; }
.t-thumb.v1{ background:linear-gradient(140deg,#134855,#0f6b63); }
.t-thumb.v2{ background:radial-gradient(420px 240px at 70% 20%,#17505f,#0d2a35); }
/* still-frame preview pulled from a self-hosted video file */
.t-thumb-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
/* dark tint over any real thumbnail (image or video) so the play button pops */
.t-thumb:has(.t-thumb-video)::after,
.t-thumb[style]::after{ content:""; position:absolute; inset:0; background:rgba(11,36,46,.28); z-index:1; }
.t-thumb .t-tag,
.t-thumb .t-dur,
.t-thumb .t-play{ z-index:2; }
.t-tag{
  position:absolute; top:10px; left:10px; background:rgba(18,168,155,.92); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:100px;
}
.t-dur{ position:absolute; right:10px; bottom:8px; background:rgba(11,36,46,.75); color:#fff; font-family:var(--font-head); font-weight:600; font-size:1rem; padding:3px 9px; border-radius:8px; }
.t-play{
  width:56px; height:56px; border-radius:50%; border:0; background:var(--teal); cursor:pointer;
  display:grid; place-items:center; transition:transform .2s, background .2s;
  animation:t-pulse 2.2s infinite;
}
.t-play:hover{ transform:scale(1.1); background:var(--teal-2); }
.t-play svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
@keyframes t-pulse{ 0%{ box-shadow:0 0 0 0 rgba(18,168,155,.5); } 100%{ box-shadow:0 0 0 18px rgba(18,168,155,0); } }

/* carousel arrows */
.t-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  display:grid; place-items:center; transition:background .2s, border-color .2s;
}
.t-arrow:hover{ background:var(--teal); border-color:var(--teal); }
.t-arrow svg{ width:20px; height:20px; stroke:#fff; fill:none; }
.t-arrow.prev{ left:-16px; }
.t-arrow.next{ right:-16px; }
@media(max-width:992px){ .t-card{ flex-basis:calc((100% - 24px)/2); } }
@media(max-width:640px){ .t-card{ flex-basis:100%; } .t-arrow.prev{ left:-6px; } .t-arrow.next{ right:-6px; } }

/* video review modal */
.video-modal{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.video-modal.open{ opacity:1; visibility:visible; }
.vm-backdrop{
  position:absolute; inset:0; background:rgba(8,25,32,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* smooth modern pop-in: scale + rise, driven by the .open class */
.vm-body{
  position:relative; width:min(880px,100%);
  transform:scale(.92) translateY(18px); opacity:0;
  transition:transform .42s cubic-bezier(.2,.8,.25,1), opacity .32s ease;
}
.video-modal.open .vm-body{ transform:none; opacity:1; }
.vm-frame{ aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.vm-frame iframe, .vm-frame video{ width:100%; height:100%; display:block; border:0; }
.vm-close{
  position:absolute; top:-48px; right:0; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
  display:grid; place-items:center; transition:background .2s, border-color .2s;
}
.vm-close:hover{ background:var(--teal); border-color:var(--teal); }
.vm-close svg{ width:18px; height:18px; stroke:#fff; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{ padding:100px 0; background:var(--paper); }
/* marquee slider: track holds the tiles + one JS-made clone set; animating -50% of the
   doubled track (minus half the gap) lands exactly on the clone → seamless infinite loop */
.gallery-slider{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gallery-track{
  display:flex; gap:24px; width:max-content; padding:10px 0;
  animation:gallery-scroll 42s linear infinite;
}
.gallery-track.gt-reverse{ animation-direction:reverse; animation-duration:54s; }
.gallery-track + .gallery-track{ margin-top:4px; }
.gallery-track:hover{ animation-play-state:paused; }
@keyframes gallery-scroll{ to{ transform:translateX(calc(-50% - 12px)); } }
@media (prefers-reduced-motion: reduce){ .gallery-track{ animation:none; } }
.g-item{
  position:relative; width:min(320px, 72vw); aspect-ratio:16/10; flex:none;
  border-radius:var(--radius); overflow:hidden;
  display:grid; place-items:center; margin:0; box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s;
}
.g-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.g-item svg{ width:60px; height:60px; stroke:rgba(255,255,255,.5); fill:none; }
.g-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.g-item:hover img{ transform:scale(1.05); }
.g1{ background:radial-gradient(600px 300px at 70% 20%, #17505f, var(--deep)); }
.g2{ background:linear-gradient(140deg, var(--teal-2), var(--deep)); }
.g3{ background:radial-gradient(500px 300px at 20% 80%, #14515f, #0d2a35); }
.g4{ background:linear-gradient(155deg, #16505e, var(--deep)); }
.g5{ background:radial-gradient(500px 320px at 80% 80%, #0f6b63, var(--deep)); }
.g6{ background:linear-gradient(120deg, var(--deep), #134855 70%, #0f6b63); }
.g-cap{
  position:absolute; left:12px; bottom:12px; z-index:2; max-width:calc(100% - 24px);
  padding:8px 14px; border-radius:12px;
  background:rgba(11,36,46,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  color:#fff; font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.3;
}
.g-cap .bn{ display:block; font-weight:500; font-size:1rem; color:var(--teal-lt); margin-top:1px; }
@media(max-width:900px){ .gallery{ padding:76px 0; } .gallery-track{ animation-duration:32s; } }

/* =====================================================================
   BLOG SINGLE — page hero / breadcrumb
   ===================================================================== */
.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--teal); z-index:1200; transition:width .1s linear; }
.page-hero{
  position:relative; padding:96px 0 72px;
  background:linear-gradient(rgba(11,36,46,.8), rgba(15,47,60,.9)), url("../images/banner-1.jpg") center/cover no-repeat;
}
.breadcrumb-nav{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-family:var(--font-head); font-weight:600; font-size:1rem; margin-bottom:20px; }
.breadcrumb-nav a{ color:rgba(255,255,255,.65); transition:color .2s; }
.breadcrumb-nav a:hover{ color:var(--teal-lt); }
.breadcrumb-nav .bc-sep{ color:rgba(255,255,255,.35); }
.breadcrumb-nav .bc-current{ color:var(--teal-lt); font-family:var(--font-bn); }
.page-hero h1{ color:#fff; font-family:var(--font-bn); font-weight:700; font-size:clamp(1.7rem,3.8vw,2.6rem); line-height:1.35; max-width:860px; }
.hero-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-top:24px; }
.hero-meta .cat-pill{ background:var(--teal); color:#fff; font-family:var(--font-bn); font-weight:600; font-size:1rem; padding:6px 16px; border-radius:100px; }
.hero-meta .hm{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.85); font-family:var(--font-bn); font-size:1rem; }
.hero-meta .hm svg{ width:16px; height:16px; stroke:var(--teal-lt); fill:none; }
.hero-meta .hm-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.4); }

/* ---- article layout ---- */
.article-wrap{ padding:80px 0 40px; }
.article-grid{ display:grid; grid-template-columns:56px minmax(0,760px); gap:44px; justify-content:center; align-items:start; }
.share-rail{ position:sticky; top:110px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.share-label{ font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.share-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; cursor:pointer; color:var(--deep);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.share-btn:hover{ background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-2px); }
.share-btn.copied{ background:var(--teal-2); border-color:var(--teal-2); color:#fff; }
.share-btn svg{ width:17px; height:17px; stroke:currentColor; }

/* ---- article typography (Bangla-first) ---- */
.article{ font-family:var(--font-bn); font-size:1.06rem; line-height:1.95; color:#2a4750; }
.article .lead{ font-size:1.2rem; color:var(--ink); font-weight:500; }
.article p{ margin-bottom:18px; }
.article h2{ font-family:var(--font-bn); font-weight:700; font-size:1.5rem; color:var(--deep); margin:40px 0 14px; }
.article h3{ font-family:var(--font-bn); font-weight:700; font-size:1.18rem; color:var(--deep); margin:30px 0 10px; }
.article ul{ margin:0 0 20px; padding-left:6px; list-style:none; display:grid; gap:10px; }
.article ul li{ position:relative; padding-left:26px; }
.article ul li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(18,168,155,.15); }
.article blockquote{
  margin:32px 0; padding:26px 30px; background:var(--paper);
  border-left:4px solid var(--teal); border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.14rem; color:var(--deep); font-weight:500;
}
.article blockquote cite{ display:block; margin-top:12px; font-style:normal; font-size:1rem; color:var(--teal-2); font-family:var(--font-head); font-weight:600; }
.a-figure{ margin:30px 0; }
.a-figure-ph{
  aspect-ratio:16/8; border-radius:var(--radius); display:grid; place-items:center;
  background:radial-gradient(620px 300px at 70% 20%, #17505f, var(--deep));
}
.a-figure-ph svg{ width:64px; height:64px; stroke:rgba(255,255,255,.5); fill:none; }
.a-figure img{ width:100%; border-radius:var(--radius); }
.a-figure figcaption{ text-align:center; font-size:1rem; color:var(--muted); margin-top:10px; }
.note{
  display:flex; gap:14px; align-items:flex-start; margin:26px 0;
  background:rgba(18,168,155,.07); border:1px solid rgba(18,168,155,.25);
  border-radius:var(--radius); padding:18px 22px;
}
.note svg{ flex:none; width:22px; height:22px; stroke:var(--teal-2); fill:none; margin-top:4px; }
.note p{ margin:0; font-size:1rem; }
.a-cta{
  margin:40px 0 0; padding:30px 34px; border-radius:var(--radius);
  background:linear-gradient(120deg,var(--deep),#134855 70%,#0f6b63);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.a-cta h3{ color:#fff; margin:0 0 6px; font-size:1.25rem; }
.a-cta p{ color:rgba(255,255,255,.8); margin:0; font-size:1rem; }

/* ---- tags + inline share + author ---- */
.article-foot{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.article-foot .tag{
  font-family:var(--font-bn); font-weight:500; font-size:1rem; color:var(--deep);
  background:var(--paper); border:1px solid var(--line); padding:7px 16px; border-radius:100px;
  transition:background .2s, color .2s, border-color .2s;
}
.article-foot .tag:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
.share-inline{ display:flex; gap:8px; }
.author-card{
  margin-top:36px; background:var(--paper); border-radius:var(--radius);
  padding:26px 30px; display:flex; gap:22px; align-items:center;
}
.author-card img{ flex:none; width:88px; height:88px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:var(--shadow-sm); }
.author-card .ac-label{ font-family:var(--font-bn); font-size:1rem; color:var(--muted); display:block; }
.author-card h4{ font-size:1.15rem; margin:2px 0; }
.author-card .ac-role{ font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--teal-2); display:block; margin-bottom:8px; }
.author-card p{ margin:0; font-size:1rem; color:var(--muted); line-height:1.7; }
.related{ padding:60px 0 100px; }

/* ---- single post: bordered card, no hover lift ---- */
.article-post{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px, 4vw, 44px);
}
.article-post .article > .a-figure:first-child{ margin-top:0; }
.tag-list a{
  font-family:var(--font-bn); font-weight:500; font-size:1rem; color:var(--deep);
  background:var(--paper); border:1px solid var(--line); padding:7px 16px; border-radius:100px;
  transition:background .2s, color .2s, border-color .2s;
}
.tag-list a:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* ---- comments ---- */
.comments-area{
  margin-top:36px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(24px, 4vw, 44px);
}
.postbox__comment-title,
.postbox-details-form-title{
  font-family:var(--font-head); font-size:1.4rem; font-weight:800; color:var(--deep);
  margin-bottom:26px;
}
.mn-postbox-comments ul{ list-style:none; margin:0; padding:0; }
.mn-postbox-comments ul ul{ padding-left:clamp(20px, 5vw, 56px); }
.postbox__comment-box{
  display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--paper-2);
}
.postbox__comment-avater img{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:3px solid var(--paper); box-shadow:var(--shadow-sm);
}
.postbox__comment-text{ flex:1; min-width:0; }
.postbox__comment-name{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.postbox__comment-name h5{ font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--deep); margin:0; }
.postbox__comment-name .post-meta{ margin:0; font-size:1rem; color:var(--muted); }
.postbox__comment-text p{ color:var(--muted); margin-bottom:10px; line-height:1.7; }
.postbox__comment-reply a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--teal-2);
  transition:color .2s ease;
}
.postbox__comment-reply a:hover{ color:var(--teal); }
.postbox__comment.pb-50{ margin-bottom:40px; }

/* comment form */
.comment-respond .comment-notes,
.comment-respond .logged-in-as{ color:var(--muted); font-size:1rem; margin-bottom:22px; }
.comment-respond .logged-in-as a{ color:var(--teal-2); }
.postbox-details-input{ margin-bottom:20px; }
.postbox-details-input label{
  display:block; font-family:var(--font-head); font-weight:600; font-size:1rem;
  color:var(--deep); margin-bottom:8px;
}
.postbox-details-input .required{ color:var(--teal-2); }
.postbox-details-input input[type="text"],
.postbox-details-input input[type="email"],
.postbox-details-input textarea{
  width:100%; height:52px; padding:0 18px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.postbox-details-input textarea{ height:auto; min-height:160px; padding:14px 18px; resize:vertical; }
.postbox-details-input input:focus,
.postbox-details-input textarea:focus{ border-color:var(--teal); background:#fff; }
.postbox-details-remeber{ display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; }
.postbox-details-remeber input{ margin-top:5px; accent-color:var(--teal); }
.postbox-details-remeber label{ color:var(--muted); font-size:1rem; }
.comment-respond .mn-btn-px{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:#fff;
  background:var(--teal); border:0; border-radius:100px; padding:15px 32px; cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(18,168,155,.7);
  transition:background .2s ease, transform .2s ease;
}
.comment-respond .mn-btn-px:hover{ background:var(--teal-2); transform:translateY(-2px); }
.comment-respond .mn-btn-px .text-2{ display:none; }
.comment-respond #cancel-comment-reply-link{ margin-left:12px; font-size:1rem; color:var(--muted); }

@media(max-width:800px){
  .article-grid{ grid-template-columns:1fr; gap:0; }
  .share-rail{ display:none; }
  .article-wrap{ padding:56px 0 20px; }
  .page-hero{ padding:70px 0 54px; }
  .author-card{ flex-direction:column; text-align:center; }
  .a-cta{ padding:26px; }
  .postbox__comment-box{ flex-direction:column; gap:12px; }
}

/* =====================================================================
   BLOG / HEALTH TIPS
   ===================================================================== */

.blog-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:48px; flex-wrap:wrap; }
.blog-head .bh-left{ max-width:560px; }
.blog-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:10px; }
.blog-head p{ color:var(--muted); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-grid .post{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.blog-grid .post:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.post-thumb{ aspect-ratio:16/9; position:relative; overflow:hidden; display:grid; place-items:center; }
.post-thumb.t1{ background:radial-gradient(600px 300px at 70% 20%, #17505f, var(--deep)); }
.post-thumb.t2{ background:linear-gradient(140deg, var(--teal-2), var(--deep)); }
.post-thumb.t3{ background:radial-gradient(500px 300px at 20% 80%, #14515f, #0d2a35); }
.post-thumb svg{ width:64px; height:64px; stroke:rgba(255,255,255,.55); fill:none; }
.post-thumb-link{ position:absolute; inset:0; display:grid; place-items:center; }
.post-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
/* .blog-grid prefix beats Elementor's `.elementor img{height:auto}` reset so
   the featured image fills the thumb inside the PD Blog widget too */
.blog-grid .post-thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-grid .post:hover .post-thumb img{ transform:scale(1.05); }
.post-cat{ position:absolute; top:14px; left:14px; font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(18,168,155,.9); padding:5px 12px; border-radius:100px; }
.post-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.post-meta{ display:flex; align-items:center; gap:8px; font-size:1rem; color:var(--muted); margin-bottom:12px; }
.post-meta svg{ width:14px; height:14px; stroke:var(--teal-2); }
.blog-grid .post h3{ font-size:1.18rem; line-height:1.35; margin-bottom:10px; font-family:var(--font-bn); font-weight:700; }
.blog-grid .post p{ color:var(--muted); font-size:1rem; font-family:var(--font-bn); margin-bottom:18px; flex:1; }
.post-link{ font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--teal-2); display:inline-flex; align-items:center; gap:7px; }
.post-link svg{ width:16px; height:16px; stroke:var(--teal-2); transition:transform .2s; }
.blog-grid .post:hover .post-link svg{ transform:translateX(4px); }
@media(max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; }}
@media(max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ padding:100px 0; background:var(--paper); }
.faq-wrap{ max-width:800px; margin:0 auto; counter-reset:faq; }
.faq-item{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  margin-bottom:14px; overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
/* gradient accent bar that grows down the left edge when the item opens */
.faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:linear-gradient(180deg, var(--teal), var(--teal-lt));
  transform:scaleY(0); transform-origin:top; transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.faq-item:hover{ border-color:rgba(18,168,155,.35); }
.faq-item.open{ border-color:rgba(18,168,155,.4); box-shadow:0 16px 38px rgba(15,47,60,.09); }
.faq-item.open::before{ transform:scaleY(1); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:20px 24px; display:flex; align-items:center; gap:16px;
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--deep);
  transition:color .25s;
}
/* running number, magazine style */
.faq-q::before{
  counter-increment:faq; content:counter(faq, decimal-leading-zero);
  flex:none; min-width:30px; font-size:1.05rem; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(135deg, var(--teal), var(--teal-lt));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--teal);
  opacity:.75; transition:opacity .25s;
}
.faq-item.open .faq-q::before{ opacity:1; }
.faq-q .q-text{ flex:1; }
.faq-q .bn{ font-weight:600; }
.faq-q .plus{
  margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  display:grid; place-items:center; transition:.25s;
}
.faq-q .plus svg{ width:15px; height:15px; stroke:var(--teal-2); transition:transform .25s; }
.faq-item.open .faq-q .plus{ background:linear-gradient(135deg, var(--teal), var(--teal-lt)); border-color:transparent; }
.faq-item.open .faq-q .plus svg{ stroke:#fff; transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
/* answer indented to line up with the question text, past the number */
.faq-a .faq-a-inner{ padding:0 60px 22px 70px; color:var(--muted); font-family:var(--font-bn); font-size:1rem; line-height:1.75; }
@media(max-width:600px){
  .faq{ padding:76px 0; }
  .faq-q{ padding:18px 18px; gap:12px; }
  .faq-a .faq-a-inner{ padding:0 18px 20px 60px; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:#0b242e; color:rgba(255,255,255,.7); padding:72px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:52px; }
.footer .brand-name{ color:#fff; }
.footer .brand img{ width:48px; }
.footer-col p{ font-size:1rem; margin-top:18px; }
.footer-col h5{ font-family:var(--font-head); color:#fff; font-size:1.05rem; margin-bottom:20px; }
.footer-col ul{ list-style:none; display:grid; gap:12px; padding:0; margin:0; }
.footer-col ul a{ font-size:1rem; transition:color .2s; }
.footer-col ul a:hover{ color:var(--teal-lt); }
/* teal chevron marker instead of the empty left gap — Quick Links & Categories */
.footer-col ul:not(.footer-contact) li{ position:relative; padding-left:18px; }
.footer-col ul:not(.footer-contact) li::before{
  content:""; position:absolute; left:0; top:.5em; width:6px; height:6px;
  border-right:2px solid var(--teal-lt); border-top:2px solid var(--teal-lt);
  transform:rotate(45deg); transition:transform .2s ease;
}
.footer-col ul:not(.footer-contact) li:hover::before{ transform:rotate(45deg) translate(2px,-2px); }
.footer-contact li{
  display:flex; gap:12px; margin-bottom:14px; font-size:1rem;
  color:rgba(255,255,255,.7);
  transition:color .35s ease, transform .35s ease;
}
/* clickable phone/email rows lay out (and colour) exactly like the plain rows */
.footer-contact a{
  display:flex; gap:12px; color:inherit; text-decoration:none;
  transition:color .35s ease;
}
.footer-contact svg{
  width:18px; height:18px; stroke:var(--teal-lt); flex:none; margin-top:3px;
  transition:stroke .35s ease, transform .35s ease;
}
/* hover: text brightens and the icon pops to full teal */
.footer-contact li:hover{ color:#fff; transform:translateX(4px); }
.footer-contact li:hover a{ color:#fff; } /* beat the generic .footer-col ul a:hover */
.footer-contact li:hover svg{ stroke:var(--teal); transform:scale(1.12); }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .2s; }
.footer-social a:hover{ background:var(--teal); }
.footer-social a svg{ width:17px; height:17px; stroke:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; text-align:center; font-size:1rem; }
.footer-bottom a{ color:var(--teal-lt); }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   FLOATING ACTION BUTTONS
   ===================================================================== */
.fabs{ position:fixed; right:20px; bottom:22px; z-index:60; display:flex; flex-direction:column; gap:16px; }
.fab{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; box-shadow:0 10px 30px -6px rgba(0,0,0,.35); transition:transform .2s; position:relative; }
.fab:hover{ transform:scale(1.08); }
.fab.wa{ background:var(--wa); --fab-glow:#25d366; }
.fab.call{ background:var(--teal); --fab-glow:var(--teal-lt); }
.fab svg{ width:26px; height:26px; position:relative; z-index:2; }
.fab.wa svg{ fill:#fff; }
.fab.call svg{ stroke:#fff; fill:none; }

/* rotating glow arc that travels around the rim (always-on circular motion) */
.fab::before{
  content:""; position:absolute; inset:-3px; border-radius:50%; padding:3px; z-index:1;
  background:conic-gradient(from 0deg, transparent 0deg, var(--fab-glow) 65deg, #ffffff 105deg, var(--fab-glow) 150deg, transparent 240deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:blur(1.5px) drop-shadow(0 0 7px var(--fab-glow));
  animation:fab-spin 2.8s linear infinite;
}
/* soft halo that pulses outward */
.fab::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0;
  box-shadow:0 0 0 0 var(--fab-glow);
  animation:fab-halo 2.4s ease-out infinite;
}
.fab.call::after{ animation-delay:1.2s; } /* offset so the two don't pulse in lockstep */
@keyframes fab-spin{ to{ transform:rotate(1turn); } }
@keyframes fab-halo{
  0%{   box-shadow:0 0 0 0 color-mix(in srgb, var(--fab-glow) 55%, transparent); }
  70%{  box-shadow:0 0 0 15px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media(max-width:600px){ .fab{ width:52px; height:52px; } }

/* ---- floating action stack (WhatsApp + Call + Back-to-top), bottom-right ---- */
.float-stack{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
/* shared round button — WhatsApp / Call share the back-to-top look */
.float-btn{
  width:48px; height:48px; border-radius:50%; cursor:pointer; border:0; padding:0;
  display:grid; place-items:center; text-decoration:none; position:relative;
  box-shadow:0 10px 26px -6px rgba(15,47,60,.4);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.float-btn:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 16px 34px -6px rgba(15,47,60,.5); }
.float-btn svg{ width:24px; height:24px; position:relative; z-index:2; }
/* default colours (overridden by Customizer → Floating Buttons) */
.float-whatsapp{ background:#25d366; --fab-glow:#25d366; }
.float-whatsapp svg{ fill:#fff; }
.float-call{ background:var(--teal); --fab-glow:var(--teal-lt); }
.float-call svg{ stroke:#fff; }

/* always-on rotating glow arc travelling around the rim (circular motion) */
.float-btn::before{
  content:""; position:absolute; inset:-4px; border-radius:50%; padding:4px; z-index:1;
  background:conic-gradient(from 0deg, transparent 0deg, var(--fab-glow) 60deg, #ffffff 105deg, var(--fab-glow) 155deg, transparent 250deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:blur(1px) drop-shadow(0 0 8px var(--fab-glow));
  animation:fab-spin 2.6s linear infinite;
}
/* soft halo pulsing outward */
.float-btn::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0;
  box-shadow:0 0 0 0 var(--fab-glow);
  animation:fab-halo 2.4s ease-out infinite;
}
.float-call::after{ animation-delay:1.2s; } /* offset so the two don't pulse in lockstep */

/* back to top (bg + icon stroke come from Customizer → Back To Top). Sits at
   the bottom of the stack and pops in on scroll; the always-on WhatsApp/Call
   buttons drop to the corner when it's hidden. */
.back-to-top{
  width:48px; height:48px; border-radius:50%; cursor:pointer; border:0; padding:0;
  background:var(--teal); /* fallback; overridden by the customizer output */
  display:none; place-items:center;
  box-shadow:0 10px 26px -6px rgba(15,47,60,.4);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.back-to-top.show{ display:grid; animation:fabIn .4s cubic-bezier(.16,1,.3,1); }
.back-to-top:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 16px 34px -6px rgba(15,47,60,.5); }
.back-to-top svg{ width:22px; height:22px; stroke:#fff; }
@keyframes fabIn{ from{ opacity:0; transform:translateY(16px) scale(.9); } to{ opacity:1; transform:none; } }
@media(max-width:600px){
  .float-stack{ right:16px; bottom:16px; gap:12px; }
  .float-btn, .back-to-top{ width:44px; height:44px; }
}

/* =====================================================================
   PRELOADER — pulse-line reveal + curtain slide-up (PhysioDoor)
   bg + brand colours come from Customizer → Preloader Settings
   ===================================================================== */
body.pd-preloading{ overflow:hidden; }
.pd-preloader{
  --pd-accent:var(--teal); /* pulse + bar colour, overridden by the customizer */
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  display:grid; place-items:center; background-color:var(--deep);
  transition:transform .9s cubic-bezier(.76,0,.24,1);
}
.pd-preloader::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 46% at 50% 40%, rgba(18,168,155,.22), transparent 70%);
}
/* curtain: whole overlay slides up, content fades first */
.pd-preloader.is-done{ transform:translateY(-100%); }
.pd-preloader__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transition:opacity .45s ease, transform .5s ease;
}
.pd-preloader.is-done .pd-preloader__inner{ opacity:0; transform:translateY(-16px); }
/* ECG / pulse line draws and travels — the physiotherapy signature */
.pd-pulse{ width:140px; height:46px; overflow:visible; }
.pd-pulse path{
  fill:none; stroke:var(--pd-accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:300; stroke-dashoffset:300;
  animation:pd-draw 1.9s cubic-bezier(.65,0,.35,1) infinite;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--pd-accent) 55%, transparent));
}
@keyframes pd-draw{ 0%{ stroke-dashoffset:300; } 55%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-300; } }
.pd-brand{ font-family:var(--font-head); font-weight:800; font-size:1.45rem; letter-spacing:.01em; color:#fff; }
.pd-bar{ width:200px; height:3px; border-radius:4px; background:rgba(255,255,255,.16); overflow:hidden; }
.pd-bar span{ display:block; width:0; height:100%; border-radius:4px; background:var(--pd-accent); transition:width .25s ease; }
.pd-count{ font-family:var(--font-head); font-weight:600; font-size:.85rem; letter-spacing:.1em; color:rgba(255,255,255,.55); }
@media(prefers-reduced-motion:reduce){
  .pd-pulse path{ animation:none; stroke-dashoffset:0; }
  .pd-preloader, .pd-preloader__inner{ transition:none; }
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto; } .fab::before, .fab::after, .float-btn::before, .float-btn::after{ animation:none; } }

/* =====================================================================
   APPOINTMENT FORM  (Elementor "PD Appointment Form" widget + CF7)
   The widget prints .pd-appt (card + badge + title); CF7 prints the
   form inside .pd-appt__form. The CF7 template wraps its fields in
   .pd-appt-grid / .pd-field (see the pasted form code).
   ===================================================================== */
.pd-appt{
  --pd-appt-accent:var(--teal);
  position:relative; overflow:hidden;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.pd-appt__title{
  font-size:clamp(1.9rem, 4vw, 2.8rem); line-height:1.1;
  color:var(--teal); margin:0;
}
.pd-appt__notice{
  background:var(--paper); border:1px dashed var(--line);
  border-radius:var(--radius-sm); padding:16px 18px;
  color:var(--muted); font-weight:500; text-align:center;
}

/* ---- Centered layout (single card) ---- */
.pd-appt--centered{
  padding:56px 60px;
  background:
    radial-gradient(120% 120% at 100% 0, rgba(78,203,192,.10), transparent 55%),
    #fff;
}
.pd-appt--centered::after{
  content:""; position:absolute; right:-70px; top:-70px;
  width:240px; height:240px; border-radius:50%;
  border:2px solid rgba(91,163,188,.20); pointer-events:none;
}
.pd-appt--centered .pd-appt__head{ text-align:center; margin-bottom:36px; }
.pd-appt--centered .pd-appt__eyebrow{ display:inline-flex; justify-content:center; margin-bottom:14px; }

/* ---- Split layout (teal info panel + form) ---- */
.pd-appt--split{
  display:grid; grid-template-columns:0.86fr 1.14fr; align-items:stretch;
}
.pd-appt__aside{
  position:relative; overflow:hidden;
  padding:52px 44px;
  background:linear-gradient(158deg, var(--deep) 0%, var(--teal-2) 58%, var(--teal) 100%);
  color:#fff;
  display:flex; flex-direction:column;
}
.pd-appt__aside::before{
  content:""; position:absolute; left:-70px; top:-70px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.pd-appt__aside::after{
  content:""; position:absolute; right:-90px; bottom:-90px;
  width:260px; height:260px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18); pointer-events:none;
}
.pd-appt--split .pd-appt__head{ position:relative; z-index:1; text-align:left; margin-bottom:16px; }
.pd-appt--split .pd-appt__eyebrow{ display:inline-flex; justify-content:flex-start; margin-bottom:14px; }
.pd-appt--split .pd-appt__aside .eyebrow{ color:#fff; }
.pd-appt--split .pd-appt__aside .eyebrow::before{ background:rgba(255,255,255,.75); }
.pd-appt--split .pd-appt__title{ color:#fff; }
.pd-appt__desc{
  position:relative; z-index:1;
  color:rgba(255,255,255,.86); margin:0 0 26px; line-height:1.6;
}
.pd-appt__contact{
  position:relative; z-index:1;
  list-style:none; margin:auto 0 0; padding:0;
  display:flex; flex-direction:column; gap:15px;
}
.pd-appt__contact li{ display:flex; align-items:center; gap:13px; color:rgba(255,255,255,.92); font-weight:500; font-size:.98rem; }
.pd-appt__contact svg{ width:20px; height:20px; flex:none; opacity:.9; }
.pd-appt__contact a{ color:inherit; }
.pd-appt__contact a:hover{ color:#fff; text-decoration:underline; }
/* form column: vertically centered so it aligns to the taller info panel */
.pd-appt__main{ padding:52px 46px; display:flex; flex-direction:column; justify-content:center; }
/* strong full-width CTA in the split form column */
.pd-appt--split .pd-field.pd-submit{ justify-content:stretch; }
.pd-appt--split .pd-field.pd-submit input[type=submit]{ width:100%; }

/* ---- CF7 field grid ---- */
.pd-appt .pd-appt-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 22px;
}
.pd-appt .pd-field{ margin:0; min-width:0; }
.pd-appt .pd-field.pd-full{ grid-column:1 / -1; }
.pd-appt .pd-field.pd-submit{
  grid-column:1 / -1; display:flex; justify-content:center;
  margin-top:10px;
}

/* CF7 wraps each control in a span.wpcf7-form-control-wrap — make it fill */
.pd-appt .wpcf7-form-control-wrap{ display:block; width:100%; }

/* ---- inputs / select / date ---- */
.pd-appt input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.pd-appt select,
.pd-appt textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:16px 20px; line-height:1.4; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance:none; appearance:none;
}
.pd-appt textarea{ min-height:110px; height:110px; resize:vertical; }
.pd-appt input::placeholder,
.pd-appt textarea::placeholder{ color:var(--muted); opacity:1; }
.pd-appt input:focus,
.pd-appt select:focus,
.pd-appt textarea:focus{
  border-color:var(--pd-appt-accent);
  background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pd-appt-accent) 18%, transparent);
}

/* custom chevron for the service select */
.pd-appt select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b727b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center;
  padding-right:48px; cursor:pointer;
}

/* native date field: keep the mm/dd/yyyy look tidy */
.pd-appt input[type=date]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }

/* ---- submit button (reuses the .btn-primary look) ---- */
.pd-appt input[type=submit]{
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  color:#fff; background:var(--pd-appt-accent);
  border:0; border-radius:100px; cursor:pointer;
  padding:15px 34px;
  box-shadow:0 12px 24px -10px color-mix(in srgb, var(--pd-appt-accent) 70%, transparent);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.pd-appt input[type=submit]:hover{
  background:var(--teal-2); transform:translateY(-3px);
  box-shadow:0 18px 30px -10px color-mix(in srgb, var(--pd-appt-accent) 85%, transparent);
}
.pd-appt input[type=submit]:active{ transform:translateY(0) scale(.97); }

/* ---- CF7 validation / response messages ---- */
.pd-appt .wpcf7-not-valid-tip{ color:var(--bkash); font-size:.85rem; margin-top:6px; }
.pd-appt .wpcf7-form-control.wpcf7-not-valid{ border-color:var(--bkash); }
.pd-appt .wpcf7-response-output{
  grid-column:1 / -1; margin:18px 0 0; border-radius:var(--radius-sm);
  padding:12px 16px; font-size:.95rem;
}
.pd-appt .wpcf7 form.invalid .wpcf7-response-output,
.pd-appt .wpcf7 form.unaccepted .wpcf7-response-output{ border-color:var(--bkash); color:var(--bkash); }
.pd-appt .wpcf7 form.sent .wpcf7-response-output{ border-color:var(--teal); color:var(--teal-2); }
.pd-appt .wpcf7-spinner{ margin:0 0 0 12px; }

/* ---- responsive ---- */
@media (max-width:900px){
  /* split stacks: info panel on top, form below */
  .pd-appt--split{ grid-template-columns:1fr; }
  .pd-appt__aside{ padding:40px 34px; }
  .pd-appt__aside::after{ width:180px; height:180px; right:-70px; bottom:-70px; }
  .pd-appt__contact{ margin-top:24px; }
  .pd-appt__main{ padding:38px 34px; }
}
@media (max-width:820px){
  .pd-appt--centered{ padding:44px 40px; }
  .pd-appt--centered .pd-appt__head{ margin-bottom:30px; }
}
@media (max-width:600px){
  .pd-appt{ border-radius:22px; }
  .pd-appt--centered{ padding:30px 20px; }
  .pd-appt--centered::after{ width:150px; height:150px; right:-50px; top:-50px; }
  .pd-appt--centered .pd-appt__head{ margin-bottom:24px; }
  .pd-appt__aside{ padding:32px 24px; }
  .pd-appt__main{ padding:30px 22px; }
  .pd-appt__title{ font-size:1.7rem; }
  .pd-appt .pd-appt-grid{ grid-template-columns:1fr; gap:14px; }
  .pd-appt input:not([type=submit]):not([type=checkbox]):not([type=radio]),
  .pd-appt select,
  .pd-appt textarea{ padding:14px 16px; border-radius:12px; }
  .pd-appt select{ background-position:right 16px center; padding-right:44px; }
  .pd-appt textarea{ min-height:100px; }
  .pd-appt .pd-field.pd-submit{ margin-top:6px; }
  .pd-appt input[type=submit]{ width:100%; padding:15px 24px; }
}
@media (max-width:380px){
  .pd-appt--centered{ padding:24px 16px; }
  .pd-appt__aside,
  .pd-appt__main{ padding:26px 18px; }
  .pd-appt__title{ font-size:1.5rem; }
}

/* =====================================================================
   CONTACT INFO CARDS  (Elementor "PD Contact Info" widget)
   Repeater cards: icon tile + title + content. Animation is handled by the
   shared GSAP "Items Animation" (data-pd-anim) — no [data-reveal] here.
   ===================================================================== */
.contact-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.info-card{
  --pd-cinfo-accent:var(--teal);
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:32px 28px;
  box-shadow:0 10px 30px -22px rgba(15,47,60,.4);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.info-card::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg, var(--pd-cinfo-accent), var(--teal-lt));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.info-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -26px rgba(15,47,60,.5); border-color:transparent; }
.info-card:hover::before{ transform:scaleX(1); }
.info-card__icon{
  width:56px; height:56px; border-radius:16px; margin-bottom:20px;
  /* inline-grid so the card's text-align (Layout → Text Align) positions it */
  display:inline-grid; place-items:center;
  background:var(--paper-2); color:var(--teal-2);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.info-card__icon svg{ width:26px; height:26px; }
.info-card:hover .info-card__icon{ background:linear-gradient(150deg,var(--pd-cinfo-accent),var(--teal-2)); color:#fff; transform:rotate(-6deg); }
.info-card:hover .info-card__icon svg{ stroke:#fff; color:#fff; }
.info-card__title{ font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--teal); margin-bottom:10px; }
.info-card p{ color:var(--muted); font-size:.96rem; line-height:1.6; margin:0; }
.info-card a{ color:var(--muted); transition:color .2s ease; }
.info-card a:hover{ color:var(--teal-2); }

@media (max-width:1100px){ .contact-info{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .contact-info{ grid-template-columns:1fr; gap:18px; }
  .info-card{ padding:26px 24px; }
}

/* =====================================================================
   CONTACT VISUAL  (Elementor "PD Contact Visual" widget)
   Rounded image wrapper + gradient overlay + floating number/label badge.
   ===================================================================== */
.contact-visual{
  position:relative; overflow:hidden;
  border-radius:26px; min-height:420px;
  box-shadow:var(--shadow);
}
.contact-visual img{ width:100%; height:100%; object-fit:cover; }
.contact-visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(15,47,60,.35));
}
.contact-visual__badge{
  position:absolute; left:22px; bottom:22px; z-index:1;
  display:flex; flex-direction:column; line-height:1.1;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-radius:16px; padding:14px 20px; box-shadow:var(--shadow-sm);
}
.contact-visual__badge strong{ font-family:var(--font-head); font-weight:800; font-size:1.7rem; color:var(--teal-2); }
.contact-visual__badge span{ font-size:.85rem; color:var(--muted); font-weight:500; }

@media (max-width:600px){
  .contact-visual{ min-height:300px; }
}

/* =====================================================================
   CONTACT FORM  (CF7 — "Get In Touch With Us", .pdc-form)
   Paste the CF7 form code (see contact-cf7-form.txt). CF7 wraps each control
   in span.wpcf7-form-control-wrap; the .pdc-grid / .pdc-field / .pdc-full
   markup lives inside the CF7 form template.
   ===================================================================== */
/* card shell (from the "PD Contact Form" widget) */
.contact-form-wrap{
  background:#fff; border:1px solid var(--line); border-radius:26px;
  padding:46px 44px; box-shadow:var(--shadow);
}
.contact-form-wrap h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); color:var(--teal); margin:12px 0 12px; }
.contact-form-lead{ color:var(--muted); margin-bottom:28px; }

.pdc-form{ --pdc-accent:var(--teal); }
.pdc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.pdc-field{ min-width:0; }
.pdc-field.pdc-full{ grid-column:1 / -1; }
.pdc-form .wpcf7-form-control-wrap{ display:block; width:100%; }

.pdc-form input:not([type=submit]),
.pdc-form textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:15px 18px; line-height:1.4; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.pdc-form textarea{ min-height:130px; resize:vertical; }
.pdc-form input::placeholder,
.pdc-form textarea::placeholder{ color:var(--muted); opacity:1; }
.pdc-form input:focus,
.pdc-form textarea:focus{
  border-color:var(--pdc-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pdc-accent) 16%, transparent);
}

/* submit — CF7 renders an <input type=submit>, so the arrow is a background SVG */
.pdc-form input[type=submit]{
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:#fff;
  background-color:var(--pdc-accent); border:0; border-radius:100px; cursor:pointer;
  padding:15px 48px 15px 30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 22px center;
  box-shadow:0 12px 24px -10px color-mix(in srgb, var(--pdc-accent) 70%, transparent);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, background-color .3s ease;
}
.pdc-form input[type=submit]:hover{
  background-color:var(--teal-2); transform:translateY(-3px);
  box-shadow:0 18px 30px -10px color-mix(in srgb, var(--pdc-accent) 85%, transparent);
}
.pdc-form input[type=submit]:active{ transform:translateY(0) scale(.97); }

/* CF7 validation / response messages */
.pdc-form .wpcf7-not-valid-tip{ color:var(--bkash); font-size:.85rem; margin-top:6px; }
.pdc-form .wpcf7-form-control.wpcf7-not-valid{ border-color:var(--bkash); }
.pdc-form .wpcf7-response-output{ grid-column:1 / -1; margin:16px 0 0; border-radius:var(--radius-sm); padding:12px 16px; font-size:.95rem; }
.pdc-form .wpcf7 form.sent .wpcf7-response-output{ border-color:var(--teal); color:var(--teal-2); }

@media (max-width:600px){
  .contact-form-wrap{ padding:30px 22px; border-radius:22px; }
  .pdc-grid{ grid-template-columns:1fr; gap:14px; }
  .pdc-form input[type=submit]{ width:100%; }
}