/* =========================================================
   MUKATA HEALTH SERVICES
   PRIVACY NOTICE PAGE
========================================================= */

:root {
    --privacy-blue: #07509a;
    --privacy-blue-dark: #062f69;
    --privacy-blue-deep: #041f49;
    --privacy-blue-light: #eaf3ff;
    --privacy-gold: #f4b52d;
    --privacy-gold-light: #fff5d9;
    --privacy-text: #18283d;
    --privacy-muted: #68788d;
    --privacy-border: #e5ebf2;
    --privacy-bg: #f7faff;
    --privacy-shadow: 0 20px 55px rgba(4, 31, 73, .10);
}


/* =========================================================
   PRIVACY HERO
========================================================= */

.privacy-hero {
    position: relative;
    overflow: hidden;
    color: #fff;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(244, 181, 45, .18),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(255, 255, 255, .08),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #062d68 0%,
            #07509a 52%,
            #0a62ae 100%
        );

    padding: 85px 0;
}


.privacy-hero-pattern {
    position: absolute;
    inset: 0;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to right,
            #000,
            transparent 90%
        );
}


.privacy-eyebrow {
    display: inline-flex;
    align-items: center;

    color: var(--privacy-gold);

    border-left: 3px solid var(--privacy-gold);

    padding-left: 13px;

    margin-bottom: 18px;

    font-size: .99rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.privacy-hero h1 {
    font-family: "Playfair Display", serif;

    font-size: clamp(
        3rem,
        6vw,
        5rem
    );

    line-height: 1.05;

    margin: 0 0 25px;
}


.privacy-hero h1 span {
    color: var(--privacy-gold);
}


.privacy-hero > .container > .row > .col-lg-8 > p {
    max-width: 720px;

    color: rgba(255,255,255,.82);

    font-size: 1.08rem;

    line-height: 1.85;

    margin-bottom: 25px;
}


.privacy-date {
    display: inline-flex;
    align-items: center;

    padding: 10px 16px;

    border-radius: 8px;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.18);

    color: rgba(255,255,255,.84);

    font-size: .99rem;

    backdrop-filter: blur(8px);
}


/* =========================================================
   PRIVACY HERO CARD
========================================================= */

.privacy-hero-card {
    position: relative;

    padding: 35px;

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,.18);

    background: rgba(255,255,255,.10);

    backdrop-filter: blur(15px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.18);

    overflow: hidden;
}


.privacy-hero-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background: rgba(244,181,45,.15);

    top: -90px;
    right: -60px;

    filter: blur(5px);
}


.privacy-hero-icon {
    position: relative;

    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background: var(--privacy-gold);

    color: var(--privacy-blue-deep);

    font-size: 1.6rem;

    margin-bottom: 23px;
}


.privacy-hero-card h3 {
    position: relative;

    font-family: "Playfair Display", serif;

    font-size: 1.8rem;

    line-height: 1.25;

    margin-bottom: 14px;
}


.privacy-hero-card h3 span {
    color: var(--privacy-gold);
}


.privacy-hero-card p {
    position: relative;

    color: rgba(255,255,255,.72);

    margin: 0;

    font-size: .99rem;

    line-height: 1.8;
}


/* =========================================================
   PRIVACY CONTENT SECTION
========================================================= */

.privacy-content-section {
    background: var(--privacy-bg);

    padding: 95px 0;
}


/* =========================================================
   SIDEBAR
========================================================= */

.privacy-sidebar {
    position: sticky;

    top: 105px;
}


.privacy-sidebar-title {
    color: var(--privacy-blue-deep);

    font-size: 1.05rem;

    font-weight: 800;

    padding-bottom: 17px;

    margin-bottom: 8px;

    border-bottom: 1px solid var(--privacy-border);
}


.privacy-sidebar-title i {
    color: var(--privacy-blue);
}


.privacy-navigation {
    display: grid;

    gap: 2px;

    margin-bottom: 30px;
}


.privacy-navigation a {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #53657a;

    padding: 11px 12px;

    border-radius: 8px;

    font-size: .99rem;

    font-weight: 600;

    transition: .25s ease;
}


.privacy-navigation a span {
    flex: 0 0 30px;

    color: var(--privacy-blue);

    font-size: .73rem;

    font-weight: 800;

    letter-spacing: .04em;
}


.privacy-navigation a:hover {
    color: var(--privacy-blue);

    background: #fff;

    transform: translateX(4px);

    box-shadow:
        0 7px 25px rgba(4,31,73,.05);
}


/* =========================================================
   SIDEBAR CONTACT CARD
========================================================= */

.privacy-sidebar-contact {
    padding: 25px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(244,181,45,.13),
            transparent 30%
        ),
        #fff;

    border: 1px solid var(--privacy-border);

    box-shadow:
        0 10px 35px rgba(4,31,73,.06);
}


