/* ================================================================
   PRIVACY POLICY PAGE
   css/privacypolicy.css

   Loaded by privacypolicy.php via $pageCss, after header.css and
   before global-typography.css.

   This is a deliberate mirror of css/termsconditions.css - the two
   legal pages are the same page with different content, and they
   should not be able to drift apart. Every value below is the one
   already in use on the Terms & Conditions page:

     header.php  - unchanged, supplies the topbar, logo, DigiLocker /
                   Pehchaan / API Setu badges, nav and $basePath
     footer.php  - unchanged, the dark footer with Useful Links,
                   Our Programmes, Address, social and the legal note
     banner      - the same two-part banner contact.php uses: navy
                   panel with a Home / PAGE pill, a large heading with
                   a light-blue accent word, a short white rule and a
                   lead paragraph on the left, photo on the right
     cards       - the card style the sections on index.php use:
                   white, 1px #E4EAF8, 18px radius, soft shadow
     container   - 92% capped at 1380px, then 94% <=1199, 90% <=767,
                   92% <=480, with 48px section padding

   NOTHING in this file edits any other page. Every selector is
   prefixed .pp- so it cannot reach the header, the footer or the
   Terms & Conditions page.

   SPECIFICITY NOTE - this is not optional and was a real bug on the
   Terms page. global-typography.css loads AFTER this file and pins
   every heading level, plus p, li and a, with !important:

       h1 46px  h2 35px  h3 30px  h4 25px  h5 20px  h6 16px
       p  16px  li 16px  a  15px

   A plain rule cannot outrank an !important, so every heading,
   paragraph, bullet and link below carries its own !important.
   Without them the card headings render at 30px and the bullets at
   16px against 15px body text, which is what made the first build
   look wrong.

   Additions on this page, which the Terms page does not have:
     .pp-subhead-center  a centred section heading
     .pp-card-centred    a full-width centred card
     .pp-note            the blue note strip under the three cards
     .pp-list-check      tick bullets instead of the round dots
     .pp-card-sm         the smaller heading used inside the
                         three "Information We Collect" cards
   ================================================================ */


/* ================================================================
   1.  BANNER
   Mirrors contact.php's recognition-and-validity-banner.
   ================================================================ */

.pp-banner {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
}

.pp-banner-content {
    width: 52%;
    padding: 80px 6% 80px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

/* the Home / PAGE breadcrumb pill */
.pp-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}
.pp-banner-badge i {
    font-size: 15px;
    line-height: 1;
}

.pp-banner-content h1 {
    margin: 0 !important;
    max-width: 600px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: 1.08 !important;
    font-weight: 700;
    letter-spacing: -1.5px;
}
.pp-banner-content h1 span {
    color: #A9C7FF;
}

.pp-banner-line {
    width: 50px;
    height: 3px;
    margin: 25px 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
}

.pp-banner-content p {
    max-width: 520px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .90);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

/* photo half */
.pp-banner-image {
    width: 48%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.pp-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.pp-banner-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}
.pp-banner:hover .pp-banner-photo img {
    transform: scale(1.04);
}


/* ================================================================
   2.  SECTION + CONTAINER
   ================================================================ */

.pp-section {
    width: 100%;
    padding: 48px 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(8, 103, 213, 0.07), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(8, 103, 213, 0.05), transparent 26%),
        #F5F8FC;
    font-family: Arial, Helvetica, sans-serif;
}

.pp-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
}


/* ================================================================
   3.  CARDS
   ================================================================ */

.pp-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06);
    padding: 30px 32px;
    margin-bottom: 24px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.pp-card:hover {
    border-color: #C9D8F6;
    box-shadow: 0 12px 28px rgba(16, 42, 90, .10);
}

/* the two- and three-up rows */
.pp-grid,
.pp-grid-3 {
    display: grid;
    gap: 24px;
    align-items: start;
}
.pp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* in a row the cards manage their own bottom gap */
.pp-grid > .pp-card,
.pp-grid-3 > .pp-card {
    margin-bottom: 0;
}
.pp-grid + .pp-grid,
.pp-grid + .pp-subhead-center,
.pp-subhead-center + .pp-grid-3,
.pp-grid-3 + .pp-note,
.pp-note + .pp-grid {
    margin-top: 24px;
}


/* ================================================================
   4.  TYPE INSIDE THE CARDS
   !important throughout, to beat global-typography.css
   ================================================================ */

