@media screen and (max-width: 767px) {
  .navbar-dark.fixed-top {
    position: static;
    background-color: black;
  }
  /* .banner .banner-content {
    top: 28%;
    left: 0%;
  } */
  .logo {
    width: 200px;
  }
  .proj-caption1 {
    position: relative;
  }
  .proj-caption1 h4 {
    font-size: 15px;
  }
  #demo .carousel-indicators li {
    display: none;
  }
  .banner-content img {
    /* width: 70%; */
  }
  .banner-content h2 {
    font-size: 15px;
  }
  .section {
    padding: 7% 0;
  }
  .tagline span {
    font-size: 15px;
  }
  .heading {
    margin-bottom: 15px;
    font-size: 28px;
  }
  .para {
    font-size: 15px;
    text-align: justify;
  }
  .card .collapsible-link {
    font-size: 15px;
  }
  .card .card-body {
    padding: 0;
  }
  .contact-form {
    padding: 10px 25px 20px 25px;
    margin-top: -35%;
  }
  .contact-form h1 {
    letter-spacing: 1px;
    font-size: 30px;
  }
  .form-contact button {
    font-size: 15px;
  }
  footer {
    text-align: center;
  }
  footer h2 {
    font-size: 25px;
    margin-bottom: 2%;
    margin-top: 5%;
  }
  footer h5 {
    font-size: 17px;
  }
  footer p {
    font-size: 14px;
    margin: 0 0 5px 0;
  }
  .social-media a {
    font-size: 25px;
  }
  #demo .carousel-caption {
    display: none;
  }
  .enquire-sticky {
    position: fixed;
    right: -31px;
    top: 50%;
    z-index: 9;
    transform: rotate(90deg);
  }
  .enquire-sticky.btn-primary {
    color: #fff;
    background-color: var(--main-color);
    border-color: #ffffff;
    font-size: 13px;
    padding: 3px 7px;
  }
  .btn.cta-btn {
    font-size: 15px;
    width: 70%;
  }
  .keydevelopment-cards {
    margin-bottom: 20px;
  }
  .price {
    width: 25%;
  }
  .floor-plan h4 {
    font-size: 20px;
}
}
@media screen and (min-width: 280px) and (max-width: 374px) {
  .content-features {
    top: 7%;
    left: 11%;
    width: 250px;
    height: 250px;
    text-align: center;
  }
  .content-features img {
    width: 25%;
  }
  .content-features h4 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 4%;
  }
  .content-features p {
    font-size: 13px;
    text-align: center;
  }
}
@media screen and (min-width: 350px) and (max-width: 364px) {
  .content-features {
    width: 300px;
    height: 300px;
    top: 7%;
    left: 10%;
  }
}
@media screen and (min-width: 365px) and (max-width: 424px) {
  .content-features {
    width: 300px;
    height: 300px;
    top: 7%;
    left: 10%;
  }
}
@media screen and (min-width: 425px) and (max-width: 520px) {
  .content-features {
    width: 350px;
    height: 350px;
    top: 6%;
    left: 9%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .navbar-dark.fixed-top {
    position: static;
    background-color: black;
  }
  /* .banner .banner-content {
    top: 28%;
    left: 0%;
  } */
  .banner-content img {
    /* width: 70%; */
  }
  .banner-content h2 {
    font-size: 23px;
  }
  .proj-caption1 h4 {
    font-size: 18px;
  }
  .section {
    padding: 7% 0;
  }
  .tagline span {
    font-size: 20px;
  }
  .heading {
    margin-bottom: 15px;
    font-size: 25px;
  }
  .para {
    font-size: 15px;
    text-align: justify;
  }
  .card .collapsible-link {
    font-size: 13px;
  }
  .card .card-body {
    padding: 0;
  }
  .content-features {
    top: 12%;
    left: 15%;
    width: 250px;
    height: 250px;
  }
  .content-features img {
    width: 25%;
  }
  .content-features h4 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 4%;
  }
  .content-features p {
    font-size: 13px;
    text-align: center;
  }
  .contact-form {
    padding: 10px 25px 20px 25px;
    margin-top: -35%;
  }
  .contact-form h1 {
    letter-spacing: 1px;
    font-size: 30px;
  }
  .form-contact button {
    font-size: 15px;
  }
  footer h2 {
    font-size: 25px;
    margin-bottom: 2%;
    margin-top: 5%;
  }
  footer h5 {
    font-size: 17px;
  }
  footer p {
    font-size: 14px;
    margin: 0 0 5px 0;
  }
  .social-media a {
    font-size: 25px;
  }
  #demo .carousel-caption {
    display: none;
  }
  .price {
    width: 25%;
  }
}
@media screen and (min-width: 768px) and (max-width: 820px) {
  .btn.download-btn {
    position: absolute;
    top: 20%;
    left: 50%;
    font-size: 13px;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .card .collapsible-link {
    font-size: 15px;
  }
  .content-features {
    top: 12%;
    left: 14%;
    width: 350px;
    height: 350px;
  }
  .content-features img {
    width: 25%;
  }
  .content-features h4 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 4%;
  }
  .content-features p {
    font-size: 13px;
    text-align: center;
  }
}
/* Horizontal scroll for mobile */
    @media (max-width: 767px) {
      .scroll-section {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
      }
      .scroll-section.justify-content-center{
        justify-content: unset !important;
      }
      /* ✅ Visible scrollbar styling */
      .scroll-section::-webkit-scrollbar {
        height: 6px; /* scrollbar thickness */
      }
      .scroll-section::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
      }
      .scroll-section::-webkit-scrollbar-thumb {
        background: #007bff; /* blue scroll thumb */
        border-radius: 10px;
      }
      .scroll-section::-webkit-scrollbar-thumb:hover {
        background: #0056b3;
      }

      .scroll-item {
        flex: 0 0 80%;
        margin-right: 15px;
      }
    }