body {
    margin: 0 auto;
    padding: 0;
    width: 1440px;
    font-family: 'Work Sans';
    font-style: normal;
}

@media screen and (max-width: 375px) {
    body {
        width: 100%;
    }
}

.page-header {
    width: 1280px;
    margin: 80px 80px 0px 80px;
}

@media screen and (max-width: 375px) {
    .page-header {
        margin: 0;
        width: 100%;
        padding: 80px 16px 0px 16px;
        box-sizing: border-box;
    }
}

.main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0;
    gap: 8px;
    list-style: none;
    margin: 0;
}

.main-nav a {
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;
    line-height: 29px;
    color: #939596;
    padding: 20px;
}

.main-nav a:hover {
    color: #292F32;
}

.main-nav a:active,
.main-nav .current a {
    color: #090A0A;
}

.list-title {
    width: 670px;
    height: 100px;
    margin: 80px 690px 0px 80px;
}

@media screen and (max-width: 375px) {
    .list-title {
        width: 100%;
        height: 100%;
        padding: 40px 16px 0px 16px;
        margin: 0;
        box-sizing: border-box;
    }
}

.heading {
    font-weight: 400;
    font-size: 36px;
    line-height: 140%;
    color: #090A0A;
}

.projects-list {
    margin: 40px 80px 0px 80px;
}

.projects-list a {
    text-decoration: none;
}

.project-title {
    font-weight: 400;
    font-size: 20px;
    line-height: 29px;
    color: #090A0A;
    margin: 0;
    margin-bottom: 4px;
}

.project-role {
    font-weight: 400;
    font-size: 17px;
    line-height: 20px;
    color: #7C7E80;
}

.featured-project,
.project-group .project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.projects-list .project-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
    margin-top: 80px;
}

.featured-project .mob-img {
    display: none;
}

@media screen and (max-width: 375px) {
    .projects-list {
        margin: 0;
    }

    .featured-project .main-img {
        display: none;
    }

    .featured-project .mob-img {
        display:block;
        width: 100%;
        height: 350px;
    }

    .projects-list .project-group,
    .projects-list .featured-project {
        display: flex;
        flex-wrap: wrap;
        margin: 40px 16px 0px 16px;
    }
}

.page-footer {
    margin: 104px 80px 0px 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0px;
}

.page-footer a {
    height: 24px;
}

.link {
    text-decoration: none;
    font-weight: 400;
    font-size: 17px;
    line-height: 20px;
    padding-bottom: 4px;
    color: #1C17FF;
}

.page-footer .link:hover {
    background-color: #E6E5FF;
    box-shadow: inset 0px -2px 0px #CECCFF;
}

.page-footer .social-icons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

@media screen and (max-width: 375px) {
    .page-footer {
        width: 100%;
        padding: 104px 16px 40px 16px;
        box-sizing: border-box;
        margin: 0;
    }
}

.greetings {
    margin: 80px 80px 0px 80px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
}

.content {
    font-weight: 400;
    font-size: 17px;
    line-height: 160%;
    color: #292F32;
}

.greetings h1 {
    width: 590px;
    margin: 0;
}

.greetings .description {
    width: 670px;
}

.description p {
    margin: 0;
}

.personal {
    width: 1440px;
    height: 600px;
    margin-top: 80px;
    background-color: #292F32;
}

.section-title {
    font-weight: 400;
    font-size: 28px;
    line-height: 39px;
}

.color-light {
    color: #FCFCFC;
}

.personal .mob-personal {
    width: 631px;
    padding: 106.5px 405px 107.5px 404px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mob-personal img {
    width: 144px;
    height: 144px;
 }

.personal .personal-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
    margin: 0 auto;
    margin-top: 44px;
    text-align: center;
}

.personal-info h2,
.personal-info p {
    margin: 0;
}

@media screen and (max-width: 375px) {
    .greetings {
        margin: 0;
    }
    
    .greetings .mob-greetings {
        width: 100%;
        padding: 40px 16px 0px 16px;
        box-sizing: border-box;
    }

    .mob-greetings .description {
        width: 100%;
    }

    .personal {
        width: 100%;
        height: 600px;
        margin-top: 80px;
        flex-wrap: wrap;
    }

    .personal .mob-personal {
        width: 100%;
        padding: 66.5px 16px 66.5px 16px;
        box-sizing: border-box;
    }
}

.experience {
    margin: 80px 80px 0px 80px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
}

b {
    font-weight: 400;
    font-size: 17px;
    line-height: 20px; 
    color: #090A0A;
    white-space: nowrap;
}

.experience h2 {
    width: 590px;
    margin: 0;
}

.experience .practice {
    width: 670px;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    gap: 20px;
}

