body {
  background-color: #ffffff !important; /* Set background color to white */
}

.bg-image-container {
  position: relative; /* Make the container a positioning context */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 650px;
  color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Open Sans', sans-serif; /* Updated font for the banner */
}



.content-wrapper {
  max-width: 800px; /* Adjust max-width as needed */
  padding: 0 20px; /* Add some padding */
  position: relative; /* Ensure content sits above the overlay */
  z-index: 2; /* Ensure it sits above the overlay */
  opacity: 0; /* Start with text hidden */
  animation: fadeIn 1s forwards; /* Fade in animation */
}

/* Text fade-in animation */
@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(20px); /* Move text down */
  }
  100% {
      opacity: 1;
      transform: translateY(0); /* Move to original position */
  }
}

h1 {
  font-size: 3rem; /* Adjust font size if necessary */
  font-weight: 700; /* Bold font weight */
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif; /* Updated font for the heading */
}

p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-family: 'Open Sans', sans-serif; /* Updated font for paragraphs */
}

.btn-explore {
  background: linear-gradient(135deg, #365B6D, #365B6D); /* Gradient button color */
  color: white;
  padding: 12px 24px; /* Increased padding for a more substantial button */
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.2s; /* Added transition for scaling effect */
  font-weight: 600; /* Slightly bolder font for the button */
}

.btn-explore:hover {
  background: linear-gradient(135deg, #365B6D, #365B6D); /* Darken gradient on hover */
  transform: scale(1.05); /* Slight scaling effect on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
  h1 {
      font-size: 2.5rem; /* Adjust font size for tablets */
  }

  p {
      font-size: 1rem;
  }
}

@media (max-width: 576px) {
  h1 {
      font-size: 2rem; /* Adjust font size for mobile */
  }

  p {
      font-size: 0.9rem;
  }
}



/* Navbar */
/* General Styles */
#desktop-navbar .navbar-toggler-icon {
  background-color: white;

}

/* Mobile Logo */
#desktop-navbar .navbar-brand.d-lg-none img {
  max-width: 60px;
}

/* Navbar Links */
#desktop-navbar .nav-link {
  color: #ffffff !important;
  margin-right: 25px;
  justify-content: space-around;
}

#desktop-navbar .nav-link:hover {
  color: #1d5372;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
  #desktop-navbar .navbar-nav .nav-item .nav-link {
      margin: 10px 0;
      text-align: center;
  }

  /* Center Logo for Mobile */
  #desktop-navbar .navbar-brand.d-lg-none {
      margin-bottom: 10px;
      display: block;
      text-align: center;
  }

  #desktop-navbar .navbar-collapse {
      text-align: center;
  }

  /* Remove margin for mobile */
  #desktop-navbar .navbar-nav .nav-item:first-child .nav-link,
  #desktop-navbar .navbar-nav .nav-item:last-child .nav-link {
      margin: 0;
  }
}
#desktop-navbar .nav-link.active {
  color: #e7ff0b !important; /* Active link color */
  font-weight: bold; /* Optional for emphasis */
  border-bottom: 2px solid #0B728E; /* Optional underline */
}




/* About Section */
.about {
  padding: 80px 0; /* Increased padding for more spacing */
  background-color: #f9f9f9; /* Light background for a professional feel */
}

.about .container {
  max-width: 1140px; /* Restrict the width of the container */
  margin: 0 auto; /* Center the container */
}

.about img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the image adjusts nicely */
  border-radius: 10px; /* Adds rounded corners for a polished look */
}

.about-content {
  text-align: left; /* Align text to the left for a professional layout */
  max-width: 90%; /* Restrict width */
  margin: 0 auto; /* Center content */
}

.about-content h2 {
  font-size: 1.5rem; /* Increased font size for better readability */
  color: #333; /* Dark color for main heading */
  font-weight: 700; /* Bold font for better emphasis */
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-transform: uppercase; /* Adds a more formal and modern feel */
  transition: all 0.3s ease-in-out; /* Smooth transition effect */
}

.about-content h2:hover {
  color: #0B728E; /* Change color on hover for emphasis */
  transform: translateX(5px); /* Slight move to the right for hover effect */
}

.about-content p {
  font-size: 1rem; /* Decreased font size */
  color: #555; /* Medium gray for paragraph text */
  line-height: 1.8; /* Slightly increased line-height for readability */
  margin-bottom: 20px;
  text-align: justify; /* Justified alignment for a more formal look */
}

