.section-title {text-align: center}

#hero-section {
    background: var(--banner-bg);
    min-height: 350px;
    padding: 190px 20px 108px;
    color: var(--color-white);
}
#hero-section .section-container {
    align-items: center;
    max-width: 1224px;
    padding: 0;
}
#hero-section .col-left {
    width: 47%;
    padding-right: 40px;
}
#hero-section .col-left .type {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-gray-100);
}
#hero-section .col-left .page-title {
    margin-top: 16px;
    color: var(--color-white);
}
#hero-section .col-left .description p {
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 1.77;
    color: var(--color-gray-100);
}
#hero-section .btns-wrapper {
    justify-content: flex-start;
    margin-top: 35px;
}
#hero-section .col-right {
    width: 58%;
    margin-left: -40px;
}
#hero-section.open-source .col-right {
    margin-left: 0;
}
.inner-nav-wrapper {z-index: 20;}
.inner-nav-wrapper nav {padding: 0;}
.mobile-inner-nav-trigger {display: none;}
#calico-inner-menu {
    display: flex;
    margin-block: 0;
    padding: 0;
    list-style-type: none;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
#calico-inner-menu .menu-item + .menu-item {
    margin-left: 3%;
}

#calico-inner-menu .menu-item.menu-item-has-children > a:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M100 153.6L35.3 89c-7-7-7-18.2 0-25.2s18.2-7 25.2 0L100 103.3l39.5-39.5c7-7 18.2-7 25.2 0s7 18.2 0 25.2L100 153.6z'/%3E%3C/svg%3E");
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 22px;
    padding: 1px 0 1px 5px;
}
#calico-inner-menu .menu-item .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    padding: 19px 20px;
    border-radius: 5px;
    background: var(--color-brand-primary);
    box-shadow: -50px 80px 80px rgba(102, 124, 167, 0.05),
            -10px 42px 33px rgba(102, 124, 167, 0.03),
            -10px 22px 18px rgba(102, 124, 167, 0.02),
            0px 12px 10px rgba(102, 124, 167, 0.035);
}
@media (hover:hover) {
    #calico-inner-menu .menu-item a:hover {
        text-decoration: none;
        color: var(--color-brand-accent);
    }
    #calico-inner-menu .menu-item:hover .sub-menu {
        display: block;
    }
}

#calico-inner-menu .menu-item .sub-menu li {
    list-style-type: none;
    margin-bottom: 10px;
}
#calico-inner-menu .menu-item .sub-menu a {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
#calico-inner-menu .menu-item .sub-menu a:hover {color: var(--color-brand-accent)}


#benefits {
    padding: 68px 0;
    background: #efefef;
}
#benefits .section-title {
    margin-bottom: 12px;
    padding-bottom: 0;
}
#benefits .subtitle {
    width: 775px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}
#benefits.open-source .subtitle {
    width: 1200px;
    max-width: 100%;
}
#benefits .benefits-items {
    justify-content: space-between;
    margin-top: 42px;
}
#benefits .benefits-items .benefit-item {
    width: 279px;
    max-width: 24.5%;
    padding: 36px 30px;
    text-align: center;;
}
#benefits .benefits-items.three-items .benefit-item {
    width: 32%;
    max-width: 32%;
}
#benefits.open-source .benefits-items .benefit-item {padding: 36px 24px}
#benefits .benefits-items .benefit-item .item-title {
    margin-bottom: 0;
    font-size: var(--font-size-xl);
}
#benefits.open-source .benefits-items .benefit-item .item-title {font-size: var(--font-size-md)}
#benefits .benefits-items .benefit-item .icon-wrapper {min-height: 104px}
#benefits .benefits-items .benefit-item .icon-wrapper img {
    width: 84px;
    mix-blend-mode: darken;
}
#partners {padding: 68px 0 118px}

.splide__arrow--prev{left:-92px}
.splide__arrow--prev svg{transform:scaleX(-1)}
.splide__arrow--next{right:-92px}

@media screen and (max-width: 1559px) {
    .splide__arrow--next {right: -60px}
    .splide__arrow--prev {left: -60px}
}

#architecture {
    padding: 68px 0;
    background: #efefef;
}
#architecture.white-bg {
    background: var(--color-white);
}
#architecture .section-container {
    padding: 0;
}
#architecture .section-title {
    margin-top: 0;
    margin-bottom: 40px;
    padding-bottom: 0;
}
#architecture img {
    display: block;
    margin: 0 auto;
}
.page-id-56493 #architecture img {
    width: 1100px;
}
#architecture img.magnify,
.capability-row .img-col img.magnify {
    cursor: zoom-in;
}

#capabilities {
    padding-bottom: 182px;
    background: #efefef
}
#capabilities .section-heading {
    flex-direction: column;
    align-items: center;
    padding: 80px 20px 147px;
    background-image: linear-gradient(to right, #072773, #2C5FBA);
    background-image: url('../img/home-con-sec-bg.png'), linear-gradient(to right, #072773, #2C5FBA);
    background-repeat: no-repeat;
    background-size: contain;
}
@supports (background-image: url('../img/home-con-sec-bg.webp')) {
    #capabilities .section-heading {
        background-image: url('../img/home-con-sec-bg.webp'), linear-gradient(to right, #072773, #2C5FBA);
    }
}
#capabilities .section-heading .section-title {
    margin: 0;
    color: var(--color-white);
}
#capabilities .section-heading .subtitle {
    max-width: 920px;
    margin-bottom: 0;
    text-align: center;
    color: var(--color-white);
}

