@media(max-width: 1920px) {
    .second__content{
        left: 20%;
    }
}
/* ===== 1600px ===== */
@media (max-width: 1600px) {
    .first__image:nth-of-type(1) {
        left: 25%;
        top: 300px;
    }

    .first__image:nth-of-type(2) {
        top: 439px;
    }

    .first__image:nth-of-type(3) {
        top: 546px;
        left: 48%;
    }

    .fifth__card.main {
        max-width: 420px;
        width: 30%;
    }

    .second__content {
        left: 360px;
    }

    .third__content {
        right: 20px;
    }

    .third__content-trust,
    .third__content-subtitle,
    .third__content-buttons {
        margin-bottom: 15px;
    }

    .third__content-boxes {
        gap: 5px;
    }

    .controls {
        left: 25%;
    }

    .fifth__card.first {
        max-width: 291px;
        width: 15%;
        height: auto;
    }

    .fifth__card.second {
        max-width: 262px;
        height: auto;
        width: 12%;
    }

    .fifth__card.third {
        max-width: 262px;
        height: auto;
        width: 9%;
    }

    .first__logo {
        width: 400px;
        top: 50px;
    }

    .first__button-scroll {
        margin-top: 210px;
    }
}

/* ===== 1300px ===== */
@media (max-width: 1300px) {
    .fourth__card {
        width: 65%;
    }

    .first__image:nth-of-type(1) {
        top: 326px;
    }

    .first__image:nth-of-type(2) {
        top: 440px;
    }

    .first__image:nth-of-type(3) {
        top: 522px;
    }

    .sixth__card.fourth {
        width: 14%;
    }

    .modal {
        width: 91%;
    }

    .fifth__card.main {
        width: 30%;
        height: auto;
    }

    .fifth__card.first {
        max-width: 291px;
        width: 12%;
        height: auto;
    }

    .fifth__card.second {
        max-width: 262px;
        width: 12%;
        height: auto;
    }

    .fifth__card.third {
        max-width: 262px;
        height: auto;
        width: 8%;
    }

    .third__logo>span {
        font-size: 35px;
    }

    .second__content-title>h2,
    .third__content-title {
        font-size: 38px;
    }

    .second__content-subtitle>span,
    .third__content-subtitle>span {
        font-size: 18px;
    }

    .second__content-text,
    .third__content-text {
        font-size: 14px;
    }

    .menu {
        top: 20px;
        right: 20px;
        transform: scale(0.9);
    }

    .second__content {
        left: 40px;
    }

    .controls {
        left: 15%;
    }

    .counter {
        right: 20px;
        bottom: 20px;
        transform: scale(0.8);
    }

    .third__content {
        max-width: 491px;
        padding: 21px 29px 52px 21px;
    }
}

/* ===== 950px ===== */
@media (max-width: 950px) {
    .third__logo {
        top: 5px;
    }

    .first__image:nth-of-type(2) {
        height: auto;
        width: 60%;
    }

    .first__image:nth-of-type(3) {
        height: auto;
        width: 60%;
    }

    .first__image:nth-of-type(1) {
        top: 40%;
        height: auto;
        width: 60%;
    }

    .modal {
        width: 91%;
    }

    .controls {
        left: 0;
        right: 0;
        margin: auto;
        top: 70px;
        height: fit-content;
        bottom: auto;
        width: fit-content;
    }

    .sixth__card.fourth {
        height: auto;
        width: 21%;
    }

    .fifth__card.first {
        height: auto;
        width: 138px;
    }

    .fifth__card.second {
        height: auto;
        width: 138px;
    }

    .fifth__card.third {
        height: auto;
        width: 126px;
    }

    .fifth__card.main {
        height: auto;
        height: 50%;
    }

    .fourth__card {
        height: auto;
        width: 80%;
    }

    .third__content-container {
        height: 71%;
    }

    .third__content {
        height: 40%;
        top: auto;
        right: 0;
        left: 0;
        bottom: 20px;
    }

    .second__content {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin: 20px auto;
        max-width: 90%;
    }

    .third__logo {
        position: relative;
        transform: none;
        display: none;
        justify-content: center;
        left: 0;
    }

    .first__button-scroll {
        width: auto;
        font-size: 14px;
        padding: 8px 16px;
    }

    .first__rights {
        bottom: 10px;
        left: 10px;
        font-size: 10px;
    }
}

