/* =========================================
   RESET
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --blue: #174f91;
    --blue-dark: #0d3567;
    --red: #d71920;
    --ink: #17324d;
    --muted: #64748b;
    --soft: #f5f8fc;
    --line: #dfe7f0;
    --white: #ffffff;
}

html { scroll-behavior: smooth; }

body {
    font-family: "Montserrat", Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.section { padding: 105px 0; }

.section-heading { margin-bottom: 55px; }
.section-heading.center { text-align: center; }

.eyebrow {
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 13px;
}

h1, h2, h3 { line-height: 1.2; }

.section-heading h2,
.section-copy h2,
.understanding-panel h2 {
    color: var(--ink);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 600;
}

.accent-line {
    width: 58px;
    height: 3px;
    background: var(--red);
    margin-top: 20px;
}

.accent-line.centered {
    margin-left: auto;
    margin-right: auto;
}

.lead {
    max-width: 650px;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 15px;
}


/* =========================================
   HEADER
   (single version — kept the sticky nav with
   the text logo; the earlier draft using
   .brand-logo <img> + .header-inner{height:80px}
   was a duplicate of these same selectors and
   has been removed to avoid conflicting rules)
========================================= */
.header {
    height: 82px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid #e8edf3;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -2.5px;
    text-decoration: none;
    flex-shrink: 0;
}
.brand-prio { color: #30383f; }
.brand-med { color: var(--red); }

/* If you use an image logo instead of the text brand, this still works
   alongside .brand above — just swap the markup, the class stays unique */
.brand-logo {
    display: block;
    width: 160px;
    height: auto;
    object-fit: contain;
}

.header-social {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, color .25s ease;
}
.header-social-btn:hover {
    background: var(--red);
    color: #fff;
}


/* =========================================
   HERO SLIDER
========================================= */
.hero-wrap {
    padding: 20px 0 24px;
    background: #ffffff;
}

.hero-slider {
    width: 80%;
    height: min(92vh, 850px);
    min-height: 620px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
    z-index: 1;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

.slider-dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
    padding: 8px 14px;
    background: rgba(255,255,255,.75);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(20,51,80,.12);
}
.dot {
    width: 11px;
    height: 11px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: .25s;
    opacity: .55;
}
.dot:hover { opacity: .85; }
.dot.active {
    background: var(--red);
    border-color: var(--red);
    transform: scale(1.25);
    opacity: 1;
}


/* =========================================
   BELIEF
========================================= */
.belief { background: #fff; }
.two-col {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: center;
}
.section-copy h1 {
    font-size: clamp(30px, 3.4vw, 44px);
    color: var(--ink);
}
.section-copy h1 span { color: var(--red); }
.section-copy > p:not(.eyebrow) {
    max-width: 590px;
    color: var(--muted);
    font-size: 17px;
    margin: 24px 0 30px;
}
.button {
    display: inline-block;
    background: var(--blue);
    color: white;
    padding: 14px 28px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    transition: .25s;
}
.button:hover { background: var(--red); }
.belief-visual {
    min-height: 420px;
    display: grid;
    place-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.belief-visual img {
    width: min(360px, 78%);
    height: auto;
}


/* =========================================
   SERVICES (bordered-card version)
========================================= */
.services { background: var(--soft); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.service-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    padding: 32px 28px 29px;
    min-height: 255px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(23,79,145,.35);
    box-shadow: 0 18px 38px rgba(20,51,80,.1);
}
.service-number {
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 25px;
}
.service-card h3 {
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 14px;
}
.service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}
.service-card a {
    display: inline-block;
    margin-top: 18px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}


/* =========================================
   SCIENCE OF CONNECTING
========================================= */
.connecting {
    background: var(--blue-dark);
    color: white;
}
.connecting .section-heading h2 { color: white; }
.connecting .eyebrow { color: #9fc5ed; }
.connecting .accent-line { background: var(--red); }
.connecting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.18);
}
.connect-card {
    background: var(--blue-dark);
    padding: 45px 35px;
    min-height: 245px;
}
.connect-card span {
    color: #9fc5ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}
.connect-card h3 {
    font-size: 28px;
    margin: 28px 0 15px;
}
.connect-card p { color: #d7e3ef; font-size: 14px; }


/* =========================================
   UNDERSTANDING
========================================= */
.understanding { background: #fff; }
.understanding-panel p:not(.eyebrow) {
    color: var(--muted);
    font-size: 15px;
    margin-top: 23px;
    max-width: 600px;
}
.understanding-art {
    min-height: 410px;
    position: relative;
    overflow: hidden;
    background: #f4f7fb;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
}
.art-ring {
    position: absolute;
    width: 310px;
    height: 310px;
    border: 1px solid #c7d7e8;
    border-radius: 50%;
}
.art-ring::after {
    content: "";
    position: absolute;
    inset: 38px;
    border: 1px solid #dce6f0;
    border-radius: 50%;
}
.art-word {
    position: relative;
    z-index: 2;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 700;
    letter-spacing: -3px;
    color: var(--blue);
}
.art-word span { color: var(--red); }
.understanding-art p {
    position: absolute;
    bottom: 28px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =========================================
   SPECIALITIES (nav card grid — different
   from the icon-based .specialties section
   further down; names are similar but classes
   don't collide)
========================================= */
.specialities { background: var(--soft); }
.speciality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.speciality-card {
    min-height: 145px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    transition: .25s;
}
.speciality-card span {
    display: block;
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 30px;
}
.speciality-card h3 {
    font-size: 17px;
    font-weight: 600;
}
.speciality-card:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-4px);
}
.speciality-card:hover span { color: #fff; }


/* =========================================
   SITE FOOTER (generic content footer —
   separate from .pf-footer below, which is
   the PRIOMED brand footer with logo/social/
   contact block)
========================================= */
.footer {
    background: #f4f7fb;
    border-top: 1px solid var(--line);
}
.footer-main {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 90px;
    padding: 85px 0;
}
.footer-about h2 {
    max-width: 580px;
    font-size: clamp(30px, 4vw, 45px);
    color: var(--ink);
}
.footer-about > p:not(.eyebrow) {
    max-width: 570px;
    color: var(--muted);
    margin: 20px 0 25px;
}
.footer-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.footer-side h3 {
    font-size: 16px;
    margin-bottom: 20px;
}
.footer-side a,
.footer-side p {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 11px;
}
.footer-side a:hover { color: var(--red); }
.light-button { background: var(--red); }
.light-button:hover { background: var(--blue); }

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 18px 0;
}
.footer-bottom p {
    color: #8290a0;
    font-size: 11px;
}


.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    z-index: 999;
    transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }


/* =========================================
   MAIN SITE — RESPONSIVE
========================================= */
@media (max-width: 1000px) {
    .header-social { gap: 8px; }
    .brand-logo { width: 130px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .speciality-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-slider { height: 78vh; min-height: 520px; }
}

@media (max-width: 760px) {
    .container { width: min(100% - 30px, 1200px); }
    .header { height: 72px; }
    .header-social-btn { width: 32px; height: 32px; }

    .hero-wrap { padding: 12px 0 18px; }
    .hero-slider {
        width: 80%;
        height: 72vh;
        min-height: 460px;
        border-radius: 4px;
    }

    .section { padding: 75px 0; }
    .two-col,
    .footer-main { grid-template-columns: 1fr; gap: 45px; }
    .reverse-mobile .understanding-panel { order: 1; }
    .reverse-mobile .understanding-art { order: 2; }
    .belief-visual, .understanding-art { min-height: 330px; }

    .services-grid,
    .connecting-grid { grid-template-columns: 1fr; }
    .speciality-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-side { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 450px) {
    .brand { font-size: 29px; }
    .hero-slider { min-height: 360px; height: 65vh; }
    .speciality-grid,
    .footer-side { grid-template-columns: 1fr; }
}


/* =========================================
   SERVICES SECTION (icon-card version)
   Namespaced under .services-section so it no
   longer collides with .services-grid /
   .service-card from the bordered-card version
   above. Wrap its HTML in
   <div class="services-section">…</div>
========================================= */
.services-section {
    width: 100%;
    background: #ffffff;
    padding-top: 64px;
    padding-bottom: 43px;
}

.services-section .services-container {
    width: min(1200px, calc(100% - 100px));
    margin: 0 auto;
}

.services-section .services-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.services-section .services-heading h1 {
    color: #273c4b;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: 0.4px;
    text-transform: capitalize;
}

.services-section .services-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
    row-gap: 24px;
}

.services-section .service-card {
    width: 100%;
    height: 277px;
    background: #edf8f7;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-section .service-icon {
    width: 100%;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.services-section .service-icon img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.services-section .service-content {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

.services-section .service-content h2 {
    color: #172f3d;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 14px;
}

.services-section .service-content p {
    color: #153b52;
    font-size: 15px;
    font-weight: 400;
    line-height: 2.05;
    margin: 0 auto;
    max-width: 420px;
}

@media (max-width: 1000px) {
    .services-section .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .services-section { padding-top: 48px; padding-bottom: 30px; }
    .services-section .services-container { width: min(100% - 30px, 1200px); }
    .services-section .services-grid { grid-template-columns: 1fr; row-gap: 20px; }
    .services-section .service-card { height: auto; padding: 20px 0 26px; }
    .services-section .service-icon { height: 100px; }
    .services-section .service-icon img { width: 68px; height: 68px; }
    .services-section .service-content p { font-size: 14px; line-height: 1.7; }
}


/* =========================================
   SPECIALTIES (icon grid). Tokens are scoped
   to this section instead of :root, so they
   can't silently override the site's global
   --ink / --red defined at the top of this file.
========================================= */
.specialties {
    --sp-ink: #2b2d33;
    --sp-red: #f0655a;
    --sp-blue: #5aa9e6;

    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px 80px;
    text-align: center;
}

.specialties__eyebrow {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-ink);
}

.specialties__title {
    margin: 4px 0 48px;
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-red);
}

.specialties__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 48px;
    column-gap: 16px;
}

.specialty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.specialty__label {
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-ink);
}

.specialty__icon {
    width: 88px;
    height: 88px;
}

.specialty__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--blue svg { stroke: var(--sp-blue); }
.icon--red svg { stroke: var(--sp-red); }

@media (max-width: 900px) {
    .specialties__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .specialties__grid { grid-template-columns: repeat(2, 1fr); }
    .specialties__eyebrow, .specialties__title { font-size: 24px; }
}


/* =========================================
   NUMBERS (stat cards). Tokens scoped locally
   for the same reason as above.
========================================= */
.numbers {
    --nb-ink: #1c1c22;
    --nb-red: #f0655a;
    --nb-teal: #1fb28f;
    --nb-grey: #6b6f76;
    --nb-card-bg: #ffffff;
    --nb-card-shadow: 0 20px 45px rgba(60,70,150,0.08);

    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px 80px;
    text-align: center;
    position: relative;
}

.numbers__eyebrow {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--nb-ink);
}

.numbers__title {
    margin: 4px 0 48px;
    font-size: 28px;
    font-weight: 700;
    color: var(--nb-red);
}

.numbers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
}

