/* Общие стили */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;

    --white: #ffffff;
}

:focus {
    outline: 2px solid var(--darkAccentColor);
}

body {
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: black;
}

h1,
h2,
h3,
p {
    margin: 0;
}

.container {
    display: flex;
    width: 1400px;
    margin: 0 auto;
}

/* Общие стили (конец)*/



/*banner (начало)*/

.banner-nav {
    padding: 30px 0;
}

.banner-navbar {
    display: flex;
}

.banner-navbar-title {
    display: flex;
}

.banner-navbar-title h1 {
    display: flex;
    align-items: flex-end;
    margin-right: 13px;
}

.banner-arrow {
    display: flex;
    align-items: flex-end;
    text-transform: none;
}

.arrow-right {
    width: 112px;
    margin-left: 7px;
}

.banner-navbar-link {
    display: flex;
    align-items: flex-end;
    margin-left: 144px;
    margin-right: 284px;
}

.banner-navbar-person {
    position: absolute;
    margin-top: 14px;
    margin-left: 1061px;
    display: flex;
    align-items: center;
}

.person-photo {
    width: 77px;
    height: 77px;
}

.person-name {
    margin-left: 20px;
    margin-right: 30px;
}

/*banner (конец)*/



/*banner-img (начало)*/

.banner-img {
    background-image: url(../img/banner-img.webp);
    height: 445px;
}

.banner-img .container {
    display: flex;
    justify-content: right;
}

.banner-img-wrap {
    width: 480px;
    height: 290px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
    padding: 54px 68px;
    color: #ffffff;
}

.banner-img-text {
    font-size: 0.8rem;
    font-weight: 400;
    margin-bottom: 16px;
}

.banner-img-txt {
    font-weight: 400;
    font-size: 1.5rem;
}

/*banner-img (конец)*/



/*banner-new (начало)*/

.banner-new-content {
    text-align: end;
    margin-left: 470px;
}

.banner-new-content-img {
    width: 916px;
    height: 611px;
}

/*banner-new (конец)*/



/*practice (начало)*/

.practice {
    padding-top: 210px;
}

.practice-container {
    display: flex;
    flex-direction: column;
}

.practice-title-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.practice-title {
    display: flex;
    align-items: flex-end;
}

.practice-text {
    width: 1380px;
    color: #58595D;
}

.practice-table-wrap {
    margin-top: 113px;
}

.practice-table-head,
.practice-table-row {
    display: flex;
}

.practice-table-head-col1,
.practice-table-head-col2,
.practice-table-head-col3,
.practice-table-col1,
.practice-table-col2,
.practice-table-col3 {
    display: flex;
    width: 446px;
    height: 150px;

}

.practice-table-head-col1,
.practice-table-head-col2,
.practice-table-head-col3 {
    align-items: flex-end;
}


.practice-table-col-box {
    display: flex;
    width: 953px;
    border-bottom: solid 1px #000000;
}

.practice-table-col1 {
    background-color: #000000;
    color: #ffffff;
    padding-left: 10px;
}

.practice-table-col1,
.practice-table-col2,
.practice-table-col3 {
    align-items: center;
}

.practice-table-col2,
.practice-table-col3 {
    text-transform: none;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 130%;
}

.practice-table-head-col3,
.practice-table-head-col2,
.practice-table-col2,
.practice-table-col3 {
    margin-left: 30px;
}

.practice-table-img {
    display: flex;
    gap: 30px;
}

/*practice (конец)*/



/*education-skills (начало)*/

.education-skills {
    margin-top: 285px;
    margin-bottom: 285px;
}

.education-skills-container {
    display: flex;
    gap: 30px;
}

.education-skills-box {
    width: 446px;
    height: 874px;
    padding-top: 41px;
    padding-left: 49px;
}

.education-skills-box-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 70px;
}

.education-box-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.education-box-content-text {
    text-transform: none;
    font-weight: 400;
    font-size: 0.75rem;
}

/*education-skills (конец)*/



/*sites (начало)*/

.sites {
    margin-bottom: 287px;
}

.sites-wrap {
    display: flex;
    gap: 30px;
}

.site-box {
    width: 685px;
    border-radius: 10px;
    border: solid 1px #000000;
    padding-top: 53px;
}

.site-box-title {
    font-size: 1.91rem;
    text-transform: none;
    margin-left: 74px;
}

.site-box .education-box-content-text,
.design-box .education-box-content-text {
    margin-left: 75px;
}

.site-box-link {
    width: 129px;
    color: #000000;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 4px;
    border: 1px solid #000000;
    border-radius: 30px;
    text-transform: none;
    font-size: 0.83rem;
    margin-left: 476px;
}

.site-box-img {
    width: 685px;
}

.site-box-arrow {
    display: flex;
    margin-left: 75px;
    margin-top: 25px;
    margin-bottom: 32px;
    align-items: center;
    gap: 10px;
}

.site-box-arrow-text {
    text-transform: none;
    font-size: 0.75rem;
}

/*sites (конец)*/



/*design (начало)*/

.design-container-text {
    width: 685px;
    color: #58595D;
}

.design-box-img {
    margin-top: 50px;
    margin-bottom: 25px;
}

.design-box-buttons {
    display: flex;
    margin-left: 75px;
    gap: 14px;
}

.design-box-btn {
    border: solid 1px #000000;
    border-radius: 30px;
    text-transform: none;
    text-align: center;
    padding: 0 16px 4px;
    font-size: 0.83rem;
}

/*design (начало)*/



/*footer (начало)*/

footer {
    margin-top: 287px;
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #000000;
}

.footer-name {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-container {
    margin: 0 auto;
}

.freepik-link {
    position: absolute;
    margin-top: 130px;
    font-size: 0.4rem;
    text-transform: none;
    font-weight: 300;
    color: #58595D;
}

/*footer (конец)*/