
@media (max-width: 480px) {
  body {
    -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS */
  }

  .bubble-container {
    height: 300px;
  }

  .bubble {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

 /*header title section */

 .header-title {
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.left-line, .right-line {
  width: 40px; /* Even shorter lines for smaller screens */
  margin: 5px 0; /* Space above and below the lines */
}

.header-title h2 {
  font-size: 1.2rem; /* Adjust font size for smaller screens */
  text-align: center;
}

  /*about section */

  .about-section {
    padding: 10px;
    display: inline;
  }

  .about-text h3 {
    font-size: 0.9rem;
  }

  .about-text p {
    font-size: 0.8rem;
  }

  .about-link a {
    padding: 6px 10px;
    font-size: 0.8rem;
  }



  /*industry we serve*/

  .industries-section {
    padding: 20px 10px; /* Further reduce padding */
  }

  .industries-section h2 {
    font-size: 1.5rem; /* Further reduce title font size */
    margin-bottom: 15px;
  }

  .industries-container {
    grid-template-columns: 1fr; /* Display 1 card per row */
    gap: 10px; /* Adjust spacing between cards */
    padding: 5px; /* Reduce padding */
  }

  .industry-card {
    width: 100%; /* Full width */
    height: 180px; /* Adjust height */
  }

  .industry-img {
    height: 100%; /* Maintain proportional scaling */
    object-fit: cover;
    -webkit-object-fit: cover; /* Safari/WebKit */

  }

  .text-overlay {
    font-size: 0.9rem; /* Further adjust overlay text size */
    padding: 8px 10px; /* Reduce padding */
    width: 90%; /* Adjust overlay width */
  }

   /* product section Analyzer */

  .header-image-section {
    padding: 15px; /* Further reduce padding */
  }

  .header-image-label {
    font-size: 12px; /* Reduce label font size */
    padding: 8px 20px; /* Adjust padding */
  }

  .header-image-content {
    padding: 15px; /* Further reduce padding */
  }

  .header-image-content h1 {
    font-size: 1.5rem; /* Further reduce heading size */
  }

  .header-image-content p {
    font-size: 0.9rem; /* Smaller paragraph text */
  }

  .header-image-wrapper {
    margin-top: 15px; /* Adjust spacing */
  }

  .header-image {
    max-width: 90%; /* Make the image larger within the available space */
  }


  /*product section viz pr controller */

  .controller-pro-section {
    padding: 20px 10px; /* Reduce padding further */
    text-align: left;
  }

  .controller-pro-right {
    max-width: 70%;
  }

  .controller-pro-left {
    gap: 15px; /* Reduce the gap between images */
  }

  .controller-pro-image-wrapper img {
    width: 130px; /* Further reduce image size */
  }

  .controller-pro-title {
    font-size: 1.6rem; /* Further reduce title font size */
  }

  .controller-pro-description {
    font-size: 0.95rem; /* Further reduce font size */
    line-height: 1.4; /* Tighten line height */
  }

  .controller-pro-button {
    font-size: 12px; /* Smaller button font size */
    padding: 10px; /* Adjust padding */
    width: 100%; /* Ensure button spans full width */
  }

  /* product section viz classic */

  .controller-classic-section {
    padding: 20px 10px; /* Reduce padding for smaller screens */
  }

  .controller-classic-title {
    font-size: 1.6rem; /* Further reduce title font size */
  }

  .controller-classic-description {
    font-size: 0.95rem; /* Further reduce font size */
    line-height: 1.4; /* Adjust line height */
  }

  .controller-classic-button {
    font-size: 12px; /* Reduce button font size */
    padding: 10px; /* Adjust padding */
    width: 100%; /* Ensure button spans full width */
  }

  .controller-classic-right {
    gap: 15px; /* Reduce gap between images */
  }

  .controller-classic-image-wrapper img {
    width: 130px; /* Further reduce image size */
  }

  .controller-classic-image-wrapper h4 {
    font-size: 12px; /* Further reduce font size */
  }

  .company-profile-section {
    padding: 15px;
  }

  .company-profile-text-content h2 {
    font-size: 20px;
  }

  .company-profile-text-content p {
    font-size: 12px;
  }

  .company-profile-download-button {
    font-size: 14px;
    padding: 8px 16px;
  }

  .company-profile-image-container img {
    max-width: 100%;
    object-fit: cover;
    -webkit-object-fit: cover; /* Safari/WebKit */
  }


    /* Adjust Pro Slider Label */
    .pro-slider-label {
      width: 130px;
      font-size: 14px;
      padding: 6px 15px;
    }
  
    /* Adjust Image Sizes in Pro Slider */
    .pro-image {
      height: 160px;
      margin-right: 20px;
    }
  
    /* Adjust Pro Image Figures Spacing */
    .pro-image-figure {
      margin-right: 3px; /* Even less margin for very small screens */
    }
  
    /* Adjust Pro Images Container */
    .pro-images {
      margin-top: 20px;
    }
  
    /* Adjust the Pro Slider Container Height */
    .pro-slider {
      height: 250px;
    }
  
    /* Ensure smooth transition for Safari */
    .pro-slider, .pro-image, .pro-image-figure {
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    .company-profile-section {
      padding: 15px;
    }
  
    .company-profile-text-content h2 {
      font-size: 22px; /* Smaller heading font size */
    }
  
    .company-profile-text-content p {
      font-size: 14px;
    }
  
    .company-profile-download-button {
      font-size: 12px;
      padding: 8px 15px;
    }
  
    .company-profile-video-container iframe {
      width: 100%; /* Full width for small screens */
      height: 180px; /* Adjust iframe height */
    }

}

