@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit
}

html {
    overflow-x: hidden
}

body {
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
    margin-top: 7.3rem
}

html {
    font-size: 62.5%
}

body {
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.7;
    color: #fff
}

body::-webkit-scrollbar {
    width: .5rem
}

body::-webkit-scrollbar-thumb {
    background-color: #DEB5A5
}

body::-webkit-scrollbar-thumb:window-inactive {
    background-color: #9ca3af
}

a,
a:link,
a:visited {
    text-decoration: none
}

::-moz-selection {
    background-color: #DEB5A5;
    color: #fff
}

::selection {
    background-color: #DEB5A5;
    color: #fff
}

.heading-primary {
    color: #111827;
    font-size: 6rem;
    line-height: 6rem;
    letter-spacing: -0.15rem
}

@media only screen and (max-width: 48em) {
    .heading-primary {
        font-size: 3.6rem;
        line-height: 4.5rem;
        letter-spacing: -0.09rem
    }
}

.heading-secondary {
    color: #111827;
    font-size: 4.8rem;
    line-height: 6rem;
    letter-spacing: -0.12rem
}

.heading-tertiary {
    color: #111827;
    font-size: 3.6rem;
    line-height: 4.5rem;
    letter-spacing: -0.09rem
}

@media only screen and (max-width: 48em) {
    .heading-tertiary {
        font-size: 1.4rem;
        line-height: 2rem
    }
}

.paragraph {
    color: #374151;
    font-size: 1.8rem;
    line-height: 2.8rem
}

.paragraph-2 {
    color: #374151;
    font-size: 2rem;
    line-height: 2.8rem
}

.paragraph-3 {
    color: #111827;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.8rem
}

.paragraph-3::before {
    content: "";
    background-image: url("../img/quote_mark.png");
    background-size: cover;
    display: block;
    width: 3.2rem;
    height: 2.6rem;
    margin: 0 0 1.6rem 0
}

.paragraph-3::after {
    content: "";
    background-image: url("../img/quote_mark.png");
    background-size: cover;
    display: block;
    width: 3.2rem;
    height: 2.6rem;
    margin: 1.6rem 0 0 auto
}

.container {
    max-width: 125.6rem;
    margin: 0 auto;
    padding: 0 4rem;
    width: 100%
}

@media only screen and (max-width: 48em) {
    .container {
        padding: 0 2rem
    }
}

.container.no-gutters {
    padding: 0
}

.btn {
    display: inline-block;
    width: auto;
    background-color: #111827;
    border-radius: .8rem;
    padding: 1rem 1.2rem;
    color: #fff;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2rem;
    border: 0;
    cursor: pointer;
    outline: none;
    transition: background-color .2s linear
}

.btn:hover {
    background-color: #DEB5A5
}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(0);
    transition: background-color .2s linear, backdrop-filter .2s linear;
}

.nav.small {
    background-color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(34px);
}

.nav__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.2rem 0;
    transition: padding .2s linear
}

.nav.small .nav__wrap {
    padding: 1rem 0
}

.nav__logo {
    z-index: 1
}

.nav__logo a {
    color: #111827;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.8rem
}

.nav__list {
    display: flex;
    align-items: center;
    list-style: none
}

@media only screen and (max-width: 48em) {
    .nav__list {
        position: absolute;
        top: 0;
        right: 0;
        height: 100vh;
        background-color: #f9fafb;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        transform: translateX(100%);
        transition: transform .4s ease-in
    }
}

.nav__list.active {
    transform: translateX(0)
}

.nav__item {
    margin: 0 1.6rem
}

@media only screen and (max-width: 48em) {
    .nav__item {
        margin: 2rem 0;
        opacity: 0
    }
}

.nav__item:last-child {
    margin-right: 0
}

@media only screen and (max-width: 48em) {
    .nav__item:last-child {
        margin: 2rem 0
    }
}

.nav__item.lang {
    color: #9ca3af
}

.nav__item.lang .nav__link {
    color: #9CA3AF;
    font-weight: 400;
    border: 0;
    background-color: transparent;
    cursor: pointer
}

.nav__item.lang .nav__link.active {
    color: #111827;
    font-weight: 700
}

.nav__link {
    color: #1F2937;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2rem
}

.nav__link.active {
    color: #DEB5A5
}

.nav__link.social {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 100%;
    background-color: #EDEDED;
    display: flex;
    align-items: center;
    justify-content: center
}

.nav__link.social svg {
    display: block;
    width: 100%
}

