main {
    position: relative;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
    overflow: hidden;
    color: red;
}

.logo-section {
    position: relative;
    margin-top: 40px;
    text-align: center;
    z-index: 5;
}

.logo-section a {
    text-decoration: unset;
}

.logo-section h3 {
    color: #414141;
    font-family: var(--yes-font-primary);
    font-size: 19px;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 3.759px;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    color: #414141;
}

h1,
h2,
h3 {
    font-family: var(--yes-font-secondary);
}

p {
    font-family: var(--yes-font-primary);
}

section {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (min-width: 1024px) {
    section {
        padding: 0 24px;
    }
}

section.header-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 80px 32px;
}

@media screen and (min-width: 1024px) {
    section.header-section {
        padding: 97px 32px 120px;
    }
}

section.header-section h1 {
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

@media screen and (min-width: 1024px) {
    section.header-section h1 {
        font-size: 94px;
    }
}

section.header-section p {
    color: #414141;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.16px;
    max-width: 600px;
    margin: 0 auto;
}

@media screen and (min-width: 1024px) {
    section.header-section p {
        font-size: 17px;
        letter-spacing: 0.17px;
    }
}

section .project-swiper {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.project-slide .img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 320/315;
}

@media screen and (min-width: 1024px) {
    .project-slide .img {
        aspect-ratio: 1200/600;
    }
}

/* Project Find You */
.project-find-you .project-slide .img.img-1 {
    background-image: url("assets/projects/project-find-you/mobile-1.webp");
}

@media screen and (min-width: 480px) {
    .project-find-you .project-slide .img.img-1 {
        background-image: url("assets/projects/project-find-you/desktop1.webp");
    }
}

.project-find-you .project-slide .img.img-2 {
    background-image: url("assets/projects/project-find-you/mobile-2.webp");
}

@media screen and (min-width: 480px) {
    .project-find-you .project-slide .img.img-2 {
        background-image: url("assets/projects/project-find-you/desktop2.webp");
    }
}

.project-find-you .project-slide .img.img-3 {
    background-image: url("assets/projects/project-find-you/mobile-3.webp");
}

@media screen and (min-width: 480px) {
    .project-find-you .project-slide .img.img-3 {
        background-image: url("assets/projects/project-find-you/desktop3.webp");
    }
}

.project-find-you .project-slide .img.img-4 {
    background-image: url("assets/projects/project-find-you/mobile-4.webp");
}

@media screen and (min-width: 480px) {
    .project-find-you .project-slide .img.img-4 {
        background-image: url("assets/projects/project-find-you/desktop4.webp");
    }
}

/* Project f1 */
.project-f1 .project-slide .img.img-1 {
    background-image: url("assets/projects/project-f1/mobile-1.webp");
}

@media screen and (min-width: 480px) {
    .project-f1 .project-slide .img.img-1 {
        background-image: url("assets/projects/project-f1/desktop1.webp");
    }
}

.project-f1 .project-slide .img.img-2 {
    background-image: url("assets/projects/project-f1/mobile-2.webp");
}

@media screen and (min-width: 480px) {
    .project-f1 .project-slide .img.img-2 {
        background-image: url("assets/projects/project-f1/desktop2.webp");
    }
}

.project-f1 .project-slide .img.img-3 {
    background-image: url("assets/projects/project-f1/mobile-3.webp");
}

@media screen and (min-width: 480px) {
    .project-f1 .project-slide .img.img-3 {
        background-image: url("assets/projects/project-f1/desktop3.webp");
    }
}

.project-f1 .project-slide .img.img-4 {
    background-image: url("assets/projects/project-f1/mobile-4.webp");
}

@media screen and (min-width: 480px) {
    .project-f1 .project-slide .img.img-4 {
        background-image: url("assets/projects/project-f1/desktop4.webp");
    }
}

/* Project Journey */
.project-journey .project-slide .img.img-1 {
    background-image: url("assets/projects/journey/journey-mobile-1.webp");
}

@media screen and (min-width: 480px) {
    .project-journey .project-slide .img.img-1 {
        background-image: url("assets/projects/journey/journey-desktop-1.webp");
    }
}

.project-journey .project-slide .img.img-2 {
    background-image: url("assets/projects/journey/journey-mobile-2.webp");
}

@media screen and (min-width: 480px) {
    .project-journey .project-slide .img.img-2 {
        background-image: url("assets/projects/journey/journey-desktop-2.webp");
    }
}

.project-journey .project-slide .img.img-3 {
    background-image: url("assets/projects/journey/journey-mobile-3.webp");
}

@media screen and (min-width: 480px) {
    .project-journey .project-slide .img.img-3 {
        background-image: url("assets/projects/journey/journey-desktop-3.webp");
    }
}

/* Project Breast Fest */
.project-breast-fest .project-slide .img.img-1 {
    background-image: url("assets/projects/project-breast-fest/1.jpg");
}

.project-breast-fest .project-slide .img.img-2 {
    background-image: url("assets/projects/project-breast-fest/2.jpg");
}

.project-breast-fest .project-slide .img.img-3 {
    background-image: url("assets/projects/project-breast-fest/3.jpg");
}

.project-breast-fest .project-slide .img.img-4 {
    background-image: url("assets/projects/project-breast-fest/4.jpg");
}

/* Project Monday */
.project-monday .project-slide .img.img-1 {
    background-image: url("assets/projects/project-monday/mobile-1.webp");
}

@media screen and (min-width: 480px) {
    .project-monday .project-slide .img.img-1 {
        background-image: url("assets/projects/project-monday/desktop-1.webp");
    }
}

.project-monday .project-slide .img.img-2 {
    background-image: url("assets/projects/project-monday/mobile-2.webp");
}

@media screen and (min-width: 480px) {
    .project-monday .project-slide .img.img-2 {
        background-image: url("assets/projects/project-monday/desktop-2.webp");
    }
}

.project-monday .project-slide .img.img-3 {
    background-image: url("assets/projects/project-monday/mobile-3.webp");
}

@media screen and (min-width: 480px) {
    .project-monday .project-slide .img.img-3 {
        background-image: url("assets/projects/project-monday/desktop-3.webp");
    }
}

/* Project Beauty */

.project-beauty .project-slide .img.img-1 {
    background-image: url("assets/projects/project-beauty/mobile-1.webp");
}

@media screen and (min-width: 480px) {
    .project-beauty .project-slide .img.img-1 {
        background-image: url("assets/projects/project-beauty/desktop-1.webp");
    }
}

.project-beauty .project-slide .img.img-2 {
    background-image: url("assets/projects/project-beauty/mobile-2.webp");
}

@media screen and (min-width: 480px) {
    .project-beauty .project-slide .img.img-2 {
        background-image: url("assets/projects/project-beauty/desktop-2.webp");
    }
}

.project-beauty .project-slide .img.img-3 {
    background-image: url("assets/projects/project-beauty/mobile-3.webp");
}

@media screen and (min-width: 480px) {
    .project-beauty .project-slide .img.img-3 {
        background-image: url("assets/projects/project-beauty/desktop-3.webp");
    }
}

/* Project Yogic */
.project-yogic .project-slide .img.img-1 {
    background-image: url("assets/projects/yogic/1.jpg");
}

.project-yogic .project-slide .img.img-2 {
    background-image: url("assets/projects/yogic/2.jpg");
}

.project-yogic .project-slide .img.img-3 {
    background-image: url("assets/projects/yogic/3.jpg");
}

.project-yogic .project-slide .img.img-4 {
    background-image: url("assets/projects/yogic/4.jpg");
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 0 80px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 85%;
}

@media screen and (min-width: 1024px) {
    .project-content {
        padding: 64px 0 124px;
        flex-direction: row;
        width: 90%;
        left: 0;
        transform: unset;
    }
}

.project-content .project-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

@media screen and (min-width: 1024px) {
    .project-content .project-header {
        gap: 9px;
    }
}

.project-content h2 {
    color: #292929;
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.2;
}

.project-content p.project-subname {
    color: #d30000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.7;
}

.project-goal {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.project-goal p {
    color: #292929;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
}

.project-goal p span {
    font-weight: 600;
}

.project-goal p a {
    color: #292929;
    text-decoration: underline;
    font-weight: bold;
}

.project-goal p a:visited {
    color: #292929;
    text-decoration: underline;
    font-weight: bold;
}

.project-section .swiper-button {
    display: none;
    z-index: 100;
    width: 56px;
    height: 56px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 25px 7px 0 rgba(0, 0, 0, 0),
    0 16px 6px 0 rgba(0, 0, 0, 0.02),
    0 6px 5px 0 rgba(0, 0, 0, 0.05),
    0 4px 4px 0 rgba(0, 0, 0, 0.09),
    0 0 2px 0 rgba(0, 0, 0, 0.11),
    0 0 0 0 rgba(0, 0, 0, 0.11);
}

@media screen and (min-width: 1024px) {
    .project-section .swiper-button {
        display: flex;
    }
}

.project-section .swiper-button:after {
    color: #414141;
    font-size: 24px;
    content: unset;
}

.project-section .swiper-button-next {
    right: -24px;
}

.project-section .swiper-button-prev {
    left: -24px;
}

.project-section .swiper-button-prev img {
    transform: rotate(180deg);
}

.go-top {
    display: block;
    color: #d30000;
    text-align: center;
    font-family: var(--yes-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    text-decoration: unset;
    margin: 0 auto 68px;
}

@media screen and (min-width: 1024px) {
    .go-top {
        margin-bottom: 81px;
    }
}