body {
    background-color: #212121;
    font-family: 'Poppins';
    font-style: normal;
    padding: 0;
    margin: 0 auto 0 auto;
    width: 1440px;
    color: white;
    box-shadow: rgb(0 0 0 / 30%) 0 0 84px;
}

.visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

/*header*/
.page-header {
    position: absolute;
    width: 1440px;
    font-size: 18px;
    line-height: 27px;
    display: flex;
    align-items: center;
    margin: 0 130px 0 87px;
}


.navigation__list {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

.navigation {
    text-transform: uppercase;
    margin-right: 130px;
    margin-left: 789px;
}

.navigation__item {
    list-style-type: none;
    padding: 27px 16px 0 16px;
}

.navigation__link {
    text-decoration: none;
    color: white;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
}

/*image-text*/
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 24px;
    background-image: url(images/bg-image-light.jpg);
    padding: 244px 150px 200px 150px;
}

.my-name {
    font-weight: 600;
    font-size: 64px;
    line-height: 96px;
    margin: 0;
    margin-bottom: 36px;
}

.skill {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 24px;
}

.social__link {
    margin: 0;
    margin-left: 24px;
    text-decoration: none;
    border-radius: 25%;
}

/*about me section*/
.about-me {
    display: flex;
    padding: 106px 130px 130px 124px;
}

.about-me__img {
    margin-right: 74px;
}

.svg {
    z-index: -1;
    position: absolute;
    margin: 20px 0 0 20px;
}

.section-title_blue {
    color: #4C70EF;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 12px;
    margin-top: 21px;
}

.about-me__text {
    line-height: 27px;
}

.about-me__title {
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    margin: 0;
    margin-bottom: 32px;
}

.about-me__paragraph {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #B0ADAD;
    margin: 0;
    margin-bottom: 16px;
}

/*what i do section*/
.job-section {
    margin: 0;
    padding: 0 230px 120px 230px;
}

.section__title_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.section__small-title {
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 51px;
}

.professinal-skill {
    display: grid;
    grid-template-columns: 480px 480px;
    column-gap: 20px;
}

.job-section__block {
    background-color: #292C36;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    padding: 27px 24px 21px 24px;
}

.job-section__block {
    background-color: #292C36 border-radius: 12px;
}

.block__header {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.job__img {
    background-color: #38405A;
    padding: 12px;
    border-radius: 8px;
    margin-right: 16px;
}

.job__title {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    /* display: flex;
    align-items: center;
    text-align: center; */
    margin: 0;
}

.block-text {
    margin: 0;
}

.job__title {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    /* display: flex;
    align-items: center;
    text-align: center; */
    margin: 0;
}

/*portfolio section*/
.portfolio {
    padding: 0 130px 120px 130px;
}

.projects {
    display: flex;
    justify-content: space-between;
}

.project__link,
.contact-me__link {
    background-color: #558FFF;
    padding: 10px 18px;
    text-decoration: none;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.1em;
}

.project__link {}

.project-card {
    background-color: #292C36;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.project-card-text {
    padding: 20px 24px 30px 24px;
    background-color: #292C36;
    border-radius: 12px;
}


.project__title {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    margin: 0;
    margin-bottom: 25px;
}


/*contact-me secion*/

.contacts {
    padding: 0 230px 120px 230px;
}

.contact-me {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 78px 274px;
    background-color: #292C36;
    border-radius: 12px;
}

.contact-me__text {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    margin: 0;
    margin-bottom: 32px;
}

/*footer*/
.page-footer {
    padding: 44px 500px 32px 582px;
    background-color: #292C36;
}

.footer__text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.footer-logo {
    margin-bottom: 16px;
}

.footer-copyright {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}