@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfairdisplay/PlayfairDisplay-Regular.ttf') format('truetype'); 
}

body {
    background-color: #151515;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex-direction: column;
    margin-bottom: 84px;
    width: 100%;
}

header {
    display: flex;
    flex-direction: row;
}

main {
    display: flex;
    max-width: 1010px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer {
    display: flex;
    flex-direction: row;
}

a {
    text-decoration: none;
}

@media (max-width: 768px) {
    body {
        margin-bottom: 0px;
    }

    main {
        max-width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;
    }
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 0;
    width: 100%;
    margin: 0 auto;
}

.header-inner-container {
    max-width: 1010px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 0;
    width: 100%;
    margin: 0 auto;
}

.header-logo {
    aspect-ratio: 3.1;
    object-fit: contain;
    object-position: center;
    width: 230px;
    align-self: stretch;
    margin: auto 0;
}

@media (max-width: 768px) {
    .header-logo {
        width: 140px;
    }
}

.contact-container {
    display: flex;
    justify-content: flex-start;
    align-items: end;
    gap: 24px;
    margin-right: 16px;
}

@media (max-width: 768px) {
    .contact-container {
	display: contents;
        //gap: 8px;
    }
}

.social-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .social-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width:380px) {
    .social-icon {
        display: none;
        display: none;
    }
}

.social-icon2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .social-icon2 {
        width: 20px;
        height: 20px;
    }
}

.contact-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;
}

.header-phone-number {
    text-align: end;
    color: white;
    font-size: 16px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .header-phone-number {
        font-size: 12px;
    }
}

.contact-button {
    justify-content: flex-end;
    align-items: end;
    gap: 0px;
    flex-direction: row;
    display: flex;
}

.contact-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 9999px;
}

@media (max-width: 768px) {
    .contact-dot {
        display: none;
    }
}

.contact-text {
    text-align: end;
    color: #151515;
    font-size: 16px;
    font-family: Montserrat Alternates;
    font-weight: 300;
    word-wrap: break-word;
    background-color: white;
    border: #151515;
    cursor: pointer;
    padding: 8px;
}
@media (max-width: 768px) {
    .contact-text {
        font-size: 10px;
        padding: 4px;
    }
}

.contact-text-footer {
    text-align: end;
    color: #151515;
    font-size: 16px;
    font-family: Montserrat Alternates;
    font-weight: 300;
    word-wrap: break-word;
    background-color: white;
    border: #151515;
    cursor: pointer;
    padding: 8px;
}

@media (max-width: 768px) {
    .contact-text {
        font-size: 16px;
    }

    .contact-text-footer {
        font-size: 18px;
    }
}

.line-header {
    width: 100%;
    height: 0px;
    border: 1px white solid;
}

.banner-section {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    flex-direction: column;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .banner-section {
        padding: 0;
    }
}

.banner-text-container {
    display: flex;
    flex-direction: column;
}

.banner-text {
    width: 100%;
    text-align: center;
    color: #BD8059;
    font-size: 64px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    word-wrap: break-word;
    z-index: 1;
}

@media (max-width: 768px) {
    .banner-text {
        font-size: 24px;
    }
}

.banner-text-black {
    width: 100%;
    text-align: center;
    color: black;
    font-size: 80px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    word-wrap: break-word;
    z-index: 1;
}

@media (max-width: 768px) {
    .banner-text-black {
        font-size: 32px;
    }
}

.banner-info {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: -90px;
    position: relative;
}

@media (max-width: 768px) {
    .banner-info {
        display: flex;
        justify-content: center;
    }
}

.banner-img {
    display: block;
    width: 700px;
    height: auto;
    grid-column: 2;
    border-radius: 0px;
}

@media (max-width: 768px) {
    .banner-img {
        width: 85%;
        margin-top: 52px;
    }
}

.banner-text-sub {
    margin-left: 20px;
    margin-top: -24px;
    color: white;
    font-size: 20px;
    font-family: Montserrat Alternates;
    font-weight: 300;
    word-wrap: break-word;
    grid-column: 3;
}

