/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/playfair-display-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/eb-garamond-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('assets/fonts/eb-garamond-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}





:root { /*colors*/

    /* Main text */
    --color-text-primary: rgb(42,28,14);
    --text-color-preset-2:rgba(122,98,81,100%);
    --text-color-preset-3:rgba(250,247,242,100%);

     /* Accent */
    --text-color-preset-4:rgba(168,107,42,100%);
    --text-color-preset-5:rgb(108, 72, 32);
    --text-color-preset-6:rgb(202, 180, 163);

     /* Backgrounds */
    --color-background-body:rgba(250,247,242,100%);
    --color-background-hero-section:rgba(250,247,242,100%);
    --about-background-color:rgba(37, 0, 0, 0);
    --services-background-color:rgba(242, 233, 220, 1);

    /* --color-background-body:rgb(202, 180, 163); */


    --top-fixed-bar-background-color: rgba(250,247,242,94%);
    --mobile-nav-background:rgb(242,233,220);


    --to-top-button-background-color: rgba(250,247,242,64%);
    --to-top-btn-bkgr:rgba(202, 180, 163,40%);

    /* Accessibility */
    --focus-color:rgb(109, 90, 32);
    --active-link-color: rgb(164, 81, 33);


    --white: rgba(255,255,255,100%);


    --footer-gold: rgb(212, 175, 55);


    --modal-bckgr:rgba(0, 0, 0, 0.9);
    --modal-close-btn:rgb(171, 162, 162);

    --surface-color: rgb(250, 247, 242);

    --border-color:rgb(202, 180, 163);

  }

  @media (prefers-color-scheme: dark) {
    :root {
        /* Main text */
        --color-text-primary: rgb(244, 237, 226);
        --text-color-preset-2: rgb(190, 178, 164);
        --text-color-preset-3: rgb(250, 247, 242);


        /* Accent */
        --text-color-preset-4: rgb(218, 164, 67);
        --text-color-preset-5: rgb(174, 111, 39);
        --text-color-preset-6: rgb(145, 130, 113);

        /* Backgrounds */
        --color-background-body:rgb(27, 24, 21);
        --color-background-hero-section:rgb(202, 180, 163);
        --about-background-color: rgb(27, 24, 21);
        --services-background-color: rgb(38, 33, 28);



        /* Navigation */
        --top-fixed-bar-background-color: rgb(27 24 21 / 94%);
        --mobile-nav-background: rgb(38, 33, 28);

        /* Buttons */
        --to-top-button-background-color: rgb(38 33 28 / 80%);
        --to-top-btn-bkgr: rgb(145 118 88 / 30%);

        /* Accessibility */
        --focus-color: rgb(230, 190, 91);
        --active-link-color: rgb(218, 145, 69);

        /* Surfaces */
        --white: rgb(244, 237, 226);

        /* Footer */
        --footer-gold: rgb(218, 177, 69);

        /* Modal */
        --modal-bckgr: rgb(0 0 0 / 94%);
        --modal-close-btn: rgb(205, 195, 181);

        --surface-color: rgb(48, 42, 35);
        --border-color:rgb(91, 78, 64);

    }
}

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

img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

input,button,textarea {
    font: inherit;
    color: inherit;
}

html {
    scroll-behavior:smooth;
}

body {
    background-color: var(--color-background-body);
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
}



#toTopBtn {
    display: none;
    position: fixed;
    bottom: 4.5rem;
    right: 1.5rem;
    padding: 0.8em 1em;
    border-radius: 7px;
    background-color: var(--to-top-button-background-color);
    color: var(--color-text-primary);
    font-size: 1.125rem;
    cursor: pointer;
    z-index: 3;
    transition: background-color 0.3s ease;
}

#toTopBtn:focus-visible {
    outline: 2px solid var(--focus-color);
}

#toTopBtn.active {
    display: block;
}


.container {
    background-color: var(--top-fixed-bar-background-color);
    position: fixed;
    top: 0;
    z-index: 4;
    inline-size: 100%;
}

