/* Home Page */
/* Hero-section */

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif !important;
}

body,html {
    overflow-x: hidden;
}


/* Header css start here */
.header {
  padding: 12px 120px;
  font-family: sans-serif;
}

/* Navbar Container */
.navbar {
  display: flex;
  align-items: center;
}

/* Logo */
.logo img {
  width: 65px;
  height: 65px;
  border-radius: 8px;
}

/* Menu */
.nav-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  flex: 1;
  padding-left: 20px;
}

.nav-menu a {
  text-decoration: none;
  color: #2b2b2b;
  font-size: 16px;
  transition: 0.3s;
  letter-spacing: 0.2px;
  font-family: sans-serif;
}

.nav-menu a:hover {
  color: #2a8a84;
}

/* Right Buttons */
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login {
  text-decoration: none;
  color: #2b2b2b;
}

.signup {
  background: #1C8080;
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  text-decoration: none;
  margin-left: 25px;
}

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

/* Mobile Menu Button */
.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {

  .header {
    padding: 12px 15px;
  }

  nav.navbar {
    justify-content: space-between;
 }

  .menu-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 20px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-right {
    display: none;
  }
}
/* Header css end here */



h2{
    font-family: sans-serif;
    font-size: 35px;
    font-weight: 500;
}

h3{
    font-size: 28px;
    font-weight: 500;
}

p {
    font-size: 16px;
    letter-spacing: 0.2px;
    line-height: 28px;
    font-family: sans-serif;
}

.global-btn {
    padding: 15px 25px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin: 0;
    background-color: #1C8080;
    color: #fff;
}

section.section-hero {
    padding: 0px 20px;
}