@media (max-width: 768px) {
    .banner-text-sub {
        display: none;
    }
}

.banner-circle {
    position: absolute;
    bottom: 10px;
    right: 90px;
    width: 150px;
    height: 150px;
    background: #151515;
    border-radius: 50%;
    border: 1px white solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .banner-circle {
        bottom: 10px;
        right: 40px;
        width: 100px;
        height: 100px;
    }
}

.banner-circle-text {
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
    cursor: pointer;
    background: none;
}

@media (max-width: 768px) {
    .banner-circle-text {
        font-size: 12px;
    }
}

.portfolio-section {
    max-width: 1010px;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .portfolio-section {
        margin-top: 36px;
    }
}

.portfolio-container {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 4px;
    display: flex;
}

.portfolio-container-inner2 {
    max-width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    gap: 35px;
    display: flex;
}

.nav-left-container {
    writing-mode: vertical-rl;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    display: flex;
    margin-top: 12px;
    padding: 0;
}

@media (max-width: 768px) {
    .nav-left-container {
        display: none;
    }
}

.nav-left-line {
    width: 4px;
    height: 48px;
}

.nav-left-text {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.552);
    font-size: 16px;
    font-family: Playfair Display;
    text-transform: uppercase;
    word-wrap: break-word;
    display: flex;
    align-items: end;
    white-space: nowrap;
    padding: 0;
}

.portfolio-content {
    flex: 1 1 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    display: flex;
}

@media (max-width: 768px) {
    .portfolio-content {
        gap: 24px;
        margin-left: 16px;
        margin-right: 16px;
    }
}

.portfolio-title {
    align-self: stretch;
}

.portfolio-title-text {
    color: white;
    font-size: 48px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2.40px;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .portfolio-title-text {
        font-size: 32px;
    }
}

.portfolio-title-text orange {
    color: #BD8059;
}

.portfolio-items {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    display: flex;
}

@media (max-width: 768px) {
    .portfolio-items {
        flex-direction: column;
        gap: 12px;
    }
}

.portfolio-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

.portfolio-item-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px;
    max-height: 214px;
}

.portfolio-slider {
    width: 295px;
    margin: 0 auto;
}

.portfolio-slider2 {
    width: 295px;
    margin: 0 auto;
}

.portfolio-slider3 {
    width: 295px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .portfolio-slider {
        width: 90vw;
    }
    .portfolio-slider2 {
        width: 90vw;
    }
    .portfolio-slider3 {
        width: 90vw;
    }
}

.slick-slide img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px;
}

.portfolio-item-texts {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.portfolio-item-title {
    align-self: stretch;
    color: white;
    font-size: 15px;
    font-family: Roboto Slab;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word;
}

.portfolio-item-subtitle {
    align-self: stretch;
    color: rgba(255, 255, 255, 0.80);
    font-size: 15px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
}

.portfolio-all-projects {
    padding-top: 24px;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    display: flex;
}

@media (max-width: 768px) {
    .portfolio-all-projects {
        padding-top: 4px;
        padding-right: 16px;
    }
}

.portfolio-all-projects-text {
    color: #BD8059;
    font-size: 24px;
    font-family: Playfair Display;
    font-weight: 400;
    text-decoration: underline;
    word-wrap: break-word;
    cursor: pointer;
}

@media (max-width: 768px) {
    .portfolio-all-projects-text {
        font-size: 20px;
    }
}

.about-section {
    max-width: 1010px;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .about-section {
        margin-top: 32px;
    }
}

.about-container {
    max-width: 1010px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 35px;
    display: flex;
}

@media (max-width: 768px) {
    .about-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.about-conteiner-inner {
    flex: 1 1 0;
    max-width: 1010px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    display: flex;
}

@media (max-width: 768px) {
    .about-conteiner-inner {
        gap: 24px;
    }
}

.about-title {
    align-self: stretch;
    color: #BD8059;
    font-size: 48px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .about-title {
        font-size: 32px;
    }
}


.about-content {
    align-self: stretch;
    flex: 1 1 0;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 32px;
    display: flex;
}

@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
    }
}

