:root {
    scroll-behavior: smooth;
  
    --dark-blue: #003057;
    --light-blue: #194467;
    --very-dark-blue: #00223e;
    --slate-100: #f1f5f9;
    --light-gray: #dddce0;
    --normal-gray: #4a4a4a;
    --line-light: #bad3e8;
  
    --shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --shadow-bottom-left: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    --shadow-top: 0 -2px 2px rgba(0, 0, 0, 0.1);
  
    --text-primary: #003057;
    --text-secondary: black;
    --text-variant-three: #828282;
    --text-variant-four: white;
    --text-white: white;
    justify-content: space-between;
    --bg-primary: #fafdff;
    --bg-secondary: white;
    --bg-variant-three: #003057;
    --bg-variant-four: #003057;
    --bg-variant-five: #003057;
    --bg-variant-six: white;
    --border-blue: solid 2px var(--dark-blue);
  
    font-family: Arial;
    font-weight: 500;
    background-color: var(--bg-primary);
  }
  
  @font-face {
    src: url("./HelveticaNeueLTGEO-75Bold.ttf");
    font-family: "helvetica-bold";
  }
  
  @font-face {
    src: url("./HelveticaNeueLTGEO-55Roman.ttf");
    font-family: "helvetica-roman";
  }
  
  .helvetica-bold {
    font-family: "helvetica-bold";
  }
  
  
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "helvetica-bold";
  }
  
  p,
  a,
  span,
  button {
    font-family: "helvetica-roman";
  }
  
  .darkmode {
    --text-primary: white;
    --text-secondary: white;
    --text-variant-three: #dddce0;
    --text-variant-four: #003057;
    --text-white: white;
    --bg-primary: #041524;
    --bg-secondary: #182937;
    --bg-variant-three: white;
    --bg-variant-four: #182937;
    --bg-variant-five: #041524;
    --bg-variant-six: #041524;
    --border-blue: solid 2px white;
  
    background-color: var(--bg-primary);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  ol li {
    color: var(--text-primary);
  }
  
  .wave {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: -100%;
    display: none;
    overflow: hidden;
  }
  
  .scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .fade-top-to-down {
    transition: transform linear 0.05s, opacity linear 0.05s;
    transform: translateY(-10px);
    opacity: 0;
  }
  
  #menu-outline-img {
    transition: all linear 0.5s;
    transition-delay: 0.5s;
    transform: translateX(100%);
    opacity: 0;
  }
  
  .scrollbar::-webkit-scrollbar-track {
    background-color: rgb(230, 230, 230);
    border-radius: 100vh;
  }
  
  .scrollbar::-webkit-scrollbar-thumb {
    background: var(--dark-blue);
    border-radius: 100vh;
    border: 1px solid #f6f7ed;
  }
  
  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--dark-blue);
  }
  
  #phone {
    height: 40px;
  }
  
  a {
    text-decoration: none;
    color: black;
  }
  
  ul {
    list-style-type: none;
  }
  
  h1 {
    font-size: 32px;
    text-transform: uppercase;
  }
  
  .h1-style-1 {
    font-size: 38px;
    letter-spacing: 8px;
  }
  
  .hidden {
    display: none;
    opacity: 0 !important;
  }
  
  .fade-in {
    opacity: 1;
  }
  
  .fade-out {
    opacity: 0;
  }
  
  .slide-down {
    height: 100px;
  }
  
  .slide-up {
    height: 0px;
  }
  
  .horizontal-line {
    width: 100%;
    height: 2px;
    background-color: var(--line-light);
  }
  
  .iti--inline-dropdown .iti__dropdown-content {
    z-index: 300 !important;
  }
  
  .button-style {
    background-color: var(--bg-variant-three);
    border-radius: 20px;
    color: var(--text-variant-four);
    padding: 12px 40px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    z-index: 200;
    margin: 7px;
  }
  
  .button-style-transparent {
    border-radius: 50px;
    color: var(--text-primary);
    padding: 12px 40px;
    font-size: 16px;
    cursor: pointer;
    border: var(--border-blue);
    background-color: var(--bg-primary);
  }
  
  .button-style-transparent-selectable {
    border-radius: 10px;
    color: var(--dark-blue);
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    border: solid 1px var(--dark-blue);
    background-color: white;
  }
  
  .button-style-white {
    background-color: white;
    border-radius: 20px;
    color: var(--dark-blue);
    padding: 12px 40px;
    border: none;
    font-size: 16px;
    cursor: pointer;
  }
  
  label {
    color: var(--text-primary);
    font-size: 16px;
  }
  
  .input-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  input[type="tel"] {
    color: var(--text-secondary);
  }
  
  input[type="text"],
  input[type="number"] {
    border: 1px solid var(--light-gray);
    height: 40px;
    border-radius: 8px;
    padding-left: 10px;
    min-width: 300px;
    background-color: transparent;
    color: var(--text-secondary);
  }
  
  input[type="number"] {
    padding-right: 10px;
  }
  
  input[type="text"].input-text-style-two {
    border-radius: 30px;
    height: 40px;
    padding-left: 40px;
    color: white;
    width: 100%;
  }
  
  input[type="text"]:focus,
  input[type="number"]:focus {
    outline: 2px solid var(--slate-100);
  }
  
  .select-input {
    border: 1px solid var(--light-gray);
    height: 40px;
    border-radius: 8px;
    min-width: 300px;
    background-color: transparent;
    overflow: hidden;
    padding: 0px 10px;
  }
  
  .select-input:focus {
    outline: 2px solid var(--slate-100);
  }
  
  select {
    -webkit-appearance: none;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    color: rgb(146, 146, 146);
  }
  
  select option {
    font-size: 16px;
    color: var(--dark-blue);
  }
  
  select option:hover {
    background-color: var(--slate-100);
  }
  
  textarea {
    background-color: white;
    width: 100%;
    border-radius: 8px;
    resize: none;
    border: 1px solid white;
    color: var(--dark-blue);
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }
  
  textarea:focus {
    outline: 1px solid var(--light-gray);
  }
  
  .blue-container {
    width: 100%;
    min-height: 100px;
    background-color: var(--dark-blue);
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
  }
  
  .fixed-widgets {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    gap: 10px;
  }
  
  .scroll-to-top {
    width: 50px;
    height: 50px;
    background-color: var(--dark-blue);
    cursor: pointer;
    border-radius: 50px;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .scroll-to-top i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: white;
  }
  
  /* dropdown arrows start*/
  .arrow-open {
    transform: rotate(180deg);
  }
  
  /* dropdown arrows end */
  
  /* header start */
  
  header {
    background-color: var(--dark-blue);
    padding: 27px 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header-logo {
    height: 30px;
  }
  
  .header-logo img {
    object-fit: contain;
    height: 100%;
  }
  
  .header-nav-list {
    margin-left: 20px;
  }
  
  .header-nav-list ul {
    display: flex;
    align-items: center;
    column-gap: 20px;
  }
  
  .header-nav-list ul li a {
    color: white;
    font-size: 16px;
  }
  
  header .red-dot-li {
    position: relative;
  }
  
  header .red-dot-li .red-dot {
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: -10px;
  }
  
  .language-container {
    position: relative;
  }
  
  .language-wrapper p,
  .language-wrapper i {
    color: var(--v);
  }
  
  .language-wrapper i {
    font-size: 8px;
    transition: all;
    transition-timing-function: ease-in-out;
    transition-duration: 0.2s;
  }
  
  .language-container .selected-language {
    cursor: pointer;
    display: flex;
    align-items: center;
    column-gap: 4px;
    color: white;
  }
  
  .language-wrapper .language-list {
    background-color: white;
    min-width: 100%;
    position: absolute;
    top: 104%;
    left: 0;
    border-radius: 6px;
    overflow: hidden;
    transition: all;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    opacity: 1;
    z-index: 50;
    box-shadow: var(--shadow);
  }
  
  .language-wrapper .language-list li {
    cursor: pointer;
    padding: 10px;
  }
  
  .language-wrapper .language-list li:hover {
    background: var(--slate-100);
  }
  
  .language-wrapper .language-list li:hover p {
    color: var(--dark-blue);
  }
  
  .phone-menu .phone-menu-top {
    position: relative;
    z-index: 50;
  }
  
  .phone-menu nav {
    position: relative;
    z-index: 40;
  }
  
  .phone-menu-bottom {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  
  .phone-menu-bottom .social-media div {
    background-color: #e2e6ea !important;
  }
  
  .phone-menu-bottom .social-media div i {
    color: var(--dark-blue) !important;
  }
  
  .dark-mode-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    cursor: pointer;
  }
  
  .dark-mode-container .dark-mode-switch {
    width: 60px;
    height: 30px;
    box-shadow: var(--shadow);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 5px 5px;
    cursor: pointer;
    background-color: var(--bg-secondary);
  }
  
  .dark-mode-container .dark-mode-switch-button {
    width: 20px;
    height: 20px;
    background-color: var(--bg-variant-three);
    border-radius: 100%;
    transition: all 0.2s linear;
  }
  
  .phone-menu .language-container .selected-language {
    color: var(--text-primary) !important;
  }
  
  .header-end {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  
  .dark-mode-container2 {
    border-radius: 20px;
    background-color: var(--light-blue);
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  
  .dark-mode-container2 i {
    color: #8fa2b4;
  }
  
  /* header end */
  
  /* footer start */
  footer {
    position: relative;
  }
  
  footer p,
  footer a {
    color: white;
  }
  
  .footer-navigation {
    padding: 27px 100px;
    background-color: var(--bg-variant-five);
    display: flex;
    justify-content: space-between;
    align-items: start;
    position: relative;
    overflow: hidden;
  }
  
  .footer-container {
    width: 24%;
    display: flex;
    flex-direction: column;
    row-gap: 14px;
  }
  
  .footer-container .footer-logo {
    height: 40px;
  }
  
  .footer-nav-container ul {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .footer-navigation .footer-nav-container {
    padding-left: 40px;
  }
  
  .footer-container .footer-logo img {
    object-fit: contain;
    height: 100%;
  }
  
  .footer-lower-part {
    background-color: #041524;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 27px 100px;
  }
  
  .footer-lower-part p {
    font-size: 16px;
  }
  
  .social-media {
    display: flex;
    align-items: center;
    column-gap: 10px;
  }
  
  .social-media div {
    background-color: var(--light-blue);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
  }
  
  .social-media div i {
    color: white;
  }
  
  .footer-lines-img {
    height: 100%;
    width: 25%;
    position: absolute;
    bottom: -14%;
    right: -8%;
  }
  
  .footer-lines-img img {
    object-fit: contain;
    height: 100%;
    width: 100%;
  }
  
  /* footer end */
  
  /* hero start */
  
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  
  .hero-video {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
  }
  
  .hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hero .hero-lines {
    width: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  
  .hero .award {
    height: 100%;
    width: auto;
    position: absolute;
    right: 10%;
    z-index: 20;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .hero .award img {
    width: 160px;
    object-fit: contain;
  }
  
  .hero-buttons-container {
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 12px;
    z-index: 20;
  }
  
  .hero-buttons-container i {
    color: #00223e;
    font-size: 22px;
    cursor: pointer;
  }
  
  .hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  
  .hero-buttons button {
    width: 200px;
    font-size: 12px;
  }
  
  /* hero end */
  
  /* apartment designs start */
  .apartment-designs {
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 32px;
  }
  
  .design-slider-card-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .apartment-designs-slider-container {
    max-width: 1170px;
    width: 100%;
  }
  
  .apartment-designs-slider-container .designs-slider-list {
    display: flex;
  }
  
  .apartment-slider-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }
  
  .apartment-slider-button {
    background-color: #00223e;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  .apartment-slider-button:hover {
    opacity: 0.9;
  }
  
  .apartment-designs-slider-container .designs-slider-list::-webkit-scrollbar {
    display: none;
  }
  
  .design-slider-card-container {
    border: 1px solid white;
    margin: 50px 10px 10px 10px;
  }
  
  .design-slider-card-container:hover {
    border: 1px solid var(--dark-blue);
  }
  
  .design-slider-card-container {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow);
    padding: 44px;
    padding-top: 0;
    border-radius: 5px;
  }
  
  .design-slider-card-container .design-slider-card-img-container {
    position: relative;
    width: 280px;
    height: 250px;
  }
  
  .design-slider-card-container .design-slider-card-img-wrapper {
    box-shadow: var(--shadow);
    border-radius: 5px;
    background-color: white;
    width: 250px;
    height: 250px;
    position: absolute;
    top: -12%;
    left: 0;
    padding: 12px;
  }
  
  .design-slider-card-container .design-slider-card-img-wrapper img {
    object-fit: contain;
    height: 100%;
    width: 100%;
  }
  
  .apartment-designs .design-slider-card-details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 22px;
  }
  
  .apartment-designs .design-slider-card-details h1 {
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
  }
  
  .apartment-designs .design-slider-card-details p {
    color: var(--text-variant-three);
    font-size: 16px;
    text-align: center;
    margin-top: 8px;
  }
  
  .apartment-designs .line-horizontal-blue {
    width: 100%;
    height: 1px;
    background-color: var(--bg-variant-three);
  }
  
  .design-slider-color-container {
    display: flex;
    align-items: center;
    column-gap: 10px;
  }
  
  .design-slider-color-container input[type="radio"] {
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
  }
  
  .design-slider-color-container .design-slider-color {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: var(--shadow-bottom-left);
    cursor: pointer;
  }
  
  .bg-white {
    background-color: white;
  }
  
  .bg-dark-gray {
    background-color: #203935;
  }
  
  .bg-brown {
    background-color: #7a5c54;
  }
  
  .bg-light-brown {
    background-color: #9e4d3c;
  }
  
  /* apartment designs end */
  
  /* calculator of roi start */
  .roi-calculator {
    position: relative;
  }
  
  .roi-calculator-container {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow);
    border-radius: 30px;
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 32px;
    position: relative;
    z-index: 20;
  }
  
  .roi-input-container {
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 24px;
    min-width: 70%;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
  }
  
  .roi-input-container p {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
  }
  
  .roi-input-container-div {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  /* calculator of roi start */
  
  /* calculator start */
  .calculator {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    justify-content: center;
    align-items: center;
    padding: 40px 100px;
  }
  
  .calculator-input-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  /* calculator end */
  
  /* title containers start */
  .title-container,
  .title-container-white {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .title-container h1,
  .title-container-white h1 {
    font-weight: 700;
    text-align: center;
  }
  
  .title-container p,
  .title-container-white p {
    font-size: 16px;
    text-align: center;
  }
  
  .title-container h1,
  .title-container p {
    color: var(--text-primary);
  }
  
  .title-container-white h1,
  .title-container-white p {
    color: white;
  }
  
  /* title containers end */
  
  /* lands and apartments start */
  
  .proj-page-proj-container {
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 32px;
    position: relative;
  }
  
  .hotel-complexes-container-index {
    background-color: var(--bg-secondary);
    border-radius: 30px;
    box-shadow: var(--shadow);
  }
  
  .hotel-complexes-container {
    background-color: var(--bg-secondary);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: var(--shadow-top);
  }
  
  .floating-wave {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  
  .projects-container-single {
    display: flex;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
    flex-direction: column;
    padding: 10px;
    width: 49%;
  }
  
  .projects-container-single h2 {
    color: var(--dark-blue);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  
  .projects-container-single p {
    color: var(--dark-blue);
    font-size: 16px;
    margin-top: 8px;
  }
  
  .projects-container-single-img {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
    width: 100%;
  }
  
  .projects-container-single-img div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 20;
  }
  
  .projects-container-single-img img {
    position: relative;
    z-index: 10;
    transition: opacity 1s ease;
    width: 100%;
    height: 100%;
  }
  
  .projects-container-single .button-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  
  /* lands and apartments end */
  
  /* projects slider section start */
  .projects-slider-section {
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 32px;
  }
  
  .projects-slider-container {
    max-width: 1500px;
    width: 100%;
  }
  
  .projects-slider-container .projects-slider-wrapper {
    display: flex;
    align-items: center;
    column-gap: 16px;
    justify-content: center;
  }
  
  .projects-slider-list,
  .projects-slider-list-2 {
    display: flex;
    width: 90%;
    justify-content: space-between;
  }
  
  .project-slider-button {
    font-size: 26px;
    border-radius: 5px;
    color: var(--normal-gray);
    border: none;
    cursor: pointer;
    background-color: transparent;
    width: 5%;
    cursor: pointer;
  }
  
  /* projects slider section end */
  
  /* panorama gallery start*/
  
  .panorama-gallery-section {
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 32px;
  }
  
  /* panorama gallery end */
  
  /* project gallery start  */
  .project-gallery-container .main-img {
    width: 100%;
    height: 80vh;
    border-radius: 30px;
    overflow: hidden;
    object-fit: cover;
  }
  
  .project-gallery-container .gallery-slider-container img {
    height: 200px;
    width: 100%;
    object-fit: cover;
  }
  
  .gallery-slider-container {
    margin-top: 32px;
    max-width: 1500px;
    width: 100%;
  }
  
  .gallery-slider-container .gallery-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .gallery-slider-container .gallery-slider-list {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 50px 2px;
  }
  
  .gallery-slider-list .gallery-slider-item {
    margin: 10px;
    cursor: pointer;
  }
  
  .gallery-slider-container .gallery-slider-list::-webkit-scrollbar {
    display: none;
  }
  
  .gallery-slider-button {
    font-size: 26px;
    border-radius: 5px;
    color: var(--normal-gray);
    border: none;
    cursor: pointer;
    background-color: transparent;
  }
  
  .gallery-slider-container .projects-container-single {
    cursor: pointer;
  }
  
  /* project gallery end*/
  
  /* project details start */
  .project-details-container {
    width: 100%;
    position: relative;
  }
  
  .project-details-img-map,
  #mapster_wrap_0 {
    width: 100% !important;
  }
  
  #mapster_wrap_0 .mapster_el,
  #project,
  #floor,
  #room,
  #parking {
    width: 100% !important;
  }
  
  .custom-mapster-tooltip {
    background-color: white;
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 12px;
    color: var(--dark-blue);
    border: 1px solid var(--dark-blue) !important;
  }
  
  .projects-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--bg-secondary);
    border-radius: 30px;
    padding: 16px;
    width: 70%;
  }
  
  .projects-details .proj-details-head {
    display: flex;
    align-items: center;
  }
  
  .projects-details .proj-details-head h1 {
    flex-shrink: 0;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 3px solid var(--line-light);
  }
  
  .projects-details .proj-details-head p {
    color: rgb(150, 150, 150);
    font-size: 14px;
  }
  
  .projects-details h1 {
    color: var(--text-primary);
  }
  
  .filter-result-information i {
    color: var(--text-primary) !important;
  }
  
  .projects-details p {
    color: var(--text-secondary);
  }
  
  .flex-result-end {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  .flex-result-end .filter-actions {
    margin-top: 0px !important;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    flex-direction: column;
  }
  
  .flex-result-end p {
    font-size: 15px;
    color: var(--text-primary) !important;
  }
  
  .projects-details h2 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 22px;
  }
  
  .dropdown-container {
    border-radius: 20px;
    box-shadow: var(--shadow);
  }
  
  .dropdown-container .dropdown-clickable {
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .dropdown-container .dropdown-clickable p {
    font-size: 14px;
    font-weight: 600;
  }
  
  .dropdown-container .dropdown-dropable {
    overflow: hidden;
    transition: height 0.5s;
    transition-timing-function: ease-in-out;
  }
  
  .dropdown-container .dropdown-dropable p {
    padding: 0px 12px 12px 12px;
    font-size: 14px;
    color: var(--normal-gray);
  }
  
  /* project details end */
  .our-apartments {
    background-color: var(--bg-secondary);
    padding: 40px 100px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    border-radius: 20px;
  }
  
  .our-apartments .filter-container {
    min-width: 80%;
  }
  
  /*floor information start */
  
  .floor-description {
    /*height: 95vh;*/
    background-image: url("../img/panorama/panoramamain.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: grey;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 50px 50px 50px;
  }
  
  .floor-description .floor-description-container {
    background-color: var(--bg-secondary);
    display: flex;
    column-gap: 16px;
    border-radius: 30px;
    padding: 16px;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  
  .floor-description .floor-description-container .go-back {
    position: absolute;
    top: 16px;
    left: 16px;
  }
  
  .floor-description
    .floor-description-container
    .project-part-description-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50% !important;
  }
  
  .floor-description
    .floor-description-container
    .project-part-description-image
    img {
    width: 100%;
  }
  
  .projects-details.part-description {
    position: unset;
    transform: unset;
    background-color: unset;
    padding: unset;
    border-radius: unset;
  }
  
  .projects-details.projects-details-done {
    max-width: 100%;
    padding: 50px;
    gap: 20px;
  }
  
  .request-sent-wave {
    position: absolute;
    bottom: 0;
    width: 400px;
  }
  
  .request-sent-wave img {
    width: 100%;
  }
  
  .wave-left {
    left: 0;
  }
  
  .wave-right {
    right: 0;
  }
  
  .projects-details.projects-details-done h1 {
    text-align: center;
  }
  
  .projects-details.projects-details-done .reserve-button {
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  
  .projects-details.projects-details-done .parking-reserve {
    gap: 20px;
  }
  
  .projects-details.projects-details-done .add-another-spot p {
    margin-bottom: 0;
  }
  
  /*floor information end */
  
  /*about us hero start */
  .about-us-hero-section {
    width: 100%;
    min-height: 100vh;
    background-image: url("../img/backgrounds/background2.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: grey;
    background-blend-mode: multiply;
  }
  
  .about-us-hero-section .about-us-hero-wrapper {
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 32px;
  }
  
  .about-us-hero-section h1 {
    border-bottom: 2px solid white;
    padding-bottom: 10px;
    display: flex;
  }
  
  .about-us-hero-section p,
  .about-us-hero-section h1,
  .about-us-hero-section i {
    color: white;
    text-align: center;
  }
  
  .about-us-hero-section i {
    font-size: 22px;
  }
  
  .about-us-hero-section .about-us-hero-wrapper .bold-text {
    font-weight: 800;
  }
  
  .about-us-hero-section .about-us-hero-wrapper .text-with-border {
    border: 1px solid white;
    border-radius: 30px;
    padding: 16px;
  }
  
  /*about us hero end */
  
  /*projects style two start */
  .projects-two-section {
    padding: 40px 100px;
  }
  
  .projects-two-section .projects-two-wrapper {
    background-image: url("../img/projectsTwo/batumi.png");
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 80vh;
    background-color: grey;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px;
    justify-content: space-evenly;
  }
  
  .projects-two-section .projects-two-description {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .projects-two-section h1,
  .projects-two-section p {
    color: white;
  }
  
  .projects-two-section h1 {
    border-bottom: 2px solid white;
    padding-bottom: 10px;
    flex-shrink: 0;
  }
  
  .projects-two-section .projects-two-wrapper button {
    border: none;
    color: white !important;
    background-color: transparent;
  }
  
  .projects-two-section .projects-two-wrapper button.border-on-image {
    border: 2px solid white !important;
  }
  
  .projects-two-slider-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .projects-two-slider-container button {
    font-size: 24px;
    border: none !important;
  }
  
  .projects-two-list {
    display: flex;
    border: 2px solid white;
    border-radius: 20px;
    width: 100%;
    overflow: hidden;
    text-align: center;
  }
  
  .projects-two-list .project-two-item {
    gap: 10px;
    border-right: 2px solid white;
    padding: 20px;
    height: 150px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .projects-two-list .project-two-item:hover {
    background-color: rgb(255, 255, 255, 0.5);
  }
  
  .projects-two-list .project-two-item:last-child {
    border-right: none;
  }
  
  .projects-two-list h1 {
    width: 100%;
    font-size: 20px;
  }
  
  /*projects style two end */
  
  /* about us banner start */
  .banner-container {
    padding: 40px 100px;
    background-color: var(--bg-variant-four);
    display: flex;
    position: relative;
  }
  
  .banner-container .banner-container-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 50%;
    min-height: 40vh;
    justify-content: center;
  }
  
  .banner-container .banner-container-text button {
    background-color: transparent !important;
    border: 2px white solid !important;
    color: white !important;
  }
  
  .banner-container .banner-container-text p,
  .banner-container .banner-container-text h1 {
    color: white;
  }
  
  .banner-container .banner-container-text h1 {
    border-bottom: 2px solid white;
    padding-bottom: 10px;
  }
  
  .banner-container .banner-container-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 50vh;
  }
  
  .banner-container .banner-container-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 40;
  }
  
  .banner-container .banner-container-img .white-lines {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 30;
  }
  
  .banner-container .banner-input-container {
    display: flex;
  }
  
  .banner-container .banner-input-container input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: white;
    font-size: 18px;
    outline: none;
  }
  
  .banner-container .banner-input-container div {
    width: 40px;
    height: 40px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .banner-container .banner-input-container div i {
    color: var(--dark-blue);
  }
  
  /* about us banner end */
  
  /* why us start */
  .why-us-container {
    padding: 40px 100px;
    background-color: var(--bg-variant-five);
    position: relative;
    overflow: hidden;
  }
  
  .why-us-container .why-us-wave1 {
    position: absolute;
    bottom: -20%;
    left: 0;
    height: 90%;
    width: 20%;
    transform: rotate(90deg);
  }
  
  .why-us-container .why-us-wave2 {
    position: absolute;
    top: -20%;
    right: 0;
    height: 90%;
    width: 20%;
    transform: rotate(-90deg);
  }
  
  .why-us-container .why-us-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .why-us-container .why-us-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .why-us-container .why-us-text-container .why-us-text-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 60%;
    gap: 22px;
  }
  
  .why-us-container .why-us-text-container .why-us-text-title p {
    text-align: center;
  }
  
  .why-us-container .why-us-text-container .why-us-text-list {
    display: flex;
    margin-top: 40px;
    gap: 40px;
  }
  
  .why-us-container .why-us-text-container .why-us-text-list div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    border-right: 2px solid white;
  }
  
  .why-us-container .why-us-text-container .why-us-text-list div:last-child {
    border: none;
  }
  
  .why-us-container i,
  .why-us-container h1,
  .why-us-container p,
  .why-us-container h2 {
    color: white;
  }
  
  .why-us-container p {
    text-align: center;
  }
  
  .why-us-container h1 {
    border-bottom: 2px solid white;
    padding-bottom: 10px;
    text-align: center;
  }
  
  .why-us-container h2 {
    font-size: 22px;
  }
  
  /* why us end */
  
  /*invest with us start */
  .invest-with-us-container {
    padding: 40px 100px;
    position: relative;
    border-radius: 20px;
    transform: translateY(-16px);
    background-color: var(--bg-secondary);
  }
  
  .invest-with-us-container .floating-wave {
    height: 80%;
  }
  
  .invest-with-us-container .floating-wave img {
    height: 100%;
  }
  
  .invest-with-us-container .invest-with-us-list {
    display: flex;
    gap: 40px;
    margin-top: 40px;
  }
  
  .invest-with-us-container .invest-with-us-list div {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  
  .invest-with-us-container .invest-with-us-list h2 {
    color: var(--text-primary);
    border-bottom: 2px solid rgb(205, 203, 203);
    padding-bottom: 10px;
  }
  
  .invest-with-us-container .invest-with-us-list p {
    color: var(--text-secondary);
    text-align: center;
  }
  
  /*invest with us end */
  
  /*advantages start */
  .advantages-contianer {
    padding: 100px;
    width: 100%;
    background-image: url("../img/backgrounds/background3.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
  }
  
  .advantages-contianer p,
  .advantages-contianer h1,
  .advantages-contianer h2 {
    color: white;
  }
  
  .advantages-contianer .advantages-base {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  
  .advantages-contianer .advantages-base p {
    text-align: center;
  }
  
  .advantages-contianer .font-bold {
    font-weight: 600;
  }
  
  .advantages-contianer .advantages-base h1 {
    border-bottom: 2px solid white;
    padding-bottom: 10px;
    text-align: center;
  }
  
  .advantages-contianer .advantage-list {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  
  .advantages-contianer .advantage-list div {
    border-radius: 50px;
    border: white 2px solid;
    padding: 12px 32px;
    cursor: pointer;
  }
  
  .advantages-contianer .advantage-list div:hover {
    background-color: rgb(255, 255, 255, 0.5);
  }
  
  .advantages-contianer .advantage-description {
    border: white 2px solid;
    padding: 20px;
    border-radius: 30px;
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
  }
  
  .advantages-contianer h2 {
    font-size: 22px;
  }
  
  .advantages-contianer .advantage-description .advantage-description-text {
    width: 49%;
    display: flex;
    gap: 20px;
    flex-direction: column;
  }
  
  .advantages-contianer .advantage-description .advantage-description-img {
    width: 49%;
  }
  
  .advantages-contianer .advantage-description .advantage-description-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
  }
  
  .advantage-description-container {
    align-items: center;
    gap: 16px;
    display: flex;
  }
  
  .advantage-description-container button {
    font-size: 24px;
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  
  .advantage-description-container {
    width: 100%;
  }
  
  .advantage-description-list {
    display: flex;
    width: 100%;
  }
  
  /*advantages end */
  
  /* why invest start */
  .why-invest-container {
    padding: 40px 100px;
    position: relative;
    border-radius: 20px 20px 0px 0px;
    transform: translateY(-16px);
    background-color: var(--bg-secondary);
  }
  
  .why-invest-container .why-invest-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  
  .why-invest-container .why-invest-head .p-line-top {
    border-top: 2px solid rgb(191, 188, 188);
    padding-top: 10px;
    max-width: 80%;
    color: var(--text-secondary);
    text-align: center;
  }
  
  .why-invest-container .why-invest-list {
    width: 90%;
  }
  
  .why-invest-container .why-invest-list .why-invest-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    padding: 20px;
    border-radius: 20px;
    background-color: white;
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin: 10px;
  }
  
  .why-invest-container .why-invest-list .why-invest-list-item div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 20;
  }
  
  .why-invest-container .why-invest-list .why-invest-list-item img {
    height: 60%;
    object-fit: contain;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
  
  .why-invest-container .why-invest-list div h2 {
    border-bottom: 2px solid rgb(189, 188, 188);
    padding-bottom: 10px;
    text-align: center;
    font-size: 18px;
  }
  
  .why-invest-container .why-invest-list div p {
    text-align: center;
  }
  
  .why-invest-list-cont {
    display: flex;
    align-items: center;
    margin-bottom: -80px;
    margin-top: 20px;
    justify-content: center;
  }
  
  .why-invest-list-nav {
    background-color: transparent;
    border: none;
    outline: none;
    width: 5%;
    cursor: pointer;
    font-size: 22px;
  }
  
  /* why invest end */
  
  /* investment hero start */
  .investment-hero {
    width: 100%;
    min-height: 140vh;
    background-image: url("../img/backgrounds/background1.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
    padding: 50px;
  }
  
  .investment-hero .investment-hero-wrapper {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  
  .investment-hero .bold-text {
    font-weight: 600;
  }
  
  .investment-hero p,
  .investment-hero h1 {
    color: white;
  }
  
  .investment-hero .with-line {
    border-bottom: 2px solid white;
    padding-bottom: 22px;
    display: inline-block;
  }
  
  .investment-hero button {
    color: white;
    background-color: transparent;
    border: 2px solid white;
    cursor: pointer;
  }
  
  .investment-hero-description {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  
  .investment-hero-description p,
  .investment-hero-description h1 {
    text-align: center;
  }
  
  /* investment hero end */
  
  /* latest publications start */
  .latest-publications-container {
    padding: 40px 100px;
  }
  
  .latest-publications-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 40px;
  }
  
  .latest-publications-container .publications-list-card-img-container {
    width: 100%;
    height: 400px;
    position: relative;
    color: white;
    overflow: hidden;
    border-radius: 20px;
  }
  
  .latest-publications-container .latest-publications-list-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
  }
  
  .latest-publications-container .publications-list-card-img-text {
    position: relative;
    z-index: 30;
    background-color: rgb(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .latest-publications-container .publications-list-card-img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
  }
  
  /* latest publications end */
  
  /* media start */
  .media {
    padding: 40px 100px;
    display: flex;
    gap: 40px;
  }
  
  .media .media-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 50%;
  }
  
  .media .media-left h1 {
    color: var(--text-primary);
  }
  
  .media .media-left p {
    font-size: 18px;
    color: var(--text-secondary);
  }
  
  .media .media-left img {
    border-radius: 20px;
  }
  
  .media .media-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  
  .media .media-right-single-info {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .media .media-right-single-info .media-info-bullet {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: #dbeeff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .media .media-right-single-info .media-info-bullet p {
    font-size: 18px;
    color: var(--dark-blue);
    font-weight: 600;
  }
  
  .media .media-info-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .media .media-info-text p:first-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  
  .media .media-info-text p:last-child {
    font-size: 16px;
    color: rgb(124, 124, 124);
  }
  
  /* media end */
  
  /* live cams start */
  .live-cams {
    padding: 140px 100px 40px 100px;
    background-image: url("../img/backgrounds/background2.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
  }
  
  .live-cams .live-cams-wrapper {
    background-color: var(--bg-secondary);
    padding: 80px;
    width: 100%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
  }
  
  .live-cams .live-cams-wrapper h2 {
    color: var(--text-primary);
    font-weight: 22px;
    text-align:center;
  }
  
  .live-cams .live-cams-wrapper .live-cams-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2%;
    row-gap: 40px;
    width: 100%;
  }
  
  .live-cams .live-cams-wrapper .live-cams-list iframe {
    width: 49%;
    min-height: 300px;
    height: 100%;
  }
  
  /* live cams end */
  
  /* 360 start */
  .experiance-360 {
    padding: 140px 100px 40px 100px;
    background-image: url("../img/backgrounds/background2.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
    position: relative;
  }
  
  .experiance-360 p,
  .experiance-360 h1 {
    color: white;
    text-align: center;
  }
  
  .experiance-360 .text-360 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 80%;
    gap: 30px;
    position: relative;
    z-index: 50;
  }
  
  .experiance-360 .text-360 .with-line {
    border-top: 2px solid white;
    padding-top: 20px;
  }
  
  .experiance-360 .container-360 {
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    background-color: var(--bg-secondary);
    margin-top: 40px;
    position: relative;
    z-index: 50;
  }
  
  .experiance-360 .floating-wave {
    height: 90%;
  }
  
  .experiance-360 .floating-wave img {
    height: 100%;
  }
  
  /* 360 end */
  
  /* popup start */
  .popup-container {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
  }
  
  .popup-container .request-form {
    width: 80%;
  }
  
  .popup-container .form-content {
    width: 100%;
  }
  
  .popup-container .popup-image {
    align-self: stretch;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: end;
  }
  
  .request-form {
    background-color: var(--bg-secondary);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }
  
  input[type="tel"] {
    background-color: transparent;
  }
  
  .request-form .header {
    text-align: center;
    padding: 30px;
  }
  
  .request-form .header h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--text-primary);
  }
  
  .request-form .header p {
    color: var(--text-primary);
  }
  
  .request-form .content {
    display: flex;
    align-items: end;
  }
  
  .request-form .content .form-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
  }
  
  .request-form .content .form-content input {
    min-width: none;
    width: 100%;
  }
  
  .request-form .popup-image img {
    width: 100%;
    object-fit: cover;
  }
  
  .request-form .content .form-content p {
    margin-bottom: 10px;
    color: var(--text-primary);
  }
  
  .request-form .content .form-content .cont {
    border: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 2px;
    border-radius: 8px;
  }
  
  .request-form .content .form-content .cont input {
    border: none;
    padding: none;
    outline: none;
  }
  
  .request-form .content .form-content .cont select {
    height: 40px;
  }
  
  .regular-request-form {
    margin-bottom: 40px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  
  .regular-request-form.flat-bottom {
    margin-bottom: 0 !important;
    margin-top: 40px;
    border-radius: 20px 0 !important;
  }
  
  .regular-request-form .content {
    align-items: center !important;
    justify-content: center !important;
  }
  
  .regular-request-form .content .form-content {
    width: 100%;
    padding: 50px;
    padding-left: 10%;
  }
  
  .regular-request-form .popup-image {
    align-self: stretch;
    display: flex;
    align-items: end;
    justify-content: end;
  }
  
  .regular-request-form .popup-image img {
    object-fit: cover;
  }
  
  .close-popup {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 50px;
    cursor: pointer;
  }
  
  /* popup end */
  
  /* contact us start */
  .contact-us {
    padding: 40px 100px 180px 40px;
    min-height: 120vh;
    background-image: url("../img/backgrounds/background1.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
    position: relative;
    color: white;
  }
  
  .contact-us-head h1,
  .contact-us-head p {
    text-align: center;
  }
  
  .contact-us-head h1 {
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  
  .contact-us-body {
    display: flex;
    gap: 40px;
    width: 100%;
    margin-top: 40px;
  }
  
  .contact-us-body .contact-us-form {
    margin-left: 10%;
  }
  
  .contact-us-body .contact-us-form,
  .contact-us-body .contact-info {
    width: 100%;
  }
  
  .contact-us-body .contact-us-form .inpt {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .contact-us-body .contact-us-form .inpt input {
    background-color: white;
    color: black;
  }
  
  .contact-us-body .contact-us-form .inpt div {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    gap: 12px;
  }
  
  .contact-us-body .contact-us-form .inpt div input {
    border: none;
    outline: none;
    padding: 0;
  }
  
  .contact-us-body .phone-container {
    margin-bottom: 20px;
  }
  
  .contact-us-body .phone-container .white-div {
    background-color: white;
    border-radius: 8px;
    color: black !important;
    margin-top: 10px;
  }
  
  .contact-us-body .phone-container .white-div input {
    outline: none !important;
    border: none;
    border-radius: 8px;
  }
  
  .contact-us-body .contact-us-form .inpt div select {
    height: 40px;
    flex-shrink: 0;
    width: auto;
  }
  
  .contact-us-body .contact-us-form .button-div {
    display: flex;
    justify-content: end;
  }
  
  .contact-us-body .contact-us-form .button-div button {
    background-color: transparent;
    border: 2px solid white;
    color: white;
  }
  
  .contact-info {
    display: flex;
    justify-content: center;
  }
  
  .contact-info .contact-info-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
  }
  
  .contact-info-container p a {
    color: white !important;
  }
  
  /* contact us end */
  
  /* team start */
  .team-section {
    padding: 0 40px;
    border-radius: 20px;
    background-color: var(--bg-secondary);
    margin-top: -4%;
    position: relative;
    z-index: 30;
  }
  
  .team-section .team-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1%;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 0 8%;
  }
  
  .team-list-card {
    background-color: white;
    padding: 20px;
    width: 32%;
    border-radius: 20px;
    color: var(--dark-blue);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow);
    margin-top: -50px;
    justify-content: space-between;
  }
  
  .team-list-card h2 {
    font-size: 18px;
  }
  
  .team-list-card h4 {
    font-size: 16px;
  }
  
  .team-list-card h2,
  .team-list-card h4,
  .team-list-card p {
    text-align: center;
  }
  
  .team-list-card img {
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
  
  .team-list-card h4 {
    border-top: 2px solid var(--line-light);
    border-bottom: 2px solid var(--line-light);
    padding: 12px 0;
  }
  
  .team-section .floating-wave {
    height: 400px;
  }
  
  .team-section .floating-wave img {
    height: 100%;
    object-fit: contain;
    transform: translateY(-1%);
  }
  
  .translate-10 {
    transform: translateY(15%) !important;
  }
  
  /* team end */
  
  /* find us start  */
  .find-us {
    padding: 80px 100px;
    min-height: 100vh;
    background-image: url("../img/backgrounds/background4.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
    position: relative;
    color: white;
    z-index: 20;
  }
  
  .find-us-head {
    color: white;
    width: 90%;
    text-align: center;
  }
  
  .find-us-head h1 {
    border-bottom: 2px solid white;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  
  .find-us .google-map {
    border-radius: 20px;
    overflow: hidden;
    margin-top: 30px;
    width: 60%;
    height: 450px;
  }
  
  /* find us end  */
  
  /* invest tour privileges start */
  .tour-privileges {
    padding: 40px 100px;
    background-color: var(--bg-variant-five);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
    margin-top: -30px;
    position: relative;
    z-index: 20;
  }
  
  .tour-privileges .privileges-head {
    max-width: 60%;
    text-align: center;
  }
  
  .tour-privileges h1 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .tour-privileges .text-blue {
    font-weight: 500;
    font-size: 14px;
  }
  
  .tour-privileges .bold-text {
    border-top: 2px solid var(--light-blue);
    margin-top: 20px;
    padding-top: 20px;
  }
  
  .tour-privileges h1,
  .tour-privileges h2,
  .tour-privileges .text-blue {
    color: white;
  }
  
  .tour-privileges .bold-text {
    font-weight: 600;
    color: var(--text-secondary);
  }
  
  .tour-privileges .privileges-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .tour-privileges .privileges-list .privileges-list-card {
    padding: 20px;
    box-shadow: var(--shadow);
    border-radius: 20px;
    background-color: white;
  }
  
  .tour-privileges .privileges-list .privileges-list-card h2 {
    border-bottom: 2px var(--light-blue) solid;
    color: var(--dark-blue) !important;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 40px;
  }
  
  .tour-privileges .privileges-list .privileges-list-card p {
    text-align: center;
  }
  
  /* invest tour privileges end */
  
  /* invest tours start */
  .invest-tours {
    padding: 40px 100px;
    min-height: 140vh;
    background-image: url("../img/invest/invest-bg-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: grey;
    background-blend-mode: multiply;
    position: relative;
    color: white;
  }
  
  .invest-tours-head {
    max-width: 60%;
  }
  
  .invest-tours-head h1 {
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .invest-tours-head p {
    text-align: center;
  }
  
  .invest-tours-head .text-bold {
    font-weight: 600;
    margin-bottom: 20px;
  }
  
  .invest-tours .invest-tour-slider {
    width: 90%;
  }
  
  .invest-tours .invest-tour-slider .invest-tour-slider-card {
    border: 2px solid white;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    gap: 40px;
    margin: 10px;
    overflow: auto;
  }
  
  .invest-tour-slider-card img {
    border-radius: 20px;
  }
  
  .invest-tours .invest-tours-body {
    width: 100%;
  }
  
  .invest-tours .invest-tour-slider-card-info {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 50%;
  }
  
  .invest-tours .invest-tour-slider .invest-tour-slider-card h2 {
    font-size: 24px;
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  
  .invest-tours .invest-tour-slider .invest-tour-slider-card ul {
    list-style-type: disc;
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .invest-tours .invest-tour-slider-card-img {
    width: 50%;
  }
  
  .invest-tours .invest-tour-slider-card-img img {
    width: 100%;
  }
  
  .invest-tours .invest-tour-slider .invest-tour-slider-card span {
    font-weight: 600;
  }
  
  .invest-tour-slider-container {
    display: flex;
  }
  
  .invest-tour-slider-container button {
    flex-shrink: 0;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    width: 5%;
  }
  
  .invest-tours .invest-tours-body .days {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    justify-content: center;
  }
  
  .invest-tours .invest-tours-body .days div:first-child {
    background-color: rgb(128, 128, 128, 0.8);
  }
  
  /* .glow{
      background-color: rgb(128, 128, 128, 0.8);
  } */
  
  .invest-tours .invest-tours-body .days div {
    border-radius: 50px;
    border: 2px solid white;
    padding: 8px 40px;
    cursor: pointer;
  }
  
  /* invest tours end */
  
  /* project description start */
  .project-description {
    background-color: var(--bg-secondary);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 40px 100px;
    transform: translateY(-20px);
    color: var(--text-primary);
  }
  
  .project-description .description-wrapper {
    display: flex;
    gap: 30px;
  }
  
  .project-description .description-wrapper .description-text {
    width: 50%;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
  }
  
  .project-description
    .description-wrapper
    .description-text
    .project-description-descr {
    text-align: justify;
  }
  
  .project-description
    .description-wrapper
    .description-text
    .project-description-descr-div {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .project-description .description-wrapper .description-text p {
    font-size: 18px;
  }
  
  .project-description .description-wrapper .description-text .line-under {
    font-weight: 600;
    border-bottom: 2px solid var(--line-light);
    padding-bottom: 20px;
  }
  
  .project-description .countdowns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
  }
  
  .project-description .countdowns .single-count-down {
    display: inline-block;
    gap: 16px;
  }
  
  .project-description .countdowns .single-count-down h1 {
    font-size: 42px;
    text-align: center;
  }
  
  .project-description .countdowns .single-count-down p {
    text-align: center;
  }
  
  .project-description .description-img {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 50%;
    gap: 20px;
  }
  
  .project-description .description-img div {
    border-radius: 20px;
  }
  
  .project-description .description-img div:nth-child(1) {
    grid-row-start: 3;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 4;
  }
  
  .project-description .description-img div:nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 6;
    grid-column-start: 4;
    grid-column-end: 10;
  }
  
  .project-description .description-img div:nth-child(3) {
    grid-row-start: 6;
    grid-row-end: 9;
    grid-column-start: 1;
    grid-column-end: 6;
  }
  
  .project-description .description-img div:nth-child(4) {
    grid-row-start: 6;
    grid-row-end: 10;
    grid-column-start: 6;
    grid-column-end: 10;
  }
  
  /* project description end */
  
  /* filter start  */
  .filter-container .filter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .filter-container .filter-wrapper .group-name {
    color: var(--text-primary);
    font-weight: 600;
  }
  
  .filter-container .filter-by-container,
  .availability {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-container .filter-options {
    display: flex;
    align-items: end;
    gap: 8px;
  }
  
  .filter-container .filter-option {
    width: 100%;
  }
  
  .filter-option .color-bg {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
  }
  
  .filter-option .color-bg.white {
    background-color: white;
    border: 2px solid var(--dark-blue);
    width: 36px;
    height: 36px;
  }
  
  .filter-option .color-bg.black {
    background-color: black;
  }
  
  .filter-option .color-bg.brown {
    background-color: rgb(73, 26, 26);
  }
  
  .filter-option .color-bg.light-brown {
    background-color: brown;
  }
  
  .filter-option .currency {
    width: 38px;
    height: 38px;
    border: solid 2px var(--dark-blue);
    border-radius: 50%;
    background-color: white;
    color: var(--dark-blue);
    font-size: 14px;
    font-weight: 600;
  }
  
  .filter-option .currency.active {
    background-color: var(--dark-blue);
    color: white;
  }
  
  .filter-option .detail-value {
    border: var(--border-blue);
    padding: 8px;
    border-radius: 8px;
    color: var(--dark-blue);
  }
  
  .filter-container .filter-option div {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  
  .filter-container .filter-option p {
    font-size: 14px;
    color: var(--text-variant-three);
  }
  
  .filter-container .filter-option .select-div {
    border: var(--border-blue);
    min-width: auto;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    color: var(--light-gray);
    padding: 0 6px;
  }
  
  .filter-container .filter-option div input[type="text"] {
    border: var(--border-blue);
    min-width: auto;
    width: 100%;
  }
  
  input[type="date"],
  input[type="time"] {
    background-color: transparent;
    color: var(--text-primary);
  }
  
  .availability .availability-statuses {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .availability .availability-status {
    padding: 8px 16px;
    border: var(--border-blue);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .availability .availability-status.light-blue-bg {
    background-color: var(--line-light);
    border: none !important;
  }
  
  .availability .availability-status.dark-blue-bg {
    background-color: var(--dark-blue);
    color: white !important;
  }
  
  .filter-container .filter-results {
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  
  .room .filter-results {
    background-color: var(--bg-primary);
  }
  
  .filter-results .filter-result-head {
    background-color: var(--dark-blue);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .filter-results {
    font-size: 15px;
  }
  
  .filter-results .filter-result-head p {
    color: white;
    font-weight: 600;
  }
  
  .filter-results .filter-result-head span {
    font-weight: 100;
  }
  
  .filter-results .filter-result-head div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .filter-results .filter-result-head select {
    background-color: transparent;
    color: white;
  }
  
  .filter-results .filter-result-list {
    display: flex;
    flex-direction: column;
    height: 200px;
    overflow-y: auto;
  }
  
  .filter-result-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    gap: 20px;
    border: 1px solid var(--light-gray);
  }
  
  .filter-result-item-info-cont {
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
    width: 100%;
    flex-shrink: 0;
  }
  
  .filter-result-item-img {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-shrink: 0;
  }
  
  .filter-result-item-img img {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  
  .filter-result-item-img h2 {
    color: var(--text-secondary);
  }
  
  .filter-result-item-img span {
    font-size: 14px;
    color: var(--normal-gray);
  }
  
  .filter-result-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
  }
  
  .filter-result-item-info p {
    font-weight: 600;
    color: var(--text-secondary);
  }
  
  .filter-result-item-info span {
    font-weight: 100;
  }
  
  .for-room .filter-result-item {
    border: none;
  }
  
  .for-room .filter-actions {
    display: flex;
    justify-content: space-between;
  }
  
  .for-room .filter-results {
    padding: 10px;
  }
  
  .filter-results-gallery-container {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .filter-results-gallery-container .results-gallery-button {
    background-color: transparent;
    border: none;
    font-size: 22px;
    color: var(--text-primary);
    flex-shrink: 0;
    width: 5%;
  }
  
  .filter-results .filter-results-gallery {
    display: flex;
    width: 90%;
    margin-top: 10px;
  }
  
  .filter-results .filter-results-gallery img {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 20px;
    height: 200px;
    object-fit: cover;
  }
  
  .filter-result-information {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    color: var(--text-primary);
  }
  
  .filter-result-information .button-style-transparent {
    padding: 6px 40px;
  }
  
  .filter-result-information a {
    color: var(--text-primary) !important;
    font-size: 15px !important;
    text-decoration: underline;
  }
  
  /* filter end  */
  
  /* request call button  start */
  
  .request-call-button {
    width: 50px;
    height: 50px;
    background: var(--dark-blue);
    cursor: pointer;
    border-radius: 50px;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .request-call-button i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: white;
  }
  
  .widgets-container {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .widget-wrapper {
    position: relative;
    z-index: 200;
  }
  
  .widgets-button {
    background-color: var(--dark-blue);
    cursor: pointer;
    padding: 14px;
    border-radius: 50px;
    border: none;
    flex-shrink: 0;
  }
  
  .widgets-button i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: white;
  }
  
  .widgets-button2 {
    width: 50px;
    height: 50px;
    background-color: var(--dark-blue);
    cursor: pointer;
    border-radius: 50px;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .widgets-button2 i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: white;
  }
  
  .widget-toggler-container {
    position: relative;
  }
  
  .widget-tag {
    background-color: var(--dark-blue);
    padding: 10px;
    color: white;
    display: flex;
    column-gap: 20px;
    width: 180px;
    align-items: center;
    border-radius: 12px;
    position: absolute;
    top: -2px;
    transform: translate(-110%, 0%);
    outline: 2px rgba(0, 48, 87, 0.5) solid;
    cursor: pointer;
  }
  
  .widget-tag p {
    font-size: 12px !important;
  }
  
  .widget-tag img {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    object-fit: cover;
  }
  
  /* request call button  end */
  
  /* parking reservation start */
  .parking-reserve {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .parking-reserve p {
    color: var(--text-primary);
  }
  
  .parking-reserve .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .parking-reserve .input-outline {
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 10px;
    width: 100%;
  }
  
  .parking-reserve .input-outline.add-another-spot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-blue);
    height: 42px;
    cursor: pointer;
  }
  
  .parking-reserve .group-div {
    width: 100%;
  }
  
  .parking-reserve .group-div p {
    margin-bottom: 8px;
  }
  
  .parking-reserve input[type="text"] {
    width: 100% !important;
    min-width: auto !important;
  }
  
  .input-outline input,
  .input-outline select {
    border: none;
    outline: none;
    height: 40px;
    width: 100% !important;
    flex-wrap: wrap;
  }
  
  .parking-reserve .reserve-button {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
  
  /* parking reservation end */
  
  .filter-actions {
    margin-top: 20px;
  }
  
  .request-sent .floor-description-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .request-sent .floor-description-container .projects-details.part-description {
    width: unset !important;
  }
  
  .project-gallery-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .project-gallery-container-main-img {
    width: 100%;
  }
  
  .footer-phone {
    flex-direction: column;
    gap: 20px;
    display: flex;
  }
  
  .footer-phone .footer-phone-cont {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 2px solid white;
    padding-bottom: 20px;
  }
  
  .footer-phone .footer-phone-cont:last-child {
    border: unset;
  }
  
  .footer-phone h1,
  .footer-phone p {
    text-align: center;
    color: white;
  }
  
  .footer-phone .bold {
    font-weight: 600;
  }
  
  .contact-info .social-media div {
    background-color: #6d7173 !important;
  }
  
  /* phone menu start */
  
  /* phone menu end */
  .phone-menu-conteiner {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    color: var(--dark-blue);
    transform: translateX(170%);
    transition: all cubic-bezier(0.99, 0.5, 0.58, 1) 0.8s;
  }
  
  .phone-menu-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 20;
    background-color: var(--bg-variant-six);
    padding: 20px;
  }
  
  .phone-menu-conteiner .phone-logo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .phone-menu-conteiner .phone-navigation {
    width: 100%;
    min-height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
  }
  
  .phone-menu-conteiner .language-container .selected-language {
    box-shadow: var(--shadow);
    padding: 5px;
    border-radius: 50px;
    background-color: var(--bg-secondary);
  }
  
  .phone-menu-conteiner .phone-navigation nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .phone-menu-conteiner .phone-navigation nav li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
  }
  
  .phone-menu-conteiner .phone-navigation nav li a {
    color: var(--text-primary);
  }
  
  .phone-navigation img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 60%;
    z-index: -1;
  }
  
  .open-phone-menu-button {
    color: white;
  }
  
  .open-phone-menu-button,
  .close-phone-menu-button {
    cursor: pointer;
  }
  
  .close-phone-menu-button {
    color: var(--text-primary);
  }
  
  /* contact us banner start */
  .contact-us-banner {
    height: 60vh;
    background-image: url("/resources/img/backgrounds/background5.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .contact-us-banner-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 255, 0),
      var(--bg-variant-five)
    );
  
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  
  .contact-us-banner-container h1,
  .contact-us-banner-container h2 {
    text-align: center;
  }
  
  .contact-us-banner-container h2 {
    margin-bottom: 40px;
  }
  
  .contact-us-banner-contacts {
    display: flex;
    gap: 100px;
  }
  
  .contact-us-banner-contacts .contact-us-banner-contacts-div {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .contact-us-banner-contacts div i {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .contact-us-banner-contacts div .title {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 18px;
    text-transform: uppercase;
  }
  
  .contact-us-banner-contacts div p {
    font-size: 18px;
    margin-bottom: 5px;
  }
  
  .line-vertical {
    width: 1px;
    height: 150px;
    background: white;
  }
  
  /* contact us banner end */
  
  .w-full {
    width: 100%;
  }
  
  /* responsive */
  
  @media screen and (max-width: 1300px) {
    .team-section .team-list {
      padding: 0 3%;
    }
  
    header {
      padding: 20px;
    }
  
    .apartment-designs {
      padding: 20px;
    }
  
    .banner-container .banner-container-img img {
      object-fit: cover;
    }
  
    .why-invest-container .why-invest-head .p-line-top {
      text-align: center;
    }
  
    .header-nav-list ul {
      column-gap: 10px;
    }
  }
  
  @media screen and (min-width: 1024px) {
    .small-resolution,
    .footer-phone {
      display: none;
    }
  
    .open-phone-menu-button {
      display: none;
    }
  }
  
  @media screen and (max-width: 1024px) {
    .why-us-container .why-us-wave1,
    .why-us-container .why-us-wave2 {
      display: none;
    }
  
    .team-section .team-list {
      padding: 0;
    }
  
    .team-section .team-list {
      padding: 0;
    }
  
    .roi-input-container {
      border: none !important;
    }
  
    h1 {
      font-size: 22px !important;
    }
  
    h2 {
      font-size: 18px !important;
    }
  
    p {
      font-size: 14px !important;
    }
  
    button {
      font-size: 12px !important;
    }
  
    .header-nav-list,
    .aval-ap,
    .projects-slider-section .floating-wave,
    .advantages-contianer .advantage-list,
    .blue-container,
    .invest-tours .invest-tours-body .days,
    .floor-description .floor-description-container .go-back,
    .projects-details h1,
    .filter-wrapper .horizontal-line,
    .footer-container,
    .footer-nav-container,
    .footer-lines-img,
    .dark-mode-container2,
    .contact-us-banner {
      display: none !important;
    }
  
    .roi-calculator,
    .regular-request-form {
      margin: 20px;
    }
  
    .calculator,
    .roi-calculator-container,
    .request-form .header,
    .regular-request-form .content .form-content,
    .apartment-designs,
    .projects-slider-section,
    .our-apartments,
    .apartment-designs,
    .projects-container-single-img div,
    .projects-two-section .projects-two-wrapper,
    .banner-container,
    .investment-hero,
    .why-invest-container,
    .advantages-contianer,
    .invest-with-us-container,
    .why-us-container,
    .media,
    .latest-publications-container,
    .live-cams .live-cams-wrapper,
    .experiance-360 .container-360,
    .contact-us,
    .team-section,
    .find-us,
    .tour-privileges,
    .invest-tours,
    .project-description,
    .panorama-gallery-section,
    .footer-navigation,
    .footer-lower-part{
      padding: 20px;
    }

    .live-cams, .experiance-360, .floor-description{
      padding: 120px 20px 20px 20px;
    }
  
    /* .filter-container .filter-option {
      width: 49%;
    } */
  
    .advantages-contianer {
      padding-top: 100px;
    }
  
    .projects-two-section {
      padding: 0 !important;
    }
  
    .projects-two-section,
    .projects-two-section .projects-two-wrapper {
      border-radius: 0px;
    }
  
    .banner-container {
      transform: translateY(-16px);
    }
  
    .calculator-input-container,
    .roi-input-container-div,
    .regular-request-form .content,
    .projects-slider-list-2,
    .projects-slider-list,
    .filter-result-item,
    .filter-result-item-img,
    .hero-buttons,
    .advantages-contianer .advantage-description,
    .invest-with-us-list,
    .why-us-text-list,
    .media,
    .contact-us-body,
    .invest-tours .invest-tour-slider .invest-tour-slider-card,
    .floor-description .floor-description-container,
    .project-description .description-wrapper {
      flex-direction: column;
    }
  
    .filter-container .filter-options {
      flex-wrap: wrap;
    }
  
    .filter-result-item-img img {
      order: 2;
      width: 120px;
      height: 120px;
      object-fit: cover;
    }
  
    .filter-result-item-info {
      justify-content: start;
    }
  
    .filter-result-item-img,
    .filter-result-item,
    .filter-result-item-info-cont {
      gap: 10px;
    }
  
    .filter-results .filter-result-list {
      height: 280px;
    }
  
    .select-input,
    input[type="text"] {
      min-width: auto;
    }
  
    .calculator-input-container,
    .roi-input-container,
    .input-container,
    .calculator-input-container .input-container,
    .request-form .content .form-content,
    .regular-request-form .popup-image,
    .investment-hero-wrapper,
    .investment-hero-description,
    .advantages-contianer .advantage-description-img img,
    .media .media-left,
    .find-us .google-map,
    .invest-tours .invest-tour-slider-card-info,
    .invest-tours .invest-tour-slider-card-img,
    .floor-description
      .floor-description-container
      .project-part-description-image,
    .projects-details.part-description,
    .project-description .description-wrapper .description-text,
    .project-description .description-img,
    .description-text p,
    .description-text h1,
    .advantages-contianer .advantage-description .advantage-description-text,
    .advantages-contianer .advantage-description .advantage-description-img {
      width: 100% !important;
    }
  
    .advantages-contianer .advantage-description .advantage-description-img img {
      height: 200px;
    }
  
    .floor-description
      .floor-description-container
      .project-part-description-image,
    .projects-details.part-description {
      background-color: var(--bg-secondary);
      padding: 20px;
      border-radius: 20px;
      box-shadow: var(--shadow);
    }
  
    .projects-details.part-description {
      margin-top: 20px;
    }
  
    .floor-description .floor-description-container {
      width: 100%;
    }
  
    .floor-description .floor-description-container {
      background-color: transparent;
      padding: 0;
    }
  
    .find-us {
      min-height: unset;
    }
  
    .roi-input-container {
      padding: 0;
      border: none;
    }
  
    .regular-request-form .popup-image img {
      transform: none;
    }
  
    .regular-request-form .content .form-content .button-div,
    .banner-container .banner-div,
    .contact-us-body .contact-us-form .button-div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .projects-container-single {
      width: 100%;
    }
  
    .hotel-complexes-container-index,
    .our-apartments,
    .hotel-complexes-container {
      background-color: transparent;
      box-shadow: none;
    }
  
    .filter-actions {
      margin-top: unset;
    }
  
    .our-apartments .filter-container,
    .invest-with-us-list {
      background-color: var(--bg-secondary);
      box-shadow: var(--shadow);
      padding: 20px;
      border-radius: 20px;
    }
  
    .filter-container .filter-options {
      align-items: center;
      justify-content: center;
    }
  
    .project-description .description-img {
      gap: 10px;
      height: 500px;
    }
  
    .project-description .countdowns {
      gap: 20px;
    }
  
    .filter-result-item-img div {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  
    .filter-bottom-cont {
      display: flex;
      gap: 10px;
    }
  
    .filter-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .filter-actions button {
      width: 100%;
    }
  
    .filter-result-information {
      grid-template-columns: repeat(1, 1fr);
    }
  
    .gallery-slider-container .projects-container-single-img {
      max-width: 100% !important;
    }
  
    .hero .award img {
      width: 50px;
    }
  
    .hero-buttons-container {
      bottom: 30%;
    }
  
    .about-us-hero-section .about-us-hero-wrapper {
      max-width: unset;
    }
  
    .banner-container {
      height: 80vh;
    }
  
    .banner-container .banner-container-img img {
      object-fit: contain;
    }
  
    .banner-container .banner-container-img {
      width: 70%;
    }
  
    .banner-container .banner-container-img {
      height: 40vh;
    }
  
    .investment-hero .investment-hero-wrapper,
    .investment-hero-description {
      max-width: unset;
    }
  
    .banner-container .banner-container-text {
      max-width: unset;
      min-height: unset;
      justify-content: unset;
    }
  
    .banner-container {
      border-radius: 20px;
      overflow: hidden;
    }
  
    .banner-container .banner-container-text h1,
    .banner-container .banner-container-text p,
    .why-us-text-list p {
      text-align: center !important;
    }
  
    .regular-request-form.flat-bottom {
      border-radius: 20px !important;
      margin-bottom: 40px !important;
    }
  
    .invest-with-us-container,
    .translate-10,
    .project-description {
      transform: unset !important;
    }
  
    .why-us-container .why-us-text-container .why-us-text-list div {
      border: unset !important;
    }
  
    .advantage-description-list {
      width: 90%;
    }
  
    .advantage-description-container button {
      width: 5%;
    }
  
    .latest-publications-list,
    .tour-privileges .privileges-list {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  
    .live-cams .live-cams-wrapper .live-cams-list {
      gap: 10px;
    }
  
    .container-360 iframe {
      height: 500px;
    }
  
    .contact-info-container p,
    .description-text p,
    .description-text h1 {
      text-align: center;
    }
  
    .social-media {
      justify-content: center;
    }
  
    .team-list-card {
      width: 49%;
    }
  
    .invest-tours {
      height: unset;
    }
  
    .invest-tours .invest-tour-slider .invest-tour-slider-card {
      gap: 20px;
    }
  
    .invest-tours .invest-tour-slider {
      margin-top: 20px;
    }
  
    .small-resolution {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 20px;
    }
  
    .small-resolution button {
      display: block !important;
      background-color: transparent;
      color: white;
      border: 2px solid white;
    }
  
    .small-resolution h1 {
      color: white;
    }
  
    .for-room .filter-actions {
      flex-direction: row;
    }
  
    .request-sent {
      margin-bottom: 0 !important;
    }
  
    .request-sent
      .floor-description-container
      .projects-details.part-description {
      width: unset !important;
    }
  
    .request-sent .projects-details.projects-details-done h1 {
      display: block !important;
    }
  
    .project-description {
      margin: 20px;
    }
  
    .projects-details {
      width: 96%;
      margin: 2%;
      box-shadow: var(--shadow);
    }
  
    .project-details-container h1 {
      display: block !important;
    }
  
    .gallery-slider-container .gallery-slider-list {
      padding: 0px;
    }
  
    .project-gallery-container .main-img {
      height: 40vh;
    }
  
    .footer-navigation {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: unset;
      background-image: url("/resources/img/backgrounds/background5.png");
      padding: 0px;
      background-size: cover;
    }
  
    .footer-phone {
      background: linear-gradient(to bottom, rgba(0, 0, 255, 0), #041524);
      width: 100%;
      padding: 20px 100px;
    }
  
    .popup-container {
      padding: 20px;
    }
  
    .popup-container .request-form .popup-image {
      display: none;
    }
  
    .popup-container .request-form {
      width: 100%;
    }
  
    .popup-container .request-form .content .form-content,
    .popup-container .header {
      padding: 20px;
    }
  
    .popup-container .header {
      padding-bottom: 0px;
      margin-top: 40px;
    }
  
    .close-popup {
      top: 8;
      font-size: 32px;
    }
  
    .popup-container .header h2 {
      margin-bottom: 20px;
    }
  
    .team-section,
    .team-list-card {
      transform: unset !important;
    }
  
    .contact-us-body .contact-us-form {
      margin: unset;
    }
  
    .team-section .team-list {
      row-gap: 80px;
    }
  
    .contact-us {
      padding-bottom: 100px;
    }
  
    .invest-tours-head {
      max-width: unset;
      width: 80%;
    }
  
    header .lang-desktop {
      display: none;
    }
  
    header .phone-menu-conteiner .language-container {
      display: block !important;
    }
  
    .floor-description {
      min-height: unset;
    }
  
    .availability .availability-status {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .filter-result-information p {
      font-size: 10px;
    }
  
    .filter-actions button {
      padding: 12px 20px;
    }
  
    .filter-option .color-bg {
      width: 100% !important;
    }
  
    .parking-request-form-subtitle {
      text-align: center;
    }
  
    .col-1024 {
      flex-direction: column;
    }
  
    .availability .availability-status {
      min-width: unset;
    }
  
    .projects-details .proj-details-head {
      flex-direction: column;
    }
  
    .projects-details .proj-details-head h1 {
      padding-right: 0px;
      margin-right: 0px;
      border: unset;
    }
  
    .project-description-descr-div,
    .countdowns {
      width: 100% !important;
    }
  
    .project-description .countdowns .single-count-down {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  
    .floor-description {
      height: unset;
    }
  
    .contact-info .contact-info-container {
      margin-top: 0px;
    }
  }
  
  @media screen and (max-width: 640px) {
    .project-description .description-img {
      height: 400px;
    }

    .invest-tours{
      min-height: 160vh;
    }
  
    .projects-container-single-img,
    .project-gallery-container .main-img {
      border-radius: 12px;
    }
  
    .project-gallery-container .gallery-slider-container img {
      height: 120px;
    }
  
    .calculator-input-container {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  
    .footer-phone {
      background: linear-gradient(to bottom, rgba(0, 0, 255, 0), #041524);
      width: 100%;
      padding: 20px 50px;
    }
  
    .projects-container-single-img {
      max-width: 100%;
    }
  
    .hero-buttons-container {
      bottom: 16%;
    }
  
    .banner-container .banner-container-img {
      height: unset;
    }
  
    .projects-two-section .projects-two-description,
    .team-list-card,
    .tour-privileges .privileges-head,
    .invest-tours-head {
      width: 100%;
    }
  
    .tour-privileges .privileges-head {
      max-width: unset;
    }
  
    .projects-two-section .projects-two-description h1,
    .projects-two-section .projects-two-description p,
    .why-us-container p {
      text-align: center;
    }
  
    .projects-two-section .projects-two-description div {
      display: flex;
      justify-content: center;
    }
  
    .projects-two-list .project-two-item {
      border: unset;
    }
  
    .latest-publications-list,
    .tour-privileges .privileges-list {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  
    .live-cams .live-cams-wrapper .live-cams-list {
      gap: 30px;
    }
  
    .live-cams .live-cams-wrapper .live-cams-list iframe {
      width: 100%;
    }
  
    .why-invest-container {
      background-color: transparent;
      transform: unset !important;
    }
  
    .why-invest-container .why-invest-list {
      margin-top: 20px;
    }
  
    .why-invest-container .why-invest-list {
      transform: unset !important;
    }
  
    .advantages-contianer {
      padding: 20px;
    }
  
    .latest-publications-container {
      margin: 20px;
    }
  
    .container-360 iframe {
      height: 200px;
    }
  
    .team-list-card,
    .team-list-card img {
      height: unset;
    }
  
    .why-us-container .why-us-img {
      height: unset !important;
      width: 70%;
    }
  
    .our-apartments,
    .projects-slider-section,
    .apartment-designs,
    .advantages-contianer .advantages-base,
    .advantages-contianer,
    .investment-hero .investment-hero-wrapper,
    .investment-hero-description,
    .about-us-hero-section .about-us-hero-wrapper,
    .media .media-left,
    .media .media-right,
    .media,
    .contact-us-body,
    .experiance-360 .text-360 {
      gap: 20px;
    }
  
    .advantages-contianer .advantages-base h1 {
      text-align: center;
    }
  
    .invest-with-us-container .invest-with-us-list,
    .latest-publications-list,
    .contact-us-body,
    .experiance-360 .container-360 {
      margin-top: 20px;
    }
  
    .regular-request-form.flat-bottom {
      margin: 20px !important;
    }
  
    .investment-hero{
      min-height: 120vh;
    }
  
    .tour-privileges .privileges-list .privileges-list-card h2 {
      margin-bottom: 20px;
    }
  
    .hero {
      height: 80vh;
    }
  
    .advantages-contianer .advantages-base,
    .why-us-container .why-us-text-container .why-us-text-title {
      width: 100%;
      max-width: unset;
    }
  
    .why-invest-list-cont {
      margin-bottom: 0px;
    }
  }
  
  .selected {
    box-shadow: 0 0 6px 2px rgb(0, 0, 0);
  }
  
  .form-message {
    background: white;
    padding: 10px;
    border-radius: 9px;
    margin: 10px;
  }
  
  .gbStyle {
    font-weight: bold;
  }
  
  .days div.active {
    font-weight: bold;
  }
  
  .invest-tour-slider-card {
    display: none;
  }
  .invest-tour-slider-card.active {
    display: block;
  }
  
  .popupForm {
    display: flex;
    row-gap: 12px;
    flex-direction: column;
  }
  
  .question:hover .question-info-div {
    display: block;
  }
  
  .faq-button {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary) !important;
    margin-top: 12px;
  }
  
  .faq-button span {
    text-decoration: underline;
  }
  
  .faq-container {
    width: 80%;
    min-height: 100vh;
    margin: auto;
    padding: 80px 20px 80px 20px;
  }
  
  .faq-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 20px;
  }
  
  .faq-question {
    font-weight: bold;
    cursor: pointer;
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .faq-answer {
    margin-top: 10px;
    color: var(--text-primary) !important;
  }
  
  .caret-icon {
    transition: transform 0.3s;
  }
  
  .caret-icon.open {
    transform: rotate(180deg);
  }
  
  .hoverable:hover {
    background-color: #c6e7f2;
  }
  
  .inner-blog-start {
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding: 140px 100px 100px 100px;

    background-color: gray; 
    background-blend-mode: multiply; 
  }
  
  .inner-blog-start-container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  .inner-blog-start-container .text-side {
    height: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 20px;
  }
  
  .inner-blog-start-container .text-side h1 {
    font-size: 70px;
  }
  
  .inner-blog-start-container .text-side h1,
  .inner-blog-start-container .text-side p {
    width: 80%;
  }
  
  .inner-blog-start .next-publications-side {
    background-color: var(--bg-secondary);
    border-radius: 20px;
    padding: 30px;
  }
  
  .next-publications-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .next-publications-side h1,
  .next-publications-side p {
    color: var(--text-primary);
  }
  
  .next-publications-side-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    height: 60vh;
  }
  
  .next-publication-one {
    display: flex;
    gap: 20px;
  }
  
  .next-publication-one img {
    width: 140px;
    border-radius: 12px;
    height: 140px;
    flex-shrink: 0;
    object-fit: cover;
  }
  
  .next-publication-one-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .inner-blog-second,
  .inner-blog-third {
    padding: 40px 100px;
  }
  
  .inner-blog-second-container,
  .inner-blog-third-container {
    display: flex;
    gap: 70px;
  }
  
  .inner-blog-second-img {
    width: 60%;
  }
  
  .inner-blog-second-img img {
    width: 100%;
    border-radius: 20px;
  }
  
  .inner-blog-second-text {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .inner-blog-second-text h1,
  .inner-blog-third-text h1 {
    font-size: 50px;
  }
  
  .inner-blog-second-text p,
  .inner-blog-second-text h1,
  .inner-blog-third-text p,
  .inner-blog-third-text h1 {
    color: var(--text-primary);
  }
  
  .inner-blog-third-img {
    width: 40%;
  }
  
  .inner-blog-third-img img {
    width: 100%;
    border-radius: 20px;
  }
  
  .inner-blog-third-text {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .inner-blog-third-after-text-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .inner-blog-third-after-text-images img {
    width: 100%;
    border-radius: 20px;
  }
  
  @media screen and (max-width: 1300px) {
    .inner-blog-start {
      padding: 140px 50px 50px 50px;
    }
  
    .inner-blog-second,
    .inner-blog-third {
      padding: 40px 50px;
    }
  
    .inner-blog-third-container,
    .inner-blog-second-container {
      gap: 30px;
    }
  }
  
  @media screen and (max-width: 1024px) {
    .inner-blog-third-container,
    .inner-blog-second-container {
      flex-direction: column;
    }
  
    .inner-blog-second-img,
    .inner-blog-second-text,
    .inner-blog-third-img,
    .inner-blog-third-text {
      width: 100%;
    }
  
    .inner-blog-second-img {
      order: 2;
    }
  
    .inner-blog-second-text {
      order: 1;
    }
  
    .inner-blog-second p,
    .inner-blog-third p,
    .inner-blog-second h1,
    .inner-blog-third h1 {
      text-align: center;
    }
  
    .inner-blog-second h1,
    .inner-blog-third h1 {
      border-bottom: 2px solid var(--line-light);
      padding-bottom: 20px;
    }
  
    .inner-blog-start-container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  
    .inner-blog-start-container .text-side h1,
    .inner-blog-start-container .text-side p {
      text-align: center;
      width: 100%;
    }
  
    .inner-blog-start-container .text-side,
    .inner-blog-start-container {
      height: auto;
    }
  
    .inner-blog-start {
      display: flex;
      align-items: center;
      justify-content: center;
      height: auto;
    }
  
    .next-publications-side-container {
      flex-direction: row;
      overflow-x: auto;
      height: auto;
      padding-bottom: 20px;
    }
  
    .next-publication-one {
      flex-direction: column;
      min-width: 300px;
    }
  
    .next-publication-one img {
      height: auto;
      width: 100%;
    }
  }
  
  @media screen and (max-width: 640px) {
    .hide-map-on-mobile {
      display: none;
    }
  
    .inner-blog-start {
      padding: 120px 20px 20px 20px;
    }
  
    .inner-blog-start h1 {
      text-align: center;
    }
  
    .inner-blog-second,
    .inner-blog-third {
      padding: 20px;
    }
  }
  
  #cursor {
    animation: clickAnimation 1s infinite;
    transform-origin: center;
  }
  
  @keyframes clickAnimation {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  
  .widget-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    --animation: 2s ease-in-out infinite;
  }
  
  .widget-loader .widget-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    outline: 4px rgba(0, 48, 87, 0.5) solid;
    border-radius: 50%;
  }
  
  .widget-loader .widget-circle .widget-outline {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    animation: outline-keys var(--animation);
    animation-delay: 0.9s;
    z-index: 100;
  }
  
  @keyframes outline-keys {
    0% {
      transform: scale(0);
      outline: 10px rgba(0, 48, 87, 0.3) solid;
      outline-offset: 0;
      opacity: 1;
    }
  
    100% {
      transform: scale(1);
      outline: 2px rgba(0, 48, 87, 0.3) solid;
      outline-offset: 20px;
      opacity: 1;
    }
  }
  
  area {
    pointer-events: none !important;
  }
  
  .widget-loader-project {
    justify-content: center;
    align-items: center;
    --animation: 2s ease-in-out infinite;
  }
  
  .widget-loader-project .widget-circle-project {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  
  .widget-loader-project .widget-circle-project .widget-outline-project {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    animation: outline-keys-project var(--animation);
    z-index: 100;
  }
  
  @keyframes outline-keys-project {
    0% {
      transform: scale(0);
      outline: 18px white solid;
      outline-offset: 0;
      opacity: 1;
    }
  
    50% {
      transform: scale(0.4);
      outline: 16px white solid;
      outline-offset: 0;
      opacity: 0.7;
    }
  
    75% {
      transform: scale(0.6);
      outline: 14px white solid;
      outline-offset: 0;
      opacity: 0.6;
    }
  
    100% {
      transform: scale(1);
      outline: 5px white solid;
      outline-offset: 20px;
      opacity: 0.4;
    }
  }
  
  /*panorama*/
  
  .panorama-adv {
    position: absolute;
    top: 100px;
    right: 60px;
    z-index: 40;
  }
  
  .panorama-adv-img {
    position: absolute;
    bottom: 300px;
    right: 60px;
    z-index: 40;
  }
  
  /*piazza*/
  
  .piazza-adv {
    position: absolute;
    top: 24%;
    right: 60px;
    max-width: 300px;
    z-index: 40;
  }
  
  .piazza-adv-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 60px;
    z-index: 40;
  }
  
  /*lisi*/
  
  .lisi-adv {
    position: absolute;
    bottom: 60px;
    left: 60px;
    max-width: 300px;
    z-index: 40;
  }
  
  .lisi-adv-img {
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 40;
  }


  /*kvirike*/
  
  .kvirike-adv {
    position: absolute;
    bottom: 60px;
    right: 60px;
    max-width: 300px;
    z-index: 40;
  }
  
  .kvirike-adv-img {
    position: absolute;
    bottom: 60px;
    left: 60px;
    z-index: 40;
  }

.kvirike-adv-head{
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 40;
}
  
  
  /*bakuriani*/
  
  .bakuriani-adv {
    position: absolute;
    bottom: 60px;
    right: 60px;
    max-width: 400px;
    z-index: 40;
  }
  
  .bakuriani-adv-img {
    position: absolute;
    bottom: 60px;
    left: 60px;
    z-index: 40;
  }
  
  /*general*/
  
  .panorama-adv p,
  .panorama-adv h1,
  .piazza-adv p,
  .piazza-adv h1,
  .piazza-adv-img h1,
  .lisi-adv p,
  .lisi-adv h1,
  .lisi-adv-img h1,
  .bakuriani-adv p,
  .bakuriani-adv h1, 
.kvirike-adv p,
.kvirike-adv-head h1{
    color: white;
  }
  
  .panorama-adv p,
  .piazza-adv p,
  .lisi-adv p,
  .bakuriani-adv p {
    font-size: 18px;
  }
  
  .project-adv-container-line {
    width: 100%;
    height: 2px;
    background-color: #fafafa;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  .project-adv-container-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .project-adv-container-item i {
    font-size: 12px;
    color: #fafafa;
  }
  
  .project-adv-container {
    display: flex;
    gap: 30px;
  }
  
  .project-adv-container-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  @media screen and (max-width: 1024px) {
    .panorama-adv,
    .panorama-adv-img,
    .piazza-adv,
    .piazza-adv-img,
    .lisi-adv-img h1,
    .lisi-adv-img .project-adv-container-line {
      display: none !important;
    }
  
    .lisi-adv {
      bottom: 10px;
      right: 10px;
      left: unset;
    }
  
    .lisi-adv h1,
    .bakuriani-adv h1 {
      font-size: 8px !important;
      text-align: end;
      margin-bottom: 4px;
    }
  
    .project-adv-container-line {
      display: none !important;
    }
  
    .project-adv-container-side {
      gap: 4px;
    }
  
    .bakuriani-adv {
      bottom: 10px;
      right: 10px;
      width: 160px;
    }
  
    .project-adv-container-item {
      justify-content: end;
    }
  
    .project-adv-container-item p {
      order: 1;
      text-align: end;
    }
  
    .project-adv-container-item i {
      order: 2;
    }
  
    .project-adv-container-item p,
    .project-adv-container-item i {
      font-size: 8px !important;
    }
  
    .bakuriani-adv-img {
      bottom: 20px;
      left: 20px;
    }
  
    .bakuriani-adv-img img,
    .lisi-adv-img img {
      width: 200px;
    }
  
    .lisi-adv-img {
      left: 20px;
    }
    
    
      /*kvirike*/
  
  .kvirike-adv {

    bottom: 10px;
    right: 10px;

  }
  
  .kvirike-adv-img {
    bottom: 10px;
    left: 10px;
  }
    
      
  .kvirike-adv-img img {
    width: 80px;
    
  }

.kvirike-adv-head{
   display:none;
}
  }
  
  @media screen and (max-width: 640px) {
    .bakuriani-adv-img img {
      width: 80px;
    }
  
    .lisi-adv-img img {
      width: 120px;
    }
  
    .this-p-hide {
      display: none !important;
    }
  }
  
  .image-map-responsive {
    width: 100%;
    position: relative;
    overflow-y: auto;
    height: 100vh;
  }
  
  .image-map-responsive-img {
    width: 100%;
    filter: brightness(50%);
  }
  
  .image-map-responsive-floor-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100vw;
    left: 0;
    z-index: 50;
    position: fixed;
  }
  
  .image-map-responsive-floor-select-container {
    width: 60%;
    border-radius: 30px;
    display: flex;
    border: white 1px solid;
    align-items: center;
  }
  
  .image-map-responsive-floor-select i {
    color: white;
  }
  
  .image-map-responsive-floor-select-div {
    width: 100%;
  }
  
  .image-map-responsive-link {
    padding: 0px 20px;
    font-size: 14px;
    border-radius: 30px;
    background-color: white;
    color: #003057;
    text-decoration: none;
    flex-shrink: 0;
  }
  
  .image-map-responsive-input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    padding-left: 50px;
    font-size: 14px;
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
  }
  
  .image-map-responsive-input option {
    color: #003057;
  }
  
  .mouse-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mouse {
    width: 20px;
    height: 40px;
    border-radius: 30px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
  }
  
  .mouse-wheel {
    width: 5px;
    height: 5px;
    background-color: white;
    border-radius: 50%;
    margin-top: 5px;
    animation: move-vertical 2s infinite;
  }
  
  @keyframes move-vertical {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0); /* Start at the original position */
    }
    50% {
      transform: translateY(22px); /* Move up */
    }
    100% {
      transform: translateY(0); /* Move down */
    }
  }
  
  @media screen and (min-width: 640px) {
    .image-map-responsive,
    .hide-map-on-desktop {
      display: none;
    }
  }
  
  @media screen and (max-width: 640px) {
    .image-map-responsive-top {
      top: 0 !important;
      left: 0;
      width: 100%;
      background: linear-gradient(180deg, #003057 0%, transparent 100%);
      max-width: none;
      position: absolute;
      color: white;
    }
  
    .image-map-responsive-top .project-adv-container {
      padding: 0 20px 20px 20px;
      gap: 10px;
      border-bottom: 2px solid white;
      transition: opacity 0.2s ease;
      justify-content: center;
    }
  
    .image-map-responsive-top h1 {
      margin: 20px 0;
      width: 100%;
      text-align: center;
      font-size: 22px;
    }
  
    .image-map-responsive-top .project-adv-container p {
      font-size: 12px !important;
    }
  
    .image-map-responsive-bottom {
      position: relative !important;
      top: 0;
      left: 0;
      z-index: 40;
      padding: 40px 20px 20px 20px;
      margin-top: -37px;
      background: linear-gradient(0deg, #003057 75%, transparent 100%);
    }
  
    .image-map-responsive-bottom img {
      width: 100%;
    }
  
    .image-map-responsive-top .project-adv-container-side {
      gap: 10px;
    }
  
    .filter-result-item-info p {
      font-size: 10px !important;
    }
  
    .filter-result-item-info {
      font-size: 10px !important;
    }
  }
  
  @media screen and (min-width: 1024px) {
    .filter-result-item-img {
      width: 30%;
    }
  
    .filter-result-item-info-cont {
      width: 60%;
      justify-content: space-between;
    }
  
    .filter-result-item {
      justify-content: unset;
    }
  }
  
  @media screen and (min-width: 1024px) and (max-width: 1400px) {
    .filter-result-item {
      gap: 60px;
    }
  }