#capabilities .main-content {
    margin-top: -80px;
}
#capabilities .main-tabs .section-container {
    padding: 0;
}
#capabilities .main-tabs ul {
    align-items: center;
    margin: 0;
    padding: 0;
    text-align: center;
}
#capabilities .main-tabs ul li {
    width: 50%;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    background: var(--t-sblue);
    color: #8493be;
    border-radius: 0 8px 0 0;
}
#capabilities .main-tabs ul li:first-child {
    border-radius: 8px 0 0 0;
}
#capabilities .main-tabs ul li.active {
    background: #efefef;
    color: var(--color-gray-900);
    box-shadow: 0 -10px 20px 0 rgba(9, 40, 125, .5), -10px 0 20px 0 rgba(9, 40, 125, .5);
}
#capabilities .main-tabs ul li a {
    display: block;
    padding: 21.3px;
    color: inherit;
}
#capabilities .main-tabs ul li a:hover {
    text-decoration: none;
}
#capabilities .main-tabs-content {
    position: relative;
    background: #efefef;
    padding-top: 47px;
}
#capabilities .main-tabs-content .inner-tabs-wrapper {
    position: relative;
}

@media only screen and (min-width: 1224px) and (max-width: 1540px) {
    #capabilities .main-tabs-content .inner-tabs-wrapper {
        max-width: 100%;
        overflow: auto;
        margin-bottom: 60px;
    }
    #capabilities .main-tabs-content ul.inner-tabs {
        margin-bottom: 0;
    }
}
#capabilities .main-tabs-content .inner-tabs-wrapper:after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 1px;
    background: #888;
}
#capabilities .main-tabs-content .section-container,
#capabilities .main-tabs-content .inner-tabs-wrapper .section-container {
    padding: 0;
}
#capabilities .main-tabs-content ul.inner-tabs {
    position: relative;
    list-style-type: none;
    margin: 0 0 60px;
    padding: 0;
    white-space: nowrap;
}

#capabilities .main-tabs-content ul.inner-tabs li a {
    position: relative;
    display: block;
    padding: 0 20px 20px;
    font-weight: 500;
    color: #a7a7a7;
}
#capabilities .main-tabs-content ul.inner-tabs li a:hover {
    text-decoration: none;
    color: var(--color-gray-900);
}
#capabilities .main-tabs-content ul.inner-tabs li.active a {
    color: var(--color-gray-900);
}
#capabilities .main-tabs-content ul.inner-tabs li.active a:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right, #326de6, #08a2c4);
}

#capabilities .main-tabs-content .main-tab-content {display: none}
#capabilities .main-tabs-content .main-tab-content.active {display: block}
#capabilities .inner-tabs .section-container {
    max-width: 1284px;
    padding: 0 0 0 30px;
}
#capabilities .inner-tab-content {
    display: none;
    align-items: center;
}
#capabilities .inner-tab-content.active {
    display: flex;
}
#capabilities .inner-tab-content .inner-text {
    width: 50%;
    padding-right: 40px;
}
#capabilities .inner-tab-content .inner-text .item-subtitle {
    font-size: var(--font-size-sm);
    font-weight: bold;
    text-transform: uppercase;
    color: #326ce5;
}
#capabilities .inner-tab-content .inner-text .item-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
}
#capabilities .inner-tab-content .inner-text .item-main-text {
    font-size: var(--font-size-md);
    font-weight: 500;
    margin-top: 16px;
    color: var(--color-gray-900);
}
#capabilities .inner-tab-content .inner-text .item-main-text p {
    line-height: 1.5;
}
#capabilities .inner-tab-content .links-wrapper {
    align-items: center;
    margin-top: 40px;
}
#capabilities .inner-tab-content .links-wrapper .text-link {
    margin-left: 40px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-900);
    white-space: nowrap;
}
#capabilities .inner-tab-content .links-wrapper .text-link:hover {
    text-decoration: underline;
}
#capabilities .inner-tab-content .links-wrapper .text-link:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    background: url('../img/arrow-right.png') no-repeat center center;
}
#capabilities .inner-tab-content .inner-img {
    width: 50%;
    padding-left: 50px;
}
#capabilities .inner-tab-content .inner-img .zoom-link {
    cursor: zoom-in;
}
#capabilities .inner-tab-content .inner-img img {
    display: block;
    box-shadow: 0 100px 80px 0 rgba(102, 124, 167, .08),
                0 42px 33px 0 rgba(102, 124, 167, .07),
                0 22px 18px 0 rgba(102, 124, 167, .06),
                0 13px 10px 0 rgba(102, 124, 167, .05);
}