.nav__link.btn {
    color: #fff
}

.nav__burger {
    display: none;
    cursor: pointer
}

@media only screen and (max-width: 48em) {
    .nav__burger {
        display: block
    }
}

.nav__burger--line {
    width: 2.5rem;
    height: .3rem;
    background-color: #111827;
    margin: .5rem;
    transition: all .3s ease
}

.nav__burger.toggle .nav__burger--line-1 {
    transform: rotate(-45deg) translate(-0.5rem, 0.6rem)
}

.nav__burger.toggle .nav__burger--line-2 {
    opacity: 0
}

.nav__burger.toggle .nav__burger--line-3 {
    transform: rotate(45deg) translate(-0.5rem, -0.6rem)
}

.header {
    padding: 3.2rem 0 3.7rem
}

@media only screen and (max-width: 48em) {
    .header {
        padding: 11rem 0 5.4rem;
        background-color: #f9fafb
    }
}

.header__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.2rem
}

@media only screen and (max-width: 48em) {
    .header__wrap {
        flex-direction: column;
        align-items: flex-start
    }
}

.header__item:first-child {
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center
}

.header__item .heading-primary {
    margin-bottom: 1.6rem
}

.header__item .btn {
    margin-top: 2rem
}

.header__item img {
    display: block;
    width: auto
}

@media only screen and (max-width: 48em) {
    .header__item img {
        width: 100%
    }
}

.footer {
    background-color: #F7F1EF;
    padding: 4.8rem 0 2.4rem
}

.footer__wrap h4 {
    color: #51423C;
    font-size: 2rem;
    line-height: 2.8rem;
    text-align: center
}

.footer__links {
    margin: 3.2rem 0 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem
}

.footer__item {
    color: #A8958E;
    font-size: 1.6rem;
    line-height: 2.4rem;
    transition: color .2s linear
}

.footer__item.active,
.footer__item:hover {
    color: #52342E
}

.footer__rights {
    border-top: .1rem solid rgba(255, 255, 255, 0.2);
    padding-top: 2.4rem
}

.footer__rights p {
    color: #D8C2BA;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: center
}

.selected_work {
    padding: 9.6rem 0
}

@media only screen and (max-width: 48em) {
    .selected_work {
        padding: 4.8rem 0 3.7rem
    }
}

.selected_work__wrap .heading-tertiary {
    margin-bottom: 4.8rem
}

@media only screen and (max-width: 48em) {
    .selected_work__wrap .heading-tertiary {
        margin-bottom: 2.4rem;
        font-size: 2.4rem;
    }
}

.selected_work__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem
}

@media only screen and (max-width: 48em) {
    .selected_work__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.selected_work__item {
    position: relative;
}

.selected_work__item:hover .selected_work__item__overlay {
    opacity: 1
}

.selected_work__item img {
    display: block;
    width: 100%;
}

.selected_work__item h3 {
    font-weight: 600;
    font-size: 2rem;
    color: #111827;
    margin: 1.6rem 0 0 0;
}

@media only screen and (max-width: 48em) {
    .selected_work__item h3 {
        margin: 1.4rem 0 0 0;
    }
}

.selected_work__item p {
    font-weight: 400;
    font-size: 1.6rem;
    color: #9CA3AF;
    margin: 0;
}

/* .selected_work__item__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity .2s linear;
    opacity: 0;
    padding: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.selected_work__item__overlay__expand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 1rem
}

.selected_work__item__overlay__expand span {
    line-height: 1
} */

.selected_work__all {
    margin-top: 4.8rem;
    text-align: center
}

.contact {
    display: flex;
    align-items: center
}

.contact__item {
    width: 50%
}

.contact__item:first-child {
    background-color: #f1f7ff;
    padding: 7.5rem 0 0
}

.contact__item:first-child img {
    display: block;
    margin: 0 auto
}

.contact__info {
    max-width: 52.8rem;
    width: 100%;
    margin: 0 auto
}

.contact__form {
    margin-top: 4.8rem
}

.contact__form__flex {
    display: flex;
    gap: 3.2rem
}

.contact__form__flex .contact__form__item {
    width: 50%
}

.contact__form__item {
    width: 100%;
    margin-bottom: 2.4rem
}

.contact__form__item label {
    display: block;
    color: #374151;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;
    margin-bottom: .4rem
}

.contact__form__item input,
.contact__form__item textarea {
    display: block;
    width: 100%;
    border-radius: .6rem;
    border: .1rem solid #d1d5db;
    outline: none;
    padding: .8rem 1.2rem;
    color: #374151;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2rem
}

.contact__form__item textarea {
    min-height: 13.6rem
}

.biography {
    background-color: #f9fafb;
    padding: 6rem 0 22.4rem
}

@media only screen and (max-width: 48em) {
    .biography {
        padding: 6rem 0
    }
}

.biography__wrap {
    display: flex;
    align-items: flex-start;
    gap: 13.7rem
}

@media only screen and (max-width: 48em) {
    .biography__wrap {
        flex-direction: column;
        gap: 6rem
    }
}

@media only screen and (max-width: 48em) {
    .biography__item img {
        display: block;
        width: 100%
    }
}

.biography__text .heading-tertiary,
.biography__text .paragraph-2,
.biography__text .paragraph-3 {
    margin-bottom: 2.4rem
}

.biography__text .heading-tertiary {
    font-size: 3.6rem
}

.lightbox {
    z-index: 1000;
    pointer-events: none;
    position: fixed;
    padding: 10rem 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    transition: opacity .3s;
    display: flex;
    align-items: center;
    justify-content: center
}

.lightbox.show {
    pointer-events: auto;
    opacity: 1
}

.lightbox__content {
    position: relative;
    width: 80%
}

@media only screen and (max-width: 48em) {
    .lightbox__content {
        width: 50%
    }
}

.lightbox__image {
    max-width: 80rem;
    min-width: 60rem;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative
}

.lightbox__image__image {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem
}

.lightbox__prev,
.lightbox__next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .6s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: .1rem solid #4b5563;
    border-radius: 100%;
    padding: 1rem
}

