.pop-over-video-mod {
    position: relative;
    padding: 100px 0;
}
.pop-over-video-mod > .container {
    position: relative;
    z-index: 2;
}

.pop-over-video-mod h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 300;
}
.pop-over-video-mod h4 {
    font-size: 27px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 25px;
}

.pop-over-video-mod .intro .card:not(.demo-item) {
    background-color: #FFF;
    border-radius: 16px;
    padding: 20px 30px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,.25);
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.pop-over-video-mod .intro h5 {
    font-size: 23px;
    line-height: 1.2;
    font-weight: 300;
}
.pop-over-video-mod .intro .btn-link {
    color: #0095FF;
    padding: 0;
    font-size: 16px;
}
.pop-over-video-mod .intro .demos-content {
    position: relative;
    z-index: 1;
    max-width: 80%;
    margin-top: -15px;
    margin-left: 30px;
    margin-right: 30px;
}

.posts-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}
.posts-feed::before,
.posts-feed::after {
    display: none;
}

.intro + .demos-content {
    margin-top: 90px;
}
.demos-content > .title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.demos-content .btn-link {
    color: #0095FF;
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
}

.demo-item {
    position: relative;
    flex: 1 0 50%;
    max-width: calc(50% - 15px);
    background-color: #FFF;
    box-shadow: 0px 1.03px 4.1px 2.05px rgba(0,0,0,.08);
    border-radius: 16px;
    /* cursor: pointer; */
    overflow: hidden;
}
.demo-item {
    position: relative;
    flex: 1 0 25%;
    max-width: calc(25% - 15px);
    overflow: hidden;
}
.demo-item .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #616A74;
}
.demo-item .card-body .content {
    padding: 15px 20px 25px;
    transition: all .25s ease;
}
.demo-item:hover .card-body .content,
.demo-item.mobile-play .card-body .content {
    padding-top: 25px;
    padding-bottom: 15px;
}
.demo-item .card-body .text {
    font-weight: 400;
}
.demo-item p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.5;
}
.demo-item .title {
    display: flex;
    justify-content: space-between;
}
.demo-item .title h3,
.demo-item .title h4 {
    color: inherit;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 0;
}
.demo-item .button {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: all .25s ease;
}
.demo-item .button .btn {
    display: inline-flex;
    height: 32px;
    min-width: 64px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 12px;
    background: #0D9AFF;
}
.demo-item:hover .button,
.demo-item.mobile-play .button {
    opacity: 1;
    bottom: -17px;
}
.demo-item .btn {
    background-color: #0D9AFF;
    border-color: #0D9AFF;
    color: #FFF;
    padding: 8px 40px;
    font-size: 22px;
}
.demo-item .btn > span {
    white-space: nowrap;
}

.post-featured .image,
.demo-item .image {
    position: relative;
}
.post-featured .image-inner,
.demo-item .image-inner {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
}
.post-featured .video,
.demo-item .video {
    width: 100%;
    object-fit: fill;
}



