@import "post-thumb-item.css";

#archive-hero {
    background-color: #0B60D7;
    background-image: url("../png/blog-archive-mobile.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position-y: bottom;
    background-position-x: 100%;
}

#archive-hero.case-studies {
    background-image: url("../png/case-study-archive-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: top;
    background-position-x: 100%;
}

#archive-hero.news {
    background-image: url("../png/new-archive-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: top;
    background-position-x: 100%;
}

#archive-hero.awards {
    background-image: url("../png/awards-archive-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: top;
    background-position-x: 100%;
}

#archive-hero > div {
    padding: 150px 20px 30px;
}

#archive-hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: linear-gradient(259.92deg, rgba(0, 190, 255, 0.5) -2.22%, rgba(0, 158, 255, 0.355459) 12.26%, rgba(0, 124, 255, 0.20737) 27.11%, rgba(0, 89, 255, 0.4) 44.5%, #0941BB 58.86%, #0F2E87 78.85%, #151E5B 102.97%);
}

#archive-hero.case-studies::before {
    background: linear-gradient(266.5deg, rgba(0, 190, 255, 0.5) -35.8%, rgba(0, 158, 255, 0.355459) -17.24%, rgba(0, 124, 255, 0.20737) -4.25%, rgba(0, 89, 255, 0.4) 14.56%, #0941BB 50.19%, #0F2E87 68.08%, #151E5B 98.99%);

}

.archive-hero-title h1 {
    font: var(--heading-4);
    color: var(--cyan-blue);
    letter-spacing: -0.05em;
}

.archive-hero-title h1 span {
    color: var(--white);
}

#content-loop {
    background: url(../png/body-bg-mobile.png) no-repeat;
    background-size: contain;
    padding: 56px 10px;
}

#content-loop .short-title h4 {
    margin-bottom: 40px;
}

.posts-list {
    list-style: none;
    margin: 0 auto;
}

.search-filter {
    display: none;
    width: 480px;
    margin: 0 auto 56px;
    border-radius: 20px;
    position: relative;
}

.search-filter input[type="search"],
.search-filter input[type="search"]:focus-visible {
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    width: 100%;
    outline: none;
    z-index: 3;
}

.search-filter svg {
    position: absolute;
    right: 20px;
    z-index: 5;
}

.border-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, #00BEFF 0%, #000BB1 100%) border-box;
    border: 2px solid transparent;
    border-radius: 20px;
    opacity: 1;
    transition: opacity 0.3s linear;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.elementor-pagination {
    margin-top: 50px;
}

.pagination {
    margin-top: 50px;
    text-align: center;
}

.page-numbers {
    display: inline-flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font: var(--text-small-h9);
    color: var(--text-grey);
}

.page-numbers.current {
    background-color: var(--cyan-blue);
    color: var(--white);
}

.page-numbers.prev,
.page-numbers.next {
    transform: scale(2);
}

a.page-numbers.prev,
a.page-numbers.next {
    color: var(--cyan-blue);
}

#archive-hero .short-title h4 {
    text-align: left;
}

.award-item {
    background: #F7F7FC;
    border-radius: 20px;
    padding: 28px 22px;
    position: relative;
}

.award-item:after {
    content: url("../svg/chevron-rigth.svg");
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.award-img img {
    height: 50px;
    width: auto;
    margin-bottom: 12px;
}

.award-title h2 {
    font: var(--text-medium);
    margin-bottom: 6px;
}

.award-type p {
    font: var(--text-regular);
    letter-spacing: -0.2px;
    color: var(--text-primary);
}

@media (min-width: 768px) {
    #archive-hero > div {
        padding: 130px 0 50px;
        width: calc(100% - 60px);
        max-width: 1320px;
    }

    #content-loop {
        background: url(../svg/use-case-main-bg.svg) no-repeat;
        background-size: auto;
        padding: 56px 30px 130px;
    }

    .posts-list {
        display: grid;
        gap: 66px;
        grid-template-columns: repeat(2, 1fr);
        max-width: max-content;
        justify-items: center;
    }

    #content-loop .post-loop-item {
        max-height: 645px;
        width: 328px;
        max-width: 328px !important;
    }

    #archive-hero::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 1;
        background: linear-gradient(260.54deg, rgba(0, 190, 255, 0.5) 0.09%, rgba(0, 158, 255, 0.355459) 4.99%, rgba(0, 124, 255, 0.20737) 18.3%, rgba(0, 89, 255, 0.4) 22.08%, rgba(5, 76, 220, 0.713153) 30.41%, #0941BB 43.57%, #0F2E87 65.49%, #151E5B 84.95%);
    }

    #archive-hero {
        background-image: url("../png/blog-archive.png");
        background-repeat: no-repeat;
        background-size: auto;
    }

    #archive-hero.case-studies {
        background-image: url("../png/case-study-archive.png");
        background-repeat: no-repeat;
        background-size: auto;
    }

    #archive-hero.news {
        background-image: url("../png/new-archive.png");
        background-repeat: no-repeat;
        background-size: auto;
    }

    #archive-hero.awards {
        background-image: url("../png/awards-archive.png");
        background-repeat: no-repeat;
        background-size: auto;
    }

    .thumb-content .post-excerpts:hover,
    .thumb-content .post-excerpts:focus,
    .thumb-content .post-excerpts:active{
        color: var(--black-alt);
    }
}

@media (min-width: 1025px) {

    .archive-hero-title h1 {
        font: var(--heading-4);
        letter-spacing: -0.05em;
    }

    #content-loop .elementor-grid,
    #content-loop .posts-list {
        max-width: max-content;
    }

    .search-filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }

    .posts-list {
        display: grid;
        gap: 66px;
        grid-template-columns: repeat(3, 1fr);
    }

    #content-loop .post-loop-item {
        width: 100%;
    }

    #content-loop .award-item > div {
        align-items: center;
        justify-content: flex-start;
        padding-right: 40px;
    }

    .award-item {
        padding: 15px 22px;
        width: 916px;
        height: 92px;
    }

    .award-img {
        width: 155px;
        text-align: left;
    }

    .award-img img {
        height: auto;
        width: auto;
        max-height: 50px;
        max-width: 120px;
        margin-bottom: 0;
    }

    .award-title {
        width: 464px;
    }

    .award-title h2 {
        margin-bottom: 0;
    }
}

/*@media (min-width: 1380px) {*/
/*    #archive-hero > div {*/
/*        padding: 130px 0 55px;*/
/*    }*/
/*}*/