@media (min-width: 861px) {
  .menu-icon {
    display: none;
  }
  .submenu {
    position: absolute;
    left: 0;
    top: 110%;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
  }

  .submenu a {
    white-space: nowrap;
    transition: color 0.3s ease-in-out;
  }

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

  .dropdown {
    position: relative;
  }

  .dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    top: 99%;
  }
  .navigation-ul > li:not(:last-child) {
    margin-right: 60px;
  }
}
@media (max-width: 1450px) {
  .container,
  .container-big {
    max-width: 1300px;
  }
  .prime-location h2 {
    font-size: 140px;
  }
}

@media (max-width: 1400px) {
  .container,
  .container-big {
    max-width: 1200px;
  }
  .banner-content h1:not(.sub-text) {
    font-size: 70px;
  }
  .banner-content h1:not(.sub-text) span {
    font-size: 35px;
  }
  .buttons {
    margin-top: 25px;
  }
  .outline-button {
    margin-left: 15px;
  }
  .fill-button,
  .outline-button {
    min-width: 212px;
    padding: 10px 20px;
  }
  .banner-image .play-icon {
    left: -25px;
    max-width: 80px;
  }
  .banner-content p br {
    display: none;
  }
  .discover-title h2 {
    font-size: 70px;
    line-height: 64px;
  }
  .discover-title span {
    font-size: 30px;
  }
  .discover-list {
    column-gap: 40px;
  }
  .intersted {
    margin-top: 40px;
  }
  .intersted-content h3 {
    font-size: 40px;
  }
  .side-block-content h2 {
    font-size: 40px;
  }
  .side-block-content p {
    margin-bottom: 15px;
  }
  .prime-location h2 {
    font-size: 100px;
  }
  .footer-form {
    max-width: 530px;
  }
  .floor-plan h2 {
    font-size: 60px;
  }
  .floor-plan .sub {
    font-size: 25px;
  }
  .counter-block-inside .title {
    font-size: 20px;
  }
  .counter-block-list p {
    font-size: 18px;
  }
  .counter-block-list span {
    font-size: 45px;
  }
  .banner-content .sub-text,
  .floor-carousel .content h3,
  .counter-block-inside h2,
  .section-between-content h2 {
    font-size: 26px;
    line-height: 1.2;
  }
}
@media (max-width: 1200px) {
  body {
    font-size: 14px;
  }
  .container,
  .container-big {
    max-width: 94%;
  }
  .navigation-ul li:last-child .navigation-link {
    padding: 27px 30px;
  }
  .banner-content {
    width: 50%;
  }
  .side-block-content {
    padding-right: 30px;
  }
  .fill-button,
  .outline-button {
    min-width: 200px;
  }
  .intersted-content {
    right: 60px;
    bottom: 40px;
  }
  .footer-form {
    max-width: 100%;
  }
  .footer-form-side,
  .owner-information {
    width: 100%;
  }
  .footer-form-side h3,
  .owner-information .content h4 {
    font-size: 30px;
  }
  .footer-form-side h4 br {
    display: none;
  }
  .navigation-footer a:not(:first-child) {
    margin-left: 25px;
  }
  .social-icons li + li {
    margin-left: 15px;
  }
  .section-between-content .community {
    font-size: 60px;
  }

  .section-between-content .community span {
    font-size: 30px;
  }
}

