/* BANNER SECTION */

section#project-banner-section {
    margin-top: 50px;
}

@media (min-width: 1025px){
section#project-banner-section .container {
    position: relative;
}

.banner-info {
    display: flex;
    align-items: flex-end;
    width: -webkit-fill-available;
    height: 700px;
}

.banner-info img {
    position: absolute;
    right: 0;
    width: 700px;
    z-index: -1;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
}

.banner-info .section-title {
    margin-bottom: var(--spacing-xl);
}

.section-title .title-custom {
    line-height: normal;
}

/* ABOUT PROJECT SECTION */

body.light-mode #about-project .frame {
    display: flex;
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color-light-mode);
    gap: var(--spacing-lg);
}

body.dark-mode #about-project .frame {
    display: flex;
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color-dark-mode);
    gap: var(--spacing-lg);
}

#about-project .first-col, #about-project .second-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

#about-project .first-col p, #about-project .second-col p {
    text-align: justify;
}

.my-role .second-col {
    justify-content: center;
    align-items: flex-start;
    width: 65%;
}

.my-role .first-col {
    width: 30%;
}

.my-role {
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

@media (min-width: 1025px){
.my-role img {
    width: -webkit-fill-available;
    height: auto;
    object-fit: cover;
}
}

#project-rights {
    color: var(--text-highlight-color-light-mode);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

body.light-mode a.full-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--surface-bg-color-dark-mode);
    color: var(--text-light-color-light-mode);
    font-family: var(--font-family);
    padding: var(--spacing-sm-plus);
    font-size: var(--font-size-sm-desktop);
    transition: 0.3s linear;
}

body.dark-mode a.full-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--surface-bg-color-light-mode);
    color: var(--text-dark-color-dark-mode);
    font-family: var(--font-family);
    padding: var(--spacing-sm-plus);
    font-size: var(--font-size-sm-desktop);
    font-weight: var(--font-weight-medium);
    transition: 0.3s linear;
}

body.light-mode a.full-btn:hover {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--surface-frame-color-light-mode);
    color: var(--text-light-color-light-mode);
    font-family: var(--font-family);
    padding: var(--spacing-sm-plus);
    font-size: var(--font-size-sm-desktop);
    transition: 0.3s linear;
}

body.dark-mode a.full-btn:hover {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--surface-frame-color-light-mode);
    color: var(--text-light-color-light-mode);
    font-family: var(--font-family);
    padding: var(--spacing-sm-plus);
    font-size: var(--font-size-sm-desktop);
    font-weight: var(--font-weight-medium);
    transition: 0.3s linear;
}

/* PROJECT NAVIGATION */

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

section#project-navigation {
    padding-top: var(--spacing-none);
}

@media (max-width: 767px) {
    .banner-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: -webkit-fill-available;
        height: fit-content;
        gap: var(--spacing-md);
    }

    .banner-info img {
        position: relative;
        width: 100%;
        z-index: -1;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .banner-info .section-title {
        margin-bottom: var(--spacing-none);
        width: -webkit-fill-available;
    }

    section#project-banner-section {
        margin-top: 100px;
        padding-top: var(--spacing-2xl);
    }

    body.light-mode #about-project .frame {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        border: 2px solid var(--border-color-light-mode);
        gap: var(--spacing-lg);
    }

    body.dark-mode #about-project .frame {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        border: 2px solid var(--border-color-dark-mode);
        gap: var(--spacing-lg);
    }

    .my-role {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-none);
        gap: var(--spacing-xl);
    }

    .my-role .first-col, .my-role .second-col {
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    .my-role img {
        width: 100%;
        object-fit: fill;
    }

    .primary-btn:hover, body.light-mode .primary-btn:hover, body.dark-mode .primary-btn:hover {
        background-color: var(--surface-frame-color-light-mode);
        color: var(--text-light-color-light-mode);
        border: none;
        font-family: var(--font-family);
        font-size: var(--font-size-sm-mobile);
        font-weight: var(--font-weight-medium);
        padding: var(--spacing-xs);
        transition: 0.3s linear;
    }

    a.full-btn {
        background-color: var(--surface-bg-color-dark-mode);
        color: var(--text-light-color-light-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    body.light-mode a.full-btn {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
    }

    body.dark-mode a.full-btn {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
        background-color: var(--text-primary-color-dark-mode);
        color: var(--text-dark-color-dark-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        font-weight: var(--font-weight-medium);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    a.full-btn:hover {
        background-color: var(--surface-frame-color-light-mode);
        color: var(--text-primary-color-dark-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    body.light-mode a.full-btn:hover {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
    }

    body.dark-mode a.full-btn:hover {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
        background-color: var(--surface-frame-color-light-mode);
        color: var(--text-light-color-light-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    section#about-project, section#project-navigation {
        padding-bottom: var(--spacing-xl);
    }

    .page-nav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-md);
    }

    .title-custom .tech {
        font-size: var(--font-size-2xl-mobile);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .banner-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: -webkit-fill-available;
        height: fit-content;
        gap: var(--spacing-md);
    }

    .banner-info img {
        position: relative;
        width: 100%;
        z-index: -1;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .banner-info .section-title {
        margin-bottom: var(--spacing-none);
        width: -webkit-fill-available;
    }

    section#project-banner-section {
        margin-top: 100px;
        padding-top: var(--spacing-2xl);
    }

    body.light-mode #about-project .frame {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        border: 2px solid var(--border-color-light-mode);
        gap: var(--spacing-lg);
    }

    body.dark-mode #about-project .frame {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        border: 2px solid var(--border-color-dark-mode);
        gap: var(--spacing-lg);
    }

    .my-role {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-none);
        gap: var(--spacing-xl);
    }

    .my-role .first-col, .my-role .second-col {
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    .my-role img {
        width: 100%;
        object-fit: fill;
    }

    .primary-btn:hover, body.light-mode .primary-btn:hover, body.dark-mode .primary-btn:hover {
        background-color: var(--surface-frame-color-light-mode);
        color: var(--text-light-color-light-mode);
        border: none;
        font-family: var(--font-family);
        font-size: var(--font-size-sm-mobile);
        font-weight: var(--font-weight-medium);
        padding: var(--spacing-xs);
        transition: 0.3s linear;
    }

    a.full-btn {
        background-color: var(--surface-bg-color-dark-mode);
        color: var(--text-light-color-light-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    body.light-mode a.full-btn {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
    }

    body.dark-mode a.full-btn {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
        background-color: var(--text-primary-color-dark-mode);
        color: var(--text-dark-color-dark-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        font-weight: var(--font-weight-medium);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    a.full-btn:hover {
        background-color: var(--surface-frame-color-light-mode);
        color: var(--text-primary-color-dark-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    body.light-mode a.full-btn:hover {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
    }

    body.dark-mode a.full-btn:hover {
        display: flex;
        width: -webkit-fill-available;
        justify-content: center;
        background-color: var(--surface-frame-color-light-mode);
        color: var(--text-light-color-light-mode);
        font-family: var(--font-family);
        padding: var(--spacing-sm-plus);
        font-size: var(--font-size-sm-mobile);
        transition: 0.3s linear;
        margin-top: var(--spacing-xl);
    }

    section#about-project, section#project-navigation {
        padding-bottom: var(--spacing-xl);
    }
}