/* a section heading inside a card */
.pp-card h3 {
    margin: 0 0 14px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

/* the smaller heading inside the three "Information We Collect"
   cards - these are labels, not section headings */
.pp-card-sm h3 {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px !important;
    margin-bottom: 12px !important;
}

/* the centred heading above the three-up row */
.pp-subhead-center {
    margin: 32px 0 18px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: center !important;
}

.pp-card p {
    margin: 0 0 14px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.65 !important;
    text-align: left !important;
}
.pp-card p:last-child {
    margin-bottom: 0 !important;
}

.pp-card strong {
    color: #0B1F4D;
    font-weight: 700;
}

.pp-card a {
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: inherit !important;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
.pp-card a:hover {
    text-decoration: underline;
}


/* ================================================================
   5.  LISTS
   Two bullet styles: round navy dots (the default, as on the Terms
   page) and ticks, which is what this policy uses throughout.
   !important required - global-typography pins li at 16px.
   ================================================================ */

.pp-card ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.pp-card ul:last-child {
    margin-bottom: 0;
}
.pp-card ul li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 20px;
    color: #3A4A63;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6 !important;
    text-align: left;
}
.pp-card ul li:last-child {
    margin-bottom: 0;
}

/* round dot */
.pp-card ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0D6EFD;
}

/* tick

   SPECIFICITY - these carry `.pp-card ul` as well as the list class,
   and that is required, not decoration. The dot rules above are

       .pp-card ul li         -> 0,1,2
       .pp-card ul li::before -> 0,1,2

   while a bare

       .pp-list-check li      -> 0,1,1

   loses to them, so the ticks silently rendered as round dots.
   Measured before this fix: li::before content was "" with a 6px
   width and a solid blue background - the dot, not a tick. Adding
   the .pp-card ul prefix lifts these to 0,2,2 so they win. */
.pp-card ul.pp-list-check li {
    padding-left: 24px;
}
.pp-card ul.pp-list-check li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}


/* ================================================================
   6.  INTRO, CENTRED AND CONTACT CARDS
   ================================================================ */

.pp-card-intro {
    text-align: center;
    padding: 36px 40px;
    margin-bottom: 24px;
}
.pp-card-intro h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
}
.pp-card-intro .pp-rule {
    width: 100%;
    max-width: 620px;
    height: 1px;
    margin: 16px auto 24px;
    background: #E4EAF8;
}
.pp-card-intro p {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* the full-width centred card - "Changes to This Policy" */
.pp-card-centred {
    margin-top: 24px;
    text-align: center;
    padding: 34px 40px 36px;
}
.pp-card-centred h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
}
.pp-card-centred .pp-rule {
    width: 100%;
    max-width: 700px;
    height: 1px;
    margin: 16px auto 22px;
    background: #E4EAF8;
}
.pp-card-centred p {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.pp-card-contact {
    margin-top: 24px;
    padding: 34px 36px 38px;
    text-align: center;
    /* a hairline in the brand navy along the top, as on the
       contact page's cards */
    border-top: 3px solid #0A56D8;
}
.pp-card-contact h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
}
.pp-card-contact .pp-rule {
    width: 100%;
    max-width: 700px;
    height: 1px;
    margin: 16px auto 22px;
    background: #E4EAF8;
}
/* Both selectors are scoped under .pp-card-contact on purpose. The bare
   .pp-contact-lead at (0,1,0) was being beaten by .pp-card p at (0,1,1) from
   line 265, which carries text-align:left !important and margin:0 0 14px
   !important. Higher specificity wins over source order even when the losing
   rule is !important and 194 lines earlier, so the centring and the auto
   margins were both discarded and the two lines sat flush left.
   Scoping to .pp-card-contact makes these (0,2,0), which is what the working
   siblings .pp-card-intro p and .pp-card-centred p in this same file already
   do. */
.pp-card-contact .pp-contact-lead {
    max-width: 720px;
    margin: 0 auto 14px !important;
    color: #5B6B85 !important;
    text-align: center !important;
}
.pp-card-contact .pp-contact-org {
    margin: 0 auto !important;
    color: #0B1F4D !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.pp-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 900px;
    margin: 26px auto 0;
    text-align: left;
}
.pp-contact-block {
    padding: 20px 24px;
    background: #F7FAFF;
    border: 1px solid #E4EAF8;
    border-radius: 14px;
}
.pp-contact-block h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.pp-contact-block p {
    margin: 0 0 8px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400;
    line-height: 1.6 !important;
}
.pp-contact-block p:last-child {
    margin-bottom: 0 !important;
}


/* ================================================================
   7.  THE NOTE STRIP
   under the three "Information We Collect" cards
   ================================================================ */

