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

/* Firefox */
@-moz-document url-prefix() {
    html {
        scrollbar-width: thin;
        scrollbar-color: #D5D5D5 #F1F1F1;
    }
}

/* scrollbar styles */
html::-webkit-scrollbar {
    width: 5px; 
}

html::-webkit-scrollbar-thumb {
    background: #E6E6E6; 
    height: 87px;
    border-radius: 3px;
}

:root {
    --primary-color: #994D2A;
    --secondary-color: #1B2618;
    --toggle-bar-grey: #C9C6C3;
    --text-color: #D1D1D1;
    --see-more-color: #D96028;
    --go-back: #FFA25C;
}

.Container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 30px;
}

.content {
    display: flex;
    width: 100%;
    max-width: 1044px;
}

/* greenish overlay */
.overlay {
    position: relative;
    z-index: 1;
}

.overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(27, 38, 24, 0.8);
    z-index: 1;
}

.overlay * {
    position: relative;
    z-index: 2;
}

/* line dot decor */
.decor {
    position: relative;
}

.decor::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -109px;
    width: 80px; 
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.decor1::before {
    width: calc((100% - 324px) / 2);
    left: calc((272px - 100%) / 2);
    top: 19px;
}

.decor::after {
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 5px;
    left: -29px;
    width: 6px;
    height: 6px;
    background: white;
    z-index: 1;
}

.decor1::after {
    top: 17px;
}

.decor2::before {
    top: 7px;
}

.decor2::after {
    top: 5px;
}

.decor3::before {
    top: 22px;
}

.decor3::after {
    top: 20px;
}

.decor4::before {
    left: -237px;
    width: 214px; 
}

.decor5::before {
    top: 35px;
    left: 0;
    width: calc(100% - 275px);
}

.decor5::after {
    top: 33px;
    left: calc(100% - 277px);
}

/* sidenav */
.mobile-call-request, .mobile-social-links,
.mobile-call-request1 {
    display: none;
}

.sidenav hr {
    display: none;
}

.sidenav {
    background: var(--primary-color);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    height: 100vh;
    padding: 84px 0 30px;
    overflow: auto;
    z-index: 10;
}

.social-links {
    position: fixed;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 129px;
    transition: all 0.3s ease;
    z-index: 2;
}

.social-links.active {
    left: 459px;
}

.social-link, .call-request {
    color: unset;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 11px;
}

.social-link div, .call-request div {
    background: rgba(213, 213, 213, 0.4);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    width: 25px;
    height: 25px;
    transition: all 0.3s ease;
}

.social-link div:hover {
    background: var(--secondary-color);
}

.call-request div {
    background: var(--primary-color);
    font-size: 12px;
    width: 38px;
    height: 38px;
}

.call-request span {
    color: white;
    font: 14px 'BPG Arial 2009';
    line-height: 16px;
}

.call-request {
    background: transparent;
    border: none;
}

/* side menu */
.sidemenu {
    background: rgba(27, 38, 24, 0.9);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: -320px;
    height: 100vh;
    width: 320px;
    padding-left: 36px;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 4;
}

.sidemenu ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidemenu li {
    transition: all 0.3s ease;
}

.sidemenu li:hover {
    padding-left: 20px;
}

.sidemenu a {
    color: white;
    font: 14px 'BPG Arial 2009';
    line-height: 16px;
    text-decoration: none;
}

.sidemenu.active {
    left: 120px;
}

/* toggle button */
.toggle-menu-btn, .toggle-menu-btn1 {
    cursor: pointer;
}

