/*------------------------------------*\
    Homepage - Resources
\*------------------------------------*/
.homepage-resources {
    --resources-top-wave: calc(100vw * 223 / 1920);
    position: relative;
    z-index: 1;
   
      background: linear-gradient(135deg, #0063D8 10.8%, #4DC6EC 100%);
    color: #fff;
    margin-top: calc(-1 * var(--resources-top-wave));
    /* Reserve the top wave plus one --hr-section-gap so the content keeps the
       same breathing room below the wave as every other section. The contact
       section is pulled up over the bottom by its top wave (188 tall at 1920w),
       so reserve that wave plus one --hr-section-gap below as well. */
    padding-top: calc(var(--resources-top-wave) + var(--hr-section-gap, var(--section-margins)));
    padding-bottom: calc(100vw * 188 / 1920 + var(--hr-section-gap, var(--section-margins)));
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20223'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2037.123L53.333%2061.833C106.666%2087.007%20213.333%20135.731%20320%20123.782C426.667%20111.369%20533.333%2037.123%20640%2037.123C746.667%2037.123%20853.333%20111.369%20960%20123.782C1066.67%20135.731%201173.33%2087.007%201280%2068.098C1386.67%2049.884%201493.33%2061.485%201600%2055.685C1706.67%2049.884%201813.33%2024.362%201866.67%2012.413L1920%200L1920%20222.739L0%20222.739L0%2037.123Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--resources-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--resources-top-wave) + 1px) no-repeat;
    -webkit-mask-composite: source-over;
    mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20223'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2037.123L53.333%2061.833C106.666%2087.007%20213.333%20135.731%20320%20123.782C426.667%20111.369%20533.333%2037.123%20640%2037.123C746.667%2037.123%20853.333%20111.369%20960%20123.782C1066.67%20135.731%201173.33%2087.007%201280%2068.098C1386.67%2049.884%201493.33%2061.485%201600%2055.685C1706.67%2049.884%201813.33%2024.362%201866.67%2012.413L1920%200L1920%20222.739L0%20222.739L0%2037.123Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--resources-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--resources-top-wave) + 1px) no-repeat;
    mask-composite: add;
}

.homepage-resources .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

.homepage-resources__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 1047px;
    margin: 0 auto;
}

.homepage-resources__icon {
    width: 57px;
}

.homepage-resources__icon-image {
    display: block;
    width: 100%;
    height: auto;
}

.homepage-resources__heading {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.homepage-resources__slider-layout {
    width: 100%;
    max-width: 1328px;
    margin: 0 auto;
}

.homepage-resources__slider-stage {
    position: relative;
    width: 100%;
}

.homepage-resources__slider-stage .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    margin-top: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 99, 216, 0.2);
    z-index: 3;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: transparent;
    transition: background 0.2s ease;
}

.homepage-resources__slider-stage .slick-prev {
    left: 40px;
}

.homepage-resources__slider-stage .slick-next {
    right: 40px;
}

.homepage-resources__slider-stage .slick-arrow::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    font-size: 0;
    opacity: 1;
    background-color: #194886;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.0144 17.6447H2.05457C1.47245 17.6447 0.984484 17.4478 0.59069 17.054C0.196897 16.6602 0 16.1722 0 15.5901C0 15.008 0.196897 14.52 0.59069 14.1262C0.984484 13.7324 1.47245 13.5355 2.05457 13.5355H25.0144L14.947 3.46812C14.5361 3.05721 14.3392 2.57781 14.3563 2.02992C14.3735 1.48203 14.5875 1.00263 14.9984 0.591718C15.4093 0.215046 15.8887 0.0181487 16.4366 0.00102729C16.9845 -0.0160942 17.4639 0.180803 17.8748 0.591718L31.435 14.1519C31.6405 14.3574 31.786 14.5799 31.8716 14.8196C31.9572 15.0593 32 15.3162 32 15.5901C32 15.8641 31.9572 16.1209 31.8716 16.3606C31.786 16.6003 31.6405 16.8229 31.435 17.0283L17.8748 30.5885C17.4981 30.9652 17.0273 31.1535 16.4623 31.1535C15.8973 31.1535 15.4093 30.9652 14.9984 30.5885C14.5875 30.1776 14.382 29.6896 14.382 29.1246C14.382 28.5596 14.5875 28.0717 14.9984 27.6607L25.0144 17.6447Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.0144 17.6447H2.05457C1.47245 17.6447 0.984484 17.4478 0.59069 17.054C0.196897 16.6602 0 16.1722 0 15.5901C0 15.008 0.196897 14.52 0.59069 14.1262C0.984484 13.7324 1.47245 13.5355 2.05457 13.5355H25.0144L14.947 3.46812C14.5361 3.05721 14.3392 2.57781 14.3563 2.02992C14.3735 1.48203 14.5875 1.00263 14.9984 0.591718C15.4093 0.215046 15.8887 0.0181487 16.4366 0.00102729C16.9845 -0.0160942 17.4639 0.180803 17.8748 0.591718L31.435 14.1519C31.6405 14.3574 31.786 14.5799 31.8716 14.8196C31.9572 15.0593 32 15.3162 32 15.5901C32 15.8641 31.9572 16.1209 31.8716 16.3606C31.786 16.6003 31.6405 16.8229 31.435 17.0283L17.8748 30.5885C17.4981 30.9652 17.0273 31.1535 16.4623 31.1535C15.8973 31.1535 15.4093 30.9652 14.9984 30.5885C14.5875 30.1776 14.382 29.6896 14.382 29.1246C14.382 28.5596 14.5875 28.0717 14.9984 27.6607L25.0144 17.6447Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: background-color 0.2s ease;
    content: "";
}