/* ===== 650px ===== */
@media (max-width: 650px) {
    .first__rights {
        bottom: 29px;
        left: 22px;
    }

    .fifth__card.main {
        height: auto;
        width: 43%;
    }

    .first__image:nth-of-type(1) {
        top: 32%;
        height: 86%;
        width: auto;
    }

    .first__image:nth-of-type(2) {
        top: 45%;
        left: 30%;
        height: 75%;
        width: auto;
    }

    .first__image:nth-of-type(3) {
        top: 57%;
        left: 61%;
        width: auto;
        height: 70%;
    }

    .fifth__card.main {}

    .first__logo {
        width: 100%;
        padding: 0 10px;
        top: 69px;
    }

    .second__content-buttons,
    .third__content-buttons {
        gap: 12px;
    }

    .third__content {
        max-width: none;
        padding: 24px 0 24px 36px;
        width: 100%;
        bottom: 30px;
        border-radius: 0;
        bottom: 0;
        top: 0;
        height: 100%;
        transform: translateX(600%);
    }

    .third__content-container {
        height: 86%;
        width: 100%;
        padding-right: 36px;
    }
    .third__content-header{
        padding-right: 36px;
    }

    .third__content-close {}

    .third__content-close>svg {
        width: 28px;
        height: 28px;
    }

    .third__content-title {
        font-size: 32px;
    }

    .fourth__card {
        width: 77%;
    }

    .modal {
        width: 100%;
    }

    .first__logo {
        max-width: 293px;
    }

    .counter {
        display: none;
    }

    .first__rights {
        display: none;
    }

    .first__image:nth-of-type(1) {
        left: 13%;
        width: 100%;
    }

    .second__content {
        margin: 20% auto;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .second__content-title>h2 {
        font-size: 50px;
    }

    .controls {
        top: auto;
        bottom: 23px;
    }

    .third__logo {
        top: 27px;
        left: 22px;
        justify-content: flex-start;
    }

    .third__logo-image {
        height: 48px;
    }

    .fifth__card.first {
        width: 205px;
    }

    .fifth__card.main {
        width: auto;
        height: 80%;
    }

    .sixth__card.first {
        height: 390px;
        width: auto;
    }

    .sixth__card.second {
        height: 390px;
        width: auto;
    }

    .sixth__card.third {
        height: 390px;
        width: auto;
    }

    .sixth__card.fourth {
        width: 30%;
    }

    .third__logo>span,
    .third__logo>span>span {
        font-size: 28px;
    }

    .third__content-link {
        max-width: 166px;
        font-size: 14px;
        padding: 6px 14px;
    }

    .third__content-buttons {
        justify-content: space-between;
    }

    .third__content-link>.circle {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
    }

    .second__content-text {
        font-size: 16px;
    }

    .first__rights {
        font-size: 12px;
    }

    .second__content-link {
        padding: 10px 24px;
    }

    .second__content-subtitle>span {
        font-size: 20px;
    }

    html,
    body {
        height: calc(var(--vh, 1vh) * 100);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .second__content-footer {
        margin-bottom: 18px;
    }

    .first__button-scroll {
        margin-top: 182px;
    }
}

/* ===== 480px ===== */
@media (max-width: 480px) {
    .third__content-link>span {
        font-size: 14px;
        white-space: nowrap;
    }

    .third__content-link {
        width: 100%;
    }

    .third__content-text {
        line-height: 157%;
    }

    .third__content-box {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .third__content-box>span {
        font-size: 14px;
        min-width: 26px;
    }

    .openPreview {
        bottom: 20px;
    }

    .controls>button {
        padding: 10px;
    }

    .second__content-text {
        margin: 0 auto 18px;
    }

    .modal {
        width: 100%;
    }

    .menu {
        font-size: 14px;
        width: 60px;
        height: 30px;
    }

    .third__content-title {
        font-size: 50px;
    }

    .third__content-subtitle {
        flex-wrap: wrap;
        gap: 6px;
    }

    .third__content-link {
        justify-content: center;
    }

    .third__logo>span {
        font-size: 25px;
    }

    .first__image:nth-of-type(1) {
        top: 33%;
        left: 3%;
    }

    .first__image:nth-of-type(2) {
        top: 46%;
    }

    .second__content-buttons {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .second__content-subtitle,
    .second__content-title {
        margin-bottom: 18px;
    }
    .second__content-title > img{
        width: 58px;
    }
    .second__content-footer {
        width: 100%;
    }

    .second__content-video {
        width: 100%;
    }

    .second__logo {
        top: 21px;
        left: 23px;
        width: 35px;
        height: 40px;
    }

    .fifth__card.third {
        width: auto;
        height: 195px;
    }

    .fifth__card.second {
        width: 176px;
    }

    .fifth__card.first {
        width: 206px;
    }

    .fifth__card.main {
        height: 100%;
    }

    .second__content {
        max-width: 320px;
        align-items: flex-start;
    }
}

@media (max-width: 390px) {
    .fourth__card {
        width: 78%;
    }
}

/* ===== 360px ===== */
@media (max-width: 360px) {
    .third__content-container {
        height: 83%;
    }

    .third__content-buttons {
        height: fit-content;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .third__content-link {
        min-width: auto;
        max-width: 260px;
        width: 100%;
        justify-content: center;
    }

    .first__button-scroll {
        font-size: 12px;
        padding: 6px 12px;
        width: auto;
        text-align: center;
    }

    .second__content-text,
    .third__content-text {
        font-size: 13px;
    }

    .third__content-link span {
        font-size: 14px;
        text-align: center;
    }
}