.vector-bg-blue {
    background-image: url(/wp-content/uploads/2025/08/t6-vector-blue-desktop.png);
}

.vector-bg-purple {
    background-image: url(/wp-content/uploads/2025/08/t6-vector-pink-desktop.png);
}

.vector-bg-red {
    background-image: url(/wp-content/uploads/2025/08/t6-vector-red-desktop.png);
}

@media (max-width: 576px) {
    .vector-bg-blue {
        background-image: url(/wp-content/uploads/2025/08/t6-vector-blue-mobile.png);
    }

    .vector-bg-purple {
        background-image: url(/wp-content/uploads/2025/08/t6-vector-pink-mobile.png);
    }

    .vector-bg-red {
        background-image: url(/wp-content/uploads/2025/08/t6-vector-red-mobile.png);
    }
}

.product-vector-bg {
    position: relative;
    padding-top: calc(32px + 5.5rem + 25px);

    display: flex;
    flex-direction: column;
}

.product-vector-bg h2 {
    line-height: .9;
}

.product-vector-bg h5 {
    color: var(--color-accent-text);
}

.product-vector-bg-laptops {
    width: 80%;
    max-width: 950px;
    margin: auto auto -5% auto;
}

.product-panels {
    background: #E9E9E9;
    padding-top: 8vw;
    padding-bottom: 70px;
}

.product-panels-copy-cta {
    width: 80%;
    max-width: 950px;
}


@media screen and (max-width: 576px) {
    .product-panels {
        padding-top: 100px;
    }
}

.product-panels *:not(a):not(a > *) {
    color: #171D24;
}

.product-panel-flat {
    max-width: 1140px;
    margin: 50px auto 0;
}

.product-panel-flat .col-6 {
    padding: .5em;
}

.product-panel-swiper,
.product-panel-swiper .swiper-navigation {
    width: 100vw;
}

.product-collage {
    background: radial-gradient(circle, #12324C 6%, #0B1F30 49%, #040B11 193%);
    padding: 140px 0 0;
    position: relative;
}

@media screen and (max-width: 576px)  {
    .product-collage {
        padding: 100px 0 0;
    }
}

.product-collage::before {
    content: '';
    display: block;
    width: 100vw;
    height: 25%;
    background: linear-gradient(
        to top,
        rgba(4, 11, 18, 1) 26%,
        rgba(4, 11, 18, .5) 72%,
        rgba(4, 11, 18, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.product-collage-img {
    margin-top: 100px;
}

.product-billboard {
    height: 100vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.product-billboard::before {
    content: '';
    display: block;
    width: 100vw;
    height: 25%;
    background: linear-gradient(
        to bottom,
        rgba(4, 11, 18, 1) 26%,
        rgba(4, 11, 18, .5) 72%,
        rgba(4, 11, 18, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.product-billboard-ctas {
    background: radial-gradient(circle, #0A2939 0%, #03131C 100%);
    color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 20px;
    position: relative;
    width: 80%;
    max-width: 900px;
    margin: -85px auto 0;
}


.product-billboard-cta-item {
    position: relative;
    border-radius: 20px;
    height: 100%;
    min-height: 350px;
}

@media screen and (max-width: 768px) {
    .product-billboard-cta-item {
        min-height: 250px;
    }  
}

@media screen and (max-width: 576px)  {
    .product-billboard-cta-item {
        min-height: initial;
    }  

    .product-billboard-cta-item br {
        display: none;
    }
}

.product-billboard-cta-item:hover {
    transform: scale(1.04);
}

.product-billboard-cta-item .imgCont-plus {
    border-color: #fff;
    color: #fff;
    position: relative;
    margin-top: auto;
    right: initial;
    bottom: initial;
}

.product-billboard-cta-item:hover .imgCont-plus {
    background: var(--color-accent-text);
    color: #000;
    border: 2px solid var(--color-accent-text);
}

.product-cta-box-purple {
    background: linear-gradient(to right, #F53DFF 0%, #932599 100%);
}

.product-cta-box-orange {
    background: linear-gradient(to right, #E63D27 0%, #A01D0C 100%);
}

.product-cta-box-blue {
    background: linear-gradient(to right, #0F6BFF 0%, #074BB8 100%);
}

/* Media Queries */
@media screen and (max-width: 576px) {
    .product-collage-img-desktop:has(+ .product-collage-img-mobile) {
        display: none !important;
    }

    .product-vector-bg h2,
    .product-panels h2,
    .product-collage h2 {
        padding-left: .25em;
        padding-right: .25em;
    }
}


@media screen and (min-width: 577px)  {
    .product-collage-img-mobile {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .product-panel-flat {
        display: none !important;
    }

    .swiper-wrapper {
        width: 100vw;
    }
}


@media screen and (min-width: 769px)  {
    .product-panels .trauma-surgery {
        display: none !important;
    }
}