.toggle-menu-btn .bar, .toggle-menu-btn1 .bar {
    background: var(--toggle-bar-grey);
    border-radius: 2px;
    height: 3px;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.toggle-menu-btn .bar:first-child, .toggle-menu-btn1 .bar:first-child {
    width: 43px;
}

.toggle-menu-btn.active .bar:first-child,
.toggle-menu-btn1.active .bar:first-child {
    transform: translateY(8px) rotate(45deg);
}

.toggle-menu-btn .bar:nth-child(2),
.toggle-menu-btn1 .bar:nth-child(2) {
    width: 33px;
}

.toggle-menu-btn.active .bar:nth-child(2),
.toggle-menu-btn1.active .bar:nth-child(2) {
    opacity: 0
}

.toggle-menu-btn .bar:last-child, .toggle-menu-btn1 .bar:last-child {
    width: 26px;
}

.toggle-menu-btn.active .bar:last-child, .toggle-menu-btn1.active .bar:last-child {
    transform: translateY(-8px) rotate(-45deg);
    width: 43px;
}

.logo {
    cursor: pointer;
}

.lang-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lang-btns a {
    border: 1px solid var(--toggle-bar-grey);
    color: var(--toggle-bar-grey);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font: 12px 'BPG Mrgvlovani';
    line-height: 20px;
    text-decoration: none;
    width: 60px;
    height: 30px;
    transition: all 0.3s ease;
}

.lang-btns a.active,
.lang-btns a:hover {
    background: var(--toggle-bar-grey);
    color: var(--secondary-color);
}

/* search filter */
.search {
    background: rgba(213, 213, 213, 0.4);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    width: 35px;
    height: 35px;
    position: fixed;
    top: 37px;
    right: 93px;
    transition: all 0.3s ease;
    z-index: 3;
}

.search-filter {
    background: white;
    position: fixed;
    top: 0;
    right: -320px;
    height: 100vh;
    width: 320px;
    padding: 52px 27px 85px;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 4;
}

.search-filter.active {
    right: 0;
}

.filter-heading {
    display: flex;
    align-items: flex-start;
    gap: 45px;
    font: 16px 'BPG LE Studio 02 Caps';
    line-height: 21px;
    margin-bottom: 30px;
}

.filter-heading span {
    color: var(--primary-color);
}

.filter-heading button {
    background: none;
    border: none;
}

.filter-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group label {
    font: 12px 'BPG Mrgvlovani';
    line-height: 16px;
    margin-bottom: 10px;
}

.form-group select,
.form-group2 select {
    border-color: #C2C2C2;
    border-radius: 0;
    color: #747474;
    font: 10px 'BPG Mrgvlovani';
    line-height: 13px;
    width: 100%;
    height: 40px;
}

.form-group1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group1 select {
    width: calc((100% - 56px) / 2);
}

.form-group1 div:last-child, .currency {
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 14px 'BPG Mrgvlovani';
    line-height: 19px;
    width: 36px;
    height: 40px;
}

.currency.hidden {
    display: none !important;
}

.currency {
    cursor: pointer;
    display: flex !important;
}

.currency2 {
    background: var(--secondary-color) !important;
}

.filter-btn {
    background: var(--primary-color);
    border: none;
    color: white;
    font: 14px 'BPG Mrgvlovani';
    line-height: 19px;
    height: 40px;
    transition: all 0.3s ease ;
}

.filter-btn:hover {
    background: var(--secondary-color);
}

.chat {
    cursor: pointer;
    position: fixed;
    bottom: 43px;
    right: 93px;
    z-index: 4;
}

/* request call modal */
.request-call-content .modal-header,
.request-call-content .modal-body,
.request-call-content .modal-footer {
    border: none;
    padding: 0;
}

.request-call-content .modal-header {
    padding: 50px 60px 0;
    margin-bottom: 33px;
}

.request-call-content .btn-close {
    color: white;
    width: 18.5px;
    height: 18.5px;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: -40px;
    --bs-btn-close-opacity: 1;
    --bs-btn-close-color: white;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-bg: none;
}

.request-call-content .modal-body {
    padding: 0 32px 68px;
}

.request-call-title {
    font: 18px 'BPG LE Studio 02 Caps';
    line-height: 24px;
    text-align: center;
}

.request-call-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

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

.form-group2 label {
    font: 12px 'BPG Mrgvlovani';
    line-height: 16px;
}

.form-group2 input {
    border: 1px solid #C2C2C2;
    border-radius: none;
    font: 12px "BPG Mrgvlovani";
    line-height: 16px;
    height: 40px;
    padding-left: 20px;
}

.main-page-container {
    margin-left: 120px;
    min-height: 100vh;
}

#requestCallModal {
    --bs-modal-border-radius: 0;
}

#requestCallModal .modal-dialog {
    border-radius: 0;
    margin-top: 0;
}

/* mobile version */
.main-page-mobile {
    display: none;
}

