.title-blue{
    color: #093E82;
}

/* .navbar {
  width: 100vw;
} */

.nav-item{
  width: 100px; /* Adjust this value to your desired width */

}

.company-logo-2{
  width: 50px;
  height: 50px;
}

.contact-nav-item{
  margin-left: 4rem;
  margin-right: 3rem;
}

.custom-color-navbar{
  background: linear-gradient(to right, #ffffff, #F5F5F5);
  color: white;
  padding: 10px 20px;
  border: none;
  /* border-radius: 5px; */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.contact-link{
  background-color: #004aad;
  border-radius: 1rem; border: 1px solid #004aad;
  color: #FFFFFF;
 }

/* Custom styles for the sections */
.section {
    height: auto; /* Set the height of each section to 100% of the viewport height */
    width: 100vw;
    min-height: 40rem;
    padding: 5rem 0; /* Add some padding for spacing */
    display: flex; /* Use flexbox to vertically center the content */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
  }
  
  .section.bg-light {
    background-color: #f8f9fa; /* Light background for the about section */
  }
  

  .hero {
    background-image: url('../images/hero-background.png'); /* Path to your background image */
    background-size: cover; /* Make the background image cover the entire area */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
  }

  .about-section{
    padding: 0; /* Add some padding for spacing */

  }

  .about-container{
    padding: 0 1rem !important;
  }

  .products-section {
    background-image: url('../images/products-background.png'); /* Path to your background image */
    background-size: cover; /* Make the background image cover the entire area */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
  }


  .contact-section {
    background-image: url('../images/contact-background.png'); /* Path to your background image */
    background-size: cover; /* Make the background image cover the entire area */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
  }



  .about-img img{
    width: 100%;
    height: 100%;
  }

  .container{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    height: 100%;
    width: 100%;
    padding: 1rem;
  }

  .hero-container{
    padding: 200px 1rem
  }

  .title-about{
    margin-bottom: 2rem;
  }


  .outer-circle, .middle-circle, .inner-circle {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Ensure background is transparent */
}

.outer-circle {
    width: 100%;
    height: 100%;
    border: 5px solid white; /* Border for outer circle */
}

.middle-circle {
    width: 80%;
    height: 80%;
    border: 5px solid white; /* Border for middle circle */
}

.inner-circle {
    width: 60%;
    height: 60%;
    border: 5px solid white; /* Border for inner circle */
}


.service-section{
  background-color: #FAFAFA;
}

.service-item{
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 80%;
  border-radius: 1rem;
  text-align: center;
  padding: 2.5rem;
  /* box-shadow: 4px 4px 17px 4px rgba(0, 0, 0, 0.5); */
  /* box-shadow: 1px 1px 17px 1px rgba(0, 0, 0, 0.5); */
  border: 1px #9F9F9F solid;


}


.diagram-wip-section{
  background-color: #FFFFFF;
}


/* footer */

.footer {
  background-color: #004aad; /* Adjust to match your blue color */
  color: white;
  padding: 40px 0;
}
.footer a {
  color: white;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}
.footer .divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 20px 0;
}



  .product-section {
    background-color: #004aad; /* Background color */
    color: white;
    padding: 60px 0;
  }
  .product-section h2 {
    font-size: 2.5rem;
  }
  .product-section p {
    font-size: 1.25rem;
  }

  .carousel-main{


  }

  .product-circle{
    width: 500px;
    height: 500px;
  }
 

  @media (max-width: 600px) {
    .navbar-brand {
      margin-right: 0px !important;
    }
    .hero-container{
      padding: 100px 1rem
    }

    .text-justify-mobile {
      text-align: justify;
    }

    .text-center-mobile{
      text-align: center;
    }

    .title-about{
      text-align: center;
      margin: 1rem;
    }

    .p-1rem-mobile {
      padding: 1rem;
  }

    .nav-item{
      width: auto !important; /* Adjust this value to your desired width */
    
    }

    .contact-nav-item{
      margin: auto;
    }

    .section{
      /* padding: 5rem 1rem; */
      padding: 3rem 0rem;

    }

    .about-section{
      padding: 0rem 0rem !important;
    }

    .about-content{
      padding: 1rem 1rem;
    }

    .product-circle{
      width: 300px;
      height: 300px;
    }

    .carousel-main::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* Adjust height if needed */
      background-color: your-desired-background-color; /* Set the background color */
      border-radius: 50%; /* Makes the element circular */
      z-index: -1; /* Positions the element behind the carousel content */
    }
 
    
   .service-item{
    margin-bottom: 2rem;
   }
   .service-container{
    display: flex;
    justify-content: center;
   }

   .contact-link{
    background-color: #F8F9FA;
    border-radius: 1rem; border: 1px solid #FFFFFF;
    color:  #004aad;
   }
}