:root {
    --p-tp-purple: rgba(129, 39, 127, 1);
    --p-tp-dark-blue: rgba(2, 162, 194, 1);
    --p-tp-l-blue: rgba(137, 211, 224, 1);
    --p-tp-dark-yellow: rgba(247, 171, 35, 1);
    --p-tp-l-yellow: rgba(255, 203, 5, 1);
    --p-tp-off-white: rgba(230, 231, 233, 1);


    --s-m-purple: rgba(167, 104, 165, 1);
    --s-l-purple: rgba(186, 136, 185, 1);
    --s-vl-purple: rgba(217, 190, 217, 1);
    --s-m-blue: rgba(78, 190, 212, 1);
    --s-vl-blue: rgba(204, 236, 243, 1);
    --s-vl-yellow: rgba(255, 227, 153, 1);
}

.impact-page .col-md-8,
.impact-page .col-md-12,
.impact-page .main-content-column{
    width: 100%;
    padding: 0;
}

.secondary-medium-purple {
    color: var(--s-m-purple);
}
.secondary-light-purple {
    color: var(--s-l-purple);
}
.secondary-very-light-purple {
    color: var(--s-vl-purple);
}
.secondary-medium-blue {
    color: var(--s-m-blue);
}
.secondary-very-light-blue {
    color: var(--s-vl-blue);
}
.secondary-very-light-yellow {
    color: var(--s-vl-yellow);
}
.secondary-medium-purple-bg {
    background-color: var(--s-m-purple);
}
.secondary-light-purple-bg {
    background-color: var(--s-l-purple);
}
.secondary-very-light-purple-bg {
    background-color: var(--s-vl-purple);
}
.secondary-medium-blue-bg {
    background-color: var(--s-m-blue);
}
.secondary-very-light-blue-bg {
    background-color: var(--s-vl-blue);
}
.secondary-very-light-yellow-bg {
    background-color: var(--s-vl-yellow);
}

.primary-tp-purple {
    color: var(--p-tp-purple);
}
.primary-tp-dark-blue {
    color: var(--p-tp-dark-blue);
}
.primary-tp-light-blue {
    color: var(--p-tp-l-blue);
}
.primary-tp-dark-yellow {
    color: var(--p-tp-dark-yellow);
}
.primary-tp-light-yellow {
    color: var(--p-tp-l-yellow);
}
.primary-tp-off-white {
    color: var(--p-tp-off-white);
}

.primary-tp-purple-bg {
    background-color: var(--p-tp-purple);
}
.primary-tp-dark-blue-bg {
    background-color: var(--p-tp-dark-blue);
}
.primary-tp-light-blue-bg {
    background-color: var(--p-tp-l-blue);
}
.primary-tp-dark-yellow-bg {
    background-color: var(--p-tp-dark-yellow);
}
.primary-tp-light-yellow-bg {
    background-color: var(--p-tp-l-yellow);
}
.primary-tp-off-white-bg {
    background-color: var(--p-tp-off-white);
}


.cards-block * {
    margin-top: 0;
}

.cards-block h1,
.cards-block h2,
.cards-block h3,
.cards-block h4,
.cards-block h5,
.cards-block h6 {
    margin: 0;
}

.cards-block h1 {
    font-size: 60px;
    line-height: 66px;
}

.cards-block h2 {
    font-size: clamp(32px, 4vw, 40px);
    line-height: clamp(35px, 4vw, 44px);
}

.cards-block h3 {
    font-size: 30px;
    line-height: 32px;
}

.cards-block h4 {
    font-size: 24px;
    line-height: 30px;
}

.cards-block h5 {
    font-size: 22px;
    line-height: 30px;
}

.cards-block h6 {
    font-size: 19px;
    line-height: 23px;
    font-weight: bold;
}

.cards-block .container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 64px;
    /* max-width: 1240px; */
    /* width: calc(100% - 200px); */
    margin: 0 auto;
    padding: 64px 0;
}

.cards-block .container:before,
.cards-block .container:after {
    content: none;
}

.cards-block .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
}

.cards-block .section-header .text-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 376px;
    font-size: clamp(17px, 2vw, 19px);
    line-height: clamp(20.4px, 2vw, 22px);
}

.cards-block .section-header .logo-block img {
    max-width: 297px;
}

.cards-block .swiper {
    width: 100%;
}

.cards-block .card {
    position: relative;
    width: calc(20% - 20px);
    border-radius: 3px;
    overflow: hidden;
    margin-right: 0;
}

.card .top-content,
.card .bottom-content {
    display: flex;
    flex-direction: column;
    /* align-items: center;  */
    justify-content: space-between;
    flex: 1;
    aspect-ratio: 1 / 0.9759;
}

.top-content {
    position: relative;
    /* background: url('./assets/images/card-bg.jpg') no-repeat center center /cover; */
    padding: 20px 24px 24px;
}

.secondary-medium-purple-bg .top-content {
    background: url('../img/common/card-bg0.jpg') no-repeat center center /cover;
}
.secondary-light-purple-bg .top-content {
    background: url('../img/common/card-bg1.jpg') no-repeat center center /cover;
}
.secondary-medium-blue-bg .top-content {
    background: url('../img/common/card-bg2.jpg') no-repeat center center /cover;
}
.secondary-very-light-yellow-bg .top-content {
    background: url('../img/common/card-bg3.jpg') no-repeat center center /cover;
}
.primary-tp-dark-yellow-bg .top-content {
    background: url('../img/common/card-bg4.jpg') no-repeat center center /cover;
}
.primary-tp-dark-blue-bg .top-content {
    background: url('../img/common/card-bg5.jpg') no-repeat center center /cover;
}
.secondary-very-light-blue-bg .top-content {
    background: url('../img/common/card-bg6.jpg') no-repeat center center /cover;
}
.primary-tp-light-yellow-bg .top-content {
    background: url('../img/common/card-bg7.jpg') no-repeat center center /cover;
}
.secondary-very-light-purple-bg .top-content {
    background: url('../img/common/card-bg8.jpg') no-repeat center center /cover;
}
.primary-tp-light-blue-bg .top-content {
    background: url('../img/common/card-bg9.jpg') no-repeat center center /cover;
}