.capability-row {
    padding: 68px 0;
}
.capability-row:nth-child(even) {
    background: var(--banner-bg);
}
.capability-row:nth-child(odd) {
    background: var(--color-bg-light);
}
.capability-row:nth-child(odd) .wrapper {
    flex-direction: row-reverse;
}
.capability-row .wrapper {
    align-items: center;
    gap: 52px;
}
.capability-row .img-col {
    width: 563px;
    flex-shrink: 0;
}
.capability-row .img-col.arcade-video-wrapper {
    width: 600px;
}
.capability-row .img-col img {
    display: block;
}
.capability-row .cap-title {
    margin: 0 0 24px;
    padding: 0;
}
.capability-row:nth-child(even) .cap-title,
.capability-row:nth-child(even) .entry-content {
    color: var(--color-white);
}
.capability-row .entry-content p {
    font-size: var(--font-size-md);
    line-height: normal;
}

.book-live-demo .banner-wrapper {
    max-width: 1016px;
    margin: -140px auto 0;
    padding-top: 68px;
    overflow: hidden;
}
.book-live-demo .banner-wrapper .banner-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 136px;
    padding: 20px 20px 20px 80px;
    text-align: center;
    background-image: linear-gradient(to right, #072773, #2C5FBA);
    background-image: url('../img/home-laptop-bg.svg'), linear-gradient(to right, #072773, #2C5FBA);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    border-radius: 8px;
    color: var(--color-white);
}

.book-live-demo .banner-wrapper .banner-inner span {
    display: block;
}
.book-live-demo .banner-inner .laptop-img {
    position: absolute;
    bottom: -2px;
    left: 0;
}
.book-live-demo .banner-inner span.laptop-img-mobile {
    display: none;
}
.book-live-demo .banner-inner .laptop-img img {
    display: block;
}
.book-live-demo .banner-inner .banner-title {
    margin-bottom: 22px;
    font-size: var(--font-size-2xl);
    line-height: 30px;
    font-weight: 700;
    color: var(--color-white);
}
.book-live-demo .banner-inner .banner-cta {
    font-weight: 700;
    color: var(--color-white);
}
.book-live-demo .banner-inner .banner-cta:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    width: 10px;
    height: 10px;
    background: url('../img/arrow-right.png') no-repeat center center;
    filter: brightness(0) invert(1);
}
.book-live-demo .banner-wrapper .banner-inner:hover {
    text-decoration: none;
}
.book-live-demo .banner-wrapper .banner-inner:hover .banner-title,
.book-live-demo .banner-wrapper .banner-inner:hover .banner-cta {
    opacity: .8;
}

#cloud-marketplace {
    padding: 34px 0 28px;
}
#cloud-marketplace .section-container {
    align-items: center;
    padding-left: 20px;
    padding-right: 0;
}
#cloud-marketplace .text-col {
    width: 60%;
}
#cloud-marketplace .text-col .sol-section-title {
    margin-bottom: 12px;
    padding-bottom: 0;
    font-size: var(--font-size-3xl);
}
#cloud-marketplace .text-col .btns-wrapper {
    margin-top: 32px;
}
#cloud-marketplace .img-col {
    padding-left: 10px;
}

#key-features {
    padding: 68px 0;
    background: #efefef;
}
#key-features .section-container {
    padding: 0 25px;
}
#key-features .section-title {
    padding-bottom: 0;
    font-size: var(--font-size-5xl);
}
#key-features .features-wrapper,
#key-features .features-wrapper .features-items {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 54px;
}
#key-features .features-wrapper .features-items {
    margin: 22px 0 10px;
}
#key-features .features-wrapper .category-title {
    margin-top: 0;
    padding-bottom: 0;
}
#key-features .features-wrapper .ft-item {
    gap: 12px;
    width: calc(33.9% - 20px);
    padding: 14px 20px;
    color: var(--color-text-body);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
#key-features .features-wrapper .ft-item .card-header {
    align-items: center;
}
#key-features .features-wrapper .ft-item .card-desc {
    font-size: var(--font-size-sm);
    font-weight: 500;
}
#key-features .features-wrapper .ft-item .more-btn {
    margin-top: auto;
    font-size: var(--font-size-base);
    font-weight: 700;
    opacity: 1;
    z-index: 1;
    transition: opacity 0.3s ease, z-index 0.3s linear .3s;
}
#key-features .features-wrapper .ft-item .icon-wrapper {
    flex-shrink: 0;
    width: 72px;
}
#key-features .features-wrapper .ft-item .icon-wrapper img {
    display: block;
    width: 60px;
    height: auto;
}
#key-features .features-wrapper .ft-item .icon-wrapper:hover + .item-title a {
    text-decoration: underline;
}
#key-features .features-wrapper .ft-item .item-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.3;
    color: #141414;
}

#key-features .features-wrapper .ft-item:not(.active):hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

#key-features .features-wrapper .ft-item.active {
    border: 1px solid #DCDDE0; 
}
#key-features .features-wrapper .ft-item.active .more-btn {
    opacity: 0;
    z-index: -1;
}

#key-features .features-wrapper .ft-item.connected-to-expandable {
    border-bottom: 1px solid var(--color-white) !important; 
    border-bottom-left-radius: 0 !important; 
    border-bottom-right-radius: 0 !important;
    z-index: 10; 
    position: relative;
}

#key-features .features-wrapper .ft-item.connected-to-expandable:after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: -1px;
    right: -1px;
    height: 22px;
    background: var(--color-white);
    border-left: 1px solid #DCDDE0;
    border-right: 1px solid #DCDDE0;
    z-index: 15;
}