.top-fixed-bar {
    max-inline-size: 84rem;
    inline-size: 100%;
    margin: 0 auto;
    display: flex;
    justify-content:space-between;
    padding: 0.75rem 1rem;
}


.initials {
    text-decoration: none;
}



.initials:focus-visible {
    outline: 3px solid var(--focus-color);
    padding: 0.2rem;
}


.initials__name {
    display: block;
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-family:'Playfair Display',serif;
}

.initials__occupation {
    display: block;
    color: var(--text-color-preset-2);
    font-size: 0.625rem;

}


.open-nav-button {
    padding: 0.5rem;
    display: grid;
    gap: 0.35rem;
}
.open-nav-button:focus-visible{
    outline: 1px solid var(--focus-color);
}

.open_hamb {
    background-color: var(--color-text-primary);
    block-size: 3px;
    inline-size: 1.5rem;
}


.nav_mobile {
    transform: translateX(200%);
    transition: transform 0.5s ease;
    position: fixed;
    inset: 0;
    z-index: 5;
    background-color: var(--mobile-nav-background);

}

.nav_mobile.open {
    transform: translateX(0);
}


.nav__mobile__list {
    inline-size: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 1rem;
    font-size: 1.4rem;
}


.nav__mobile__link {
  text-align: center;
  text-decoration: none;
    color: var(--color-text-primary);
  display:block; /* makes the link fill the entire list item */
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  transition: background-color 0.2s ease, transform 0.2s ease, border 0.2s ease;
  letter-spacing: 0.3em;
}

.nav__mobile__link.active {
border: 2px solid var(--color-text-primary);
}


.nav__mobile__link:focus-visible {
  outline: 2px solid var(--focus-color);
}

.nav__mobile__link:active {
  color: var(--active-link-color);
}


.close-nav-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    inline-size: 35px;
    block-size: 35px;
    padding: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.cls_hamb {
    position: absolute;
    inline-size: 35px;
    block-size: 3px;
    background-color: var(--color-text-primary);
    border-radius: 999px;
}

.cls_hamb.one {
    transform: rotate(45deg);
}

.cls_hamb.two {
    transform: rotate(-45deg);
}


.nav__desktop {
    display: none;
}


.hero-section {
    position: relative;
    background-color:var(--color-background-hero-section);
}

.slide {
    block-size: 100dvh;
    position: relative;
    display: none;
    animation-name: fade_in;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    overflow: hidden;
}

/* hero image overlay */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 40%);
}


.slide.active {
    display: block;
}