.pp-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 16px 20px;
    background: #EAF3FF;
    border: 1px solid #CFE2FB;
    border-left: 4px solid #0A56D8;
    border-radius: 12px;
}
.pp-note i {
    margin: 2px 0 0;
    color: #0A56D8;
    font-size: 16px;
    line-height: 1.4;
    flex: 0 0 auto;
}
.pp-note p {
    margin: 0 !important;
    color: #33507A;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}
.pp-note strong {
    color: #0B1F4D;
    font-weight: 700;
}


/* ================================================================
   8.  RESPONSIVE
   The banner follows contact.php exactly - the photo is never
   removed, it stacks below the text on narrow screens:
       <=991px  both halves stay side by side, banner grows to 430px
       <=767px  banner becomes a column, photo becomes a 300px band
       <=480px  text 330px, photo 250px
   ================================================================ */

@media (max-width: 1199px) {
    .pp-container {
        width: 94%;
    }
}

@media (max-width: 991px) {

    .pp-banner {
        min-height: 430px;
    }

    .pp-banner-content {
        width: 52%;
        padding: 60px 35px;
    }

    .pp-banner-image {
        width: 48%;
        min-height: 430px;
    }

    .pp-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    /* the photo moves under the text rather than disappearing */
    .pp-banner {
        flex-direction: column;
        min-height: auto;
    }

    .pp-banner-content {
        width: 100%;
        min-height: 360px;
        padding: 55px 25px 45px;
    }

    .pp-banner-content h1 {
        max-width: 100%;
        font-size: 38px !important;
        letter-spacing: -1px;
    }

    .pp-banner-content p {
        max-width: 100%;
        font-size: 15px !important;
    }

    .pp-banner-badge {
        font-size: 12px;
        padding: 8px 15px;
    }

    .pp-banner-image {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }

    .pp-section {
        padding: 40px 0;
    }

    .pp-container {
        width: 90%;
    }

    .pp-grid,
    .pp-grid-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pp-card {
        padding: 24px 22px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .pp-card h3,
    .pp-subhead-center {
        font-size: 19px !important;
    }

    .pp-card-sm h3 {
        font-size: 15px !important;
    }

    .pp-card p,
    .pp-card ul li {
        font-size: 14.5px !important;
    }

    .pp-card-intro {
        padding: 28px 22px;
    }

    .pp-card-intro h2 {
        font-size: 22px !important;
    }

    .pp-card-centred {
        padding: 28px 22px 30px;
    }

    .pp-card-centred h2,
    .pp-card-contact h2 {
        font-size: 21px !important;
    }

    .pp-card-contact {
        padding: 28px 22px 30px;
    }

    .pp-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .pp-contact-block p {
        font-size: 14px !important;
    }

    .pp-note {
        padding: 14px 16px;
    }

    .pp-note p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .pp-container {
        width: 92%;
    }

    .pp-banner-content {
        min-height: 330px;
        padding: 45px 20px 40px;
    }

    .pp-banner-content h1 {
        font-size: 32px !important;
    }

    .pp-banner-image {
        height: 250px;
        min-height: 250px;
    }

    .pp-card {
        padding: 20px 18px;
    }

    .pp-card h3,
    .pp-subhead-center {
        font-size: 18px !important;
    }

    /* .pp-card-sm h3 has to be repeated here, not left to the 767px
       block above. Both selectors are 0,2,1, so whichever comes last
       in the file wins - and without this the small card headings
       grew from 15px to 18px as the screen got narrower. Measured
       before the fix: 15.5px at 1440, 15px at 640, but 18px at 480. */
    .pp-card-sm h3 {
        font-size: 15px !important;
    }

    .pp-card p,
    .pp-card ul li {
        font-size: 14px !important;
    }

    .pp-card-intro h2,
    .pp-card-centred h2,
    .pp-card-contact h2 {
        font-size: 20px !important;
    }

    .pp-contact-block {
        padding: 16px 18px;
    }
}


/* ================================================================
   7.  LEGAL STATUS MODEL - EQUAL CARDS, READ MORE, JUSTIFIED TEXT

   Appended at the end. Nothing above this line was edited.

   This block brings privacypolicy.php onto the same model as
   legalstatus.php, re-prefixed to pp- so neither page can reach the
   other's rules. The three things it delivers are the same three things
   that page needed:

      a. every card in a row held to ONE height, so cards of different
         content length no longer sit ragged against each other
      b. a Read more on any card whose content is taller than that box
      c. justified body text, so the right-hand edge is even

   WHY A FIXED HEIGHT AND NOT align-items:stretch

   Stretch is the grid default, and .pp-grid already sets align-items:start
   (section 3, line 205). Stretch would make the boxes equal but the box
   would still grow with the tallest card in the row, so a row would be as
   tall as its longest card and the shorter cards would carry a large empty
   area at the foot with their content stranded at the top. A fixed height
   is what puts all the content in the same box and makes a Read more the
   honest response to what does not fit.

   WHAT IS NOT CLAMPED

   Only the grid children - the three "Information We Collect" cards and
   the four in the two-up rows. The opening card, the Changes card and the
   Contact Information card are left at their natural height, matching
   legalstatus.php: an address should not sit behind a Read more, and the
   Changes card is two short paragraphs that a clamp would only pad out.

   WHY THE FADE IS 104px AND RAMPS OVER THREE STOPS

   Taken from legalstatus.css section 13, where it was arrived at by
   measurement rather than taste. The control sits 16px to 44px above the
   card floor, and the gradient has to be SOLID from 50px above the floor
   up to the control, otherwise the top of the label sits on a partly
   transparent wash with a line of text showing through it. 52% of a 104px
   band is 50px above the floor. Getting that percentage backwards was
   what made an earlier attempt on the Legal Status page fail, so the
   numbers are not rounded here.

   WHY inter-character AND NOT inter-word

   Also from legalstatus.css section 15, measured there at four phone
   widths. Plain justify stretches only the spaces between words, which in
   a column this narrow opens 19px to 28px holes. inter-character shares
   the stretch between spaces and letter spacing, so the worst gap stays at
   5px to 6px - barely more than the 4px a normal space is worth - while
   the right edge still straightens by roughly 60px of the 99px it was off
   by. hyphens:auto is not used: it is honoured by the declaration and does
   nothing in this browser, which footer.css records separately.

   WHICH TEXT IS JUSTIFIED

   The grid cards only, for the same reason as on Legal Status. The
   opening, Changes and Contact cards are centred or left-aligned by
   design. Bullets are deliberately excluded: every <li> is its own block,
   so its lines are all last lines and never stretch, whereas a bullet
   that wraps to two lines would justify its first line and not its second.

   Sizes, colours, leading, padding, the border and the shadow are all
   untouched. Only the height, the control and the alignment change.
   ================================================================ */

/* the grid no longer stretches, so one card can open without dragging its
   row partner taller with it. Needed again at the narrow widths, where the
   rows collapse to one card and there is nothing to drag. */
.pp-grid,
.pp-grid-3 {
    align-items: start !important;
}

/* the box every grid policy card is held to */
.pp-card-clamp {
    height: var(--pp-clamp, 241px);
    overflow: hidden;
}

/* the white fade over the last of the clipped text */
.pp-card-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 104px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 22%,
        rgba(255, 255, 255, .88) 38%,
        #FFFFFF 52%
    );
    pointer-events: none;
}