.card .toggleButton {
    display: none;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 20px;
    right: 24px;
    cursor: pointer;
    z-index: 10;
    border: 0;
    background: url('../img/common/toggle-icon.svg') no-repeat center center /contain;
    transition: all 0.3s ease-in-out;
}

.card .top-content h2 {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 71px;
}

.card .bottom-content img {
    /* aspect-ratio: 1 / 1; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .hover-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: rgba(167, 104, 165, 1); */
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

.secondary-medium-purple-bg .hover-content {
    background-color: var(--s-m-purple);
}
.secondary-light-purple-bg .hover-content {
    background-color: var(--s-l-purple);
}
.secondary-very-light-purple-bg .hover-content {
    background-color: var(--s-vl-purple);
}
.secondary-medium-blue-bg .hover-content {
    background-color: var(--s-m-blue);
}
.secondary-very-light-blue-bg .hover-content {
    background-color: var(--s-vl-blue);
}
.secondary-very-light-yellow-bg .hover-content {
    background-color: var(--s-vl-yellow);
}

.primary-tp-dark-yellow-bg .hover-content {
    background-color: var(--p-tp-dark-yellow);
}
.primary-tp-light-yellow-bg .hover-content {
    background-color: var(--p-tp-l-yellow);
}
.primary-tp-purple-bg .hover-content {
    background-color: var(--p-tp-purple);
}
.primary-tp-dark-blue-bg .hover-content {
    background-color: var(--p-tp-dark-blue);
}
.primary-tp-light-blue-bg .hover-content {
    background-color: var(--p-tp-l-blue);
}
.primary-tp-off-white-bg .hover-content {
    background-color: var(--p-tp-off-white);
}

.card .hover-content .content-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card .hover-content .content-group > p {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
}

.card .hover-content .content-group table tr:not(:last-child) td {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 1)
}

.card .hover-content .content-group table td {
    padding: 12px 4px;
}

.card .hover-content .content-group table td:first-child {
    font-weight: 700;
    font-style: Bold;
    font-size: 14px;
    line-height: 14px;
}

.card .hover-content .content-group table td:last-child {
    font-style: Regular;
    font-size: 12px;
    line-height: 14.4px;
}

.cards-block .btn {
    font-family: Arial;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    background: transparent;
    color: #000;
    transition: all 0.3s ease-in-out;
}

.cards-block .btn-primary {
    border-radius: 3px;
    border: 1px solid #000;
}


.cards-block .btn-primary:hover {
    background-color: rgba(34, 34, 34, 1);
    color: rgba(255, 255, 255, 1);
}

.card.show .hover-content .btn{
  width: 100%;
  background: transparent;
}

.card.show .hover-content .btn:hover,
.card.show .hover-content .btn:focus{
    border-color: #000000;
    background-color: #000000;
}

@media screen and (min-width: 768px) {
    .cards-wrapper .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center; */
        gap: 24px;
    }



    .cards-block .card:hover .hover-content {
        display: flex;
    }
    
}

@media screen and (max-width: 1279px) {

    .cards-block .card {
        width: calc(25% - 20px);
    }
}

@media screen and (max-width: 1199px) {

}

@media screen and (max-width: 1024px) {
    .cards-block .container {
        width: calc(100% - 100px);
    }

    .cards-block .card {
        width: calc(33% - 15px);
    }

}

@media screen and (max-width: 993px) {
    .impact-page #main-content + .container {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {

    .impact-page #main-content + .container {
        padding: 0;
    }

    .impact-page .container .row {
        margin-left: 0;
        margin-right: 0;
    }

    .card .toggleButton {
        display: block;
    }

    .cards-block .container {
        gap: 40px;
        width: 100%;
        padding: 40px 0;
    }

    .cards-block .container:before,
    .cards-block .container:after {
        content: none;
    }

    .cards-block .section-header {
        flex-direction: column-reverse;
        gap: 32px;
        padding: 0 16px;
    }

    .cards-block .section-header .text-block {
        text-align: center;
    }

    .cards-block .section-header .logo-block img {
        max-width: 194px;
    }

    .cards-block .cards-wrapper {
        padding: 0 50px;
    }

    .card .hover-content {
        padding-top: 64px;
    }

    .card.show .toggleButton {
        transform: rotateX(180deg) rotateZ(360deg);
    }

    .card.show .hover-content {
        display: flex !important;
    }

    .card .top-content h2 {
        font-size: 66px;
        line-height: 114px;
    }

    .card .top-content h6 {
        font-size: 25px;
        line-height: 30px;
    }

    .card .hover-content .content-group > p {
        font-size: 17px;
        line-height: 22px;
    }

    .card .hover-content .content-group table td:first-child {
        font-size: 18px;
        line-height: 18px
    }

    .card .hover-content .content-group table td:last-child {
        font-size: 15px;
        line-height: 18px;
    }

    .cards-block .card {
        width: 100%;
    }
    .impact-page .col-md-8,
    .impact-page .col-md-12,
    .impact-page .main-content-column{
        padding: 0;
    }

    .cards-block .btn {
        font-size: 17px;
        line-height: 20.4px;
    }
    
}

@media screen and (max-width: 374px) {

    .cards-block .cards-wrapper {
        padding: 0 20px;
    }

}