#key-features .features-wrapper .expandable-content {
    display: none;
    width: 100%;
    /* order: 9999; */
    padding: 40px;
    color: #141414;
    background: var(--color-white);
    border-radius: 8px;
    border: 1px solid #DCDDE0; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
    animation: slideDown 0.3s ease-out;
}

#key-features .features-wrapper .expandable-content.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#key-features .features-wrapper .expandable-content .exp-cols {
    display: flex;
    gap: 40px;
}

#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper {
    width: calc(46% - 20px);
    position: relative;
}

#key-features .features-wrapper .expandable-content .exp-col.content-wrapper {
    width: calc(54% - 20px);
}
#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.youtube {
    position: relative;
    height: 100%;
}
#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.youtube img {
    height: 100%;
    object-fit: cover;
}
#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.wistia {
    position: relative;
    display: flex;
}
#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.wistia .play-button {
    width: 127px;
    height: 81px;
    position: absolute;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(23, 75, 210, 0.76);
    text-align: center;
    align-content: center;
    transition: 0.2s all;
}
#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.wistia .play-button:hover {
    width: 100%;
    height: 100%;
}

#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.youtube .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 14px;
    transition: background-color 0.3s ease;
}

#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.youtube .play-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent var(--color-white);
}

#key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper .video-thumbnail-container.youtube:hover .play-button {
    background-color: #ff0000;
}

#key-features .features-wrapper .expandable-content.no-iframe .exp-col.arcade-wrapper {
    display: none;
}
#key-features .features-wrapper .expandable-content.no-iframe .exp-col.content-wrapper {
    width: 100%;
}

#key-features .features-wrapper .expandable-content .exp-title {
    margin-bottom: 20px;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

#key-features .features-wrapper .expandable-content .exp-content p {
    line-height: 1.5;
}
#key-features .features-wrapper .expandable-content .exp-content p span {
    font-weight: 500 !important;
}

#how-it-works {
    padding: 68px 0;
}
#how-it-works .section-title {
    margin-bottom: 10px;
    padding-bottom: 0;
}
#how-it-works .subtitle {
    max-width: 775px;
    margin: 0 auto 56px;
    text-align: center;
    line-height: normal;
}
#how-it-works.small-margin .subtitle {
    margin-bottom: 28px;
}
#how-it-works .video-wistia {
    position: relative;
    width: 568px;
    max-width: 100%;
    margin: 0 auto;
}
#how-it-works .video-wistia .wistia_embed {
    border-radius: 5px;
    overflow: hidden;
}
#how-it-works .video-wistia > img {
    pointer-events: none;
}
#how-it-works .video-wistia button {
    width: 127px;
    height: 81px;
    position: absolute;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(23, 75, 210, 0.76);
    transition: 0.2s all;
}
#how-it-works .video-wistia button:hover {
    width: 100%;
    height: 100%;
}
#how-it-works .how-img {
    display: block;
    width: 563px;
    margin: 0 auto;
    box-shadow: -50px 80px 80px rgba(102, 124, 167, 0.05),
            -10px 42px 33px rgba(102, 124, 167, 0.03),
            -10px 22px 18px rgba(102, 124, 167, 0.02),
            0px 12px 10px rgba(102, 124, 167, 0.035);
}
#how-it-works .how-img.magnify {
    cursor: zoom-in;
}
#key-features .features-wrapper .features-category {
    width: 100%;
}

#key-features .features-wrapper .expandable-content .wistia_embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Iframe וplaceholder בתוכן המתרחב */
#key-features .features-wrapper .expandable-content iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1.56098 / 1;
    height: 100%;
    border: none;
    display: none;
}

#key-features .features-wrapper .expandable-content iframe.show {
    display: block;
    z-index: 2;
    position: relative;
}

#key-features .features-wrapper .expandable-content #iframe-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-gray-100);
    color: #666;
}

#key-features .features-wrapper .expandable-content #iframe-placeholder.hide {
    display: none;
}

#testimonials {
    padding: 68px 0;
    background: var(--banner-bg);
    color: var(--color-white);
}
#testimonials .section-title {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--color-white);
}
#testimonials .subtitle {
    font-size: var(--font-size-xl);
    line-height: 1.5;
    text-align: center;
}
#testimonials .testimonial-items {
    margin-top: 50px;
}
#testimonials .testimonial-item.flex {
    flex-direction: column;
    align-items: center;
    width: 573px;
    max-width: 95%;
    margin: 0 auto;
    padding-top: 20px;
    border-radius: 8px;
    background: var(--color-white);
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.16));
}
#testimonials .testimonial-item blockquote {
    margin: 0;
    padding: 6px 20px 10px;
    font-size: var(--font-size-md);
    line-height: 1.5;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: var(--color-gray-900);
}
#testimonials .testimonial-item .details-wrapper {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px 20px;
}
#testimonials .testimonial-item .author-name {
    margin-bottom: 9px;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #141414;
}
#testimonials .testimonial-item .author-position {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #5f5f5f
}
#testimonials .testimonial-item .testimonial-footer {
    width: 100%;
    padding: 20px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-brand-primary);
    border-top: 1px solid #dcdde0;
}
#testimonials .testimonial-item .testimonial-footer svg {
    float: right;
}
#testimonials .btns-wrapper {
    margin-top: 50px;
}

