﻿/* --------------------------------------------------------------------------
   SECTION 1 / SECTION2 CSS
   -------------------------------------------------------------------------- */


.pp-first-section {
    padding-bottom: 110px;
}

@media (min-width:992px) {
    .pp-first-section .desc {
        max-width: 425px;
    }
}

@media (max-width:769px) {
    .pp-first-section {
        padding-bottom: 80px;
    }
}

@media (max-width:577px) {
    .pp-first-section {
        padding-bottom: 30px;
    }

    .policy-card-wrapper {
        margin-bottom: 8px;
    }
}

/* --------------------------------------------------------------------------
   SECTION 1 / SECTION2 CSS
   -------------------------------------------------------------------------- */

.pp-card-section {
    padding-bottom: 120px;
}

.policy-card {
    border-radius: clamp(60px, 6vw, 120px);
    background-image: conic-gradient(from 136deg at 35% 39%, var(--neutral-3D3D3D), var(--red-980B12), var(--neutral-141414));
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px, 6vw, 120px);
    border: none;
    width: 100%;
    height: 100%;
}

    .policy-card:not(.mini)::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../../img/helper-dashs-lines/card-bg-lines.svg") center / cover no-repeat;
        pointer-events: none;
        z-index: 1;
        transform: scaleX(1);
    }

    .policy-card.mini {
        padding: clamp(30px, 2.4vw, 46px);
        border-radius: clamp(20px, 2vw, 30px);
        background: transparent conic-gradient(from 241deg at 50% 50%, #3D3D3D 0.00%, #980B12 58.99%, #141414 99%) 0% 0% no-repeat padding-box;
    }

    .policy-card.dark-policy {
        background-image: conic-gradient(from 134deg at 35% 39%, var(--neutral-3D3D3D), #464646, var(--neutral-4E4E4E), var(--neutral-141414))
    }

.policy-card-wrapper:nth-child(even) .policy-card::after {
    transform: scaleX(-1);
}

.policy-card.ik {
    background-image: conic-gradient(from 107deg at 25% 49%, var(--neutral-3D3D3D) 15%, var(--red-980B12) 93%, var(--neutral-141414) 100%);
}

    .policy-card.ik::after {
        background: url("../../img/helper-dashs-lines/human-resources-card-dashs.svg") center / cover no-repeat;
    }


.policy-card.ic {
    background-image: conic-gradient(from 79deg at 25% 50%, var(--neutral-3D3D3D) 10%, #2F2F2F 21%, var(--neutral-141414) 100%);
}

    .policy-card.ic::after {
        background: url("../../img/helper-dashs-lines/human-resources-card-dashs.svg") center / cover no-repeat;
        transform: scaleX(-1);
    }


.policy-card.pr {
    background-image: conic-gradient(from 147deg at 32% 28%, var(--neutral-858585), var(--red-F8777E) 75%, var(--red-980B12));
}

.policy-card.sr {
    background-image: conic-gradient(from 142deg at 35% 28%, var(--neutral-666666), var(--red-F8777E), var(--neutral-141414));
}

    .policy-card.pr::after,
    .policy-card.sr::after {
        background: url("../../img/helper-dashs-lines/press-card-dashs.svg") center / cover no-repeat;
    }

.policy-card.pr {
    padding: clamp(90px, 6.7vw, 130px) clamp(55px, 5.8vw, 110px);
    border-radius: clamp(90px, 6vw, 120px);
}

.policy-card.sr {
    padding: clamp(40px, 4vw, 70px) clamp(20px, 2vw, 40px);
    border-radius: clamp(90px, 6vw, 120px);
    aspect-ratio: 1 / 1.2;
}

    .policy-card.pr .icon-glass-ring .glass-ring, .policy-card.sr .icon-glass-ring .glass-ring {
        inset: clamp(-19px, -1.2vw, -16px);
    }




@media (max-width:992px) {
    .policy-card.pr {
        background-position: left;
        background-size: 130%;
    }
}

@media (max-width:576px) {
    .policy-card.pr {
        background-position: left 40%;
        background-size: 130%;
    }
}


.card-text-content {
    font-size: var(--df-text-fs-32);
    position: relative;
    font-weight: var(--fw-semibold);
    z-index: 2;
    flex-grow: 1;
}

@media (max-width:769px) {
    .pp-card-section {
        padding-bottom: 80px;
    }

    .card-text-content {
        font-size: var(--df-text-fs-28);
    }
}