.sidebar-contact-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: var(--privacy-blue-light);

    color: var(--privacy-blue);

    border-radius: 13px;

    margin-bottom: 15px;
}


.privacy-sidebar-contact h5 {
    font-family: "Playfair Display", serif;

    color: var(--privacy-blue-deep);

    font-size: 1.25rem;

    margin-bottom: 8px;
}


.privacy-sidebar-contact p {
    color: var(--privacy-muted);

    font-size: .99rem;

    line-height: 1.7;

    margin-bottom: 17px;
}


.privacy-sidebar-contact a {
    display: block;

    color: var(--privacy-blue);

    font-size: .99rem;

    font-weight: 700;

    margin-top: 8px;
}


.privacy-sidebar-contact a:hover {
    color: var(--privacy-blue-dark);
}


/* =========================================================
   PRIVACY DOCUMENT
========================================================= */

.privacy-document {
    background: #fff;

    border: 1px solid var(--privacy-border);

    border-radius: 24px;

    padding: 50px;

    box-shadow:
        0 15px 50px rgba(4,31,73,.06);
}


/* =========================================================
   INTRO
========================================================= */

.privacy-intro {
    display: flex;

    gap: 20px;

    padding-bottom: 38px;

    margin-bottom: 10px;

    border-bottom: 1px solid var(--privacy-border);
}


.privacy-section-icon {
    flex: 0 0 62px;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background: var(--privacy-blue-light);

    color: var(--privacy-blue);

    font-size: 1.45rem;
}


.privacy-small-label {
    display: block;

    color: var(--privacy-blue);

    font-size: .99rem;

    font-weight: 800;

    letter-spacing: .14em;

    margin-bottom: 6px;
}


.privacy-intro h2 {
    font-family: "Playfair Display", serif;

    color: var(--privacy-blue-deep);

    font-size: 2rem;

    margin-bottom: 8px;
}


.privacy-intro h2 span {
    color: var(--privacy-blue);
}


.privacy-intro p {
    color: var(--privacy-muted);

    font-size: .99rem;

    margin: 0;

    line-height: 1.8;
}


/* =========================================================
   DOCUMENT SECTIONS
========================================================= */

.privacy-document-section {
    display: flex;

    gap: 25px;

    padding: 35px 0;

    border-bottom: 1px solid var(--privacy-border);

    scroll-margin-top: 105px;
}


.document-number {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--privacy-blue);

    color: #fff;

    font-size: .75rem;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(7,80,154,.17);
}


.document-content {
    flex: 1;
}


.document-content h3 {
    color: var(--privacy-blue-deep);

    font-family: "Playfair Display", serif;

    font-size: 1.65rem;

    margin: 2px 0 12px;
}


.document-content p {
    color: var(--privacy-muted);

    font-size: .99rem;

    line-height: 1.85;

    margin-bottom: 15px;
}


/* =========================================================
   PRIVACY LIST
========================================================= */

.privacy-list {
    list-style: none;

    padding: 0;

    margin: 15px 0 0;
}


.privacy-list li {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    color: #42566d;

    font-size: .99rem;

    padding: 6px 0;

    line-height: 1.65;
}


.privacy-list li i {
    color: var(--privacy-blue);

    margin-top: 5px;

    font-size: .78rem;
}


/* =========================================================
   WARNING BOX
========================================================= */

.privacy-warning {
    display: flex;

    gap: 16px;

    margin-top: 20px;

    padding: 20px;

    border-radius: 13px;

    background: var(--privacy-gold-light);

    border: 1px solid rgba(244,181,45,.35);
}


.warning-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--privacy-gold);

    color: var(--privacy-blue-deep);
}


.privacy-warning strong {
    color: var(--privacy-blue-deep);

    display: block;

    margin-bottom: 4px;

    font-size: .99rem;
}


.privacy-warning p {
    margin: 0;

    font-size: .99rem;

    line-height: 1.7;

    color: #687060;
}


/* =========================================================
   CONTACT SECTION
========================================================= */

.privacy-contact-section {
    padding-top: 40px;

    scroll-margin-top: 105px;
}


.contact-section-icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    background: var(--privacy-blue-light);

    color: var(--privacy-blue);

    border-radius: 15px;

    font-size: 1.4rem;

    margin-bottom: 18px;
}


.privacy-contact-section h3 {
    font-family: "Playfair Display", serif;

    color: var(--privacy-blue-deep);

    font-size: 2rem;

    margin-bottom: 10px;
}


.privacy-contact-section h3 span {
    color: var(--privacy-blue);
}


.privacy-contact-section > p {
    color: var(--privacy-muted);

    font-size: .99rem;

    line-height: 1.8;

    margin-bottom: 25px;
}