.hero {
    background: linear-gradient(135deg, #D8EFEF, #f3f3f3);
    padding: 100px 20px 185px;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: sans-serif;
    border-radius: 20px;
}

.hero h1 {
    font-size: 50px;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 40px;
}

.hero h1 span {
    color:#1C8080;
}

.search-bar {
    max-width: 945px;
    margin: auto;
    display: flex;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.tabs {
    display: flex;
    flex: 1;
    background: #D8EFEF;
    border: 1px solid #1C8080;
    padding: 15px;
    gap: 20px;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 1;
    border-radius: 25px 0px 0px 25px;
    align-items: center;
}

.tabs span {
    color: #1C8080;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 0.2px;
}

.search-btn {
    background: #1C8080;
    color: #fff;
    padding: 18px 40px;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.hero-actions {
    margin-top: 40px;
    z-index: 1;
    position: relative;
}

.hero-actions button {
    padding: 15px 25px;
    border: none;
    margin: 5px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.owner {
    background: #1C8080;
    color: #fff;
}

.agent {
    background: #2b2b2b;
    color: #fff;
}

.city {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.city img {
    width: 85%;
    height: 345px;
}


/* Video-section */
.video-section {
    padding: 80px 100px;
}

.video-wraper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 55px;
}

video {
    width: 690px;
    border-radius: 20px;
    z-index: 1;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.video-headline {
    width: 50%;
}

.video-left-div {
    width: 65%;
    position: relative;
}

 .video-left-div::before {
    content: "";
    position: absolute;
    bottom: -15px;
    right: -22px;
    width: 95%;
    height: 95%;
    background: #1C8080;
    border-radius: 20px;
    z-index: -1;
}


/* Apartments Grid Section 3 */
.property-grid-section {
    padding: 0px 100px 80px 100px;
}

.property-grid-section h2 {
    text-align: center;
    margin-bottom: 15px;
}

.property-grid-section p {
    text-align: center;
    width: 690px;
    margin: auto;
}

.main-tab {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

button.main-btn.active {
    border: none;
    background-color: #fff;
    font-size: 25px;
    border-bottom: 5px solid #1C8080;
}

button.main-btn {
    background-color: #fff;
    font-size: 25px;
    border: none;
    border-bottom: 2px solid #1C8080;
    padding-left: 25px;
}

.tab-buttons {
    display: flex;
    /*justify-content: space-between;*/
    border: 1px solid #1c8080;
    border-radius: 15px;
    overflow: hidden;
    width: 985px;
    margin: 30px auto;
}

button.tab-btn.active {
    background-color: #1C8080;
    color: #fff;
}

button.tab-btn {
    font-size: 17px;
    padding: 25px 7px;
    width: 191px;
    border: none;
    background-color: #fff;
    border-left: 1px solid #1C8080;
    color: #1C8080;
}
.image-card {
    height: 225px;
    background-image: url(../images/luxury-penthouse-bedroom-panoramic-windows-city-skyline-view-comfortable-elegant-bed.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    color: #fff;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    padding: 20px;
}

span.badges {
    width: 75px;
    color: #2b2b2b;
    background-color: #ffffffa6;
    padding: 6px 6px;
    text-align: center;
    border-radius: 5px;
    font-size: 13px;
    box-shadow: 3px 3px 3px #00000069;
}

.icon-bottom img {
    width: 30px;
}

.property-card {
    border: 1px solid #00000026;
    border-radius: 10px;
    overflow: hidden;
    width: 31.33%;
    box-shadow: 0px 4px 15px #0000002e;
}

a{
    text-decoration: none;
}

.property-feature {
    display: flex;
    align-items: center;
    padding: 0px 15px;
    margin-top: 30px;
}

.property-detail-div {
    padding: 0px 15px;
}

.feature img {
    width: 18px;
}

span.feature-value {
    font-size: 14px;
    margin-top: 3px;
    color: #2b2b2b;
}

.feature {
    display: flex;
    gap: 5px;
    align-items: center;
}

span.boldvalue {
    color: #1C8080;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
}

h3.property-heading {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #2b2b2b;
}
span.value {
    color: #2b2b2b;
}

.seprater-div {
    padding: 0px 15px;
}

.property-card-div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

hr.seprater {
    height: 1px;
    background-color: #00000021;
    border: none;
    margin-top: 12px;
}

.property-contact-div {
    display: flex;
    align-items: center;
    padding: 5px 15px 15px 15px;
    gap: 5px;
}

.property-contact-div img {
    width: 18px;
    display: block;
}

.btn-call , .btn-email{
    border: 1px solid #1C8080;
    border-radius: 5px;
    background-color: #D8EFEF;
    padding: 8px 5px;
    width: 40%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    color: #1C8080;
}

.btn-whatsapp {
    border: 1px solid #1C8080;
    border-radius: 5px;
    background-color: #D8EFEF;
    padding: 8px 5px;
    width: 20%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.project-btn-div{
    text-align: center;
    margin-top: 35px;
}




/* Timeline Section 4 */

section.steps-section h2 {
    text-align: center;
}

.steps-section {
    padding: 0px 100px 0px 100px;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 80px auto;
}

.line {
    position: absolute;
    left: 50%;
    top: 65px;
    width: 3px;
    height: 70%;
    background: #1C8080;
    transform: translateX(-50%);
}

.row {
  position: relative;
  width: 50%;
}

.row.left {
  left: 0;
}

.row.right {
  left: 50%;
}

.card {
  background: #ffffff;
    padding: 25px;
    border-radius: 25px;
    position: relative;
    color: #2b2b2b;
    box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 75px;
    border: 1px solid #0000001f;
    width: 395px;
}

.timeline-content p {
    font-size: 15px;
    line-height: 22px;
}

img.right-arrow {
    margin-left: 20px;
}

.card.right-side {
    margin-left: 155px;
    margin-right: 0px;
}

.timeline-content span {
    font-size: 18px;
}

.icon img {
    width: 75px;
    margin-left: -60px;
}

.row.right .icon {
  left: auto;
  right: -40px;
}

.step img {
    width: 140px;
}

.step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.row.left .step {
  right: -42px;
}

.row.right .step {
  left: -60px;
}

.timeline-content p {
    margin-top: 15px;
}

.cta {
  text-align: center;
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px) {

  .line {
    left: 20px;
    top: 77px;
  }

  .row {
    width: 100%;
    padding-left: 70px;
  }

  .row.left,
  .row.right {
    left: 0;
  }

  .step {
    left: 0 !important;
  }

  .icon {
    left: -10px !important;
  }

  .row::after {
    left: 20px;
  }
}


/* section-5 */

.security-section h2 {
    text-align: center;
    width: 510px;
    margin: auto;
}

.left-img-security img {
    width: 600px;
    display: block;
}

.security-box-wrap {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-top: 15px;
}

section.security-section {
    padding: 0px 80px;
}

.icon-div img{
    width: 45px;
    display: block;
}

.icon-content-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.box-haeding {
    font-size: 20px;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

.icon-related-content p {
    margin-top: 5px;
    font-size: 15px;
    line-height: 20px;
}

.icon-content-box {
    margin-bottom: 5px;
}



/* Table Section */
.container-table {
    width: 1000px;
    margin: auto;
}
.table {
    padding: 0px 80px;
}

.container-table h2 {
    text-align: center;
}


/* Wrapper */
.table-wrapper {
  width: 100%;
  overflow-x: auto; /* smooth scroll on tablet */
  -webkit-overflow-scrolling: touch;
}

/* Table */
.responsive-table {
    width: 85%;
    min-width: 900px;
    border-collapse: collapse;
    background: #96969626;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
}

/* Header */
.responsive-table thead {
  background: #D8EFEF;
}

.responsive-table th {
  padding: 16px;
  text-align: left;
  border: 1px solid #999;
  white-space: nowrap;
}

/* Body */
.responsive-table td {
  padding: 16px;
  border: 1px solid #999;
}

.responsive-table td:first-child {
  font-weight: 600;
}

/* Hover effect (desktop smoothness) */
.responsive-table tbody tr:hover {
  background: #c7c7c7;
  transition: 0.3s;
}
 section.table h2 {
    text-align: center;
}

/* =========================
   📱 Tablet (Smooth Scroll)
========================= */
@media (max-width: 1024px) {
  .table-wrapper {
    overflow-x: auto;
  }

  .responsive-table {
    min-width: 800px;
  }
}

/* =========================
   📱 Mobile (Clean Stack)
========================= */
@media (max-width: 991px) {
    
/*    .responsive-table td:first-child {*/
/*    font-weight: 600;*/
/*    background-color: #D8EFEF;*/
/*}*/
/*  .responsive-table {*/
/*    min-width: 100%;*/
/*  }*/

/*  .responsive-table thead {*/
/*    display: none;*/
/*  }*/

/*  .responsive-table,*/
/*  .responsive-table tbody,*/
/*  .responsive-table tr,*/
/*  .responsive-table td {*/
/*    display: block;*/
/*    width: 100%;*/
/*  }*/
 

/*  .responsive-table tr {*/
/*    margin-bottom: 0px;*/
/*    border-radius: 10px;*/
/*    overflow: hidden;*/
/*    background: #d3d3d300;;*/
/*  }*/

/*  .responsive-table td {*/
/*    padding: 14px;*/
/*    text-align: left;*/
/*    border: none;*/
/*    border-bottom: 1px solid #aaa;*/
/*    position: relative;*/
/*  }*/

/*  .responsive-table td::before {*/
/*    content: attr(data-label);*/
/*    display: block;*/
/*    font-weight: 600;*/
/*    margin-bottom: 5px;*/
/*    color: #2b2b2b;*/
/*  }*/
}

/*.table-wrapper {*/
/*    overflow-x: auto;*/
/*}*/

/*table {*/
/*    width: 100%;*/
/*    border-collapse: collapse;*/
    /*min-width: 700px; */
/*}*/

/*th, td {*/
/*    padding: 15px 15px;*/
/*    text-align: left;*/
/*    border: 1px solid #ddd;*/
/*}*/

/*th {*/
    /*background-color: #D8EFEF; */
/*    font-weight: bold;*/
/*    color: #2b2b2b;*/
    /*white-space: nowrap; */
/*}*/

/*tr:nth-child(even) {*/
/*    background-color: #f9f9f9;*/
/*}*/

/*tr:hover {*/
/*    background-color: #f1f1f1;*/
/*}*/
.table {
  padding: 60px 20px;
  background: #f8fafc;
}

.table h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 32px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #fff;
}

.responsive-table th,
.responsive-table td {
  padding: 18px;
  border: 1px solid #ooo;
  text-align: left;
  white-space: nowrap;
}

.responsive-table th {
  background: #D8EFEF;
  color: #2b2b2b;
  font-weight: 600;
}

/* First Column Freeze */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  min-width: 220px;
  font-weight: 600;
}

/* Sticky Header + First Column */
thead .sticky-col {
  background: #0f172a;
  color: #fff;
  z-index: 5;
}

/* Mobile */
@media (max-width: 768px) {
  .responsive-table {
    min-width: 850px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 14px;
    font-size: 14px;
  }

  .sticky-col {
    min-width: 180px;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    h2 {
        font-size: 1.5em;
    }

    th, td {
        padding: 10px;
        font-size: 0.9em;
    }
}

/*@media (max-width: 480px) {*/
/*    th, td {*/
/*        padding: 8px;*/
/*        font-size: 0.8em;*/
/*    }*/
/*}*/




/* Testimonial section */
.testimonial-section {
    padding: 80px 100px 0px 100px;
}

.testimonial-content-box h2 {
    text-align: center;
}

.testimonial-grid {
    display: flex;
    gap: 15px;

}

.testimonial-card {
    border: 1px solid #00000005;
    border-radius: 10px;
}

.testimonial-heading-div {
    background-color: #2b2b2b;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
}

.testimonial-desc p {
    margin: 0;
}

.testimonial-desc {
    background-color: #D8EFEF;
    padding: 30px 15px 30px 15px;
    border-radius: 0px 0px 10px 10px;
}



/* FAQ Section */

section.faq h2 {
    text-align: center;
}

.faq {
  max-width: 965px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  border-radius: 40px;
}

.faq-question {
    width: 100%;
    padding: 18px 25px;
    outline: none;
    background: #ffffff;
    color: #111;
    font-size: 16px;
    text-align: left;
    border-radius: 40px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
}

.faq-item.active .faq-question {
  background: #D8EFEF;
  border: 1px solid #D8EFEF;
}

.icon {
  font-size: 20px;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0 25px;
}

.faq-item.active .faq-answer {
  max-height: 150px;
  padding: 15px 25px 20px;
}



/* Footer-CTA section */
.cta-content-div {
    height: 500px;
    background-image: url("../images/freepik__luxury-dubai-apartment-view-mother-father-child-on__39476.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.cta-content-div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

section.upper-footer {
    padding: 30px 20px 80px 20px;
}

.cta-content {
    width: 800px;
    background-color: #ffffff61;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    backdrop-filter: blur(6px);
}

.cta-img img {
    width: 215px;
}

.left-box h2 {
    color: #2b2b2b;
    margin: 0;
}

.left-box p {
    color: #2b2b2b;
}

.cta-img {
    margin-top: -70px;
    margin-right: 30px;
    margin-bottom: -80px;
}

.left-box {
    padding: 30px 0px 30px 30px;
}

p.cta-subheading {
    margin-bottom: 0;
}



/* Footer css start here */
.footer {
    background-color: #2b2b2b;
    padding: 60px 80px;
}

ul.footer-ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}


li.footer-links {
    list-style: none;
    color: #fff;
    cursor: pointer;
}

.footer-icons-div img {
    width: 50px;
}

.footer-icons-div {
    text-align: center;
    margin: 15px 0px;
}

.footer-images img {
    width: 170px;
}

.footer-images {
    text-align: center;
}

ul.bottom-footer-links {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    padding: 0;
}

span.footer-copyright {
    color: #fff;
}

.copyright-content {
    text-align: center;
    margin-top: 20px;
}

li.bottom-links {
    list-style: none;
    color: #fff;
    cursor: pointer;
}




/*Responsive css*/
@media screen and (min-width:360px) and (max-width:768px){
    p {
        font-size: 15px;
        line-height: 22px;
    }
    section.section-hero {
        padding: 0px 15px;
    }
    .hero h1 {
        font-size: 28px;
    }
    .search-bar {
        flex-direction: column;
        border-radius: 20px;
        position: relative;
        z-index: 9999;
    }
    .tabs {
        flex-direction: column;
        border-radius: 20px 20px 0px 0px;
        padding: 0;
        gap:0;
    }
    .video-section {
        padding: 40px 15px;
    }
    .hero {
       padding: 30px 20px 40px;
    }
    .city img {
        width: 100%;
        height: 245px;
    }
    video {
        width: 100%;
    }
    .video-wraper {
        flex-direction: column-reverse;
        text-align: center;
        gap: 0;
    }
    .video-left-div {
        width: 100%;
    }
    .video-headline {
        width: 100%;
    }
    .property-grid-section {
        padding: 0px 15px 40px 15px;
    }
    .video-left-div::before {
        bottom: 5px;
        right: 5px;
    }
    .property-grid-section p {
        width: 100%;
    }
    .tab-buttons {
        width: 100%;
        flex-direction: column;
    }
    button.tab-btn {
        padding: 15px 7px;
        width: 100%;
        border-bottom: 1px solid #1C8080;
    }
    .property-card-div.properties {
        flex-direction: column;
    }
    .property-card {
        width: 100%;
    }
    .steps-section {
        padding: 0px 15px 0px 15px;
    }
    section.security-section {
        padding: 0px 15px;
    }
    .security-box-wrap {
        flex-direction: column;
        gap: 0;
    }
    .left-img-security img {
        width: 100%;
        display: block;
    }
    .table {
        padding: 0px 15px;
    }
    .testimonial-section {
        padding: 40px 15px 0px 15px;
    }
    .testimonial-grid {
        flex-direction: column;
    }
    section.faq {
        max-width: 100%;
        padding: 0px 15px;
    }
    .left-box {
        padding: 45px 0px 10px 10px;
    }
    .cta-content {
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
    }
    .cta-content-div {
        padding: 15px;
    }
    .cta-img {
        margin-top: -60px;
        margin-right: 7px;
        margin-bottom: -40px;
    }
    .cta-img img {
        width: 80px;
    }
    .faq-item.active .faq-answer {
        max-height: 100%;
    }
    p.cta-subheading {
        margin-bottom: 0;
        width: 230px;
    }
    section.upper-footer {
        padding: 0px 15px 40px 15px;
    }
    .tabs span {
        border-bottom: 1px solid;
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer {
        padding: 30px 15px;
    }
    section.steps-section.desktopview {
        display: none;
    }
    .step img {
        width: 60px;
        margin-bottom: 90px;
    }
    .card {
        padding: 15px 10px;
        margin-right: 0;
        width: 77%;
    }
    img.right-arrow {
        margin-left: 0px;
    }
    .row {
        width: 100%;
        padding-left: 59px;
        margin-top: 30px;
    }
    .card.right-side {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 25px;
    }
    .icon img {
        width: 45px;
        margin-left: -33px;
    }
    .timeline {
        max-width: 100%;
        width: 100%;
        margin: 40px auto;
    }
    ul.footer-ul {
        flex-wrap: wrap;
    }
    .footer-icons-div {
        margin: 15px 0px;
        display: flex;
        justify-content: center;
        gap: 12px;
    }
    .footer-icons-div img {
        width: 35px;
    }
    ul.bottom-footer-links {
        margin-top: 16px;
        padding: 0;
    }
    .container-table {
        width: 100%;
    }
    .security-section h2 {
        width: 100%;
    }
    table {
        min-width: 100%;
    }
     button.main-btn.active {
        font-size: 18px !important;
    }
    button.main-btn{
        font-size: 18px !important;
    }

}




@media (min-width: 769px) and (max-width: 1024px){
    /*section.steps-section.duplicateSteps {*/
    /*    display: none;*/
    /*}*/
     p {
        font-size: 15px;
        line-height: 22px;
    }
    section.section-hero {
        padding: 0px 15px;
    }
    .hero h1 {
        font-size: 28px;
    }
    .search-bar {
        flex-direction: column;
        border-radius: 20px;
        position: relative;
        z-index: 9999;
    }
    .tabs {
        flex-direction: column;
        border-radius: 20px 20px 0px 0px;
        padding: 0;
        gap:0;
    }
    .video-section {
        padding: 40px 15px;
    }
    .hero {
       padding: 30px 20px 40px;
    }
    .city img {
        width: 100%;
        height: 245px;
    }
    video {
        width: 100%;
    }
    .video-wraper {
        flex-direction: column-reverse;
        text-align: center;
        gap: 0;
    }
    .video-left-div {
        width: 100%;
    }
    .video-headline {
        width: 100%;
    }
    .property-grid-section {
        padding: 0px 15px 40px 15px;
    }
    .video-left-div::before {
        bottom: 5px;
        right: 5px;
    }
    .property-grid-section p {
        width: 100%;
    }
    .tab-buttons {
        width: 100%;
        flex-direction: column;
    }
    button.tab-btn {
        padding: 15px 7px;
        width: 100%;
        border-bottom: 1px solid #1C8080;
    }
    .property-card-div.properties {
        flex-direction: column;
    }
    .property-card {
        width: 100%;
    }
    .steps-section {
        padding: 0px 15px 0px 15px;
    }
    section.security-section {
        padding: 0px 15px;
    }
    .security-box-wrap {
        flex-direction: column;
        gap: 0;
    }
    .left-img-security img {
        width: 100%;
        display: block;
    }
    .table {
        padding: 0px 15px;
    }
    .testimonial-section {
        padding: 40px 15px 0px 15px;
    }
    .testimonial-grid {
        flex-direction: column;
    }
    section.faq {
        max-width: 100%;
        padding: 0px 15px;
    }
    .left-box {
        padding: 45px 0px 10px 10px;
    }
    .cta-content {
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
    }
    .cta-content-div {
        padding: 15px;
    }
    .cta-img {
        margin-top: -60px;
        margin-right: 7px;
        margin-bottom: -40px;
    }
    .cta-img img {
        width: 80px;
    }
    .faq-item.active .faq-answer {
        max-height: 100%;
    }
    p.cta-subheading {
        margin-bottom: 0;
        width: 230px;
    }
    section.upper-footer {
        padding: 0px 15px 40px 15px;
    }
    .tabs span {
        border-bottom: 1px solid;
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer {
        padding: 30px 15px;
    }
    section.steps-section.desktopview {
        display: none;
    }
   
    .card {
        padding: 15px 10px;
        margin-right: 0;
        width: 72%;
    }
    img.right-arrow {
        margin-left: 0px;
    }
    .row {
        width: 100%;
        padding-left: 78px;
        margin-top: 30px;
    }
    .card.right-side {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 25px;
    }
    .icon img {
        width: 45px;
        margin-left: -33px;
    }
    .timeline {
        max-width: 100%;
        width: 100%;
        margin: 40px auto;
    }
    ul.footer-ul {
        flex-wrap: wrap;
        gap: 5px;
    }
    .footer-icons-div {
        margin: 15px 0px;
    }
    .footer-icons-div img {
        width: 35px;
    }
    ul.bottom-footer-links {
        margin-top: 16px;
        padding: 0;
    }
    .container-table {
        width: 100%;
    }
    .security-section h2 {
        width: 100%;
    }
    table {
        min-width: 100%;
    }
   

}

@media screen and (min-width:769px) and (max-width:1024px){
    .line {
        left: 20px;
        top: 77px;
    }
    .step img {
        width: 60px;
        margin-bottom: 90px;
    }
    .card {
        padding: 15px 10px;
        margin-right: 0;
        width: 80%;
    }
    .card.right-side {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 25px;
    }
    .steps-section {
        padding: 0px 15px 0px 15px;
    }
    .row {
        width: 100%;
        padding-left: 59px;
        margin-top: 30px;
    }
    .step {
        left: 0 !important;
    }
    .row.left, .row.right {
        left: 0;
    }
    
    .list-div-left{        
        margin-bottom: -60px;
    }
}


@media (min-width: 1200px) and (max-width: 1440px){
    section.steps-section.duplicateSteps {
        display: none;
    }

}

@media (min-width: 1441px) and (max-width: 1800px){
    section.steps-section.duplicateSteps {
        display: none;
    }

}







/* Footer css end here */


/* Single Property Page Css */
.slider-div {
    display: flex;
    gap: 15px;
}

section.hero-slider-section {
    padding: 0px 20px;
}

.left-slider-img img {
    width: 100%;
    height: 500px;
}

.left-slider-img{
    width: 65%;
}

.right-side-images {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.right-side-images img {
    width: 100%;
    height: 253px;
    border-radius: 15px;
}
.slider-div-wrape {
    display: flex;
    gap: 15px;
}

.property-content-section{
    display: flex;
    gap: 15px;
    padding: 30px 20px;
}

.left-bar {
    width: 65%;
}

.right-bar {
    width: 35%;
}

.property-intro {
    background-color: #F0EFEF;
    border-radius: 20px;
    padding: 20px;
}

.property-value-division h4 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.property-value-division {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.highlighted-value {
    color: #1C8080;
    font-size: 28px;
}

.prop-type p {
    margin: 0;
    color: #1C8080;
    font-size: 15px;
}

.percent-value span {
    background-color: #D8EFEF;
    font-size: 14px;
    padding: 5px 17px;
}

.pricing-div span {
    background-color: #D8EFEF;
    font-size: 14px;
    padding: 5px 17px;
}

.property-overview-div {
    margin-top: 30px;
    padding: 20px;
    border-radius: 20px;
    background-image: linear-gradient(216deg, #D8EFEF, transparent);
}

.prop-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.propertyDiv span {
    background-color: #1C8080;
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 5px 20px;
    border-radius: 5px;
}

.propertyDiv{
    text-align: right;
}

.prop-type-section p {
    color: #1C8080;
    font-size: 12px;
    text-align: center;
    margin: 5px 0px;
}

.prop-heading h3 {
    font-size: 28px;
    font-weight: 500;
    margin: 0;
}
.property-feature-type {
    display: flex;
}
.overview {
    margin-top: 20px;
}
.overview span {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}
.overview p {
    margin: 7px 0px 0px 0px;
    font-size: 16px;
}
.features {
    padding: 25px 0px;
}
.features span {
    font-size: 24px;
    font-weight: 500;
}
li.feature-list {
    list-style: none;
    font-size: 15px;
    padding: 4px 0px;
}
ul.feature-ul {
    padding: 0;
}
.feature-list {
    display: flex;
    gap: 50px;
}
.amenities-div h3 {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 20px;
}
.amenities-box-wrap {
    display: flex;
    gap: 35px;
}

.left-amenities-div , .right-amenities-div {
    box-shadow: 5px 5px 5px #D8EFEF;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #d8efef52;
    width: 300px;
}
.left-amenities-div-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0px;
}
.community-amenities-div {
    padding: 35px 0px;
}
.amenity-type {
    display: flex;
    gap: 10px;
}
span.amenitiy-box {
    background-color: #EEEEEE;
    width: 105px;
    text-align: center;
    padding: 25px 7px;
    font-size: 14px;
}
span.amenitiy-box-more {
    width: 105px;
    text-align: center;
    padding: 25px 7px;
    font-size: 14px;
    border: 2px solid #EEEEEE;
}
.location-div {
    border: 1.2px solid #D8EFEF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    width: 90%;
}
.investment-content{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
span.investment-type {
    background-color: #1C8080;
    color: #fff;
    font-size: 13px;
    padding: 6px 5px;
    border-radius: 5px;
    width: 45%;
    text-align: center;
}
.right-side-highlighted-content {
    background-image: linear-gradient(145deg, #D8EFEF, transparent);
    padding: 25px;
    border-radius: 0px 20px 20px 0px;
    text-align: center;
    width: 35%;
}
.left-side-location-div {
    padding: 20px 0px 20px 20px;
    width: 65%;
}
.plans-div {
    background-color: #fff;
    padding: 18px 12px;
    border-radius: 15px;
}
span.center-content {
    color: #1C8080;
    font-size: 18px;
}
.plans-div p , .mortgage-div p{
    font-size: 15px;
    line-height: 23px;
}
.mortgage-div {
    margin-top: 25px;
}
.property-cta-div {
    height: 265px;
    background-image: url(../images/property_cta_image.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: end;
    margin: 35px 0px;
    border-radius: 20px;
    width: 90%;
}
.property-cta-content {
    width: 465px;
    background-color: #ffffffa8;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.property-cta-content h4 {
    font-size: 28px;
    margin: 0 0 10px;
    font-weight: 500;
}
span.cta-subtitle {
    font-size: 18px;
    font-weight: 500;
}
.property-cta-content p {
    width: 320px;
    font-size: 15px;
    line-height: 20px;
}
button.global-btn.cta-btns {
    background-color: #fff;
    color: #1C8080;
}
.cta-btn-group-div {
    display: flex;
    gap: 10px;
}
.right-advertisement-poster-image {
    height: 435px;
    background-image: url(../images/poster_image.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
.advertisement-content-div {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    width: 313px;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
}
span.advertisement-title {
    color: #fff;
    font-size: 22px;
}
.advertisement-content-div p {
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    font-family: system-ui;
    font-weight: 200;
}
.right-single-img img {
    width: 100%;
    border-radius: 10px;
    height: 385px;
}
.right-single-img {
    margin-top: 30px;
}
.proprty-right-cta {
    background-color: #D8EFEF;
    padding: 20px;
    border-radius: 15px;
    margin-top: 15px;
}
.proprty-right-cta h4 {
    color: #1C8080;
    font-size: 20px;
    margin: 0;
    font-weight: 400;
}
.proprty-right-cta p {
    font-size: 15px;
    line-height: 22px;
    font-family: system-ui;
}
.property-container {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #0000002b;
    border-radius: 10px;
    padding: 23px 13px;
    margin: 15px 0px;
}
.propImage img {
    width: 165px;
    height: 145px;
}
.propImage {
    border-right: 1px solid #00000026;
    height: 125px;
    display: flex;
    align-items: center;
    padding-right: 20px;
    text-align: center;
}
.property-div-section {
    margin: 15px 0px;
}
span.related-property-headline {
    font-size: 20px;
}
.related-property-div {
    margin-top: 30px;
}
.divPrice {
    margin-top: 20px;
}

span.value {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}



/*Single Property detail Responsive css */
@media screen and (min-width:360px) and (max-width:768px){
    .slider-div-wrape {
        flex-direction: column;
    }
    .slider-div {
        width: 100%;
    }
    .right-side-images {
        width: 100%;
        flex-direction: row;
    }
    .img-bottom-div {
        width: 50%;
    }
    .img-upper-div {
        width: 50%;
    }
    section.property-content-section {
        flex-direction: column;
        padding: 30px 15px;
    }
    .left-bar {
        width: 100%;
    }
    .amenity-type {
        flex-wrap: wrap;
    }
    .amenities-box-wrap {
        flex-direction: column;
        gap: 15px;
    }
    .location-div {
        flex-direction: column;
        width: 100%;
    }
    .left-side-location-div {
        width: 100%;
        text-align: center;
        padding: 0px 0px 25px;
    }
    .right-bar {
        width: 100%;
    }
    .right-advertisement-poster-image {
        height: 344px;
    }
    .advertisement-content-div {
        border-radius: 10px;
        padding: 20px 10px;
    }
    .right-single-img img {
        height: 225px;
    }
    .propImage img {
        width: 100px;
        height: 100px;
    }
    .property-container {
        padding: 12px;
        gap: 10px;
    }
    .propImage {
        padding-right: 14px;
        height: 110px;
    }
    .feature img {
        width: 15px;
    }
    span.feature-value {
       font-size: 13px;
    }
    .property-cta-content {
        width: 295px;
        text-align: center;
        margin: auto;
        border-radius: 15px;
    }
    .property-cta-div {
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
    .right-side-images img {
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }
    section.hero-slider-section {
        padding: 0px 15px;
    }
    span.amenitiy-box {
        padding: 20px 4px;
        font-size: 14px;
    }
    span.amenitiy-box-more {
       padding: 20px 2px;
    }
    .investment-content {
       gap: 5px;
       width: 290px;
       margin: auto;
    }
    .right-side-highlighted-content {
        width: 100%;
        border-radius: 0px 0px 20px 20px;
        padding: 30px 0px;
    }
    span.investment-type{
        padding: 6px 4px;
    }
    .cta-btn-group-div {
        justify-content: center;
    }
    .property-cta-content p {
       width: 100%;
    }
    .slider-arrow {
        width: 25px;
        height: 25px;
        font-size: 20px;
    }
    .slider-dot {
        width: 1px;
        height: 11px;
    }
    .property-intro {
        padding: 20px 10px;
    }
    .property-value-division h4{
        font-size: 16px;
    }
    span.highlighted-value {
        font-size: 16px;
    }
    .prop-type p {
        font-size: 12px;
    }
    .prop-heading h3 {
        font-size: 21px;
    }
    .prop-type-section p {
        font-size: 10px;
    }
    .overview span {
       font-size: 19px;
    }
    .amenities-div h3 {
        font-size: 21px;
    }
    h3 {
        font-size: 21px;
    }
    .plans-div {
        width: 290px;
        margin: auto;
    }
    .mortgage-div {
        width: 290px;
        margin: 30px auto 0;
    }
    .property-cta-div {
       height: 305px;
        
    }
        
}