.about-text {
    max-width: 100%;
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .about-text {
        max-width: 90%;
        margin-bottom: 24px;
        font-size: 14px;
    }
}

.about-content-inner {
    flex: 1 1 0;
    max-width: 60%;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
    display: flex;
    margin-top: -72px;
}

.about-logo {
    align-self: stretch;
    //height: 100px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    display: flex;
}

@media (max-width: 768px) {
    .about-logo {
        display: none;
    }
}

.image-9 {
    width: 500px;
    height: 170px;
}


.about-advantages {
    align-self: stretch;
    max-width: 100%;
    flex: 1 1 0;
    justify-content: space-between;
    align-items: end;
    display: flex;
    gap: 16px;
    margin-top: -32px;
}
@media (max-width: 768px) {
    .about-advantages {
	padding-top: 35px;
        gap: 4px;
    }
}
/*@media (max-width: 390px) {
    .about-advantages {
        display: none;
    }
}*/

.about-advantage {
    padding: 10px 20px;
    background: #151515;
    height: 160px;
    width: 140px;
    border: 1px white solid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex;
    flex: 1 1 0;
    border-radius: 100%;
}

@media (max-width: 768px) {
    .about-advantage {
        padding: 0px 10px;
        height: 120px;
        width: 100px;
    }
}

.about-advantage-text {
    height: 100px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    display: flex;
}

.text-dop {
    text-align: center;
    color: white;
    font-size: 28px;
    font-family: Playfair Display;
    font-weight: 400;
    line-height: 64px;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .text-dop {
        font-size: 18px;
        line-height: 32px;
        margin-top: 28px;
    }
}

.text-dop2 {
    text-align: center;
    color: white;
    font-size: 28px;
    font-family: Playfair Display;
    font-weight: 400;
    line-height: 48px;
    word-wrap: break-word;
    margin-top: -12px;
}

.text-num {
    text-align: center;
    color: white;
    font-size: 40px;
    font-family: Playfair Display;
    font-weight: 400;
    line-height: 40px;
    word-wrap: break-word;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .text-num {
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 4px;
        margin-top: 16px;
    }
}

.text-second {
    align-self: stretch;
    text-align: center;
    color: rgba(255, 255, 255, 0.785);
    font-size: 16px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
    margin-top: -8px;
}

@media (max-width: 768px) {
    .text-second {
        font-size: 10px;
        line-height: 12px;
        margin-bottom: 4px;
    }
}

.text-second2 {
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Playfair Display;
    font-weight: 400;
    line-height: 30px;
    word-wrap: break-word;
    margin-top: 0px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .text-second2 {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 4px;
        margin-top: 20px;
    }
}

.text-second little {
    font-size: 10px;
}

.video-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .video-section {
        margin-top: 36px;
    }
}

.video-container {
    width: 100%;
    margin: 0 auto;
}

.video-container video {
    width: 100%;
    height: auto;
}

.steps-section {
    max-width: 1010px;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .steps-section {
        margin-top: 36px;
    }
}

.steps-container {
    max-width: 1010px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 35px;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .steps-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.steps-conteiner-inner {
    flex: 1 1 0;
    max-width: 1010px;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    display: flex;
}

@media (max-width: 768px) {
    .steps-conteiner-inner {
        gap: 24px;
    }
}

.steps-title {
    align-self: stretch;
    color: #BD8059;
    font-size: 48px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2.40px;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .steps-title {
        font-size: 32px;
    }
}

.steps-title white {
    color: white;
}

.steps-items {
    width: 100%;
    align-self: stretch;
    justify-content: space-between;
    align-items: stretch;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .steps-items {
        flex-direction: column;
    }
}

.step-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: 12px;
    background: #151515;
    border-radius: 0px;
    border: 1px white solid;
    justify-content: flex-start;
    align-self: stretch;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .step-item {
        gap: 6px;
        padding: 12px;
    }
}