@keyframes fade_in {
    from {
        opacity: 0;
        transform: translateY(9px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.hero_image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    opacity: 1;
    margin-left: auto;
}


.hero__content {
    padding: 0 1rem;
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
}

.hero__uptext{
    color: var(--text-color-preset-4);
    letter-spacing: 0.2rem;
    inline-size: 80%;
}

.hero__main-heading{
    font-size:clamp(2rem, 5vw, 5rem);
    font-family: 'Playfair Display', serif;
    color: var(--white);
}

.hero__downtext{
    color: var(--text-color-preset-6);
    inline-size: 80%;
    margin: 2rem 0;
    font-size: 1rem;
}

.hero__buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero__buttons__inquire{
    background-color: var(--text-color-preset-4);
    color: var(--text-color-preset-3);
    padding: 0.5rem ;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}


.hero__buttons__inquire:focus-visible{
    outline: 2px solid var(--focus-color);

}


.hero__buttons__meet-Larysa{
    font-size: 0.875rem;
    padding: 0.45rem;
    border: 1px solid var(--to-top-button-background-color);
    color: var(--text-color-preset-3);
    text-decoration: none;
    transition: border 0.3s ease;
}

.hero__buttons__meet-Larysa:focus-visible{
    outline:1px solid var(--focus-color);
}



.about-section {
    display: flex;
    flex-direction: column;
    background-color: var(--about-background-color);
    max-inline-size: 84rem;
    padding: 6rem 1rem;
    margin: 0 auto;
    gap: 2rem;
}

.about__image-container{
    transform:translateX(-120%);
    transition: transform 1.5s ease, opacity 1.5s   ease;

}

.about__image-container.appears{
    transform:translateX(0);
}

.about__image{
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;

}

    .about__content {
    opacity: 0;
    transition: transform 1.5s ease, opacity 1.5s ease;
    }

    .about__content.appears{
        opacity: 1;
    }

    .general__uptext{
        font-size: 0.75rem;
        color: var(--text-color-preset-4);
        letter-spacing: 0.3rem;

    }
    .general__heading {
        color: var(--color-text-primary);
        font-size: clamp(1.875rem,5vw,2.25rem);
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        margin: 1rem 0 2rem;
    }

    .about__line{
        background-color: var(--text-color-preset-4);
        inline-size: 4rem;
        block-size: 0.09rem;
    }
    .about__text {
        margin: 1rem 0;
        color: var(--text-color-preset-2);
        font-family: 'EB Garamond' ,serif;
    }




    .role {
        block-size: 500px;
        position: relative;
        opacity: 0.3;
        transform: translateY(15%);
        transition: opacity 1.5s ease, transform 1s ease;
    }



    .role.appears {
        transform: translateY(0);
        opacity: 1;
    }


    .role__image{
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: 50% 40%;
    }

    .role::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 40%);
    }

    .role__text-container{
        max-inline-size: 84rem;
        padding: 6rem 1rem;
        margin: 0 auto;
        position: absolute;
        inset: 0;
    }

    .role__text {
        color: var(--text-color-preset-3);
        font-size:clamp(1.3rem, 4vw, 2rem);
        font-family: 'EB Garamond', serif;
        font-style: italic;
        margin-top: 12rem;
    }

    .role__name{
        margin-top: 1rem;
        color: var(--text-color-preset-6);
    }



    .services__container{
        background-color: var(--services-background-color);
    }
    .services-section {
        opacity: 0.3;
        transition: opacity 1.5s ease, transform 1s ease;
        transform: translateY(8%);
        background-color: var(--services-background-color);
    }

    .services-section.appears {
        transform: translateY(0);
        opacity: 1;
    }

    .services__content{
        max-inline-size: 84rem;
        padding: 6rem 1rem;
        margin: 0 auto;
    }

    .services__grid{
        display: grid;
        gap: 2rem;
    }
    .services__grid-line{
        background-color: var(--text-color-preset-4);
        inline-size: 3rem;
        block-size: 1px;
        margin: 1rem 0;
    }


    .services__grid-item{
        background-color: var(--surface-color);
        padding: 2rem;
        border: 1px solid var(--border-color);
    }

    .services__heading{
        margin: 1rem 0;
        font-size: 1.125rem;
        color: var(--color-text-primary);
        font-family: 'Playfair Display', serif;
    }


    .services__text{
        color: var(--text-color-preset-2);
        font-family: 'EB Garamond' ,serif;
        font-size: 0.875rem;
    }

    .services__text2{
        color: var(--text-color-preset-4);
        font-size: 0.75rem;
        margin-top: 0.7rem;
    }


    .services__last-paragraph{
        text-align: center;
        margin-top: 2rem;
        font-size: 0.813rem;
        color: var(--text-color-preset-2);
    }


    #get-in-touch{
    font-size: 0.813rem;
    color: var(--text-color-preset-4);
    }

    #get-in-touch:focus-visible{
        outline: 1px solid var(--focus-color);
    }





    .main-page__gallery__section{
        background-color: var(--about-background-color);
        opacity: 0.3;
        transform: translateY(10%);
        transition: opacity 1.5s ease, transform 1s ease;
    }
    .main-page__gallery__section.appears{
        opacity: 1;
        transform: translateY(0);
    }

    .main-page__gallery__container{
        max-inline-size: 84rem;
        padding: 6rem 1rem;
        margin: 0 auto;
    }



    .main-page__gallery__heading-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem;
        align-items: baseline;
        margin: 1.3rem 0 2rem;

    }



    .main-page__gallery__heading-link{
        color: var(--text-color-preset-4);
        font-size: 0.875rem;
    }


    .main-page__gallery__heading-link:focus-visible{
        outline: 1px solid var(--focus-color);
    }

    .main-page__gallery{
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }

    .main-page__gallery a{
        transition: transform 0.3s ease;
        aspect-ratio: 4 / 5;
    }


    .main-page__gallery a:focus-visible{
        outline: 1px solid var(--focus-color);
        transform: scale(1.05);
    }

    .main-page__gallery__image{
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
    }


    .reviews-section{
        opacity: 0.3;
        transform: translateY(10%);
        transition: opacity 1.5s ease, transform 1s ease;
        background-color: var(--services-background-color);
    }
    .reviews-section.appears{
        transform: translateY(0);
        opacity: 1;
    }

    .reviews__content{
        max-inline-size: 84rem;
        padding: 6rem 1rem;
        margin: 0 auto;
    }

    .reviews__viewport{
        overflow: hidden;
    }

    .reviews__track{
        display: flex;
        transition: transform 2.5s ease;
    }

    .review__container{
        flex: 0 0 100%;
        padding: clamp(1rem,5vw,5rem);
    }

    .review__frame{
        max-inline-size:52rem;
        margin:  0 auto;
    }
    .review__quotation-mark{
        font-size: 2.5rem;
        font-size: clamp(1.5rem, 5vw,2.5rem);

        font-family: 'Playfair Display', serif;
        color: var(--text-color-preset-6);
        text-align: center;
        display: block;
    }

    .review__text{
        font-family: 'EB Garamond' ,serif;
        font-style: italic;
        font-size: clamp(0.4rem, 5vw,1.5rem);
        text-align: center;
        color: var(--color-text-primary);
    }

    .center{
        margin: 2rem auto;
    }

    .review__name{
        text-align: center;
        font-size: 0.875rem;
        color: var(--color-text-primary);
    }