.about-content .btn {
  padding: 12px 30px; /* Adjusted padding for a bigger, more elegant button */
  font-size: 1.1rem; /* Adjusted font size for better visibility */
  background-color: #0B728E; /* Primary button color */
  border-radius: 50px; /* Rounded button */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.about-content .btn:hover {
  background-color: #0B728E; /* Hover effect with color change */
  transform: translateY(-5px); /* Slight elevation effect */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

@media (max-width: 768px) {
  .about {
    padding: 60px 15px; /* Adjust padding on smaller screens */
  }

  .about img {
    border-radius: 8px; /* Adjust rounded corners for smaller devices */
  }

  .about-content h2 {
    font-size: 1.75rem; /* Adjust heading size for small screens */
  }

  .about-content p {
    font-size: 1rem; /* Adjust paragraph font size */
  }

  .about-content .btn {
    padding: 10px 25px; /* Adjust button size */
  }
}


[data-aos] {
  opacity: 1 !important; /* Ensure visibility */
  transform: none !important; /* Reset any conflicting transforms */
}


/*round images section*/

.premium-quality {
  padding: 60px 0;
  background-color: #E8E8E8;
}

.premium-quality .container-fluid {
  max-width: 1140px;
  margin: 0 auto;
}

.premium-quality .text-center h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.premium-quality .text-center p {
  font-size: 1.25rem;
  color: #777;
}

/* Image container and styling */
.image-container {
  text-align: center;
  margin-bottom: 30px;
  opacity: 0; /* Initially hidden */
  transform: translateY(20px); /* Initially slightly off-screen */
  transition: all 0.6s ease-in-out;
}

.image-container img {
  width: 100%;
  height: auto;
  max-width: 250px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

.image-content h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.image-content p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Scroll Animation on image-container */
.image-container.is-visible {
  opacity: 1; /* Make visible */
  transform: translateY(0); /* Bring into position */
}

@media (max-width: 768px) {
  .premium-quality {
    padding: 40px 15px;
  }

  .premium-quality .container-fluid {
    max-width: 100%;
  }

  .premium-quality .text-center h2 {
    font-size: 2rem;
  }

  .premium-quality .text-center p {
    font-size: 1.1rem;
  }

  .image-container img {
    max-width: 200px;
  }

  .image-content h3 {
    font-size: 1.3rem;
  }

  .image-content p {
    font-size: 0.9rem;
  }
}




/* General styling remains the same */
/* General Styling for the Product Slider */
.product-slider {
  background-color: #ffffff;
  padding: 50px 0;
}

.product-slider .card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-slider .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.product-slider .card-img-top {
  border-radius: 10px;
  height: 250px;
  
}

.product-slider .card-title {
  font-size: 1.3rem;
  font-weight: bold;
  color:#0B728E;
  margin-top: 10px;
}

.product-slider .card-text {
  font-size: 1rem;
  color: #666;
  margin-top: 8px;
}

/* Styling the Carousel Controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color:#0B728E;
  border-radius: 50%;
}

.carousel-indicators button {
  background-color:#0B728E;
}

.carousel-indicators .active {
  background-color: #0B728E;
}

/* Responsive Styles */
/* Mobile View (Max Width: 576px) */
@media (max-width: 576px) {
  /* Each card takes full width on mobile */
  .carousel-item .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .product-slider .card-img-top {
    height: 200px; /* Reduce height for mobile */
  }

  .product-slider .card-title {
    font-size: 1.1rem; /* Adjust font size for mobile */
  }

  .product-slider .card-text {
    font-size: 0.9rem;
  }
}

/* Desktop View (Min Width: 577px) */
@media (min-width: 577px) {
  /* Multiple cards per slide */
  .carousel-item .col-md-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}
/* Mobile View (Max Width: 576px) */
@media (max-width: 576px) {
  .carousel-item .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/*imagse*/

.industries-served {
  background-color: rgb(255, 255, 255); /* Black background for the section */
  padding-top: 50px;
  padding-bottom: 50px;
}

.industry-card img {
  height: 502.6px; /* Keep the original height */
  width: 323px; /* Keep the original width */
  object-fit: cover; /* Ensures the image fills the container */
  opacity: 0.85; /* Slight opacity for the images */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

.industry-card {
  position: relative;
  overflow: hidden; /* To prevent image from overflowing the container */
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3); /* Transparent background */
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 10px 0;
}

.industry-text {
  font-family: 'Arial', sans-serif; /* Font change */
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: rgb(255, 255, 255); /* Text color black */
}

.industry-card:hover img {
  transform: scale(1.1); /* Image zoom effect */
  opacity: 1; /* Full opacity on hover */
}

@media (max-width: 576px) {
  .industry-card img {
    height: 300px;
    width: 100%; /* Ensures images fill the container on smaller screens */
  }
}

/*testinomails*/

.testimonials .card {
  background-color: #ffffff; /* White background for cards */
  border: 1px solid #ddd; /* Border to separate the cards */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.testimonials .card-body {
  padding: 30px;
}

.testimonials .card-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.testimonials .card-subtitle {
  font-size: 1rem;
  color: #777; /* Light gray text for designation */
}

.testimonials .card-text {
  font-size: 1rem;
  color: #333; /* Dark text for readability */
}
.stars {
  color: #0B728E; /* Gold color for stars */
  font-size: 20px;
}

.star {
  margin-right: 5px;
}

@media (max-width: 768px) {
  .testimonials .card {
    margin-bottom: 30px; /* Space between cards on smaller screens */
  }
}

@media (max-width: 576px) {
  .testimonials .card-title {
    font-size: 1rem;
  }

  .testimonials .card-text {
    font-size: 0.9rem;
  }
}
/* Card Hover Effect */
.testimonials .card:hover {
  transform: translateY(-10px); /* Lift the card slightly */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Star Color Transition */
.testimonials .card:hover .stars {
  color: #e07b00; /* Change star color to orange on hover */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Card Title Hover Effect */
.testimonials .card:hover .card-title {
  color: #0B728E; /* Change card title color to match theme */
  transition: color 0.3s ease; /* Smooth transition */
}

/* Card Text Hover Effect */
.testimonials .card:hover .card-text {
  color: #555; /* Slightly lighter text on hover */
  transition: color 0.3s ease; /* Smooth transition */
}

/* Optional: Subtitle Hover Effect */
.testimonials .card:hover .card-subtitle {
  color: #0B728E; /* Match theme color for subtitle */
  transition: color 0.3s ease; /* Smooth transition */
}
.bro{
  margin-left: 50px;
}


/*banner2*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');

.white {
    position: relative; /* Make the container a positioning context */
    background-image: url('img1.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Open Sans', sans-serif; /* Updated font for the banner */
}
.white2 {
    position: relative; /* Make the container a positioning context */
    background-image: url("img19.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    color: rgb(214, 214, 214);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Open Sans', sans-serif; /* Updated font for the banner */
}

.white3 {
    position: relative; /* Make the container a positioning context */
    background-image: url("image28.jpg"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Open Sans', sans-serif; /* Updated font for the banner */
}
.white2::before {
    content: ''; /* Create a pseudo-element */
    position: absolute; /* Position it absolutely */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Black with 50% opacity */
    z-index: 1; /* Ensure it sits above the background image */
}


.black {
    max-width: 800px; /* Adjust max-width as needed */
    padding: 0 20px; /* Add some padding */
    position: relative; /* Ensure content sits above the overlay */
    z-index: 2; /* Ensure it sits above the overlay */
}

 .black h1 {
    font-size: 3rem; /* Adjust font size if necessary */
    font-weight: 700; /* Bold font weight */
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif; /* Updated font for the heading */
}

.black p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-family: 'Open Sans', sans-serif; /* Updated font for paragraphs */
}



/* Responsive Styles */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem; /* Adjust font size for tablets */
    }

    p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 2rem; /* Adjust font size for mobile */
    }

    p {
        font-size: 0.9rem;
    }
}

/* General Link Styles */
.navigation-links a {
  color: #FFFFFF; /* Default link color */
  text-decoration: none; /* No underline */
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

/* Hover Effect */
.navigation-links a:hover {
  color: #FFD700; /* Change color on hover (gold) */
  transform: translateX(5px); /* Slight shift to the right */
}

/* Cards */
/* Card Styling */
.card-item {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Defined shadow */
  border-radius: 12px; /* Modern corners */
  padding: 20px;
  text-align: center;
  background-color: #fff;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; /* Smooth transition */
  margin-bottom: 20px; /* Space between rows */
}



.card-item:hover {
  transform: translateY(-15px); /* Elevated hover effect */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Strong shadow on hover */
}

.user-image {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.user-name {
  font-size: 22px;
  font-weight: 600;  /* Bold text */
  margin: 15px 0;
  color: #333;  /* Darker text color */
}

/* Button Styling */
.message-button {
  padding: 10px 20px;  /* Smaller size */
  background-color: #0B728E;  /* Updated button color */
  color: #fff;
  font-size: 14px;  /* Decreased font size */
  font-weight: 500;
  border: none;
  border-radius: 8px;  /* Rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;  /* Smooth transition for hover */
  box-shadow: 0 4px 10px rgba(11, 114, 142, 0.2);  /* Soft shadow */
}

.message-button:hover {
  background-color: #0A667A;  /* Darker shade on hover */
  transform: translateY(-5px);  /* Slight lift */
  box-shadow: 0 8px 16px rgba(11, 114, 142, 0.3);  /* Stronger hover shadow */
}

.message-button:active {
  transform: translateY(1px);  /* Pressed effect */
  box-shadow: 0 4px 8px rgba(11, 114, 142, 0.15);  /* Lighter shadow on click */
}