@media (max-width: 860px) {
  .container,
  .container-big {
    overflow: hidden;
  }
  .submenu {
    margin-top: 15px;
  }
  .banner-image::after {
    display: none;
  }
  .banner-content h1:not(.sub-text) {
    font-size: 40px;
  }
  .banner-content h1:not(.sub-text) span {
    font-size: 25px;
  }
  .banner-image {
    width: 40%;
    padding-right: 0;
  }
  .fill-button,
  .outline-button {
    min-width: 180px;
    padding: 8px 15px;
  }
  .banner-image .main-image {
    margin-top: 15px;
  }
  .banner-image .play-icon {
    left: -20px;
    max-width: 50px;
    top: 40%;
  }
  .discover-title h2 {
    font-size: 40px;
    line-height: 1;
  }
  .discover-title span {
    font-size: 20px;
    margin-top: 5px;
  }
  .discover-list {
    column-gap: 20px;
  }

  .intersted::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 20%, rgb(255 255 255 / 0%) 100%);
}



  .link-button {
    margin: 15px auto 0 auto;
    padding: 10px 20px;
  }
  .intersted-content h3 {
    font-size: 30px;
  }
  .intersted-content {
    right: 0;
    bottom: 30px;
    text-align: center;
    z-index: 2;
    left: 0;
    margin: auto;
}
  .side-block-content h2 {
    font-size: 30px;
  }
  .prime-location h2 {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .submenu {
    display: none;
  }

  .navigation {
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    background: #000000;
    width: 100%;
    text-align: center;
    height: 0;
    z-index: 1;
    align-items: center;
    justify-content: center;
    row-gap: 25px;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: height 0.3s ease-in-out;
  }

  .navigation-link img {
    filter: invert();
  }

  .mobile-veiw .navigation {
    height: 100%;
  }

  .navigation-ul li:last-child .navigation-link {
    padding: 0 30px;
  }

  .submenu a,
  .navigation-link {
    font-size: 16px;
    padding: 0;
    width: fit-content;
    margin: auto;
    color: #ffffff;
  }
  .discover-list-image span {
    font-size: 16px;
  }
  .navigation-ul li {
    width: 100%;
  }
  .navigation-footer a:not(:first-child) {
    margin-left: 15px;
  }
  .pre-footer .bottom-options {
    flex-direction: column;
    row-gap: 15px;
  }
  .footer {
    background: #000;
    padding: 50px 0;
  }
  .owner-information {
    flex-direction: column;
    row-gap: 20px;
  }
  .owner-information .content {
    padding: 0;
    text-align: center;
    width: 100%;
  }
  .footer-form-side {
    text-align: center;
  }
  .facilty-list li {
    width: calc(100% / 3);
  }
  .facilty-list li {
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
  }
  .floor-plan h2 {
    font-size: 40px;
  }
  .floor-plan .sub {
    font-size: 18px;
  }
  .floor-plan {
    margin-top: 40px;
  }
  .floor-carousel .content h3 {
    margin-bottom: 15px;
  }
  .gallery-block {
    padding: 20px 0;
  }
  .owl-dots {
    margin-top: 30px;
  }
  .gallery-title h2 {
    font-size: 30px;
  }
  .section-between-content .community {
    font-size: 40px;
    line-height: 0.8;
  }

  .section-between-content .community span {
    font-size: 20px;
  }
  .gray-block .list {
    margin-top: 30px;
  }
  .banner-content .sub-text span {
    font-size: 20px;
  }
  .about-devloper-left h2 {
    font-size: 25px;
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .mobile-option {
    display: none;
  }
  .nav-logo{
    display: none;
  }
  .section-between-image img + img{
    display: none;
  }
}

@media (max-width: 767px) {

  picture.inner-bg {
    display: none !important;
  }
  .nav-logo{
    margin-bottom:50px;
  }
  .wg-banner,
  .hh-banner {
    background: #ffffff url(../images/mobile-banner.png) no-repeat;
    background-position: left 0 bottom 60px;
  }
  img.main-image-cv{margin-left: 0% !important;}
  .banner{
    background-size: cover;
  }

  .cs-banner{
    background: #ffffff url(../images/cs-banner.jpg) no-repeat;
    background-position: left 0 bottom 60px;
  }

  .index-banner{
    background: #ffffff url(../images/index-banner.jpg) no-repeat;
    background-position:bottom;
  }

  .dlpr-banner{
    background: #ffffff url(../images/dlpr-banner.jpg) no-repeat;
    background-position:bottom;
  }

  .navigation-ul li:not(:last-child) .navigation-link span::after {
    background:#ffffff;
  }

  .dlpr-banner .banner-image,
  .index-banner .banner-image{
    display: none;
  }

  .banner .banner-container {
    height: 100vh;
    align-content: space-between;
  }

  .play-icon,
  .banner-content p + .options {
    display: none;
  }
  .thank .content {
    padding: 30px;
  }
  section.thank {
    height: 100vh;
  }

  .thank>img {
    width: 100%;
    background-size: cover;
    position: absolute;
    bottom: 0;
}

  .gallery-title {
    justify-content: center;
  }

  .submit-details-inside {
    flex-direction: column-reverse;
    padding-top: 50px;
  }

  .accordion-item:not(:first-child) {
    padding-top: 15px;
  }

  .accordion-item:not(:last-child) {
    padding-bottom: 15px;
  }

  .accordion-item-title {
    font-size: 18px;
  }

  .about-devloper-left {
    text-align: center;
  }

  .about-devloper-left,
  .about-devloper-right {
    width: 100%;
  }

  .thank .content h5 {
    font-size: 25px;
  }
  .banner-image {
    min-height: auto;
    justify-content: center;
  }
  .floor-carousel .item .content,
  .floor-carousel .item .image {
    width: 100%;
  }
  .gallery-buttons .fill-button {
    margin-left: 10px;
  }
  .gallery-title::after {
    display: none;
  }
  .header {
    padding: 10px 0;
  }
  .container,
  .container-big {
    max-width: 96%;
  }
  .banner-content,
  .banner-image {
    width: 100%;
  }
  .banner-image .play-icon {
    left: 50%;
  }
  .discover-list {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }
  .intersted > img {
    min-height: 380px;
    object-fit: cover;
    object-position: center;
  }
  .side-block-image,
  .side-block-content {
    width: 100%;
    padding: 0;
    text-align: center;
  }
  .buttons {
    justify-content: center;
  }


/* buttons  */
.banner .buttons {
    display: inline-block;

}
.banner .outline-button {
    margin-left: 0px !important;

}

.buttons a {
    width: 265px !important;
    margin-top: 2%;
}
/**/
  .banner-content {
    padding-top: 50px;
  }
  .banner-content,
  .section-between-content {
    text-align: center;
  }

  .section-between-content .community span {
    width: 100%;
    display: block;
    margin-top: 5px;
  }

  .prime-location h2 {
    font-size: 35px;
  }
  .dubai-show,
  .prime-location {
    margin-top: 50px;
  }
  .fill-button,
  .outline-button {
    min-width: auto;
  }
  .outline-button {
    margin-left: 10px;
  }
  .fill-button img,
  .outline-button img {
    margin-left: 5px;
    max-width: 14px;
  }
  .discover-title h2 {
    font-size: 35px;
  }
  .scroller {
    display: none;
  }
  .submit-details-left,
  .submit-details-right {
    width: 100%;
  }
  .submit-details-left > img {
    height: 130px;
    width: 100%;
    object-fit: cover;
    object-position: left 0 bottom -150px;
  }

  .submit-details-right h3 {
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 5px;
  }
  .submit-details-right {
    padding: 0 20px 40px 20px;
    text-align: center;
  }
  .submit-details-right h4 {
    font-size: 18px;
    line-height: 1.2;
  }
  .submit-details-form {
    margin-top: 20px;
    row-gap: 10px;
  }
  .submit-details-button {
    margin-top: 10px;
  }
  .submit-details.fancybox-content {
    padding: 0;
  }
  .fancybox-slide--html .submit-details .fancybox-close-small {
    right: 10px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #fff;
  }
  .submit-details-left {
    border-radius: 0;
  }
  .submit-details-left .text {
    width: 80%;
  }
  .submit-details-button {
    padding: 10px 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .submit-details-list span {
    font-size: 12px;
  }
  .submit-details-list span br {
    display: none;
  }
  .submit-details-list {
    padding: 30px 0;
    row-gap: 25px;
    flex-direction: row;
  }
  .submit-details-list li{
    padding: 0 5px;
    width: calc(100% / 3);
  }

  .counter-block-list span {
    font-size: 35px;
  }
  .counter-block-list p {
    font-size: 16px;
  }
  .footer-form-side h4,
  .owner-information .content h5 {
    font-size: 18px;
  }
  .section-between-image,
  .section-between-content {
    width: 100%;
  }
  .counter-block-inside h2,
  .section-between-content h2 {
    font-size: 26px;
  }
  .counter-block-list li {
    width: 100%;
  }
  .counter-block-list li:nth-child(2) {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-sec);
    border-bottom: 1px solid var(--color-sec);
  }
  .counter-block-inside .star {
    position: initial;
    margin-bottom: 30px;
    width: 60px;
  }
  .counter-block-inside {
    padding: 0 30px 30px 30px;
  }
  .whatsapp {
    width: 50px;
    right: 20px;
    bottom: 20px;
  }
  .gallery-carousel button {
    --size: 40px;
    --side: 20px;
    margin-top: -20px;
  }
  .gallery-carousel .owl-item,
  .gallery-carousel .item {
    overflow: hidden;
    border-radius: 25px;
  }
  .header .container-big > a {
    margin: auto;
    position: relative;
    right: -20px;
  }
  .banner-logo {
    max-width: 150px;
  }
  .navigation-footer {
    display: none;
  }
  .footer {
    padding: 50px 0 20px 0;
  }
  .circle-group{
    display: none;
  }

  .section-between-image img + img{
    margin:40px auto 0 auto;
  }
  .section-between-image{
    text-align: center;
  }
  .counter-block-inside{background:#000 !important; }
}

@media (max-width: 600px) {
  .facilty-list li {
    width: calc(100% / 2);
  }
  .gray-block .list img {
    width: 100%;
  }
}