.number-card {
    background: var(--nb-card-bg);
    border-radius: 16px;
    box-shadow: var(--nb-card-shadow);
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.number-card__value {
    font-size: 40px;
    font-weight: 700;
    color: var(--nb-teal);
    line-height: 1;
}

.number-card__label {
    font-size: 16px;
    color: var(--nb-grey);
}

.numbers__doodle {
    margin-top: 32px;
}

@media (max-width: 768px) {
    .numbers__grid { grid-template-columns: 1fr; }
    .numbers__eyebrow, .numbers__title { font-size: 26px; }
}


/* =========================================
   TESTIMONIALS (fade slider)
========================================= */
.testimonials {
    background: var(--soft);
}

.testimonials .section-heading h2 { color: var(--ink); }

.testimonial-slider {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    min-height: 300px;
}

.testimonial-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 26px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(20, 51, 80, .08);
}
.testimonial-slide.active {
    opacity: 1;
    z-index: 1;
    position: relative;
}

.testimonial-quote-mark {
    font-size: 56px;
    line-height: 1;
    color: var(--red);
    font-family: Georgia, "Times New Roman", serif;
    margin-bottom: 6px;
}

.testimonial-quote {
    font-size: 17px;
    color: var(--ink);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 22px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.testimonial-name {
    font-weight: 700;
    color: var(--blue);
    font-size: 15px;
}

.testimonial-role {
    font-size: 13px;
    color: var(--muted);
}

.testimonial-dots {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.t-dot {
    width: 11px;
    height: 11px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: .25s;
    opacity: .55;
}
.t-dot:hover { opacity: .85; }
.t-dot.active {
    background: var(--red);
    border-color: var(--red);
    transform: scale(1.25);
    opacity: 1;
}

@media (max-width: 700px) {
    .testimonial-quote { font-size: 16px; }
    .testimonial-slider { min-height: 360px; }
}


/* =========================================
   COMPANIES THAT TRUST US (logo grid).
   Note: the earlier ".companies .container /
   .company-grid / .company-logo" block was a
   first draft of this exact section and has
   been removed — .ctrust below fully replaces it.
========================================= */
.ctrust {
    padding: 64px 24px;
    background: #ffffff;
}

.ctrust__container {
    max-width: 1200px;
    margin: 0 auto;
}

.ctrust__heading {
    text-align: center;
    margin-bottom: 48px;
}

.ctrust__heading h2 {
    margin: 0;
    font-size: 28x;
    font-weight: 700;
    color: #1c1c22;
}

.ctrust__underline {
    width: 56px;
    height: 3px;
    background: #f0655a;
    margin: 14px auto 0;
}

.ctrust__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.ctrust__box {
    height: 110px;
    border: 1px solid #e6e6ea;
    border-radius: 6px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
}

.ctrust__box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.75;
    transition: filter .2s ease, opacity .2s ease;
}

@media (max-width: 900px) {
    .ctrust__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .ctrust__grid { grid-template-columns: repeat(2, 1fr); }
    .ctrust__box { height: 90px; }
}


.pf-footer{
  --pf-bg:#000000;
  --pf-red:#e63946;
  --pf-white:#ffffff;
  --pf-grey:#c9c9d1;
  --pf-orange:#f5a623;
  --pf-blue:#2b5cff;

  background:var(--pf-bg);
  padding:64px 48px;
  font-family:'Poppins','Segoe UI',Arial,sans-serif;
}

.pf-footer *{ box-sizing:border-box; }

.pf-footer__inner{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:40px;
}

/* Explicit rule for the brand column so the logo, tagline
   and social icons stack predictably */
.pf-footer__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pf-brand-logo{
  height:54px;
  width:auto;
  display:block;
  object-fit:contain;
  margin-bottom:22px;
}

.pf-footer__tagline{
  color:var(--pf-grey);
  font-size:17px;
  margin:0 0 26px;
}

.pf-footer__social{
  display:flex;
  gap:10px;
}

.pf-social-btn{
  width:38px;
  height:38px;
  border-radius:6px;
  background:#1a1a1d;
  color:var(--pf-white);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .2s ease;
}

.pf-social-btn:hover{
  background:#2a2a2e;
}

/* Contact column */

.pf-footer__contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  min-width:260px;
  padding-top:6px;
}

.pf-contact-line{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--pf-white);
  font-size:17px;
  text-decoration:none;
}

.pf-contact-line__icon{
  display:flex;
  color:var(--pf-white);
}

.pf-contact-underline{
  width:320px;
  max-width:100%;
  height:2px;
  background:var(--pf-blue);
  position:relative;
  margin-top:4px;
}

.pf-contact-underline::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:60px;
  height:2px;
  background:var(--pf-orange);
}

@media (max-width:768px){
  .pf-footer__inner{flex-direction:column;}
  .pf-footer__brand{align-items:flex-start;}
  .pf-contact-underline{width:100%;}
}

@media (max-width:480px){
  .pf-brand-logo{height:44px;}
}