#resources {
    padding: 68px 0;
    background: var(--color-bg-light);
}
#resources .section-container {
    padding-left: 20px;
    padding-right: 20px;
}
#resources .section-title {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 0;
}
#resources .subtitle {
    width: 780px;
    max-width: 95%;
    margin: 0 auto 28px;
    text-align: center;
}
#resources .ft-items {
    justify-content: space-between;
    margin-top: 56px;
}
#resources .ft-items .ft-item {
    position: relative;
    width: 371px;
    max-width: 32.5%;
    padding-bottom: 66px;
    border: 1px solid #DCDDE0;
    border-radius: 8px;
    background: var(--color-white);
    overflow: hidden;
    cursor: pointer;
}
#resources .ft-items .ft-item .content-wrapper {
    padding: 12px 24px;
}
#resources .ft-items .ft-item .content-wrapper .item-tag {
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
}
#resources .ft-items .ft-item .content-wrapper .item-title {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: var(--font-size-xl);
}
#resources .ft-items .ft-item .content-wrapper .item-excerpt {
    font-size: var(--font-size-base);
    line-height: 1.5;
     text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-gray-900);
}
#resources .ft-items .ft-item .item-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 11px 16px 20px;
    color: var(--color-brand-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-top: 1px solid #dcdde0;
}
#resources .ft-items .ft-item .item-footer svg {
    float: right;
}
#resources .splide__pagination__page {
    width: 8px;
}

#get_started {
    padding: 68px 0;
    text-align: center;
}
#get_started .gs-img {
    max-width: 300px;
}
#get_started .section-title {
    margin-top: 32px;
    padding-bottom: 0;
}
#get_started .subtitle {
    margin-top: 11px;
    font-size: var(--font-size-xl);
    line-height: 1.5;
    color: var(--color-gray-900);
}
#get_started .btns-wrapper {
    margin-top: 32px;
    justify-content: center;
}

#img-zoom-popup.show {
  display: block;
}

@media only screen and (max-width: 1360px) {
    #cloud-marketplace .section-container {
        padding-left: 0;
    }
}

@media only screen and (max-width: 1223px) {
    .inner-nav-wrapper nav {
        max-width: 1000px;
    }
    #calico-inner-menu {
        white-space: nowrap;
        overflow: auto;
    }
    #calico-inner-menu .menu-item.menu-item-has-children.open ul {
        display: block;
    }

    #benefits .benefits-items .benefit-item {
        padding: 36px 28px;
    }

    #capabilities .main-tabs-content ul.inner-tabs {
        overflow: auto;
    }

    .capability-row .img-col,
    .capability-row .img-col.arcade-video-wrapper {
        width: 500px;
        max-width: 100%;
    }
    #testimonials .testimonial-items {
        justify-content: space-between;
    }
    #testimonials .testimonial-item.flex {
        max-width: 49%;
    }
    #cloud-marketplace .img-col {
        max-width: 52%;
    }
}


@media only screen and (max-width: 1023px) {
    #hero-section {
        padding: 140px 20px 80px;
        background-size: cover;
    }
    #hero-section .section-container {
        flex-direction: column;
        padding: 0;
        text-align: center;
    }
    #hero-section .col-left {
        width: 100%;
        padding-right: 0;
    }
    #hero-section .col-right {
        width: 100%;
        margin-top: 30px;
        margin-left: 0;
    }
    #hero-section .btns-wrapper {
        justify-content: center;
    }
    .inner-nav-wrapper nav {
        max-width: 960px;
        padding: 0 20px;
    }
    #benefits .benefits-items {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    #benefits .benefits-items .benefit-item {
        max-width: 100%;
    }
    #benefits .benefits-items.three-items .benefit-item {
        width: 46%;
        max-width: 100%;
    }
    .splide__arrow--next {
        right: -40px;
    }
    .splide__arrow--prev {
        left: -40px;
    }
    #capabilities .main-tabs ul li a {
        padding: 21px 10px;
        font-size: var(--font-size-lg);
    }
    #capabilities .inner-tab-content .inner-text .item-title:after,
    #key-features .features-wrapper .ft-item .item-title:after {
        display: none;
    }
    #capabilities .inner-tab-content .inner-text .item-main-text {
        font-size: var(--font-size-base);
    }
    #capabilities .inner-tab-content .inner-img {
        padding-left: 20px;
    }

    .capability-row .wrapper,
    .capability-row:nth-child(odd) .wrapper {
        flex-direction: column;
        text-align: center;
        gap: 28px;
    }
    .capability-row .img-col.arcade-video-wrapper {
        width: 600px;
    }

    .book-live-demo .banner-wrapper .banner-inner {
        height: 120px;
        margin: 0 20px;
        padding-left: 110px;
    }
    .book-live-demo .banner-inner .laptop-img {
        bottom: 0;
        left: 1px;
    }
    .book-live-demo .banner-inner .laptop-img img {
        max-width: 230px;
    }
    .book-live-demo .banner-inner .banner-title {
        position: relative;
        z-index: 1;
    }
    #cloud-marketplace .section-container {
        flex-direction: column;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    #cloud-marketplace .text-col .sol-section-title {
        font-size: var(--font-size-xl);
        text-align: center;
    }
    #cloud-marketplace .text-col {
        width: auto;
    }
    #cloud-marketplace .text-col .btns-wrapper {
        display: block;
        position: relative;
        width: 220px;
        margin: 36px auto 0;
    }
    #cloud-marketplace .img-col {
        max-width: 100%;
        margin-top: 30px;
    }

    #key-features .features-wrapper .ft-item {
        width: calc(50% - 10px);
    }
    #key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper,
    #key-features .features-wrapper .expandable-content .exp-col.content-wrapper {
        width: 90%;
    }
    #testimonials .testimonial-items {
        flex-direction: column;
        gap: 32px;
    }
    #testimonials .testimonial-item.flex {
        max-width: 100%;
    }

    #resources .ft-items {
        flex-direction: column;
        gap: 30px;
    }
    #resources .ft-items .ft-item {
        width: 500px;
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    #key-features .features-wrapper .ft-item {
        width: calc(50% - 10px);
    }
    #key-features .features-wrapper .expandable-content .exp-cols {
        flex-wrap: wrap;
    }
    #key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper,
    #key-features .features-wrapper .expandable-content .exp-col.content-wrapper {
        width: 90%;
    }
}