.lightbox__prev:hover,
.lightbox__next:hover {
    background-color: rgba(0, 0, 0, 0.8)
}

.lightbox__prev svg,
.lightbox__next svg {
    display: block
}

.lightbox__close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0
}

.lightbox__close svg {
    display: block
}

.lightbox__prev {
    left: -7rem
}

.lightbox__next {
    right: -7rem
}

.lightbox__caption {
    color: white
}

/*# sourceMappingURL=style.css.map */

.btn-secondary {
    background-color: #E5E7EB;
    color: #111827;
    margin: 0 0 0 1.2rem;
}

.btn-secondary:hover {
    background-color: #D1D5DB;
}

.contact-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;

    padding: 4rem;
    border-radius: .8rem;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-modal__close {
    cursor: pointer;
    position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    background: none;
    border: 0;
    display: block;
}

.contact-modal__close svg {
    display: block;
}

.contact-modal__heading {
    font-weight: 600;
    font-size: 2.4rem;
    color: #111827;
    margin: 0 0 4rem 0;
}

.contact-modal__flex {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.contact-modal__flex:last-child {
    margin: 2.8rem 0 0 0;
}

.contact-modal__flex a {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1;
    color: #111827;
}

.selected_work__wrap {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
}

.press {
    margin: 9.6rem 0;
}

.press__grid {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.press__item {
    background-color: #F9FAFB;
    padding: .8rem 5.2rem .8rem .8rem;

    display: flex;
    align-items: center;
    gap: 3.2rem;
    transition: background-color .2s linear;
}

.press__item:hover {
    background-color: #F3F4F6;
}

.press__item:hover .press__link a {
    opacity: 1;
}

.press__img img {
    display: block;
    max-width: 12rem;
    width: 100%;
}

.press__info {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    flex: 1;
}

.press__title {
    flex: 1;
}

.press__title p {
    font-weight: 700;
    font-size: 2rem;
    color: #111827;
    margin: 0;
}

.press__link a {
    opacity: 0;
    display: block;
    border-radius: .8rem;
    background-color: #DEB5A5;
    padding: 1.6rem 2.4rem;
    color: #ffffff;
    transition: background-color .2s linear, opacity .2s linear;
}

.press__link a:hover {
    background-color: #D19983;
}

@media only screen and (max-width: 48em) {
    .press {
        margin: 2rem 0 9.6rem;
    }

    .contact-modal__flex a {
        font-size: 1.8rem;
    }

    .press__item {
        flex-direction: column;
        padding: .8rem;
        align-items: stretch;
        gap: 1.6rem;
    }

    .press__img img {
        max-width: 7rem;
    }

    .press__info {
        flex-direction: column;
        align-items: self-start;
        gap: 1.6rem;
    }

    .press__title p {
        font-size: 1.8rem;
    }

    .press__link a {
        opacity: 1;
    }
}