.pop-over-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(23,45,71,.4);
    backdrop-filter: blur(2px);
    z-index: 99;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: all .5s ease-in-out;
}
.pop-over-overlay.show {
    /* display: block; */
    pointer-events: all;
    opacity: 1;
}
.pop-over-wrapper {
    position: fixed;
    right: -100%;
    top: 50%;
    transform: translateY(-50%);
    width: 1200px;
    height: 780px;
    overflow: hidden;
    z-index: 100;
    transition: all 1s ease-in-out;
    max-width: 100dvw;
    max-height: 80dvh;
}
.pop-over-wrapper.open {
    right: 0;
}
.pop-over-wrapper .close-pop-over {
    width: 30px;
    height: 30px;
     background-image: url("data:image/svg+xml,%3Csvg width='37' height='39' viewBox='0 0 37 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1007 29.09L18.69 22.2333L25.2794 29.09L27.8419 26.4235L21.2526 19.5668L27.8419 12.7101L25.2794 10.0437L18.69 16.9003L12.1007 10.0437L9.53814 12.7101L16.1275 19.5668L9.53814 26.4235L12.1007 29.09ZM18.69 38.6131C16.158 38.6131 13.7785 38.1131 11.5516 37.1132C9.32459 36.1133 7.38744 34.7562 5.7401 33.0421C4.09275 31.3279 2.78861 29.3122 1.82766 26.9949C0.866706 24.6776 0.38623 22.2015 0.38623 19.5668C0.38623 16.9321 0.866706 14.456 1.82766 12.1387C2.78861 9.82145 4.09275 7.80572 5.7401 6.09155C7.38744 4.37738 9.32459 3.02033 11.5516 2.0204C13.7785 1.02047 16.158 0.520508 18.69 0.520508C21.2221 0.520508 23.6016 1.02047 25.8285 2.0204C28.0555 3.02033 29.9926 4.37738 31.64 6.09155C33.2873 7.80572 34.5915 9.82145 35.5524 12.1387C36.5134 14.456 36.9939 16.9321 36.9939 19.5668C36.9939 22.2015 36.5134 24.6776 35.5524 26.9949C34.5915 29.3122 33.2873 31.3279 31.64 33.0421C29.9926 34.7562 28.0555 36.1133 25.8285 37.1132C23.6016 38.1131 21.2221 38.6131 18.69 38.6131ZM18.69 34.8038C22.7779 34.8038 26.2404 33.3278 29.0775 30.3756C31.9145 27.4234 33.3331 23.8205 33.3331 19.5668C33.3331 15.3131 31.9145 11.7102 29.0775 8.75803C26.2404 5.80586 22.7779 4.32977 18.69 4.32977C14.6022 4.32977 11.1397 5.80586 8.30263 8.75803C5.46554 11.7102 4.04699 15.3131 4.04699 19.5668C4.04699 23.8205 5.46554 27.4234 8.30263 30.3756C11.1397 33.3278 14.6022 34.8038 18.69 34.8038Z' fill='%23BCC5CF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    text-align: center;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 4;
}
.pop-over-wrapper .demos-content {
    position: relative;
    background-color: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,.25);
    padding: 60px 50px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    grid-column-gap: 35px;
    border-radius: 24px 0 0 24px;
}
.pop-over-wrapper .demos-content::before {
    content: "";
    display: block;
    background-image: url('https://cloudinary-marketing-res.cloudinary.com/image/upload/v1727886220/right-left02_3.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    width: 266px;
    height: 486px;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
}
.pop-over-wrapper .demos-content .title {
    flex: 1 0 100%;
    max-width: 100%;
    margin-bottom: 30px;
    position: relative;
    z-index: 3;
}
.pop-over-wrapper .demos-content .title h3 {
    margin-bottom: 0;
    text-transform: none;
}

.pop-over-wrapper .demos-content .post-featured {
    flex: 1 0 55%;
    max-width: 55%;
    margin-bottom: 30px;
    position: relative;
    z-index: 3;
}
.pop-over-wrapper .demos-content .post-featured .button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.pop-over-wrapper .demos-content .post-featured .image {
    margin-bottom: 40px;
}
.pop-over-wrapper .demos-content .post-featured .image-inner {
    border-radius: 24px;
}

.pop-over-wrapper .demos-content .posts-grid-wrapper .swiper-button-next,
.pop-over-wrapper .demos-content .posts-grid-wrapper .swiper-button-prev {
    top: 0;
    right: 0;
    margin-top: 0;
    width: 32px;
    height: 30px;
}
.pop-over-wrapper .demos-content .posts-grid-wrapper .swiper-button-prev {
    right: 60px;
    top: 2px;
    left: auto;
}
.pop-over-wrapper .demos-content .posts-grid-wrapper .swiper-button-next::after,
.pop-over-wrapper .demos-content .posts-grid-wrapper .swiper-button-prev::after {
    content: "->";
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
}
.pop-over-wrapper .demos-content .posts-grid-wrapper .swiper-button-prev::after {
    transform: rotate(180deg);
}

.pop-over-wrapper .demos-content .posts-grid-wrapper {
    flex: 1;
    position: relative;
    z-index: 3;
    padding: 50px 0 0 0;
    margin-top: -50px;
}
.pop-over-wrapper .demos-content .posts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-row-gap: 20px;
    padding: 0 5px 5px 5px;
}
.pop-over-wrapper .demos-content .posts-grid .demo-item {
    flex: 1 0 50% !important;
    max-width: calc(50% - 10px) !important;
    overflow: hidden;
    cursor: pointer;
    border: solid 1px rgba(0,0,0,0);
}.pop-over-wrapper .demos-content .posts-grid .demo-item.active {
    border-color: #0095FF;
}
.pop-over-wrapper .demos-content .posts-grid .demo-item .content .text,
.pop-over-wrapper .demos-content .posts-grid .demo-item .image .button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.pop-over-wrapper .demos-content .posts-grid .demo-item .content {
    padding: 15px;
}
.pop-over-wrapper .demos-content .posts-grid .demo-item .content .title {
    margin: 0;
    justify-content: center;
    text-align: center;
}
.pop-over-wrapper .demos-content .posts-grid .demo-item .content .title h3 {
    font-size: 14px;
}
.pop-over-wrapper .demos-content .posts-grid .demo-item .image-inner {
    aspect-ratio: 2/1;
}


@media (max-width: 991px) {
    .intro .demos-content {
        margin-bottom: 30px;
    }
}
@media (max-width: 767px) {
    .pop-over-wrapper .close-pop-over {
        top: 10px;
        right: 10px;
        left: auto;
    }
    .pop-over-wrapper .demos-content {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 30px;
    }
    .pop-over-wrapper .demos-content .post-featured {
        flex: 1 0 100%;
        max-width: 100%;
    }
    .pop-over-wrapper .demos-content .posts-grid-wrapper {
        flex: 1 0 100%;
        max-width: calc(100% + 10px);
        height: auto;
        margin: 0;
    }
    .pop-over-wrapper .demos-content .posts-grid {
        padding-left: 0;
        padding-right: 0;
    }
    .pop-over-wrapper .demos-content::before {
        position: fixed;
    }
}