/* =========================================================
   COMPANY CONTACT CARD
========================================================= */

.company-contact-card {
    display: flex;

    align-items: center;

    gap: 25px;

    padding: 25px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #eaf3ff
        );

    border: 1px solid #dce9f8;
}


.company-contact-logo {
    flex: 0 0 155px;

    background: #fff;

    border-radius: 10px;

    padding: 10px;

    box-shadow:
        0 8px 25px rgba(4,31,73,.07);
}


.company-contact-logo img {
    width: 100%;

    height: auto;

    display: block;
}


.company-contact-details {
    flex: 1;
}


.company-contact-details h4 {
    color: var(--privacy-blue-deep);

    font-family: "Playfair Display", serif;

    font-size: 1.25rem;

    margin-bottom: 15px;
}


.contact-detail-item {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin-bottom: 12px;
}


.contact-detail-item:last-child {
    margin-bottom: 0;
}


.contact-detail-item > i {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #fff;

    color: var(--privacy-blue);

    font-size: .82rem;
}


.contact-detail-item small {
    display: block;

    color: var(--privacy-muted);

    font-size: .99rem;

    margin-bottom: 1px;
}


.contact-detail-item a,
.contact-detail-item span {
    color: #30465e;

    font-size: .99rem;

    font-weight: 600;

    word-break: break-word;
}


.contact-detail-item a:hover {
    color: var(--privacy-blue);
}


/* =========================================================
   LAST UPDATED
========================================================= */

.privacy-last-updated {
    margin-top: 30px;

    padding: 13px 16px;

    border-radius: 9px;

    background: #f8fafc;

    border: 1px solid var(--privacy-border);

    color: var(--privacy-muted);

    font-size: .99rem;

    text-align: center;
}


.privacy-last-updated i {
    color: var(--privacy-blue);
}


/* =========================================================
   PRIVACY CTA
========================================================= */

.privacy-cta-section {
    background: #fff;

    padding: 0 0 100px;
}


.privacy-cta {
    position: relative;

    overflow: hidden;

    border-radius: 25px;

    padding: 55px;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244,181,45,.18),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #07509a,
            #062f69
        );

    box-shadow: var(--privacy-shadow);
}


.privacy-cta h2 {
    font-family: "Playfair Display", serif;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    line-height: 1.2;

    margin-bottom: 12px;
}


.privacy-cta h2 span {
    color: var(--privacy-gold);
}


.privacy-cta p {
    max-width: 700px;

    color: rgba(255,255,255,.72);

    margin: 0;

    line-height: 1.8;
}


.privacy-cta .btn-gold {
    min-width: 175px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .privacy-hero {
        padding: 70px 0;
    }


    .privacy-sidebar {
        position: static;
    }


    .privacy-navigation {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 4px;
    }


    .privacy-sidebar-contact {
        margin-bottom: 20px;
    }


    .privacy-document {
        padding: 40px;
    }

}


@media (max-width: 767.98px) {

    .privacy-hero {
        padding: 60px 0;
    }


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


    .privacy-hero-card {
        padding: 28px;
    }


    .privacy-content-section {
        padding: 65px 0;
    }


    .privacy-navigation {
        grid-template-columns: 1fr;
    }


    .privacy-document {
        padding: 28px 20px;

        border-radius: 18px;
    }


    .privacy-intro {
        gap: 14px;

        align-items: flex-start;
    }


    .privacy-section-icon {
        flex: 0 0 50px;

        width: 50px;
        height: 50px;

        font-size: 1.1rem;
    }


    .privacy-intro h2 {
        font-size: 1.7rem;
    }


    .privacy-document-section {
        gap: 15px;

        padding: 28px 0;
    }


    .document-number {
        flex: 0 0 37px;

        width: 37px;
        height: 37px;

        font-size: .68rem;
    }


    .document-content h3 {
        font-size: 1.35rem;
    }


    .document-content p,
    .privacy-list li {
        font-size: .88rem;
    }


    .privacy-warning {
        flex-direction: column;

        gap: 12px;
    }


    .company-contact-card {
        flex-direction: column;

        align-items: flex-start;
    }


    .company-contact-logo {
        width: 180px;

        flex: auto;
    }


    .privacy-cta {
        padding: 35px 24px;
    }

}


@media (max-width: 420px) {

    .privacy-hero h1 {
        font-size: 2.55rem;
    }


    .privacy-hero-card {
        padding: 23px;
    }


    .privacy-document {
        padding: 23px 16px;
    }


    .privacy-document-section {
        display: block;
    }


    .document-number {
        margin-bottom: 15px;
    }


    .privacy-intro {
        display: block;
    }


    .privacy-section-icon {
        margin-bottom: 15px;
    }


    .company-contact-logo {
        width: 160px;
    }


    .privacy-cta .btn {
        width: 100%;
    }

}