.home__integration-experts {
    position: relative;
    height: 100vh;
    min-height: 320px;
    width: 100%;
}

.integration-experts__container {
    height: 100%;
    width: 200%;
    display: flex;
    flex-direction: row;
    transition: transform 0.5s;
}

.integration-experts__container section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.integration-experts__section-container {
    position: absolute;
    width: 100%;
    height: 75%;
    left: 0;
    bottom: 0;
    z-index: 0;
}

.integration-experts__section-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--color-secondary-100) 0%, transparent 20%);
}

.integration-experts__section-container > video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.integration-experts__section-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(60px);
    transition: all ease-out 0.5s 0.5s;
}

.integration-experts__section-content.integration-experts__section-content--shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.integration-experts__section-content, .integration-experts__section-content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.integration-experts__section-content h1 {
    max-width: 743px;
    text-align: center;
    font: normal normal 600 26px/35px font-primary;
    color: var(--color-primary-600);
    margin: 134px 25px 36px 25px;
}

.integration-experts__section-content p {
    color: var(--color-primary-600);
    font: 16px/25px font-primary;
    text-align: center;
    max-width: 231px;
    display: none;
    margin: 0;
}

.integration-experts__section-content .integrate-button__container {
    width: 200px;
    height: 51px;
}

.integration-experts__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 21px 0;
    width: 100%;
    background-color: var(--color-opacity-secondary-100);
    display: none;
    justify-content: center;
    z-index: 1;
}

.integration-experts__bottom > a {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.integration-experts__bottom div {
    width: 1px;
    height: 14px;
    background-color: #E7E7E7;
    transition: background-color 0.25s;
}

.integration-experts__bottom p {
    margin: 0;
    font: 14px/19px font-primary;
    color: #E7E7E7;
    transition: color 0.25s;
}

.integration-experts__bottom > a:hover p {
    color: var(--color-primary-500);
}

.integration-experts__bottom > a:hover div {
    background-color: var(--color-primary-500);
}

.integration-experts__bottom > a:active p {
    color: var(--color-primary-400);
}

.integration-experts__bottom > a:active div {
    background-color: var(--color-primary-400);
}

.integration-experts__bottom > a {
    outline: 0;
}

.integration-experts__bottom > a:focus p {
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
    .home__integration-experts {
        min-height: 650px;
    }

    .integration-experts__section-content {
        justify-content: space-between;
        padding-bottom: 83px;
        gap: 80px;
        height: 100%;
    }

    .integration-experts__section-content h1 {
        margin: 154px 149px 28px 149px;
        font: normal normal 600 47px/62px font-primary;
    }

    .integration-experts__section-content p {
        display: block;
    }

    .integration-experts__section-content .integrate-button__container {
        width: 244px;
        height: 62px;
        font: normal normal bold 19px/25px font-primary;
    }
}

@media screen and (min-width: 912px) and (orientation: landscape) {
    .integration-experts__section-content {
        gap: 0;
    }

    .integration-experts__container section {
        padding-bottom: 0;
        align-items: flex-end;
    }

    .integration-experts__section-container {
        height: 100%;
    }

    .integration-experts__section-container::after {
        content: none;
    }

    .integration-experts__section-content {
        justify-content: flex-start;
        align-items: flex-end;
        padding: 202px 81px 0 0;
    }

    .integration-experts__section-content > div {
        align-items: flex-end;
    }

    .integration-experts__section-content h1 {
        text-align: right;
        margin: 0 0 23px 0;
        max-width: 430px;
        font: normal normal 600 43px/57px font-primary;
    }

    .integration-experts__section-content p {
        text-align: right;
        max-width: 230px;
        font: 14px/25px font-primary;
        margin-bottom: 51px;
    }

    .integration-experts__section-content .integrate-button__container {
        width: 200px;
        height: 51px;
        font: normal normal bold 16px/21px font-primary;
    }

    .integration-experts__bottom {
        display: flex;
    }
}

@media screen and (min-width: 1200px) and (orientation: landscape) {
    .home__integration-experts {
        min-height: 780px;
    }

    .integration-experts__section-content {
        padding: 250px 83px 0 0;
    }

    .integration-experts__section-content h1 {
        margin-bottom: 28px;
        max-width: 470px;
        font: normal normal 600 47px/62px font-primary;
    }

    .integration-experts__section-content p {
        max-width: 275px;
        font: 16px/30px font-primary;
    }

    .integration-experts__section-content .integrate-button__container {
        width: 244px;
        height: 62px;
        font: normal normal bold 19px/25px font-primary;
    }

    .integration-experts__bottom p {
        font: 16px/21px font-primary;
        padding: 25px 0;
    }

    .integration-experts__bottom div {
        height: 16px;
    }
}