.contact-section {
    opacity: 0.3;
    transform: translateY(10%);
    transition: opacity 1.5s ease, transform 1s ease;
    background-color: var(--about-background-color);
}
.contact-section.appears {
    opacity: 1;
    transform: translateY(0);
}

.contact-section__container{
    max-inline-size: 84rem;
    padding: 6rem 1rem;
    margin: 0 auto;
}


.contact__content--flex {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contact__content__flex-item1,
.contact__form {
    inline-size: 100%;
}

.contact__content__location{
    padding: 0.3rem;
    background-color: var(--services-background-color);
    margin-bottom: 1rem;
}

.contact__content__location > :nth-child(2),
.contact__content__location > :nth-child(3){
     margin: 0.5rem 0 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-preset-2);
}

.contact__content__location > :nth-child(4){
    font-size: 0.75rem;
    color: var(--color-text-primary);
}


.contact__heading{
    font-size: 0.75rem;
    color:var(--color-text-primary);
}


.contact__link{
color: var(--text-color-preset-2);
text-decoration: none;
display: block;
margin-bottom: 1rem;
transition: color 0.3s ease;
}

.contact__link:focus-visible{
    outline: 1px solid var(--focus-color);
}


.social-links{
    display: flex;
    gap: 1rem;
}

.contact__form {
  display: grid;
  gap: 1rem;
  border-radius: 0.5rem;
}


.contact__form.close{
    display: none;
}




.contact__form input,
.contact__form textarea {
  inline-size: 100%;
  background-color: var(--services-background-color);
  color: var(--text-color-preset-2);
  border-radius: 4px;
  font-size: 0.875rem;
  padding: 0.75rem;
  border: 1px solid var(--text-color-preset-3);
}

.contact__form textarea{
    min-block-size: 10rem ;
}

.contact__form input:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--footer-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}


#submit-btn {
  background-color: var(--text-color-preset-4);
  color:var(--white);
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  margin-top: 0.75rem;
  padding: 0.75rem 1.1rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}


#submit-btn:focus-visible {
    outline: 2px solid var(--focus-color);
}


.form__message{
margin-top: 3rem;
width: 100%;
display:none;
}

.form__message.success {
display:block;
}


.form__message__heading{
    font-size:1.5rem;
    font-family: 'Playfair Display', serif;
    color: var(--color-text-primary);

}

