/* ==========================================================
   P4 Cancer Hospital - visual refresh layer
   Loaded after style.css and responsive.css.
   Keep legacy CSS intact; refine presentation with overrides.
   ========================================================== */
:root {
    --p4-navy: #123b5d;
    --p4-navy-deep: #0c2b45;
    --p4-teal: #168c8c;
    --p4-text: #344054;
    --p4-muted: #667085;
    --p4-soft: #f4f7fa;
    --p4-border: #e4eaf0;
    --p4-white: #fff;
    --p4-radius: 14px;
    --p4-shadow: 0 10px 30px rgba(18, 59, 93, .09);
}

html { scroll-behavior: smooth; }
body {
    color: var(--p4-text);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(22, 140, 140, .45);
    outline-offset: 3px;
}
h1, h2, h3, h4, h5, h6 { color: var(--p4-navy); line-height: 1.3; }
p { color: var(--p4-text); }

/* Header and navigation */
header {
    position: relative;
    z-index: 100;
    background: rgba(255,255,255,.98);
    box-shadow: 0 3px 20px rgba(18,59,93,.08);
}
header .header-area {
    align-items: center;
    padding: 12px clamp(16px, 4vw, 58px);
    gap: 22px;
}
header .header-area .logo-area {
    display: flex;
    align-items: center;
    width: auto;
    min-width: 180px;
    max-width: 255px;
}
header .logo-area img { display:block; width:100%; height:auto; }
header .header-area .navbar-area { width: auto; flex: 1; }
header .navbar-area .nav-container { max-width: 100%; padding-left: 0; padding-right: 0; }
header .navbar-area .nav-container .navbar-collapse .navbar-nav { align-items:center; gap: 2px; }
header .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a {
    color: var(--p4-navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: none;
    padding: 13px 11px;
}
header .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a:hover,
header .navbar-area .nav-container .navbar-collapse .navbar-nav > li:last-child > a {
    color: var(--p4-teal);
}
header .navbar-area .nav-container .navbar-collapse .navbar-nav > li:last-child > a {
    border: 1px solid var(--p4-teal);
    border-radius: 7px;
    padding: 11px 15px;
}
header .navbar-area .nav-container .navbar-collapse .navbar-nav > li:last-child > a:hover {
    background: var(--p4-teal);
    color: #fff;
}

/* Homepage hero */
.home-slider { padding-top: 0; padding-bottom: 28px; }
.home-slider .home-slider-wrapper .slider-items { position: relative; overflow: hidden; }
.home-slider .home-slider-wrapper .slider-items .slider-img {
    min-height: 520px;
    background-position: center;
    background-size: cover;
}
.home-slider .home-slider-wrapper .slider-items .slider-content-area {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    display: flex;
    align-items: center;
    width: min(58%, 760px);
    padding: clamp(24px, 6vw, 82px);
    background: linear-gradient(90deg, rgba(8,35,57,.94), rgba(8,35,57,.78) 76%, rgba(8,35,57,0));
}
.home-slider .home-slider-wrapper .slider-items .slider-content-area .slider-content { max-width: 620px; }
.home-slider .slider-heading {
    color: #fff !important;
    font-size: clamp(30px, 3.4vw, 52px) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em;
    text-shadow: none !important;
    margin-bottom: 20px;
}
.home-slider .p4-hero-intro { color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.7; max-width: 540px; margin: 0 0 24px; }
.home-slider .p4-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap: 12px; margin-top: 18px; }
.home-slider .p4-hero-button,
.home-slider .p4-hero-actions .main-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid var(--p4-teal);
    border-radius: 7px;
    background: var(--p4-teal);
    color:#fff !important;
    font-weight:700;
    text-decoration:none;
}
.home-slider .p4-hero-button:hover { background:#fff; color:var(--p4-navy) !important; border-color:#fff; }
.home-slider .p4-hero-phone { color:#fff; font-weight:700; padding:10px 4px; text-decoration:none; }
.home-slider .p4-hero-phone:hover { color:#9ee8e3; }

/* Section spacing and readable headings */
.p4-section { padding: 72px 0; }
.p4-section--light { background: var(--p4-soft); }
.heading, .heading-3 { color: var(--p4-navy); letter-spacing: -.015em; }
.service.three.padding-100 { padding-top: 65px; padding-bottom: 65px; }
.service-left .heading-3 { font-size: clamp(25px, 2.5vw, 34px); line-height:1.25; margin-bottom: 10px; }
.check-box-area { background: #fff; border: 1px solid var(--p4-border); border-radius: var(--p4-radius); padding: 22px 24px; height:100%; }
.check-box-area .check-box { margin:0; padding-left:0; }
.check-box-area .check-box li { color:var(--p4-text); line-height:1.55; padding: 10px 0 10px 28px; border-bottom:1px solid #eef2f6; }
.check-box-area .check-box li:last-child { border-bottom:0; }
.service .service-right .service-item,
.service-item {
    width: auto;
    max-width: 100%;
    height: calc(100% - 20px);
    margin: 10px 0;
    padding: 26px 20px;
    border: 1px solid var(--p4-border);
    border-radius: var(--p4-radius);
    background: #fff;
    box-shadow: 0 5px 18px rgba(18,59,93,.04);
}
.service-item:hover { transform: translateY(-3px); box-shadow: var(--p4-shadow); border-color: rgba(22,140,140,.35); }
.service-item img { max-width:100%; object-fit:contain; }
.service-item .heading-6 { color:var(--p4-navy); font-size:15px; line-height:1.45; word-break:normal; }

/* Forms, buttons, and modal */
.form-control, input.form-control, textarea.form-control, select.form-control {
    min-height: 46px;
    border: 1px solid #d7e0e8;
    border-radius: 7px;
    box-shadow: none;
    color: var(--p4-text);
}
.form-control:focus { border-color:var(--p4-teal); box-shadow:0 0 0 3px rgba(22,140,140,.12); }
.main-btn, .btn-info, input[type="submit"].btn {
    border-radius: 7px;
    font-weight: 700;
}
#exampleModal .modal-content { border:0; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(8,35,57,.25); }
#exampleModal .modal-header { background:var(--p4-navy); padding:18px 22px; border:0; }
#exampleModal .modal-header h5, #exampleModal .modal-header strong { color:#fff !important; }
#exampleModal .modal-body { background:#fff; padding:22px; }
#exampleModal .modal-footer { background:#fff; border-top:1px solid var(--p4-border); }
#exampleModal .modal-footer .btn { background:var(--p4-teal) !important; border-color:var(--p4-teal) !important; color:#fff; }

/* Footer */
.footer-area { background:#0c2b45; color:rgba(255,255,255,.82); }
.footer-area .footer-top { padding: 55px clamp(16px, 4vw, 60px) 35px; }
.footer-area .widget-title { color:#fff; font-size:18px; font-weight:700; margin-bottom:18px; }
.footer-area .details, .footer-area p, .footer-area .logo-widget ul li,
.footer-area .logo-widget ul li a, .footer-area .logo-widget ul li .icon,
.footer-area .logo-widget ul a { color:rgba(255,255,255,.82); }
.footer-area .logo-widget ul { padding-left:0; list-style:none; }
.footer-area .logo-widget ul li { overflow-wrap:anywhere; }
.footer-area .footer-social-icon { display:flex; flex-wrap:wrap; gap:10px; }
.footer-area .footer-social-icon .icon {
    display:inline-flex;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
}
.footer-area .footer-social-icon .icon:hover { background:var(--p4-teal); color:#fff; }
.footer-area .copyright-area { background:#082238; }
.footer-area .copyright-area-inner { color:rgba(255,255,255,.75) !important; padding:15px 0; }
.facebook-feed-footer { width:100%; max-width:340px; margin:0 auto; }
.facebook-feed-footer iframe { max-width:100%; }

/* Floating controls: keep clear of narrow screens */
.whatsaap-box { bottom: 24px !important; }
.quote { z-index: 99; }

@media (max-width: 1199px) {
    header .header-area { padding: 12px 22px; }
    header .header-area .logo-area { min-width:150px; max-width:205px; }
    header .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a { padding:10px 7px; font-size:12px; }
    .home-slider .home-slider-wrapper .slider-items .slider-content-area { width:68%; }
}
@media (max-width: 991px) {
    header .header-area { flex-wrap:wrap; }
    header .header-area .logo-area { min-width:150px; max-width:220px; }
    header .header-area .navbar-area { width:100%; }
    header .navbar-area .nav-container { padding:0; }
    header .navbar-area .nav-container .navbar-collapse .navbar-nav { align-items:stretch; gap:0; padding:8px 0 12px; }
    header .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a { display:block; padding:11px 14px; font-size:14px; }
    header .navbar-area .nav-container .navbar-collapse .navbar-nav > li:last-child > a { display:inline-block; margin:5px 12px; }
    .home-slider .home-slider-wrapper .slider-items .slider-img { min-height:450px; }
    .home-slider .home-slider-wrapper .slider-items .slider-content-area { width:80%; padding:35px; }
}
@media (max-width: 575px) {
    header .header-area { padding:10px 14px; gap:10px; }
    header .header-area .logo-area { min-width:0; max-width:185px; width:70%; }
    .home-slider { padding-bottom:15px; }
    .home-slider .home-slider-wrapper .slider-items .slider-img { min-height:430px; }
    .home-slider .home-slider-wrapper .slider-items .slider-content-area {
        width:100%;
        padding:26px 20px;
        background:linear-gradient(90deg, rgba(8,35,57,.92), rgba(8,35,57,.78));
    }
    .home-slider .slider-heading { font-size:30px !important; margin-bottom:14px; }
    .home-slider .p4-hero-intro { font-size:15px; }
    .home-slider .p4-hero-actions { align-items:flex-start; flex-direction:column; gap:8px; }
    .p4-section { padding:42px 0; }
    .service.three.padding-100 { padding-top:40px; padding-bottom:40px; }
    .footer-area .footer-top { padding:38px 18px 25px; }
    .facebook-feed-footer { max-width:100%; }
    .whatsaap-box { bottom:16px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}