/* ======================== Desktop (above 1200px) ======================== */
@media (max-width: 1200px) {
  .hero-text h1 {
    font-size: 2.5rem;
  }

  .wvr-title {
    font-size: 2.2rem;
  }

  .since-box h2 {
    font-size: 2.2rem;
  }
}

/* ======================== Laptop (992px - 1199px) ======================== */
@media (max-width: 1199px) {
  .hero-text {
    padding: 40px;
    width: 55%;
  }

  .wvr-text {
    padding: 60px;
    width: 50%;
  }

  .desc-part {
    width: 55%;
  }

  .form-text {
    font-size: 20px;
  }
}

/* ======================== Tablet (768px - 991px) ======================== */
@media (max-width: 991px) {
  .hero-section {
    flex-direction: column;
  }

  .hero-image,
  .hero-text {
    width: 100%;
    position: static;
    text-align: center;
  }

  .hero-text {
    padding: 30px 20px;
  }

  .who-v-r {
    flex-direction: column-reverse;
  }

  .wvr-text,
  .wvr-image {
    width: 100%;
    position: static;
    margin-left: 0;
    padding: 30px 20px;
  }

  .wvr-image img{
    width: 100%;
  }

  .desc-part {
    width: 90%;
    padding: 40px 20px;
    position: static;
    margin: 30px auto;
  }

  .since-section {
    flex-direction: column;
  }

  .image-collection {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .fab-gallery {
    column-count: 2;
  }

  .testimonial-card {
    width: 80%;
  }

  .form-text {
    font-size: 18px;
    white-space: normal;
    text-align: center;
  }

  form {
    flex-direction: column;
    align-items: flex-start;
  }

  input[type='text'],
  input[type='email'],
  input[type='tel'] {
    width: 100%;
  }

  button {
    width: 100%;
  }
}

/* ======================== Mobile (up to 767px) ======================== */
@media (max-width: 767px) {
  .hero-text h1,
  .since-box h2,
  .wvr-title {
    font-size: 1.6rem;
  }

  .hero-text p,
  .since-box p,
  .desc-para,
  .wvr-para,
  .what-v-do-desc,
  .stats-text,
  .gallery-desc,
  .client-desc,
  .testimonial-text {
    font-size: 1rem;
  }

  .cta-button {
    font-size: 16px;
    padding: 10px 25px;
  }

  .wvr-image, img {
    width: 100%;
  }

  .carousel-container {
    padding: 40px 20px;
  }

  .gallery {
    gap: 25px;
  }

  .fab-gallery {
    column-count: 1;
  }

  .testimonial-card {
    width: 90%;
    padding: 30px 20px;
  }

  .form-container {
    padding: 20px 0;
  }

  .form-text {
    font-size: 16px;
    text-align: center;
  }

  button {
    padding: 10px 24px;
    font-size: 16px;
  }
  .footer {
        text-align: center;
    }
    .social-icons{
      justify-content: center;
    }
    
  .d-column{
    flex-direction: column;
  }
}