/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 300px) {
  html {
    font-size: 70%;
  }

  .responsive-logo {
    width: 20%;
  }

  .navbar-collapse ul {
    justify-content: center;
    align-items: center;
    gap: 0px !important;
  }

  .testimonial-card {
    padding: 5px; /* Minimize padding */
  }

  .testimonial-card .card-content {
    font-size: 14px; /* Reduce font size for smaller screens */
  }

  .quote-icon {
    font-size: 2rem; /* Adjust icon size */
  }

  .testimonial-indicators {
    margin-top: 15px;
  }

  .banner-content {
    padding: 4rem 0rem !important;
  }

  .inner-section {
    padding: 2rem 1rem !important;
  }

  h6,
  h3 {
    text-align: center;
  }

  .about-section p {
    padding: 0px;
    text-align: justify;
  }

  .viewgallery-div {
    text-align: center;
  }

  .about-section .left-side-div {
    margin-bottom: 2rem;
  }

  .about-section .right-side-div {
    padding: 3rem 4.5rem;
  }

  .Layoutplan-section p {
    text-align: justify;
  }

  .layoutplan-div {
    margin-bottom: 2rem;
  }

  .photogallery-div {
    padding: 2rem 1rem !important;
  }

  #customCarousel .carousel-item {
    height: 30vh !important;
  }

  .gallerycontent p {
    padding-right: 0rem;
    text-align: justify;
  }

  .brochure-div {
    text-align: center;
  }

  .aminiti-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
  }

  .aminiti-div p {
    text-align: center !important;
    padding: 0 !important;
  }

  .sitevisit-section {
    height: 30vh;
  }

  .sitevisit-section .section-titel {
    margin-bottom: 2rem;
  }

  .location-header {
    flex-direction: column;
    gap: 18px;
  }

  .banner-button {
    justify-content: center;
  }
  .sub-nav {
    display: none;
  }

  .banner-inner h2 {
    font-size: 3rem;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
  html {
    font-size: 70%;
  }

  .responsive-logo {
    width: 20%;
  }

  .navbar-collapse ul {
    justify-content: center;
    align-items: center;
    gap: 0px !important;
  }

  .testimonial-card {
    flex: 1 0 100%;
    padding: 10px; /* Adjust padding for smaller screens */
  }

  .testimonial-container {
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  .row {
    padding: 0; /* Prevent row from causing overflow */
  }

  .testimonial-indicators {
    margin-top: 20px; /* Adjust spacing for indicators */
  }

  .banner-content {
    padding: 4rem 0rem !important;
  }

  .inner-section {
    padding: 2rem 1rem !important;
  }

  h6,
  h3 {
    text-align: center;
  }

  .about-section p {
    padding: 0px;
    text-align: justify;
  }

  .viewgallery-div {
    text-align: center;
  }

  .about-section .left-side-div {
    margin-bottom: 2rem;
  }

  .about-section .right-side-div {
    padding: 3rem 4.5rem;
  }

  .Layoutplan-section p {
    text-align: justify;
  }

  .layoutplan-div {
    margin-bottom: 2rem;
  }

  .photogallery-div {
    padding: 2rem 1rem !important;
  }

  #customCarousel .carousel-item {
    height: 30vh !important;
  }

  .gallerycontent p {
    padding-right: 0rem;
    text-align: justify;
  }

  .brochure-div {
    text-align: center;
  }

  .aminiti-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
  }

  .aminiti-div p {
    text-align: center !important;
    padding: 0 !important;
  }

  .sitevisit-section {
    height: 30vh;
  }

  .sitevisit-section .section-titel {
    margin-bottom: 2rem;
  }

  .location-header {
    flex-direction: column;
    gap: 18px;
  }

  .banner-button {
    justify-content: center;
  }
  .sub-nav {
    display: none;
  }

  .banner-inner h2 {
    font-size: 3rem;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
  html {
    font-size: 70%;
  }

  .responsive-logo {
    width: 20%;
  }

  .navbar-collapse ul {
    justify-content: center;
    align-items: center;
    gap: 0px !important;
  }

  .testimonial-slide {
    transform: translateX(0); /* Adjust to show the first card */
  }

  .testimonial-card {
    flex: 1 0 100%; /* Show one card per row */
    max-width: 100%;
    margin: 0; /* Remove margin to fit content */
    box-sizing: border-box;
  }

  .banner-content {
    padding: 4rem 0rem !important;
  }

  .inner-section {
    padding: 2rem 1rem !important;
  }

  h6,
  h3 {
    text-align: center;
  }

  .about-section p {
    padding: 0px;
    text-align: justify;
  }

  .viewgallery-div {
    text-align: center;
  }

  .about-section .left-side-div {
    margin-bottom: 2rem;
  }

  .about-section .right-side-div {
    padding: 3rem 4.5rem;
  }

  .Layoutplan-section p {
    text-align: justify;
  }

  .layoutplan-div {
    margin-bottom: 2rem;
  }

  .photogallery-div {
    padding: 2rem 1rem !important;
  }

  #customCarousel .carousel-item {
    height: 30vh !important;
  }

  .gallerycontent p {
    padding-right: 0rem;
    text-align: justify;
  }

  .brochure-div {
    text-align: center;
  }

  .image-overlay {
    margin-bottom: 1rem;
  }

  .aminiti-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
  }

  .aminiti-div p {
    text-align: center !important;
    padding: 0 !important;
  }

  .sitevisit-section {
    height: 30vh;
  }

  .sitevisit-section .section-titel {
    margin-bottom: 2rem;
  }

  .location-header {
    flex-direction: column;
    gap: 18px;
  }

  .banner-button {
    justify-content: center;
  }

  .sub-nav {
    display: none;
  }

  .banner-inner h2 {
    font-size: 3rem;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  html {
    font-size: 80%;
  }

  .banner-div {
    height: 100vh;
  }

  #customCarousel {
    margin-left: -7rem;
  }

  .photos-div {
    padding-right: 1.5rem;
  }

  .floor-plan {
    margin-bottom: 2rem;
  }
  .nav-link {
    padding: 3px;
  }
  .jbox-container img {
    max-height: 95% !important;
    max-width: 95% !important;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  html {
    font-size: 100%;
  }

  .banner-div {
    height: 100vh;
  }

  #customCarousel {
    margin-left: -7rem;
  }

  .photos-div {
    padding-right: 1.5rem;
  }

  .floor-plan {
    margin-bottom: 2rem;
  }
  .nav-link {
    padding: 3px;
  }
  .jbox-container img {
    max-height: 95% !important;
    max-width: 95% !important;
  }
}