.complete-3d-atlas {
    background: radial-gradient(82.54% 497.56% at 10.98% 85.5%, #FBFDFF 0%, #B8D9FF 100%);
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    max-height: 772px;
    position: relative;
}

.complete-3d-atlas .content-wrapper {
    margin: 140px 0 140px 100px;
    z-index: 3;
    width: calc(50% - 100px);
    flex: 1 0 auto;
    gap: 16px;
}

.complete-3d-atlas .h2 {
    background: radial-gradient(201.72% 286.81% at 50% 131.25%, #09111A 30%, #3586EF 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.complete-3d-atlas .main-text-medium {
    color: var(--n-grey);
    padding: 24px 0 48px;
}

.complete-3d-atlas .type-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--n-very-light-accent);
    align-items: center;
}

.complete-3d-atlas .type-row svg {
    display: none;
    margin: 14px 12px 14px 0;
}

.complete-3d-atlas .type-row .type-title {
    color: var(--n-black);
    text-decoration: underline;
}

.complete-3d-atlas .type-row .type-title:hover {
    color: var(--n-dark-accent);
}

.complete-3d-atlas .type-number {
    background-color: var(--n-white);
    color: var(--main-text-color);
    display: flex;
    flex-direction: row;
    gap: 8px;
    border-radius: 100px;
    margin: 12px 0;
    padding: 8px 14px;
}

.complete-3d-atlas .type-number .number {
    color: var(--bright-blue);
}

.complete-3d-atlas .right-image {
    display: flex;
    justify-content: flex-start;
}

.complete-3d-atlas .image-wrapper {
    height: 100%;
    display: flex;
    justify-content: end;
}

.complete-3d-atlas .image-wrapper img {
    height: 100%;
}

.complete-3d-atlas .navigation-controls {
    position: absolute;
    z-index: 10;
    right: 100px;
    bottom: 48px;
    display: flex;
    flex-direction: row;
    background: #FFFFFFE5;
    border-radius: 100px;
    color: var(--main-text-color);
    padding: 6px 6px 6px 20px;
    gap: 20px;
    align-items: center;
}

.complete-3d-atlas .navigation-controls svg {
    fill: #B5C0CD;
}

.complete-3d-atlas .buttons-container {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.complete-3d-atlas .buttons-container svg {
    cursor: pointer;
}

.complete-3d-atlas .buttons-container svg:hover {
    fill: var(--n-grey-60);
}

.complete-3d-atlas .swiper__pagination-container {
    display: none;
}

.complete-3d-atlas .anatomy-title {
    display: none;
}

.complete-3d-atlas .slider-image-mobile{
    display: none;
}


@media screen and (max-width: 1919px) {
    .complete-3d-atlas {
        max-height: 680px;
    }

    .complete-3d-atlas .content-wrapper {
        margin: 100px 0 100px 80px;
        width: 49%;
    }

    .complete-3d-atlas .main-text-medium {
        padding: 24px 0 48px;
    }

    .complete-3d-atlas .navigation-controls {
        right: 32px;
        bottom: 32px;
        padding: 10px 8px 10px 20px;
    }

    .complete-3d-atlas .navigation-controls svg {
        width: 32px;
        height: 32px;
    }
}


@media screen and (max-width: 1439px) {
    .complete-3d-atlas {
        max-height: 604px;
    }

    .complete-3d-atlas .content-wrapper {
        margin: 80px 0 80px 60px;
        width: 55%;
    }
}

@media screen and (max-width: 1279px) {
    .complete-3d-atlas .content-wrapper {
        width: 56%;
    }

    .complete-3d-atlas .main-text-medium {
        padding: 24px 0 20px;
    }
}


@media screen and (max-width: 1079px) {
    .complete-3d-atlas {
        background: linear-gradient(180deg, #FBFDFF -31.86%, #B8D9FF 100%);
        flex-direction: column;
        max-height: unset;
        padding: 80px 40px;
        gap: 50px;
    }

    .complete-3d-atlas .right-image {
        display: none;
    }

    .complete-3d-atlas .content-wrapper {
        margin: 0;
        width: 100%;
    }

    .complete-3d-atlas .type-row {
        border-bottom: 1px solid var(--n-white);
        margin: 16px 0;
    }

    .complete-3d-atlas .swiper-current-title {
        color: var(--main-text-color);
    }

    .complete-3d-atlas .anatomy-image {
        height: 400px;
    }

    .complete-3d-atlas .anatomy-image img {
        background: #FFFFFF66;
        border-radius: 16px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .complete-3d-atlas .slider-image-mobile {
        text-align: center;
        display: block;
    }

    .complete-3d-atlas .swiper__arrows {
        display: flex;
        flex-direction: row;
        gap: 20px;
        background: #FFFFFFCC;
        padding: 10px 20px;
        border-radius: 100px;
        align-items: center;
        margin: 28px auto 0;
        max-width: fit-content;
    }

    .complete-3d-atlas .swiper__arrows svg {
        fill: #B5C0CD;
        width: 29px;
        height: 29px;
    }
}


@media screen and (max-width: 576px) {
    .complete-3d-atlas {
        padding: 60px 16px;
        gap: 60px;
    }

    .complete-3d-atlas .anatomy-image {
        overflow: hidden;
        border-radius: 16px;
        height: 320px;
    }

    .complete-3d-atlas .anatomy-image img {
        position: relative;
    }

    .complete-3d-atlas .anatomy-title {
        position: absolute;
        display: block;
        background: #FFFFFFCC;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        text-align: center;
        color: var(--main-text-color);
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .complete-3d-atlas .swiper__arrows {
        display: none;
    }

    .complete-3d-atlas .swiper__pagination-container {
        display: block;
        margin-top: 28px;
    }

    .complete-3d-atlas .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
        background: var(--n-white);
        opacity: 100%;
    }

    .complete-3d-atlas .type-row {
        justify-content: flex-start;
        margin: 0;
    }

    .complete-3d-atlas .type-row svg {
        display: block;
        height: 24px;
        width: 24px;
        margin: 14px 12px 14px 0;
    }

    .complete-3d-atlas .type-row .type-number {
        display: none;
    }

    .complete-3d-atlas .type-row{
        border-bottom: none;
    }
}