.practice .skill {
    width: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.practice .skill-group {
    display: flex;
    gap: 20px;
}

.practice .skill-group:not(.first-row) {
    margin-top: 80px;
}

@media screen and (max-width: 375px) {
    .experience {
        margin: 0;
        width: 100%;
        padding: 80px 16px 0px 16px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .experience .practice {
        width: 100%;
        gap: 0;
        margin-top: 40px;     
    }

    .skill-group .skill {
        width: auto;
    }

    .skill-group .skill:nth-child(odd) {
        margin-right: 16px;
    }

    .practice .skill-group:not(.first-row) {
        margin: 0;
    }

    .practice .skill-group:not(.mob-first-row) {
        margin-top: 80px;
    }

}

.presentation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    margin: 80px 80px 0px 80px;
}

.project-presentation {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
}

.project-presentation h1 {
    margin: 0;
    width: 475px;
}

.project-details .project-head {
    width: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.project-head .link-and-year {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.project-presentation .project-details {
    width: 785px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
}

.presentation .mob-img {
    display: none;
}

@media screen and (max-width: 375px) {
    .presentation {
        margin: 0;
        width: 100%;
        padding: 80px 16px 0px 16px;
        box-sizing: border-box;
        gap: 0;
    }

    .project-presentation {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .presentation img {
        display: none;
        margin-top: 80px;
    }

    .presentation .mob-img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.overview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    margin: 80px 80px 0px 80px;
}

.overview h2,
.overview p {
    margin: 0;
}

.overview p {
    width: 670px;
}

.overview .mob-img {
    display: none;
}

@media screen and (max-width: 375px) {
    .overview {
        margin: 0;
        width: 100%;
        padding: 80px 16px 0px 16px;
        box-sizing: border-box;
        gap: 0;
    }

    .overview h2,
    .overview p {
        width: 100%;
    }

    .overview p {
        margin-top: 24px;
    }

    .overview img {
        display: none;
    }

    .overview .mob-img {
        display: block;
        width: 100%;
        height: 100%;
        margin-top: 40px;
    }
}

.branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    margin: 80px 80px 0px 80px;
}

.branding h2,
.branding p {
    margin: 0;
}

.branding p {
    width: 670px;
}

.branding .branding-photo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
}

.branding-photo .mob-img {
    display: none;
}

@media screen and (max-width: 375px) {
    .branding {
        margin: 0;
        width: 100%;
        padding: 80px 16px 0px 16px;
        box-sizing: border-box;
        gap: 0;
    }

    .branding h2,
    .branding p {
        width: 100%;
    }

    .branding p {
        margin-top: 24px;
    }

    .branding .branding-photo {
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .branding-photo img {
        display: none;
    }

    .branding-photo .mob-img {
        display: flex;
    }
}

.design {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    margin: 80px 80px 0px 80px;
}

.design h2,
.design p {
    margin: 0;
}

.design p {
    width: 670px;
}

.design .design-photo-section {
    width: 1280px;
    height: 700px;
    background-color: #292F32;
}

.design-photo-section .design-photo-group {
    width: 866px;
    height: 590px;
    margin: 55px 207px;
    position: relative;
}

.design-photo-group .design-photo1 {
    position: absolute;
    width: 251.2px;
    height: 542.59px;
    left: 0.09px;
    top: 0px;
}

.design-photo-group .design-photo2 {
    position: absolute;
    width: 251.2px;
    height: 542.59px;
    left: 307.29px;
    top: 23.71px;
}

.design-photo-group .design-photo3 {
    position: absolute;
    width: 251.2px;
    height: 542.59px;
    right: 0.31px;
    bottom: 0px;
}

.project1-photo {
    width: 1280px;
    height: 700px;
    background-color: #292F32;
    margin: 80px 80px 0px 80px;
    position: relative;
    overflow: hidden;
}

.project1-photo img {
    position: absolute;
    left: 316px;
    top: 77px;
}

.project1-photo .mob-img {
    display: none;
}

.design-photo-group .mob-img1,
.design-photo-group .mob-img2,
.design-photo-group .mob-img3 {
    display: none;
}

@media screen and (max-width: 375px) {
    .design {
        margin: 0;
        width: 100%;
        padding: 80px 16px 0px 16px;
        box-sizing: border-box;
        gap: 0;
    }

    .design h2,
    .design p {
        width: 100%;
    }

    .design p {
        margin-top: 16px;
    }

    .design .design-photo-section {
        margin-top: 40px;
        width: 100%;
        height: 350px;
    }

    .design-photo-group .design-photo1,
    .design-photo-group .design-photo2,
    .design-photo-group .design-photo3 {
        display: none;
    }

    .design-photo-section .design-photo-group {
        width: 310px;
        height: 211.2px;
        margin: 69.4px 16px 69.4px 17px;
    }

    .design-photo-group .mob-img1 {
        display: block;
        position: absolute;
        left: 0.03px;
        top: 0px;
    }

    .design-photo-group .mob-img2 {
        display: block;
        position: absolute;
        left: calc(50% - 89.92px/2 - 0.04px);
        top: calc(50% - 194.23px/2 + 0px);
    }

    .design-photo-group .mob-img3 {
        display: block;
        position: absolute;
        right: 0.11px;
        bottom: 0px;
    }

    .project1-photo {
        width: 343px;
        height: 350px;
        margin: 80px 16px 0px 16px;
        box-sizing: border-box;
    }

    .project1-photo img {
        display: none;
    }

    .project1-photo .mob-img {
        position: absolute;
        display: block;
        top: 77px;
        left: 16.5px;
    }
}

.next-project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    margin: 80px 1242px 0px 80px;
}

.small {
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    color: #7C7E80;
}

.project-detail {
    margin: 80px 80px 0px 80px;
}

.next-project a {
    text-decoration: none;
}

@media screen and (max-width: 375px) {
    .next-project {
        margin: 80px 241px 0px 16px;
    }

    .project-detail {
        margin: 0;
    }
}