.form__message__text{
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-color-preset-2);
    font-family: 'EB Garamond' ,serif;

}


.gallery__body {
    background-color: var(--about-background-color);
}



.gallery__container{
    margin-top: 10rem;
    max-inline-size: 84rem;
    padding: 6rem 1rem;
    margin: 0 auto;
}


.gallery__animation{

    opacity: 0.3;
    transform: translateY(7%);
    transition: opacity 1.5s ease, transform 1s ease;
}

.gallery__animation.appears{
    opacity: 1;
    transform: translateY(0);
}


.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-inline-size: 100%;
    margin: 2rem auto 4rem;
}


.gallery__img-btn {
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--white);
    border: 1px solid rgba(120, 90, 110, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: transform 250ms ease, box-shadow 250ms ease, opacity 0.4s ease;
    aspect-ratio: 4 / 5;
}

.gallery__img-btn.touched {
    opacity: 0.5;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}



.gallery__img-btn:focus-visible{
    opacity: 0.5;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    outline: none;
}



.gallery__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}

#modal__window {
    display: none;
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 4;
    background-color: var(--modal-bckgr);
    overflow:hidden;
}

#modal__window.active {
    display: flex;
    flex-direction: column;
}

#modal__close-btn{
    color: var(--modal-close-btn);
    font-size: 50px;
    margin-left: 90%;
    position: fixed;
    top: -2%;
    left: 0;
    transition: color 0.3s ease;
}

#modal__close-btn:focus-visible{
    outline: 2px solid var(--white);
}


.modal__slide {
    display: none;
    touch-action: none;
    flex: 1;
    min-block-size: 0;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
}

.modal__slide.active{
    display:flex;
    animation: modalSlideIn 0.7s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



.modal__top-image{

    touch-action: pan-y;
    user-select: none; /*for swiping behavior */
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: 667px;
    object-fit: cover;
    object-position:center;
}



.modal__image-list-container {
    block-size: 8rem;
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem;
}




.modal__list-item {
    flex: 0 0 7rem;
    block-size: 7rem;
    background-color: var(--white);
    transition: filter 0.3s ease;
}


.modal__list-item.active{
    filter:opacity(50%);


}
.modal__list-item:focus-visible{
    filter:opacity(50%);
    outline: none;
}

.modal__list-item:hover{
    filter:opacity(50%);

}


.modal__list-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;
}

.modal__nav-buttons-container {
    position: absolute;
    top: 45%;
    padding: 0 1rem 0;
    width: 100%;
    display: none;
}

.modal__next-btn,.modal__prev-btn  {
    color: var(--modal-close-btn);
    font-size: 40px;
    transition: color 0.3s ease;
}

.modal__next-btn {
    margin-left: auto;
}

.modal__next-btn:focus-visible,
.modal__prev-btn:focus-visible {
    outline: 2px solid var(--white);
}




.videos{
    opacity: 0.3;
    transform: translateY(8%);
    transition: opacity 1.5s ease, transform 1s ease;
    background-color: var(--services-background-color);
}
.videos.appears{
    transform: translateY(0);
    opacity: 1;
}
.videos__container{
    margin-top: 10rem;
    max-inline-size: 84rem;
    padding: 6rem 1rem;
    margin: 0 auto;
}


.video__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

 .iframe__container{
    aspect-ratio: 16 / 9;
 }
 iframe{
    display: block;
    inline-size: 100%;
    block-size: 100%;
 }

 .performer-name{
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    font-family: 'EB Garamond' , serif;
    font-style: italic;
 }

 .video__text{
    margin-top: 2rem;
    color: var(--text-color-preset-2);
    font-size: 0.875rem;
}
 .video__text a{
    text-decoration: none;
    color: var(--text-color-preset-4);
 }



 .footer{
    max-inline-size: 84rem;
    padding: 1.5rem 0 1.5rem;
    margin: 0 auto;
}

.footer__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
}

 .footer__name{
    color: var(--color-text-primary);
    font-family: 'Playfair Display', serif;
 }