@media (max-width: 768px) {
    #key-features .features-wrapper .ft-item {
        width: 100%;
    }
    #key-features .features-wrapper .expandable-content {
        /* padding: 25px; */
    }
    #key-features .features-wrapper .expandable-content .exp-cols {
        flex-direction: column;
        gap: 20px;
    }
}

@media only screen and (max-width: 767px) {
    body.fixed-pos {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    #hero-section {
        padding-top: 110px;
        padding-bottom: 48px;
         background-image: url('../img/home-hero-mobile.jpg');
    }
    @supports(background-image: url('../img/home-hero-mobile.webp')) {
        #hero-section {
            background-image: url('../img/home-hero-mobile.webp');
        }
    }

    #hero-section .col-left .page-title {
        margin-bottom: 10px;
        font-size: var(--font-size-4xl);
    }
    #hero-section .hero-image-wrapper {
        margin-left: -20px;
        margin-right: -20px;
    }
    #hero-section .btns-wrapper {
        flex-direction: column;
    }
    #hero-section .col-right {
        margin-top: 30px;
    }

    .inner-nav-wrapper nav { 
        padding: 0;
    }
    .mobile-inner-nav-trigger {
        display: block;
        position: relative;
        padding: 0 20px;
        font-weight: 500;
        color: var(--color-white);
    }
    .sticky-inner #calico-inner-menu {
        display: none;
    }
    .sticky-inner.open #calico-inner-menu {
        display: flex;
        column-count: 1;
    }
    .sticky-inner #calico-inner-menu .menu-item + .menu-item {
        margin-left: 0;
    }
    #calico-inner-menu .menu-item a {
        font-weight: 500;
    }
    .mobile-inner-nav-trigger:hover {
        color: var(--color-white);
    }
    .mobile-inner-nav-trigger:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M100 153.6L35.3 89c-7-7-7-18.2 0-25.2s18.2-7 25.2 0L100 103.3l39.5-39.5c7-7 18.2-7 25.2 0s7 18.2 0 25.2L100 153.6z'/%3E%3C/svg%3E");
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%) scale(1.5);
        width: 17px;
        height: 22px;
        padding: 1px 0 1px 5px;
    } 
    #calico-inner-menu {
        display: none;
    }
    .inner-nav-wrapper,
    body.admin-bar.fixed-pos .inner-nav-wrapper {
        top: 82px;
    }
    body.admin-bar .inner-nav-wrapper {
        top: 127px;
    }
    body.fixed-pos .inner-nav-wrapper {
        width: 100%;
        z-index: 9001;
    }
    .section-container.open .mobile-inner-nav-trigger:after {
        transform: translateY(-50%) rotate(180deg) scale(1.5);
    }
    .section-container.open #calico-inner-menu {
        display: block;
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        min-height: calc(100vh - 191px);
        margin: 0;
        padding: 20px;
        font-size: var(--font-size-sm);
        text-align: left;
        background: var(--color-white);
        overflow: auto;
    }
    .sticky-inner #calico-inner-menu .menu-item {
        font-size: var(--font-size-sm);
    }
    #calico-inner-menu li + li {
        margin-top: 10px;
    }
    #calico-inner-menu .menu-item + .menu-item {
        margin-left: 0;
    }
    #calico-inner-menu .menu-item a {
        color: var(--color-brand-primary);
        text-decoration: none !important;
        white-space: normal;
    }
    #calico-inner-menu .menu-item.menu-item-has-children > a:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23041a57' d='M100 153.6L35.3 89c-7-7-7-18.2 0-25.2s18.2-7 25.2 0L100 103.3l39.5-39.5c7-7 18.2-7 25.2 0s7 18.2 0 25.2L100 153.6z'/%3E%3C/svg%3E");
    }
    #calico-inner-menu .menu-item.menu-item-has-children.open > a {
        color: var(--color-brand-accent);
    }
    #calico-inner-menu .menu-item.menu-item-has-children.open > a:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23ff9e16' d='M100 153.6L35.3 89c-7-7-7-18.2 0-25.2s18.2-7 25.2 0L100 103.3l39.5-39.5c7-7 18.2-7 25.2 0s7 18.2 0 25.2L100 153.6z'/%3E%3C/svg%3E");
        transform: rotate(180deg);
        padding: 3px 4px 5px 1px;
    }
    #calico-inner-menu .menu-item .sub-menu {
        position: static;
    }
    #calico-inner-menu .menu-item.open .sub-menu {
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 14px 4px 4px 18px;
        font-size: var(--font-size-sm);
    }

    .section-title {
        font-size: var(--font-size-4xl);
    }
    #benefits {
        padding: 40px 0;
    }
    #benefits .section-title {
        margin-bottom: 22px;
    }
    #benefits .subtitle {
        font-size: var(--font-size-base);
        max-width: 100%;
    }
    #benefits .benefits-items .benefit-item {
        width: 100%;
        padding: 36px 28px 30px;
    }
    #benefits .benefits-items.three-items .benefit-item {
        width: 100%;
    }
    #benefits .benefits-items .benefit-item .item-title {
        margin-top: 0;
        font-size: var(--font-size-md);
    }
    
    #partners {
        padding: 40px 0;
    }
    #partners .section-title {
        line-height: 1.3;
    }
    #partners .splide {
        margin-left: -20px;
        margin-right: -20px;
    }
    #partners .splide__slide {
        text-align: center;
    }

    #architecture {
        padding: 40px 0;
    }
    #architecture .section-container {
        padding: 0 20px;
    }
    #architecture .section-title {
        margin-bottom: 24px;
    }

    #capabilities .section-heading {
        padding-top: 70px;
    }
    #capabilities .section-heading .subtitle {
        font-size: var(--font-size-md);
        line-height: normal;
        text-align: center;
    }
    #capabilities .section-heading {
        justify-content: center;
        min-height: 338px;
        padding: 0 20px 75px;
        background-image: url('../img/home-calico-prods-bg-mobile.svg'), linear-gradient(to right, #072773, #2C5FBA);
        background-position: top left;
        background-size: contain;
    }
    .page-id-56493 #capabilities .section-heading { 
        min-height: 408px;
        padding-bottom: 102px;
    }
    #capabilities .section-heading .section-title {
        font-size: 34px;
    }
    #capabilities .section-heading .subtitle {
        font-size: var(--font-size-md);
        text-align: center;
    }
    #capabilities .main-content {
        margin-top: -102px;
    }
    #capabilities .main-tabs ul {
        /* white-space: nowrap; */
        overflow: auto;
        padding: 0 20px;
    }
    #capabilities .main-tabs ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 102px;
        min-width: 75%;
        max-width: 80%;
        flex-shrink: 0;
        font-size: var(--font-size-xl);
    }
    #capabilities .main-tabs-content {
        padding-top: 32px;
    }
    #capabilities .main-tabs-content .section-container {
        padding: 0 20px;
    }
    #capabilities .main-tabs-content ul.inner-tabs {
        margin-bottom: 40px;
        padding-left: 20px;
    }
    #capabilities .inner-tab-content {
        flex-direction: column;
        gap: 20px;
    }
    #capabilities .inner-tab-content .inner-text {
        width: 100%;
        padding-right: 0;
    }
    #capabilities .inner-tab-content .inner-text .item-subtitle {
        text-align: center;
    }
    #capabilities .inner-tab-content .inner-text .item-title {
        font-size: var(--font-size-xl);
        text-align: center;
    }
    #capabilities .inner-tab-content .inner-text .item-main-text p {
        font-size: var(--font-size-base);
        text-align: center;
    }
    #capabilities .inner-tab-content .inner-img {
        width: 100%;
        margin-top: 0;
        padding-left: 0;
    }
    #capabilities .inner-tab-content .links-wrapper {
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        margin-top: 20px;
    }
    #capabilities .inner-tab-content .links-wrapper .text-link {
        margin-left: 0;
    }

    .capability-row {
        padding: 40px 0 28px;
    }
    .capability-row .cap-title {
        font-size: var(--font-size-xl);
    }
    .capability-row .entry-content p {
        font-size: var(--font-size-base);
    }

    .book-live-demo .banner-wrapper .banner-inner {
        justify-content: flex-start;
        width: 335px;
        height: 367px;
        margin: 0 auto;
        padding: 40px 20px;
        background: none;
    }
    .book-live-demo .banner-wrapper {
        padding-top: 0;
    }
    .book-live-demo .banner-inner span.laptop-img {
       display: none;
    }
    .book-live-demo .banner-inner span.laptop-img-mobile {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 335px;
    }
    .book-live-demo .banner-inner .banner-cta {
        position: relative;
    }

    #cloud-marketplace .text-col .section-title {
        margin-top: 0;
        padding-bottom: 0;
        font-size: var(--font-size-xl);
        text-align: center;
    }
    #cloud-marketplace .text-col .market-text {
        margin-bottom: 30px;
        font-size: var(--font-size-base);
    }

    #key-features {
        padding: 40px 0;
    }
    #key-features .section-title {
        font-size: var(--font-size-4xl);
    }
    #key-features .features-wrapper {
        margin-top: 24px;
    }
    #key-features .features-wrapper .category-title {
        font-size: var(--font-size-lg);
    }
    #key-features .features-wrapper .ft-item {
        width: 100%;
        padding: 13px;
    }
    #key-features .features-wrapper .ft-item.connected-to-expandable {
        padding-bottom: 0;
    }
    #key-features .features-wrapper .expandable-content {
        padding: 0 25px 25px;
    }
    #key-features .features-wrapper .ft-item .item-title {
        font-size: var(--font-size-base);
    }
    #key-features .features-wrapper .expandable-content #expandable-iframe {
        aspect-ratio: 1.3 / 1;
    }
    
    #key-features .features-wrapper .expandable-content .exp-cols {
        flex-direction: column;
        gap: 20px;
    }
    
    #key-features .features-wrapper .expandable-content .exp-col.arcade-wrapper,
    #key-features .features-wrapper .expandable-content .exp-col.content-wrapper {
        width: 100%;
    }
    #key-features .features-wrapper .expandable-content.no-iframe .exp-col.arcade-wrapper {
        display: none;
    }
    #key-features .features-wrapper .expandable-content.no-iframe .exp-col.content-wrapper {
        width: 100%;
    }
    

    #how-it-works {
        padding: 40px 0;
    }
    #how-it-works .section-title {
        margin-bottom: 24px;
    }
    #how-it-works .subtitle {
        font-size: var(--font-size-md);
        line-height: normal;
    }
    #how-it-works .video-wistia button {
        width: 77px;
        height: 51px;
    }

    #testimonials {
        padding: 40px 0;
    }
    #testimonials .section-title {
        line-height: 1.33;
    }
    #testimonials .subtitle {
        margin-bottom: 30px;
        font-size: var(--font-size-md);
    }
    #testimonials .testimonial-items {
        margin-top: 40px;
    }
    #testimonials .testimonial-item .details-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 22px;
        padding-bottom: 0;
    }

    #resources {
        padding: 40px 0;
    }
    #resources .subtitle {
        font-size: var(--font-size-md);
        max-width: 100%;
    }
    #resources .ft-items .ft-item + .ft-item {
        margin-top: 30px;
    }
    #resources .ft-items .ft-item .content-wrapper .item-title {
        font-size: var(--font-size-xl);
    }

    #get_started {
        padding: 40px 0 70px;
    }
    #get_started .subtitle {
        font-size: var(--font-size-md);
    }
    #get_started .btns-wrapper {
        flex-direction: column;
        gap: 16px;
    }
}