.homepage-resources__slider-stage .slick-prev::before {
    transform: rotate(180deg);
}

.homepage-resources__slider-stage .slick-arrow:hover,
.homepage-resources__slider-stage .slick-arrow:focus {
    background: linear-gradient(135deg, #4dc6ec 10.8%, #0063d8 100%);
}

.homepage-resources__slider-stage .slick-arrow:hover::before,
.homepage-resources__slider-stage .slick-arrow:focus::before {
    background-color: #fff;
}

.homepage-resources__slide {
    padding: 0 10px;
    outline: none;
    height: auto;
}

.js-homepage-resources-slider .slick-track {
    display: flex;
    align-items: stretch;
}

.js-homepage-resources-slider .slick-slide {
    height: auto;
    display: flex;
}

.js-homepage-resources-slider .slick-slide > div {
    display: flex;
    width: 100%;
    height: 100%;
}
.homepage-resources__card {
    height: 100%;
}

.homepage-resources__card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(255, 255, 255, 0.2);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.homepage-resources__card-link:hover,
.homepage-resources__card-link:focus {
    color: inherit;
    text-decoration: none;
}

.homepage-resources__card-media {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: 220px;
}

.homepage-resources__card-image {
    width: 100%;
    height: 220px;
}

.homepage-resources__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 28px 24px 32px;
    min-width: 0;
}

.homepage-resources__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 10px 25px;
    border-radius: 200px;
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: capitalize;
}

.homepage-resources__badge--event,
.homepage-resources__badge--case-study {
    background: var(--secondary-color);
}

.homepage-resources__badge--news,
.homepage-resources__badge--article,
.homepage-resources__badge--default {
    background: var(--cat-royal-blue);
}

.homepage-resources__card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.homepage-resources__card-title {
    margin: 0;
    padding: 0;
    color: var(--primary-color);
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.homepage-resources__card-meta {
    margin: 0;
    color: var(--secondary-color);
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: capitalize;
    padding-bottom: 0;
}

.homepage-resources__card-excerpt {
    margin: 0;
    color: #666;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
}

.homepage-resources__card-cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: var(--secondary-color);
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: capitalize;
}

.homepage-resources__card-cta i {
    font-size: 14px;
}

.homepage-resources__slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    min-height: 24px;
}

.homepage-resources__slider-nav .slick-dots {
    position: static;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.homepage-resources__slider-nav .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0;
    transition: width 0.3s ease;
}

.homepage-resources__slider-nav .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
    background: #fff;
}

.homepage-resources__slider-nav .slick-dots li button::before {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 0;
    opacity: 1;
    border: none;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}

.homepage-resources__slider-nav .slick-dots li.slick-active {
    width: 126px;
}

.homepage-resources__slider-nav .slick-dots li.slick-active button {
    width: 100%;
    border-radius: 20px;
    background: #4DC6EC;
}

.homepage-resources__slider-nav .slick-dots li.slick-active button::before {
    width: 126px;
    border: none;
    border-radius: 200px;
    background: #4DC6EC;
}

.homepage-resources__view-all {
    background: #fff;
    color: var(--primary-color);
}

.homepage-resources__view-all:hover,
.homepage-resources__view-all:focus {
    background: #e8f6fc;
    color: var(--primary-color-hover);
    text-decoration: none;
}

.homepage-resources__view-all i {
    font-size: 14px;
    color: var(--cat-royal-blue);
}

.homepage-resources + .homepage-cards-block,
.homepage-resources + [class*="homepage-cards"] {
    margin-top: 0;
}
.homepage-resources__footer .btn-secondary {
   background: var(--primary-color);
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) {
    .homepage-resources__heading {
        font-size: 34px;
    }

    .homepage-resources__slider-stage .slick-arrow {
        width: 66px;
        height: 66px;
    }

    .homepage-resources__slider-stage .slick-arrow::before {
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
    }

    .homepage-resources__card-title {
        font-size: 24px;
    }

    .homepage-resources__card-meta,
    .homepage-resources__card-excerpt {
        font-size: 18px;
    }
    .homepage-resources__slider-stage .slick-prev {
        left: -36px;
    }

    .homepage-resources__slider-stage .slick-next {
        right: -36px;
    }
}

/* Small desktop: 1025px - 1366px */
@media (min-width: 1025px) {
    .homepage-resources .container {
        gap: 50px;
    }

    .homepage-resources__heading {
        font-size: 40px;
    }

    .homepage-resources__slider-stage .slick-prev {
        left: -20px;
    }

    .homepage-resources__slider-stage .slick-next {
        right: -20px;
    }

    .homepage-resources__card-link {
        flex-direction: row;
        min-height: 353px;
    }

    .homepage-resources__card-media {
        flex: 0 0 182px;
        width: 182px;
        max-width: 182px;
        height: auto;
        min-height: 353px;
    }

    .homepage-resources__card-image {
        height: 100%;
        min-height: 353px;
    }

    .homepage-resources__card-body {
        padding: 38px 34px;
    }
    .homepage-resources__footer .btn-secondary:hover {
        background:#fff;
        color: var(--primary-color);
    }
    .homepage-resources__footer .btn-primary:hover {
        background: var(--primary-color);
        color: #fff;
    }
}

/* Large desktop: 1367px and up */
@media (min-width: 1367px) {
    .homepage-resources__heading {
        font-size: 48px;
    }

    .homepage-resources__slide {
        padding: 0 16.5px;
    }
}