/* room below the text once the card is open and its height is auto again.
   This only matters in the open state: on a FIXED height card padding
   reserves nothing visible, because overflow clips at the padding box and
   text still paints all the way down to the floor. */
.pp-card-clamp.pp-card-open {
    height: auto;
    overflow: visible;
    padding-bottom: 30px;
}

/* no fade once the card is showing everything */
.pp-card-open.pp-card-more::after {
    display: none;
}

/* the control. left matches the card's own padding at each breakpoint:
   32px on the desktop padding, 22px at the 767px padding, 18px at the 480px
   padding - so the label sits on the text's left edge, not inside it. */
.pp-more {
    position: absolute;
    left: 32px;
    bottom: 13px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none;
    cursor: pointer;
}

.pp-more:hover {
    text-decoration: underline;
}

.pp-more:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
    border-radius: 4px;
}

.pp-more i {
    font-size: 12px;
    line-height: 1;
    transition: transform .18s ease;
}

/* the chevron turns over when the card is open, so the control reads as a
   toggle rather than as a link */
.pp-card-open .pp-more i {
    transform: rotate(180deg);
}

/* the same 241px box, smaller at the narrower widths, so the proportion of
   the page a card occupies stays comparable. These are the values
   legalstatus.css uses at the same two breakpoints. */
@media (max-width: 767.98px) {
    :root {
        --pp-clamp: 232px;
    }
    .pp-more {
        left: 22px;
        bottom: 13px;
    }
}

@media (max-width: 480.98px) {
    :root {
        --pp-clamp: 224px;
    }
    .pp-more {
        left: 18px;
        bottom: 11px;
    }
}

/* justified body text

   .pp-card p at line 265 carries text-align:left !important, which is what
   does the left alignment. These selectors are .pp-grid > .pp-card p and
   .pp-grid-3 > .pp-card p - 0,2,1 against 0,1,1 - so on specificity they
   win, and both carry !important so source order never comes into it. */
.pp-grid > .pp-card p,
.pp-grid-3 > .pp-card p {
    text-align: justify !important;
    text-justify: inter-character !important;
}