/* ============================================================
   Task #39 (Klika 39.00) — Calico Commercial Editions (page 60684):
   rebrand the holdout blue sections (Capabilities + promo bar) to the new
   branding — charcoal --banner-bg surfaces + orange --color-link-gradient /
   --color-orange-500 accents. Scoped to .page-id-60684 so the shared template
   and the Calico Open Source page are untouched.
   ============================================================ */

/* Capabilities heading band: blue image+gradient -> brand charcoal */
.page-id-60684 #capabilities .section-heading {
    background: var(--banner-bg) !important;
}
/* Main-tab pills: blue -> charcoal; active stays light; neutral shadow */
.page-id-60684 #capabilities .main-tabs ul li {
    background: #3a3636;
    color: #c4c4c4;
}
.page-id-60684 #capabilities .main-tabs ul li.active {
    background: #efefef;
    color: var(--color-gray-900);
    box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, .30), -10px 0 20px 0 rgba(0, 0, 0, .30);
}
/* Inner-tab active underline: blue -> brand orange */
.page-id-60684 #capabilities .main-tabs-content ul.inner-tabs li.active a:after {
    background: var(--color-link-gradient);
}
/* Item subtitle accent: blue -> brand orange */
.page-id-60684 #capabilities .inner-tab-content .inner-text .item-subtitle {
    color: var(--color-orange-500);
}

/* Promo bar ("See what Calico can do for you"): rebrand originally recoloured
   this to charcoal and hid the laptop. Per client (Klika 39.00, 2026-07-07) the
   laptop is restored AND the strip keeps its original dark-blue gradient so the
   laptop's blue base blends in — so this page adds NO promo-bar override; the
   base blue gradient + decorative SVG + laptop layout apply as-is. */

/* Testimonials: old-brand navy quote glyph (#09287D) + footer arrow (#041A57)
   -> design-system dark gray (--color-gray-900). quotes-sign.svg is an <img>,
   so it's recolored via a CSS mask (the SVG masks a token-colored background);
   the footer arrow is inline SVG so stroke takes the token directly. */
.page-id-60684 #testimonials .quotes-sign img {
    display: none;
}
.page-id-60684 #testimonials .quotes-sign {
    width: 40px;
    height: 31px;
    background-color: var(--color-gray-900);
    -webkit-mask: url('../img/quotes-sign.svg') no-repeat center / contain;
            mask: url('../img/quotes-sign.svg') no-repeat center / contain;
}
.page-id-60684 #testimonials .testimonial-footer svg path {
    stroke: var(--color-gray-900);
}