/* main page swiper */
.main-building-slide {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.main-building-slide * {
    z-index: 2;
    position: relative;
}

.main-project-title {
    cursor: pointer;
    position: absolute;
    top: 78px;
    left: 202px;
    transition: all 0.3s ease;
}

.main-project-title::before {
    content: "";
    position: absolute;
    top: 17px;
    left: -202px;
    width: 180px; 
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 1;
    transition: all 0.3s ease;
}

.main-project-title::after {
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 15px;
    left: -21px;
    width: 6px;
    height: 6px;
    background: white;
    z-index: 1;
}

.main-project-title p {
    color: white;
    font: 30px 'Gilroy GEO';
    line-height: 39px;
    margin-bottom: 4px;
}

.main-project-title a {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    opacity: 0;
    transition: all 0.3s ease;
}

.main-project-title:hover a {
    opacity: 1;
}

.main-project-title a span {
    font: 12px 'BPG Mrgvlovani';
    line-height: 20px;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.building-image {
    width: 100%;
    height: auto;
}

/* second slide */
.main-project-slide {
    display: flex !important;
}

.main-project-intro {
    background-image: url(../images/main-building.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 35%;
    height: 100vh;
    position: relative;
    padding: 72px 68px 0 109px;
}

.main-project-intro * {
    z-index: 2;
    position: relative;
}

.main-project-intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(27, 38, 24, 0.8);
    z-index: 1;
}

.main-project-intro-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 151px;
    position: relative;
    margin-bottom: 41px;
}

.main-project-intro-title::before {
    content: "";
    position: absolute;
    top: 83px;
    left: -109px;
    width: 80px; 
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 1;
    transition: all 0.3s ease;
}

.main-project-intro-title::after {
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 81px;
    left: -30px;
    width: 6px;
    height: 6px;
    background: white;
    z-index: 1;
}

.main-project-intro-desc,
.project-desc {
    color: var(--text-color);
    font: 12px 'BPG Mrgvlovani';
    line-height: 20px;
    margin-bottom: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.see-more {
    background: transparent;
    border: 1px solid white;
    color: var(--text-color);
    font: 12px 'BPG Mrgvlovani';
    line-height: 16px;
    width: 258px;
    height: 40px;
    transition: all 0.3s ease;
}

.see-more:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.projects-img-swiper {
    width: 65%;
    position: relative;
    z-index: 1 !important;
}

.projects-img-swiper::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 137px; 
    height: 100vh;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.projects-img-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper1 .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: white;
    width: 10px;
    height: 10px;
    opacity: 1;
}

.swiper1 .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

/* third slide */
.building-materials-slide {
    background-image: url(../images/building-materials-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.building-materials-intro {
    background: rgba(27, 38, 24, 0.8);
    position: absolute;
    right: 0;
    height: 100%;
    width: 45%;
    padding: 36px 93px 0 60px;
}

.building-materials-intro img:first-of-type {
    margin-bottom: 47px;
}

.building-materials-title {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    padding-left: 90px;
    position: relative;
    margin-bottom: 60px;
}

.building-materials-title::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -60px;
    width: 122px; 
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.building-materials-title::after {
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 5px;
    left: 60px;
    width: 6px;
    height: 6px;
    background: white;
    z-index: 1;
}

.building-materials-desc {
    color: var(--text-color);
    font: 12px 'BPG Mrgvlovani';
    line-height: 20px;
    max-height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 60px;
}

/* fourth slide */
.news-swiper-slide {
    background-image: url(../images/news-swiper-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    padding-top: 100px;
    padding: 100px 93px 0 110px;
}

.news-swiper-slide > * {
    position: relative;
    z-index: 4 !important;
}

.news-swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(26, 26, 26, 0.95);
    z-index: 2;
}

.news-swiper-slide::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 137px; 
    height: 128px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.news-slide-content {
    flex-direction: column;
}

.news-swiper-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 45px;
}

.news-swiper-heading p {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 0;
}

.news-swiper-heading a {
    color: var(--see-more-color);
    text-decoration: none;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 19px;
}

.news-swiper {
    width: 100%;
    padding-bottom: 70px !important;
}

.news-card {
    cursor: pointer;
}

.news-image {
    position: relative;
    margin-bottom: 20px;
}

.news-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-date {
    display: flex;
    flex-direction: column;
    width: 57px;
    position: absolute;
    top: 28px;
    left: 0;
}

.news-date > p:first-child {
    background: var(--primary-color);
    border-radius: 0 5px 0 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 23px 'BPG Mrgvlovani Caps 2010';
    line-height: 31px;
    width: 100%;
    height: 45px;
    margin-bottom: 0;
}

.news-month {
    background: var(--secondary-color);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 28px;
}

.news-month span:first-child {
    font: 10px 'BPG Mrgvlovani Caps 2010';
    line-height: 13px;
}

.news-month span:last-child {
    font: 6px 'BPG Mrgvlovani Caps 2010';
    line-height: 8px;
}

.news-title {
    color: white;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 19px;
    height: 76px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0;
}

/* footer styles */
footer {
    background-image: url(../images/main-building.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 382px;
    position: relative;
    padding: 125px 97px 0 0;
    z-index: 1;
    overflow-y: auto;
}

footer::before {
    background: rgba(26, 26, 26, 0.95);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

footer::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -123px;
    width: 137px; 
    height: 382px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

footer * {
    position: relative;
    z-index: 3;
}

.footer-content {
    display: flex;
    align-items: flex-start;
    gap: 81px;
    margin-left: auto;
    max-width: 617px;
}

.footer-contact > p:first-child {
    color: white;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 19px;
    margin-bottom: 20px;
}

.footer-contact > div {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    font: 12px 'BPG LE Studio 02 Caps';
    line-height: 16px;
}

.contact-item a {
    color: white;
    text-decoration: none;
}

.contact-item div {
    background: rgba(209, 209, 209, 0.4);
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 29px;
    width: 29px;
    transition: all 0.3s ease;
}

.contact-item:hover div {
    background: var(--primary-color);
}

.contact-item:nth-child(2) a {
    max-width: 120px;
    word-wrap: break-word;
}

.policy-links {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-bottom: 39px;
}

.policy-links a {
    color: white;
    text-decoration: none;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 19px;
}

.copyright {
    color: rgba(255, 255, 255, 0.49);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font: 10px 'BPG Mrgvlovani';
    line-height: 13px;
}

.copyright a {
    color: rgba(255, 255, 255, 0.49);
    text-decoration: none;
    transition: all 0.3s ease;
}

.copyright a:hover {
    color: var(--primary-color);
}

/* projects page */
.main-content {
    margin-left: 120px;
    overflow: auto;
    height: 100vh;
}

/* Firefox */
@-moz-document url-prefix() {
    .main-content {
        scrollbar-width: thin;
        scrollbar-color: #D5D5D5 #F1F1F1;
    }
}

/* scrollbar styles */
.main-content::-webkit-scrollbar {
    width: 5px; 
}

.main-content::-webkit-scrollbar-thumb {
    background: #E6E6E6; 
    height: 87px;
    border-radius: 3px;
}

.projects-container {
    display: flex;
    min-height: 100vh;
}

.project-swiper {
    width: 35%;
}

.project-slide {
    background-size: cover;
    background-position: center;
    padding: 100px 10px 0 109px;
    position: relative;
    transition: all 0.5s ease;
}

.project-slide * {
    position: relative;
    z-index: 2;
}

.project-heading {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 56px;
}

.project-title {
    color: white;
    font: 20px 'Gilroy GEO';
    line-height: 26px;
    margin-bottom: 32px;
}

.project-images {
    width: 65%;
    position: relative;
    z-index: 1;
}

.project-images::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 137px; 
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.project-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* about us page / building materials content */
.about-us-container, .materials-container {
    display: flex;
    min-height: 100vh;
}

.about-us-content, .materials-content {
    background: var(--secondary-color);
    width: 55%;
    padding: 100px 0 0 109px;
}

.about-us-heading, .materials-heading {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 35px;
}

.about-us-text, .materials-text {
    color: var(--text-color);
    font: 12px "BPG Mrgvlovani";
    line-height: 20px;
    max-width: 75%;
    margin-bottom: 0;
}

.about-us-decor {
    background: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 45%;
    position: relative;
    z-index: 1;
    padding-left: 10%;
    transition: all 0.3s ease; 
}

.about-us-decor::before {
    content: '';
    background-image: url('../images/decor1.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 29%; 
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 1;
}

.about-us-decor::after {
    content: '';
    background-image: url('../images/about-us-bg.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}

.about-us-decor:hover::after {
    opacity: 1; 
}

.about-us-decor img {
    transition: all 0.3s ease;
}

.about-us-decor:hover img {
    opacity: 0;
    visibility: hidden;
}

/* materials page */
.materials-bg {
    position: relative;
    z-index: 1;
    width: 45%;
}

.materials-bg::before {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 29%; 
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 1;
}

.materials-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* customer review page */
.customer-review-container {
    background: var(--secondary-color);
    min-height: 100vh;
    padding-top: 100px;
    position: relative;
    z-index: 1;
}

.customer-review-container::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 127px; 
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.customer-review-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 807px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.customer-heading {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 84px;
    margin-left: calc((100% - 1044px) / 2);
}

.review-button {
    background: transparent;
    border: 1px solid white;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 2px var(--secondary-color);;
}

.review-button:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);;
}

.customer-review-swiper {
    max-width: 80%;
}

.review-slide {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    min-height: 250px;
}

.review-content {
    background: rgba(255, 255, 255, 0.15);
    padding: 23px 29px 33px 43px;
    margin-top: -41px;
}

.review-content > img:first-child {
    display: inline-block;
    margin: 0 0 36px 9px;
}

.review-text, .author, 
.review-text * {
    color: white;
    font: 13px 'BPG Mrgvlovani' !important;
    line-height: 18px !important;
    text-align: center !important;
}

.author {
    color: rgba(255, 255, 255, 0.35);
}

.review-logo {
    background: var(--secondary-color);
    border: 8px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    z-index: 2;
}

.review-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* news blogs page */
.news-blogs-container {
    background-image: url(../images/news-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    padding-top: 89px;
    padding-bottom: 93px;
}

.news-blogs-container::before {
    background: rgba(26, 26, 26, 0.95);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.news-blogs-container::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0%;
    width: 137px; 
    height: 128px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.news-blogs-content {
    flex-direction: column;
}

.news-blogs-container * {
    z-index: 2;
}

.common-heading {
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 30px;
}

.common-heading p:first-child {
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 0;
}

.common-btn {
    background: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 20px;
}

.common-btn div {
    background: rgba(194, 194, 194, 0.37);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    transition: all 0.3s ease;
}

.common-btn:hover div {
    background: var(--primary-color);
}

.news-blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 42px;
    row-gap: 50px;
    margin-bottom: 60px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 17px;
}

.first-page, .last-page {
    background: var(--text-color);
    border: none;
    border-radius: 50%;
    color: black;
    cursor: pointer;
    width: 26px;
    height: 26px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.first-page:hover, .last-page:hover {
    background: var(--primary-color);
}

.first-page i, .last-page i {
    font-size: 10px;
}

.pagination-buttons {
    display: flex;
    gap: 17px;
}

.pagination-buttons button {
    background: transparent;
    border: none;
    color: #929395;
    cursor: pointer;
    font: 13px 'BPG Mrgvlovani Caps 2010';
    line-height: 18px;
}

.pagination-buttons button.active {
    color: white;
}

.hidden {
    display: none !important;
}

/* inner news/blogs */
.news {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

.current-news {
    width: 66%;
}

.other-news {
    width: 31%;
}

.news-preview {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.news-preview .news-image {
    width: 42.5%;
    margin-bottom: 0;
}

.news-preview .main-news-title {
    background: white;
    display: flex;
    align-items: center;
    font: 16px 'BPG Mrgvlovani Caps 2010';
    line-height: 22px;
    width: 57.5%;
    height: 200px;
    padding: 0 12px 0 30px;
}

.news-text {
    background: white;
    font: 14px 'BPG Mrgvlovani';
    line-height: 19px;
    padding: 40px 28.5px 45px;
    margin-bottom: 16px;
}

.news-text * {
    font: 14px 'BPG Mrgvlovani' !important;
    line-height: 19px !important;
}

.other-news > p:first-child {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 20px;
}

.other-news > div {
    display: flex;
    flex-direction: column;
    column-gap: 42px;
    row-gap: 20px;
}

.share-news {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.go-back {
    color: #A4A4A4;
    text-decoration: none;
    font: 14px 'BPG Mrgvlovani Caps 2010';
    line-height: 20px;
    transition: all 0.3s ease;
}

.go-back:hover {
    color: var(--go-back);
}

.share {
    color: white;
    display: flex;
    align-items: center;
    gap: 14px;
}

.share span {
    color: var(--text-color);
    font: 14px 'BPG Mrgvlovani';
    line-height: 19px;
}

.share div, .share a {
    background: rgba(209, 209, 209, 0.4);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 25px;
    height: 25px;
    transition: all 0.3s ease;
}

.share div i, .share a i {
    font-size: 10px;
}

.share div:hover, .share a:hover {
    background: var(--primary-color);
}


/* contact page */
.contact-container {
    background: var(--secondary-color);
    padding-top: 89px;
    padding-bottom: 62px;
    position: relative;
}

.contact-container::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 137px; 
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.contact-container * {
    z-index: 2;
}

.contact-content {
    flex-direction: column;
}

.contact-heading p {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 0;
}

.contact-page {
    display: flex;
    justify-content: flex-end;
    gap: 65px;
    margin-top: -24px;
    z-index: 2;
}

.contact-page-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-page-items .contact-item a,
.contact-page-items .contact-item span {
    font-size: 14px;
    line-height: 19px;
}

.contact-call {
    display: flex;
    flex-direction: column;
    gap: 40.5px;
}

.call {
    background: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    font: 14px 'BPG Arial 2009';
    line-height: 16px;
    gap: 11px;
}

.call div {
    background: rgba(209, 209, 209, 0.4);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 38px;
    height: 38px;
    transition: all 0.3s ease;
}

.call:hover div {
    background: var(--primary-color);
}

.map {
    width: 100%;
    height: 301px;
}

.map iframe {
    width: 100%;
    height: 100%;
}

/* project page */
.project-container {
    background-image: url(../images/main-building.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    padding-top: 85px;
}

.project-container::before {
    background: rgba(27, 38, 24, 0.95);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

.project-container::after {
    content: '';
    background-image: url('../images/decor2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 137px; 
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.project-content {
    flex-direction: column;
}

.project-container * {
    position: relative;
    z-index: 3;
}

.main-project-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 50px;
}

.main-project-heading p {
    color: white;
    font: 20px 'Gilroy GEO';
    line-height: 20px;
    margin-bottom: 0;
}

.go-back1 {
    color: unset;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.go-back1 div {
    background: rgba(194, 194, 194, 0.37);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 46px;
    height: 46px;
    transition: all 0.3s ease;
}

.go-back1 span {
    color: white;
    display: none;
    font: 10px 'BPG LE Studio 02 Caps';
    line-height: 13px;
}

.go-back1:hover div {
    background: var(--primary-color);
}

.go-back1:hover span {
    display: flex;
}

.floor-project {
    display: flex;
    justify-content: flex-end;
    gap: 42px;
}

.current-floor-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* change this later */
    max-width: 733px; 
}

.current-floor-project p,
.current-floor-flats p {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 26px;
    margin-bottom: 28px;
}

.current-floor-flats {
    display: none;
}

.floor-flats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.floor-flat {
    display: flex;
    gap: 109px;
    width: 100%;
}

.floor-flat > div {
    margin-top: 50px;
}

.floor-flat > a {
    max-width: 300px;
}

.floor-flat > a > img {
    max-width: 100%;
    object-fit: contain;
}

.floors > p:first-child {
    color: white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 26px;
}

.floors > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    padding: 0;
}

.floors > ul > li {
    background: rgba(194, 194, 194, 0.46);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font: 12px 'BPG LE Studio 02 Caps';
    line-height: 15px;
    width: 30px;
    height: 30px;
}

.floors > ul > li a {
    color: white;
    text-decoration: none;
}

.floors > ul > li.active {
    background: var(--primary-color);
}

.flat-info-tooltip {
    background: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    color: white;
    display: none; 
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none;
    width: 76px;
    height: 64px;
    transform: translate(-50%, -100%);
}

.flat-info-tooltip p {
    font-size: 10px;
    line-height: 13px;
}



/* overlay from here */
.floor-image {
    position: relative;
    display: inline-block;
}

.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hover-polygon {
    fill: rgba(153, 77, 42, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-popup {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.status-popup {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;
    font: 12px 'BPG Mrgvlovani';
    color: red;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    opacity: 1;
}

.permanent-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.permanent-overlay {
    fill: rgba(153, 77, 42, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.permanent-status {
    color: brown;
    position: absolute;
    transform: translate(-50%, -50%);
    background: white;
    padding: 5px;
    font: 10px 'BPG Mrgvlovani Caps 2010';
    line-height: 13px;
    pointer-events: none;
}

.info-popup {
    position: fixed;
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
    transform: translate(-50%, -100%);
    margin-top: -10px; 
    min-width: 76px;
}

.flat-number {
    color: white;
    font: 10px 'BPG Mrgvlovani';
    line-height: 13px;
}

.area-info {
    color: white;
    font: 10px 'BPG LE Studio 02 Caps';
    line-height: 13px;
}

.flat-info-tooltip p {
    margin: 0;
    padding: 0;
}

#project-image {
    max-width: 700px;
    width: 100%;
}

.floor-info {
    position: absolute;
    pointer-events: none;
    display: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
    opacity: 0;
}

.floor-info.auto {
    opacity: 1;
}

.floor-info.visible {
    opacity: 1;
}

.floor-number {
    background: rgba(27, 38, 24, 0.6);
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    font: 16px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    padding: 5px 10px;
    margin: 0;
    min-width: 150px;
}

.floor-type {
    background: var(--primary-color);
    border-radius: 0 0 5px 5px;
    color: white;
    font: 12px 'BPG Mrgvlovani';
    padding: 5px 10px;
    line-height: 16px;
    max-width: 120px;
    margin-left: 10px;
}

.flat-num {
    color: white;
    display: block;
    font: 14px 'BPG Mrgvlovani';
    line-height: 19px;
    margin-bottom: 10px;
}

.flat-area {
    color: white;
    font: 18px 'BPG LE Studio 02 Caps';
    line-height: 20px;
}

/* apartment page */
.apartment {
    display: flex;
    align-items: flex-start;
    gap: 237px;
}

.apartment > img:first-child {
    max-width: 350px;
}

.apartment-details {
    color: white;
    padding-top: 22px;
}

.apartment-details > div {
    display: flex;
    flex-direction: column;
    gap: 11px;
    position: relative;
    margin-bottom: 40px;
}

.apartment-details > div > span:first-child {
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 19px;
}

.apartment-details > div > span:last-child {
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 26px;
}

.call-request-1 {
    background: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 11px;
}

.call-request-1 div {
    background: rgba(153, 77, 42, 0.34);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 38px;
    height: 38px;
    transition: all 0.3s ease;
}

.call-request-1:hover div {
    background: var(--primary-color);
}

.call-request-1 span {
    font: 14px 'BPG Arial 2009';
    line-height: 16px;
}


/* Zygma Shop Styles (2025) */
header {
    background: var(--secondary-color);
    min-height: 110px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
}

.content1 {
    display: flex;
    width: 100%;
    max-width: 1166px;
}

.header-content {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.shop-logo img {
    width: 229px;
    height: 62px;
    object-fit: contain;
}

.menu {
    display: flex;
    align-items: center;
    gap: 35px;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 20px;

    a {
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        &:hover, &.active {
            color: #E96126;
            -webkit-text-stroke: 0.5px #E96126;
        }
    }
}

.shop-container {
    background: var(--secondary-color);
    padding: 30px 30px 200px;
    position: relative;

    &::after, &::before {
        content: '';
        background: url('../images/shop-decor.svg') no-repeat center center / contain;
        position: fixed;
        width: 160px;
        height: 600px;
        z-index: 1001;
    }

    &::after { bottom: 0; left: -100px; }
    &::before { top: 0; right: -100px; }
}

.shop-content {
    flex-direction: column;
    > p {
        color: white;
        -webkit-text-stroke: 0.5px white;
        text-align: center;
        font: 20px 'BPG LE Studio 02 Caps';
        line-height: 20px;
        margin-bottom: 35px;
    }
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
    row-gap: 50px;
    margin-bottom: 50px;
}

.shop-card {
    color: unset;
    text-decoration: none;
    display: flex;
    flex-direction: column;

    .name {
        color: white;
        -webkit-text-stroke: 0.5px white;
        font: 20px 'BPG LE Studio 02 Caps';
        line-height: 20px;
        margin-bottom: 10px;
    }

    .intro {
        color: #D1D1D1;
        font: 12px 'BPG Mrgvlovani';
        line-height: 20px;
        height: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

.shop-img {
    border-radius: 10px;
    width: 100%;
    height: 232px;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
    img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        background: transparent;
        z-index: 1;
        transition: all 0.3s ease;
    }
}

.discount {
    background: rgba(233, 97, 38, 0.68);
    border-radius: 50%;
    color: white;
    -webkit-text-stroke: 0.5px white;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 41px 'BPG LE Studio 02 Caps';
    line-height: 41px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    width: 176px;
    height: 176px;
    z-index: 2;
}

.shop-card:hover .shop-img::before { background: rgba(0,0,0,0.51); }
.shop-card:hover .shop-img img { transform: scale(1.1); }
.shop-card:hover .discount { opacity: 1; }

.shop-footer {
    display: flex;
    justify-content: center;
    padding: 115px 30px;
    z-index: 1002;

    .footer-content {
        gap: unset;
        margin-left: unset;
        gap: 70px;
        padding-right: 38px;
    }

    .shop-logo { margin-top: 45px; }
    .footer-contact { margin-left: auto; }
}

.shop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 35px;
    span {
        color: white;
        -webkit-text-stroke: 0.5px white;
        font: 20px 'BPG LE Studio 02 Caps';
        line-height: 20px;
    }
}

/* shop select */
.shop-head .select2-container {
    height: 50px !important;
    width: auto !important;
    min-width: 210px !important;
}

.shop-head .select2-container .select2-selection--single { 
    background: rgba(246, 246, 246, 0.17) !important;
    border: none !important;
    border-radius: 10px !important;
    height: 50px !important;
}

.shop-head .select2-container .select2-selection--single .select2-selection__rendered {
    color: white !important;
    -webkit-text-stroke: 0.5px transparent !important;
    display: flex !important;
    align-items: center;
    max-width: 80% !important;
    font: 14px 'BPG LE Studio 02 Caps' !important;
    line-height: 19px !important;
    padding-left: 20px !important;
    height: 100%;
}

.shop-head .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url(../images/select-arrow.svg) no-repeat center center;
    background-size: contain;
    width: 12px !important;
    height: 5.4px !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%);
}
  
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-dropdown {
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 0 0 12px 12px !important;
}

.select2-results {
    font: 12px 'BPG LE Studio 02 Caps';
    line-height: 15px;
}

.select2-results__option {
    padding: 10px 0 10px 20px !important;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable  {
    background: var(--primary-color) !important;
    color: white !important;
}

.select2-results__option--disabled { display: none !important; }

.inner-shop-content {
    flex-direction: column;
    > p:first-child {
        color: white;
        -webkit-text-stroke: 0.5px white;
        font: 20px 'BPG LE Studio 02 Caps';
        line-height: 20px;
        margin-bottom: 30px;
    }
}

.current-shop {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 45px;
}

.product-images {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 560px;
}

.product-swiper {
    width: 560px;
    height: 350px;
}

.product-slide {
    width: 100%;
    img { 
        border-radius: 10px;
        width: 100%;
        height: 350px;
        object-fit: cover;
    }
}

.product-img-button-swiper { width: 100%; }

.product-img-button {
    cursor: pointer;
    width: 96px !important;
    height: 60px !important;
    img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.product-desc {
    width: calc(100% - 580px);
    .name {
        color: white;
        -webkit-text-stroke: 0.5px white;
        font: 20px 'BPG LE Studio 02 Caps';
        line-height: 20px;
        margin-bottom: 30px;
    }

    .desc {
        color: #D1D1D1;
        font: 14px 'BPG Mrgvlovani';
        line-height: 20px;
        margin-bottom: 30px;
        * {
            font: 14px 'BPG Mrgvlovani' !important;
            line-height: 20px !important;
        }
    }
}

.other-offer-swiper {
    width: 100%;
}

.other-offer-title {
    color: white;
    -webkit-text-stroke: 0.5px white;
    font: 20px 'BPG LE Studio 02 Caps';
    line-height: 20px;
    margin-bottom: 30px;
}

.vip-card {
    display: flex;
    align-items: flex-start;
    position: fixed;
    top: 95px;
    right: 25px;
    z-index: 1002;

   a {
        position: absolute;
        right: -340px;
        transition: all 0.3s ease;
        img {
            border-radius: 27px;
            width: 260px;
            height: 165px;
        }
   }
}

.vip-card:hover {
    width: 340px;
    height: 165px;
    a { right: 70px; }
}

.icon {
    background: #E96126;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 47px;
    height: 47px;
}

.toggle-menu-btn1 { display: none; }

.dropdownMenu {
    background: rgba(27, 38, 24, 0.9);
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 30px;
    position: absolute;
    top: 100%;
    width: 100%;
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: height 0.5s ease;
}
  
.dropdownMenu.visible, .dropdownMenu.active { height: calc(100vh - 110px); }

.dropdownMenu a {
    color: white;
    text-decoration: none;
    font: 14px 'BPG Arial 2009';
    line-height: 19px;
}

.brand-contact {
    > p:first-child {
        color: white;
        font: 14px 'BPG LE Studio 02 Caps';
        line-height: 19px;
        margin-bottom: 20px;
    }
    > div {
        display: flex;
        gap: 50px;
    }
    span { max-width: 125px; }
}