body{
    background: #d3d3d3 !important;
}


.carousel-caption {
    bottom: 20px;
    text-align: left;
  }
  
  /* Title in Bold */
  .carousel-title {
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #fff;
    font-size: 35px !important;
    width: 70% !important;
    line-height: 35px !important;
    font-family: 'Exo', sans-serif !important;
  }

  /* Description in Small Font */
  .carousel-description {
    color: #fff;
    font-size: 16px !important;
    font-weight: 300 !important;
    max-width: 650px !important;
    font-family: 'Exo', sans-serif !important;
  }


  /* Custom radio button style for carousel indicators */
  .carousel-indicators button {
    width: 15px !important;
    height: 15px !important;
    cursor: pointer;
    background-color: #fff !important;
    opacity: .8;
    transition: opacity .10s ease;
    border-radius: 90% !important;
    
  }
  .carousel-indicators {
    position: absolute;
    bottom: 10px; /* Align at the bottom */
    right: 10px; /* Align at the right */
    z-index: 1; /* Ensure it appears on top */
    display: flex; /* Ensure proper alignment of indicators */
    flex-direction: row; 
      justify-content: flex-end; 
  }

  .carousel-indicators .active {
    background-color: #fff !important;
  }

  /* Adjustments for smaller screens */
@media (max-width: 768px) {
  .carousel-title {
    font-size: 18px !important; /* Smaller font size for titles on small screens */
    font-weight: bold !important;
    width: 100%;
  }

  .carousel-description {
    font-size: 11px !important;  /* Adjust description font size for small screens */
  }

}

/* Adjustments for extra-small screens (mobile portrait) */
@media (max-width: 528px) {
  .carousel-title {
      font-size: 18px !important; /* Further reduce font size for titles */
      font-weight: bold !important;
      width: 100% !important;
  }

  .carousel-description {
      font-size: 11px !important; /* Further reduce description font size */
  }
}


  .titleIndustrial{
    text-transform: uppercase;
    font-weight: 700;
    color: #005b94;
  }
  .indus_col{
    background-color: #005b94;
    color: #fff;
    text-align: left;
    padding: 20px;
    margin-bottom: 30px;
 
    
  }
  .indus_col p{
    font-size: 16px !important;
    font-weight: 500;
  }









/* Container for the image and caption */

 .cardImg {
    width: 100%;
    height: 300px;
    border-radius: 1px !important; /* Force remove border-radius */
  }
  .image-container-categ img {
    border-radius: 0 !important; /* Enforce no border-radius on images */
}
  /* Caption styles */
  .caption {
    position: absolute;
    top: 54.5%; /* Start from the top of the card */
    left: 0; /* Align with the left of the card */
    width: 116%; /* Make the caption span the full width of the card */
    transform: rotate(-90deg); /* Rotate caption vertically */
    transform-origin: left top; /* Ensure rotation happens from the top left */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    color: #fff; /* White text color */
    font-size: 1.25rem; /* Adjust font size */
    font-weight: bold; /* Make the title bold */
    white-space: nowrap; /* Prevent wrapping */
    padding: 10px;
  }
  
  /* Card styling */
  .cards-categ {
     border-radius: 0 !important; /* Remove border-radius from card */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .cards-categ:hover {
        transform: scale(1.1); /* Card moves up slightly on hover */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Adds a shadow effect to the card */
    }
  /* Background color for card body */
  .card-bg-color {
      background-color: #005b94; /* Set card background color */
    height: 250px !important;
    }
  
  /* Description text styling */
  .description-text {
      color: #fff !important;
      font-size: 1rem;
      padding: 10px;
      text-align: center;
  }
  
  /* Button styling */
  .card-bg-color {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .btn-read-more {
    color: #ccc !important;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center !important;
    justify-content: center;
  }
  
  /* Hover effect for the button */
  .btn-read-more:hover {
     color: #fff !important; /* Darker shade for hover effect */
      text-decoration: none !important;
  }
  





  @media (max-width: 576px) {
    .cards-categ{
      padding: 40px;
    }
    .image-container-categ img {
      width: 100% !important;
    }
    .caption{
      position: absolute;
      top: 54%;
      left: 39px;
      width: 70%;
      transform: rotate(-90deg);
      transform-origin: left top;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 1.25rem;
      font-weight: bold;
      white-space: nowrap;
      padding: 10px;
    }
   
  }



  @media (min-width: 768px) and (max-width: 991.98px) {
    .caption{
      position: absolute;
      top: 54.5%;
      left: 0px;
      width: 86%;
      transform: rotate(-90deg);
      transform-origin: left top;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 1.25rem;
      font-weight: bold;
      white-space: nowrap;
      padding: 10px;
    }
  }

  @media (min-width: 1400px)  {
    .caption{
      position: absolute;
      top: 54.5%;
      left: 0px;
      width: 99%;
      transform: rotate(-90deg);
      transform-origin: left top;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 1.25rem;
      font-weight: bold;
      white-space: nowrap;
      padding: 10px;
    }
  }