/* Certificate */

.certificate {
    position: relative;
    background:  
    url(../img/certificate-bottom-decor.svg) center 92.5% / 1471px 94px repeat-x,
    url(../img/wave.svg) center 106.3% / 3772px 124px no-repeat,
    #F7E8CE;
    padding: 488px 0 264px;
}


.certificate__title {
    font-family: 'Playfair';
    font-size: 50px;
    font-weight: 400;
    font-style: italic;
    line-height: 130%;
    text-align: center;
    color: var(--base-color-green);
    margin: 0 auto 35px;
    max-width: 750px;
}

.certificate-content {
    position: relative;
    border-radius: 10px;
    background-color: var(--base-bg-red);
    padding: 30px;
}

.certificate-content::before {
    position: absolute;
    content: '';
    width: 340px;
    height: 495px;
    top: 0;
    left: 5.5%;
    background: url(../img/certificate/certificate-img-1.png) 0 0 / contain;
    z-index: 3;
}

.certificate-content::after {
    position: absolute;
    content: '';
    width: 498px;
    height: 435px;
    top: 37px;
    right: 0;
    background: url(../img/certificate/certificate-img-2.png) 0 0 / cover;
    z-index: 3;
}

.certificate-content-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    border: 4px solid var(--base-border-beige);
    padding: 34px 40px 53px;
}

.certificate-content__text {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: var(--base-color-beige);
    text-align: center;
    max-width: 430px;
    margin: 0 auto;
}

.certificate-content__link {
    font-family: 'Playfair';
    font-style: italic;
    font-size: 28px;
    line-height: 120%;
    text-decoration: none;
    color: var(--base-color-red);
    background-color: var(--base-bg-beige);
    border: 2px solid var(--base-border-beige);
    border-radius: 5px;
    padding: 9px 15px 14px;
    margin: 0 auto;
}

.certificate-content__link:hover {
    color: var(--base-color-beige);
    background-color: var(--base-bg-red);
}

.ny-ball {
    position: absolute;
}

@keyframes swing {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

@keyframes reswing {
    from { transform: rotate(4deg); }
    to   { transform: rotate(-4deg); }
}



.ny-ball:nth-of-type(1) {
    position: absolute;
    top: -7px;
    left: 53px;
    animation: swing 2s ease-in-out infinite alternate;
}

.ny-ball:nth-of-type(2) {
    position: absolute;
    top: -73px;
    left: 22%;
    animation: reswing 2s ease-in-out infinite alternate;
}

.ny-ball:nth-of-type(3) {
    position: absolute;
    top: -3px;
    left: 41%;
    animation: swing 2s ease-in-out infinite alternate;
}
.ny-ball:nth-of-type(4) {
    position: absolute;
    top: -3px;
    left: 61%;
    animation: reswing 2s ease-in-out infinite alternate;
}

.ny-ball:nth-of-type(5) {
    top: 2px;
    right: 43px;
    animation: swing 2s ease-in-out infinite alternate;
}

@media(max-width: 1180px) {
    .certificate-content {
        overflow: hidden;
    }

    .certificate-content::before {
        left: 0;
    }

    .certificate-content::after {
        right: -5%;
    }

    .ny-ball:nth-of-type(1) {
        top: 37px;
        left: 13px;
    }

    .ny-ball:nth-of-type(2) {
        top: -73px;
        left: 21%;
    }

    .ny-ball:nth-of-type(3) {
        top: -3px;
        left: 41%;
    }
    .ny-ball:nth-of-type(4) {
        top: -3px;
        left: 61%;
    }

    .ny-ball:nth-of-type(5) {
        top: 2px;
        right: 0;
    }
}

@media(max-width: 1024px) {
    .certificate-content {
        overflow: visible;
    }

    .certificate-content::before {
        width: 271px;
        height: 377px;
        top: 37%;
        left: -18px;
    }

    .certificate-content::after{
        width: 316px;
        height: 276px;
        top: 54%;
        right: 0;
    }

    .ny-ball {
        max-width: 150px;
    }

    .ny-ball:nth-of-type(1) {
        top: 37px;
        left: 13px;
    }

    .ny-ball:nth-of-type(2) {
        top: -73px;
        left: 21%;
    }

    .ny-ball:nth-of-type(3) {
        top: -3px;
        left: 41%;
    }
    .ny-ball:nth-of-type(4) {
        top: -3px;
        left: 61%;
    }

    .ny-ball:nth-of-type(5) {
        top: 2px;
        right: 0;
    }
}

@media(max-width: 767px) {
    .certificate {
        background:  url(../img/certificate-bottom-decor.svg) center 95% / 1032px 79px repeat-x, #F7E8CE;
        padding: 270px 0 151px;
    }

    .certificate__title {
        max-width: 340px;
        font-size: 28px;
        font-weight: 500;
        line-height: 120%;
        margin: 0 auto 16px;
    }

    .certificate-content {
        padding: 20px;
        position: relative;
        z-index: 2;
    }

    .certificate-content-inner {
        gap: 44px;
        border: 3px solid var(--base-border-beige);
        padding: 16px 16px 79px;
    }

    .certificate-content__text {
        position: relative;
        font-size: 16px;
        max-width: 430px;
        margin: 0 auto;
        z-index: 3;
    }

    .certificate-content__link {
        position: relative;
        font-size: 20px;
        padding: 10px 12px 16px;
        margin: -22px auto 0;
        z-index: 3;
    }

    .certificate-content::before {
        width: 190px;
        height: 280px;
        top: 45%;
        left: auto;
        right: -52px;
        transform: scaleX(-1);
    }

    .certificate-content::after{
        width: 191px;
        height: 169px;
        top: 62%;
        right: auto;
        left: -57px;
    }

    .ny-ball {
        max-width: 100px;
    }

    .ny-ball:nth-of-type(1) {
        top: 37px;
        left: 12px;
    }

    .ny-ball:nth-of-type(2) {
        display: none;
    }

    .ny-ball:nth-of-type(3) {
        top: -2px;
        left: 32%;
        animation: reswing 2s ease-in-out infinite alternate;
    }
    .ny-ball:nth-of-type(4) {
        display: none;
    }

    .ny-ball:nth-of-type(5) {
        top: -16px;
        right: 19px;
    }
}