.step-item-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 768px) {
    .step-item-info {
        gap: 8px;
    }
}

.step-number {
    color: #BD8059;
    font-size: 48px;
    font-family: Playfair Display;
    font-weight: 400;
    line-height: 48px;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .step-number {
        font-size: 36px;
    }
}

.step-title {
    color: white;
    font-size: 24px;
    font-family: Playfair Display;
    font-weight: 500;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .step-title {
        font-size: 20px;
    }
}

.step-subtitle {
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .step-subtitle {
        font-size: 12px;
    }
}

.reviews-section {
    max-width: 1010px;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .reviews-section {
        margin-top: 36px;
        width: 100%;
    }
}

.rewiews-main-container {
    max-width: 1010px;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    display: flex;
}

@media (max-width: 768px) {
    .rewiews-main-container {
        gap: 24px;
    }
}

.reviews-container {
    overflow: hidden;
    flex: 1;
    min-height: 0px;
}

@media (max-width: 768px) {
    .reviews-container {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.reviews-container-inner {
    flex: 1 1 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    display: flex;
}


.gallery-row-wrapper {
    overflow: hidden;
    flex: 1;
    min-height: 0px;
}

.gallery-row {
    gap: 30px;
    display: flex;
    transition: transform 0.3s ease;
    justify-content: flex-start;
    position: relative;
    max-width: 100%;
    margin-top: 24px;
}

.gallery-rows {
    gap: 0px;
    display: flex;
    transition: transform 0.3s ease;
    justify-content: flex-start;
    position: relative;
    max-width: 100%;
    margin-top: 24px;
    flex-direction: row;
}

@media (max-width: 768px) {
    .gallery-row {
        flex-direction: column;
        gap: 0px;
        margin-top: 8px;
    }
}


.pop {
    display: flex;
    flex-direction: row;

}

@media (max-width: 768px) {
    .pop {
        margin-right: 0px;
    }
}

.gallery-image {
    aspect-ratio: 1.3;
    object-fit: auto;
    object-position: center;
    width: 15vw;
    align-self: stretch;
    margin: auto 0;
    border-radius: 0px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .gallery-image {
        width: 45vw;
        max-height: 300px;
    }
}

.slide-texts {
    width: 100%;
    align-self: stretch;
    height: 72px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: flex;
    margin-top: 16px;
    margin-left: 48px;
}

@media (max-width: 768px) {
    .slide-texts {
        margin-left: 24px;
    }
}

.slide-text {
    align-self: stretch;
    color: #BD8059;
    font-size: 15px;
    font-family: Roboto Slab;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word
}

@media (max-width: 768px) {
    .slide-text {
        font-size: 12px;
    }
}

.slide-subtext {
    align-self: stretch;
    color: rgba(255, 255, 255, 0.80);
    font-size: 15px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word
}

@media (max-width: 768px) {
    .slide-subtext {
        font-size: 10px;
    }
}

.slide-text-container {
    height: 90px;
    overflow: hidden;
}

.col-el {
    display: flex;
    flex-direction: row;
}

.faq-section {
    width: 100%;
    max-width: 1010px;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .faq-section {
        margin-top: 36px;
    }
}

.faq-container {
    max-width: 1010px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 35px;
    display: flex;
}


.faq-title {
    align-self: stretch;
    color: #BD8059;
    font-size: 48px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2.40px;
    word-wrap: break-word;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .faq-title {
        font-size: 32px;
    }
}

.faq-title white {
    color: white;
}

.faq-conteiner-inner {
    flex: 1 1 0;
    max-width: 1010px;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    display: flex;
    width: 100%;
}

@media (max-width: 768px) {
    .faq-conteiner-inner {
        gap: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.faq-item {
    width: 100%;
    border-radius: 10px;
    background-color: none;
    display: flex;
    margin-top: 4px;
    flex-direction: column;
    font-size: 16px;
    color: white;
    font-weight: 300;
    justify-content: center;
    padding: 0;
}

.faq-question {
    justify-content: space-between;
    align-items: center;
    display: flex;
    gap: 10px;
    cursor: pointer;
}

.faq-question-text {
    color: rgba(255, 255, 255, 0.80);
    font-size: 24px;
    font-family: Playfair Display;
    font-weight: 200;
    word-wrap: break-word;
    margin-top: 0;
}

@media (max-width: 768px) {
    .faq-question-text {
        font-size: 16px;
    }
}

.faq-answer-text {
    font-family: Roboto Slab, sans-serif;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease; 
    position: relative;
    color: rgba(255, 255, 255, 0.80);
    font-size: 16px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word
}

@media (max-width: 768px) {
    .faq-answer {
        font-size: 12px;
    }
}

.faq-answer.active {
    max-height: 170px;
}

.faq-toggle {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 24px;
    height: 24px;
}

.faq-toggle-close {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 36px;
    align-self: start;
}

.contacts-section {
    max-width: 1010px;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .contacts-section {
        margin-top: 36px;
    }
}

.contacts-container {
    max-width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    gap: 35px;
    display: flex;
    margin-bottom: 84px;
}

@media (max-width: 768px) {
    .contacts-container {
        width: 100vw;
        margin-bottom: 36px;
    }
}

.contacts-title {
    max-width: 100%;
    align-self: stretch;
    color: #BD8059;
    font-size: 35px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2.40px;
    word-wrap: break-word;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .contacts-title {
        font-size: 32px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.contacts-title white {
    color: white;
}

.contacts-container-inner {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    display: flex;
    gap: 52px;
}

@media (max-width: 768px) {
    .contacts-container-inner {
        gap: 16px;
    }
}

.contacts-items {
    align-self: stretch;
    flex: 1 1 0;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 64px;
    display: flex;
}

@media (max-width: 768px) {
    .contacts-items {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.contacts-item-phone {
    align-self: stretch;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    gap: 24px;
    display: flex;
}

@media (max-width: 768px) {
    .contacts-item-phone {
        gap: 12px;
    }
}

.phone-number {
    align-self: stretch;
    color: white;
    font-size: 20px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .phone-number {
        font-size: 16px;
    }
}

.contacts-item-social {
    flex: 1 1 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: flex;
}

@media (max-width: 768px) {
    .contacts-item-social {
        gap: 12px;
    }
}

.contacts-item-text {
    color: #BD8059;
    font-size: 24px;
    font-family: Playfair Display;
    font-weight: 500;


    text-align: left;
}

@media (max-width: 768px) {
    .contacts-item-text {
        font-size: 20px;
    }
}

.contact-image {
    max-width: 100%;
    max-height: 300px;
    flex-wrap: wrap;
    cursor: pointer;
    max-width: 450px;
}

.contact-image-right {
    max-width: 100%;
    max-height: 300px;
    flex-wrap: wrap;
    cursor: pointer;
    max-width: 450px;
}


.contact-popap {
    display: flex;
}

.contact-circle {
    position: absolute;
    margin-top: 35px;
    margin-left: 55px;
    width: 200px;
    height: 200px;
    background: #151515;
    border-radius: 50%;
    border: 1px white solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .contact-circle, .contact-image-right {
        display: none;
    }
}


@media (max-width: 768px) {
    .contact-image {
        display: none;
    }
}

.main-footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 0;
    width: 100%;
    margin: 0 auto;
}

.footer-main-container {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px 0;
    margin-top: 0 auto;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .footer-main-container {}
}

.footer-container {
    max-width: 1010px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 84px;
}

@media (max-width: 768px) {
    .footer-container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 32px;
        margin-top: 32px;
    }
}

.footer-left {
    flex: 1 1 0;
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
    gap: 64px;
}

.footer-left-left {
    flex: 1 1 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 130px;
    display: flex;
}

@media (max-width: 768px) {
    .footer-left-left {
        gap: 64px;
    }
}

.logo {
    width: 246px;
    height: 80px;
}

@media (max-width: 768px) {
    .logo {
        width: 150px;
    }
}

.footer-left-text {
    align-self: stretch;
    color: white;
    font-size: 20px;
    font-family: Montserrat Alternates;
    font-weight: 300;
    text-transform: lowercase;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .footer-left-text {
        font-size: 16px;
        padding-left: 16px;
    }
}

.footer-left-right {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.footer-left-right>div {
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-family: Playfair Display;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: nowrap;
}

.footer-right {
    flex: 1 1 0;
    width: 100%;
    align-self: stretch;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
}

.footer-right-top {
    align-self: stretch;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px;
    display: flex;
}

.social-icons {
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: flex;
}

.contact-info {
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.phone-number {
    text-align: center;
    color: white;
    font-size: 16px;
    font-family: Roboto Slab;
    font-weight: 400;
    word-wrap: break-word;
    text-align: end;
}

.contact-button {
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: flex;
}

.ellipse-8 {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 9999px;
}

@media (max-width: 768px) {
    .ellipse-8 {
        display: none;
    }
}

.contact-button>div:last-child {
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Montserrat Alternates;
    font-weight: 300;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .contact-button>div:last-child {
        font-size: 20px;
        text-decoration: underline;
    }
}


.footer-right-text {
    align-self: stretch;
    text-align: right;
    color: white;
    font-size: 20px;
    font-family: Montserrat Alternates;
    font-weight: 300;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .footer-right-text {
        font-size: 16px;
    }
}

.line-footer {
    width: 100%;
    height: 0px;
    border: 1px white solid;
}

.modal-container {
    display: none;
    position: fixed;

    z-index: 1;
    left: 0;
    top: 0;
    //padding-top: 64px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #151515aa;
    z-index: 100;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    overflow: hidden;
    margin-top: 12px;
}

@media (max-width: 768px) {
	.modal-content {
		width: initial;
	}
	.modal-title {
		font-size: 20px!important;
	}
	.footer-modal{
		font: 10px Roboto, sans-serif!important;
	}
	.offer-submit-form {
		height: initial!important;
		font-size: 16px!important;
	}
}

.message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

.message-header {
    margin-bottom: 10px;
}

.modal-title {
    width: 100%;
    text-align: left;
    color: #BD8059;
    font-size: 32px;
    font-family: Playfair Display;
    font-weight: 400;
    word-wrap: break-word;
    z-index: 1;
}

#errorMessage .message-title {
    color: #DC4646;
}

.message-text {
    font-size: 16px;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-container1 {
    display: flex;
    flex-direction: column;
    width: auto;
    justify-content: flex-end;
}

.error-message {
    display: none;
    color: red;
    font-size: 10px;
    margin-bottom: 4px;
    font: 12px Roboto, sans-serif;
}

.footer-input {
    font-family: Playfair Display;
    align-items: start;
    border: 1px solid #000;
    background-color: transparent;
    justify-content: center;
    padding: 12px 20px;
    width: auto;
}

.footer-modal {
    font: 14px Roboto, sans-serif;
    color: #000;
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.content-row-modal {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    justify-content: flex-end;
}

.offer-submit-form {
    font-family: Playfair Display;
    font-size: 20px;
    width: 100%;
    height: 70px;
    padding: 12px 12px;
    justify-content: center;
    border: 1px solid #358385;
    background-color: #151515;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: pulse 1.5s infinite;
    background: #151515;
    cursor: pointer;
}

.message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

.message-header {
    margin-bottom: 10px;
}

.message-title {
    color: #488C84;
    font-size: 24px;
    font-weight: bold;
}

#errorMessage .message-title {
    color: #DC4646;
}

.message-text {
    font-size: 16px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #358385;
    text-decoration: none;
    cursor: pointer;
}