.copyright {
    font-size: 0.75rem;
    color: var(--text-color-preset-2);
}



 .logo__link{
    text-decoration: none;
    color: var(--text-color-preset-2);
    font-family: 'EB Garamond' ,serif;
    font-size: 0.875rem;
    display: block;
 }

 .logo__link:focus-visible{
    outline: 1px solid var(--focus-color);
 }

 #logoVal{
    font-family:cursive;
    font-style: italic;
    color: var(--color-text-primary);
 }





 @media screen and (hover: hover) and (pointer: fine) {


        #toTopBtn:hover {
            background-color: var(--text-color-preset-2);
        }


        .contact__link:hover{
            color: var(--color-text-primary);
        }



        #submit-btn:hover {
        background-color: var(--text-color-preset-5);
        }

        #modal__close-btn:hover {
            color: var(--white);
        }

        .modal__next-btn:hover,
        .modal__prev-btn:hover {
        color:var(--white);
        }
        .gallery__img-btn:hover{
        opacity: 0.5;
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
        }

        .nav__desktop__link:hover {
            transform: scale(1.1, 1.1);
            color: var(--text-color-preset-2);
        }
        .nav__get-in-touch:hover{
            background-color: var(--text-color-preset-5);
        }

        .hero__buttons__meet-Larysa:hover{
        border: 1px solid var(--text-color-preset-3);
        }

        .hero__buttons__inquire:hover{
        background-color: var(--text-color-preset-5);
        }

        .main-page__gallery a:hover{
            transform: scale(1.03);
        }

        .video__text a:hover{
        color: var(--text-color-preset-2);
        }


    }


    @media screen and (min-width: 32rem) { /*512px*/

        .services__grid{
            grid-template-columns: 1fr 1fr;
        }

        .main-page__gallery{
            grid-template-columns: 1fr 1fr 1fr;
        }

        .gallery{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .video__grid{
    grid-template-columns: 1fr 1fr;
    }
    .footer__container{
        flex-direction: row;
        justify-content: space-between;

    }
    }

@media screen and (min-width: 54rem) { /* 864px */
    .open-nav-button {
        display: none;
    }

    .nav__desktop {
        display: flex;
        align-items:center;
        gap: 1.5rem;
        list-style: none;
    }

    .nav__desktop__link {
            color: var(--color-text-primary);
        text-decoration: none;
        display: block;
        text-align: center;
        transition: background-color 0.2s ease, transform 0.2s ease, border 0.2s ease, color 0.2s ease;
    }


    .nav__desktop__link.active {
        transform: scale(1.1, 1.1);
        color: var(--text-color-preset-2);
        border-bottom: 1px solid var(--text-color-preset-2);
    }

    .nav__desktop__link:focus-visible {
        outline: 2px solid var(--active-link-color);
    }


    .nav__desktop__link:active {
        color: var(--active-link-color);
    }


    .nav__get-in-touch {
        padding: 0.4rem 0.7rem;
        text-decoration: none;
        background-color: var(--text-color-preset-4);
        color: var(--text-color-preset-3);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .nav__get-in-touch:focus-visible{
        outline: 2px solid var(--active-link-color);
    }


    .hero__content{
        max-inline-size: 84rem;
        top: 30%;
        margin: 0 auto;
    }

    .hero__main-heading{
        width: 50%;
    }

    .hero__downtext {
        width: 50%;
    }



    .hero_image {
        object-position: 50% 10%;
    }


    .about-section{
        gap: 6rem;
        flex-direction: row;
        align-items: stretch;
    }


    .about__image-container{
        flex: 1;

    }


    .about__content{
    flex: 1;
    }


    .role__text{
        inline-size: 60%;
        margin-top: 6rem;
    }


    .services__grid{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .services__heading{
        margin: 1.7rem 0;
    }


    .main-page__gallery{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


    .modal__nav-buttons-container {
        display: flex;
    }

    .contact__content--flex {
        flex-direction:row;
        gap: 3.5rem;
    }


    .gallery{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

     .video__grid{
    grid-template-columns: 1fr 1fr 1fr ;
    }
}