body {
    /* Add padding to the top of the body to prevent content from being hidden behind the fixed navbar */
    padding-top: 56px; /* Adjust this value if your navbar height changes */
  }
  
  .navbar {
    position: fixed; /* Make the navbar fixed at the top */
    top: 0; /* Align it to the very top */
    width: 100%; /* Make it span the full width of the viewport */
    z-index: 1030; /* Ensure it stays above other content (Bootstrap's default z-index for fixed elements) */
    border-radius: 0; /* Remove any default rounded corners if present */
  }
  
  /* Styles for the new Hero Slideshow */
  .hero-slideshow {
    height: 100vh; /* Make the slideshow fill the viewport height */
    overflow: hidden; /* Hide overflow from images */
    position: relative; /* Needed for Bootstrap carousel controls */
  }
  
  .hero-slideshow .carousel-item {
    height: 100vh; /* Each carousel item also fills the viewport height */
    position: relative; /* Ensure caption is positioned correctly relative to this */
  }
  
  /* Styling for the actual image within carousel-item */
  .hero-slideshow .carousel-item img.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the full item area without distortion */
    filter: brightness(60%); /* Darken images slightly for better text readability */
  }
  
  .hero-slideshow .carousel-caption {
    position: absolute; /* Position the caption absolutely relative to its .carousel-item */
    top: 50%; /* Start from the middle vertically */
    left: 50%; /* Start from the middle horizontally */
    transform: translate(-50%, -50%); /* Shift back by half its width and height to truly center */
    width: 100%; /* Take full width for text alignment */
    max-width: 900px; /* Limit max-width for readability */
    text-align: center; /* Center text within the caption */
    color: white; /* Ensure text color is white */
    background-color: transparent; /* Remove background, as image filter handles dimming */
    padding: 20px; /* Add some padding */
    box-sizing: border-box; /* Include padding in width calculations */
    z-index: 10; /* Ensure caption is above the image but below controls */
  }
  
  .hero-slideshow .carousel-caption h1,
  .hero-slideshow .carousel-caption p {
    color: white; /* Ensure text is white */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add text shadow for better contrast */
    margin-bottom: 0.5rem; /* Standard spacing for headings */
  }
  

  .hero-logo {
    width: 500px; /* Adjust as needed */
    height: auto;
    max-width: 50%; /* Ensures it scales down on smaller screens */
}

/* Optional: Adjust caption text color if background images are dark */
.carousel-caption h1,
.carousel-caption p {
    color: #fff; /* White text for better visibility on dark backgrounds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds a subtle shadow for readability */
}


  /* Ensure carousel controls are above captions if needed */
  .carousel-control-prev,
  .carousel-control-next {
    z-index: 11; /* Make sure controls are above the caption */
  }
  
  
  .section-padding {
    padding: 60px 0;
  }
  .product-card {
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0px;
    transition: transform 0.3s;
    display: flex; /* Use flexbox for vertical alignment of content */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Distribute space between image and text */
    height: 100%; /* Ensure card takes full height of its container */
  
  }
  .product-card:hover {
    transform: translateY(-5px);
  }
  .product-card img {
    max-height: 350px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px;
  }
  .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    display: flex; /* Use flexbox for better control of items */
    align-items: stretch; /* Ensure items stretch to fill height */
  }
  .scroll-container .scroll-item {
    flex: 0 0 auto;
    width: calc(25% - 15px);
    margin-right: 20px;
    box-sizing: border-box;
  }
  .scroll-container .scroll-item:last-child {
    margin-right: 0;
  }
  
  
  /* Media query for screens smaller than 768px (typical for tablets and mobiles) */
  @media (max-width: 767.98px) {
    .scroll-container .scroll-item {
      width: calc(50% - 10px);
      margin-right: 15px;
    }
  }
  
  /* Styles for 'Our Solution Process' section */
  #solution-process .card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease-in-out;
    background-color: #ffffff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  #solution-process .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
  }
  
  #solution-process .card-title {
    color: #212529;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.25rem;
  }
  
  #solution-process .card-text {
    color: #495057;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Icon specific styles */
  #solution-process .card-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e9f0fe;
    margin-bottom: 20px;
    transition: all 0.4s ease-in-out;
  }
  
  #solution-process .card-icon svg {
    width: 36px;
    height: 36px;
    color: #007bff;
    transition: all 0.4s ease-in-out;
  }
  
  #solution-process .card:hover .card-icon {
    background-color: #007bff;
  }
  
  #solution-process .card:hover .card-icon svg {
    color: #ffffff;
    transform: scale(1.1);
  }
  
  /* Styles for the embedded map in the footer */
  .map-container {
    overflow: hidden;
    position: relative;
    width: 100%; /* Make the map responsive within its column */
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
  
  .map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  
  /* Navbar custom background */
  .navbar {
    /*background-color: #f8f9fa !important;*/
    color: #000 !important;
  }
  
  .navbar .nav-link,
  .navbar .navbar-brand {
    color: #ffffff !important;
  }
  
  .navbar .nav-link:hover {
    color: #007bff !important;
  }
  
  
  /* Animated product cards */
  .animated-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .animated-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.1);
  }

  .text-justify-responsive {
    text-align: justify;
    line-height: 1.7;
    font-size: 1rem;
  }
  
  @media (max-width: 576px) {
    .text-justify-responsive {
      font-size: 0.95rem;
    }
  }

  /* Footer logo responsiveness */
  .footer_logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Ensures the image fits within its container while maintaining aspect ratio */
  }

  .gallery-img {
  height: 500px; /* Set a fixed height */
  width: 100%;   /* Make sure the image spans the card width */
  object-fit: cover; /* Ensures the image fills the box without distortion */
}