body, html {
    background-color: white;
    height: 100%;
    margin: 0;
    font-family: Helvetica, jost, Sans-Serif;
}

/* Logo styling */
.navbar-brand img {
    padding-left: 50px;
    height: 50px;
    margin-right: 10px;
}

/* Navbar link default styling */
.navbar-light .navbar-nav .nav-link {
    font-size: 24px;
    color: #38383B;
    /* font-weight: bold; */
    padding-bottom: 5px;
    text-decoration: none;
    letter-spacing: 1px;
    position: relative; /* Required for the underline animation */
}
.navbar-nav{
    margin-right : 50px;
}
/* Hover state for navbar links */
.navbar-light .navbar-nav .nav-link:hover {
    color: #0094b2;
}

/* Active state for nav items */
.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: #0094b2;
    /* text-decoration: underline; */
}

/* Add space between navbar items */
li.nav-item {
    margin: 16px;
    margin-right: 30px;
}

/* Underline animation */
.navbar-light .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    left: 0;
    bottom: 3px;
    background-color: #0094b2; /* Corrected to background-color for the underline */
    transition: width 0.3s ease-in-out;
}

/* Hover state to animate the underline */
.navbar-light .navbar-nav .nav-link:hover::after {
    width: 100%; /* Expands underline width on hover */
}
.carousel-item {
    height: 90vh; /* Set the height of the carousel */
    background: no-repeat center center scroll;
    background-size: cover; /* Ensure the background image covers the whole area */
}
.carousel-caption {
    bottom: 20%; /* Position the caption */
    text-align: left; /* Align text to the left */
}
.carousel-caption h3 {
    font-size: 48px; /* Font size for the heading */
    font-weight: bold; /* Bold heading */
    color: #38383B; /* Heading color */
}
.carousel-caption p {
    font-size: 20px; /* Font size for the paragraph */
    color: white; /* Paragraph color */
}

.carousel1 {
  height: 60vh !important; /* Set the height of the carousel */
  background: no-repeat center center scroll;
  background-size: contain; /* Ensure the background image covers the whole area */
}

.btn-custom {
    background-color: #38383B; /* Button background color */
    color: white; /* Button text color */
}

.icon1 {
  color: #38383B !important;
  /* background-color: #38383B!important;
  padding: 20px !important;
  display: inline-block;
  width: 20px;
  height: 20px; */
  /* background: no-repeat 50% / 50% 100% !important; */
}
/* body {
  background-color: #d6dde3; 
} */

.card {
  background-color: #d2eef338; /* Off-white card background */
  border: none;
  border-radius: 10px;
}

.card-img-top {
    height: 200px !important;
}

.card-title {
  font-weight: bold;
  color: #38383B;

  font-size: 1.1rem;
}
.card-title:hover{
  text-decoration: none;
}
.card-text {
  font-size: 1.25rem;
}

.btn {
  border-radius: 0;
  /* font-weight: bold; */
  background-color: #38383B;
}

.btn a{
  color: white;
}

.about-us {
    background-color: #d2eef338; /* Light background for contrast */
    padding: 50px 0;
}
.about1 {
    background-color: white;
}
.about-us h2 {
    margin: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 50px;
    color: #0094b2;
    margin-bottom: 50px;
    /* animation-name: bounce; */
    /* animation-duration: 1.5s; */
}

.about-us p {
  margin-top: 20px;
    text-align: justify;
    /* padding-right: 150px; */
    font-size: 20px;
    color: #38383B;
}

.about-us img {
    /* border-radius: 10px;  */
    max-width: 100%;
    height: auto;
}

.btn-primary {
    margin: 10px;
    background-color: transparent; /* Button color */
    color: #0094b2;
    border: 2px solid #0094b2;
}
.btn-primary:hover{
    background-color: #0094b2;
    color: white;
    border: 2px solid #0094b2;
}

.sr-only{
    color: #0094b2;
}
/* why choose us section */
#why-choose-us {
    background: url('Images/whyus1.jpg') no-repeat center center/cover;
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
  }
  
  #why-choose-us .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
  }
  
  #why-choose-us h2 {
    color: white;
    font-size: 2.5rem;
    text-transform: uppercase;
  }
  
  #why-choose-us p {
    color: white;
    font-size: 1.2rem;
    margin: 20px auto;
    width: 75%;
  }
  .about-us1 h2{
    margin: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 50px;
    color: #0094b2;
    margin-bottom: 50px;
  }
  .read-more-btn {
    background-color: #0094b2; /* Red background */
    color: white; /* White text */
    text-decoration: none; /* Remove underline */
    padding: 12px 24px;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    /* border-radius: 5px; */
  }
  
  .read-more-btn .arrow {
    margin-left: 5px; /* Spacing between text and arrow */
    transition: transform 0.3s;
  }
  
  .read-more-btn:hover {
    text-decoration: none;
    background: transparent;
    border: 2px solid #0094b2; /* Darker red on hover */
    color: #0094b2;
  }
  
  .read-more-btn:hover .arrow {
    transform: translateX(5px); /* Arrow moves slightly to the right on hover */
  }
  

/* Footer Styles */
footer {
    background-color: #000; /* Dark background for footer */
    padding: 2rem 0; /* Vertical padding */
}

footer h5 {
    color: #0094b2;
    margin-bottom: 1rem; /* Space between heading and list */
    font-weight: bold; /* Bold headings */
    
}

footer a {
    color: white;
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s ease; /* Smooth color transition */
}

footer a:hover {
    color: #0094b2; /* Light color on hover */
}

footer p {
    margin: 0; /* Remove default margin for paragraphs */
}

footer .img-fluid {
    max-width: 200px; /* Set max width for logo */
}

/* Responsive adjustments */
@media (max-width: 576px) {
    footer h5 {
        font-size: 1.25rem; /* Adjust heading size for smaller screens */
    }

    footer {
        padding: 1.5rem 0; /* Adjust padding for smaller screens */
    }
}
.banner {
    background: url('Images/bg5.jpeg') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    text-align: center;
    color: #38383B;
    font-size: 2.5em;
    font-family: 'Arial', sans-serif;
  }
  
  .banner h1 {
    font-weight: bold;
    margin: 0;
  }
  
/* Application Section */
.application-card:hover{
    box-shadow: 0px 5px 15px #38383B;
}

.application-card img {
    width: 100%;
    height: auto;
  }
  .application-title {
    letter-spacing: 0.9px;
    color: #38383B;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.4em;
    /* font-weight: bold; */
    margin-top: 15px;
  }


/* scrollbar */
::-webkit-scrollbar {
    width: 20px;  /* Width of the entire scrollbar */
}
html {
  scrollbar-width:thin;  /* Scrollbar width: 'auto' or 'thin' */
  scrollbar-color: #0094b2 white;  /* Handle color and track color */
}


/* about us page */
.about-section {
    background-color: #f9f9f9;
    /* padding: 50px 0; */
  }
  .about-text {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: justify;
  }
  .icon-box {
    text-align: center;
    margin-top: 30px;
  }
  .icon-box i{
    font-size: 50px;
    background-color: #0094b2;
    margin-bottom: 15px;
    padding: 10px 10px;
    border-radius: 10px;
  }
  .icon-box h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .img-fluid1{
    background-color: #0094b2;
    max-width: 200px;
    height: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    max-width: 186px;
    height: auto;
  }
.founder{
    font-weight: 600;
    color: #0094b2;
}

.about2{
    height: 500px;
    background-color: #0094b2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.about-sec{
    font-size: 22px;
}
.about-section1 {
    padding: 50px 0;
  }
  .about-content {
    /* background-color: #f5f5f5; */
    padding: 50px;
    border-radius: 10px;
  }
  .about-content h2{
    /* color: #0094b2; */
    margin-bottom: 24px;
    font-weight: bold;
    font-size:40px;
  }
  .about-content p{
    font-size: 18px;
    padding-right: 50px;
    text-align: justify;
  }
  .icon-box1 {
    display: flex;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
  }
  .icon-box1 i {
    font-size: 40px;
    color: #0094b2;
  }
  .icon-box1 h4 {
    /* margin-left: 20px; */
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .icon-box1 p{
    /* margin-left: 20px; */
    text-align: justify;
  }
  .cta-section {
    background-color: #9b59b6;
    padding: 30px;
    color: white;
    margin-top: 30px;
    border-radius: 10px;
  }
  .cta-section a {
    color: white;
    background-color: #8e44ad;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
  }

  .vision-section {
    padding: 60px 0;
    background-color: #fff;
  }
  
  .vision-title {
    /* font-size: 2.5rem; */
    font-weight: bold;
    margin-bottom: 20px;
    color: #38383B;
  }
  
  .vision-quote {
    font-size: 24px;
    font-style: italic;
    margin-bottom: 30px;
  }
  
  .vision-description {
    font-size: 18px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    color: #38383B;
  }

  /* product page */
  .section-title {
    /* text-align: center; */
    margin: 30px 24px;
}
.custom-section {
    /* padding: 40px 20px; */
    background-color: #f8f9fa;
}
.custom-section:nth-child(odd) {
    background-color: white;
}
.highlight {
    color: #fcb900;
    text-decoration: underline;
}
.icon-bullet {
    margin-right: 10px;
    color: #4e73df;
}
.diff{
  background-color: #0094b2;
  color: white;
}
.diff11{
  background-color: #0094b2;
  color: white;
}
.diff1{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.diff3{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Contact  */

.phone-mockup {
  background-image: url('phone-mockup.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(175, 232, 175, 0.1);
}
.contact-form h2 {
  font-weight: bold;
  color: black;
  font-weight: 600;
  font-size: 46px !important;
  margin-bottom: 20px;
}
.contact-form .btn-warn {
  padding: 11px 16px;
  font-size: 18px;
  color: white;
  background-color: #0094b2;
  border-color: #0094b2;
}
.btn-warn:hover{
  background-color: #0094b2;
  color: white !important;
}
.text-w{
  color: #0094b2;
  font-weight: 600;
  font-size: 46px !important;
}
.form-control{
  box-shadow: 0 0 10px rgba(175, 232, 175, 0.1);
  padding: 24px 16px !important;
  font-size: 16px !important;
  /* line-height: 1.42857143;*/
}
.form-control:focus{
  border-color: #0094b2 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 233, 150, 0.6) !important;
}
.talk{
  font-weight: 600;
  font-size: 24px;
}
.button input[type="submit"]{
  font-size: 20px;
  border : 1px solid #0094b2;
  background-color: #0094b2;
  color: white;
  border-radius: 10px;
  width: 100%;
  padding: 6px 12px;
}
.success{
  font-size: 18px;
  margin: 10px;
  /* background-color: #9fd2a1; */
  text-align: center;
  color: black;
  padding: 5px 10px;
  border-radius: 10px;
}

.info-box {
  background-color: #0094b2;
  /* height: 250px; */
}

h4 {
  font-weight: bold;
}


@media (min-width: 320px) and (max-width:576px){
  .found{
    padding: 20px !important;
  }
  .about-text{
    font-size: 16px !important;
  }
  .about-content{
    padding: 20px !important;
  }
  .about-content p{
    padding-right: 0 !important;
    font-size: 16px !important;
  }
  #why-choose-us p{
    width: 100% !important;
  }
  .diff11{
    flex-direction: column-reverse;
  }
  .about-us1 h2 {
    font-size: 40px !important;
  }
  .about-us p{
    font-size: 16px !important;
  }
  .application-title{
    font-size: 20px !important ;
  }
  #why-choose-us h2 {
    color: white;
    font-size: 30px !important;
    margin-top: 20px !important;
  }
  .vision-title {
    font-size: 2.5rem !important;
  }
  .icon-box1 i {
    font-size: 30px !important;
  }
  .section-title{
    font-size: 1.5rem;
  }
  .text-w{
    font-size: 36px !important;
  }
  .contact-form h2{
    font-size: 36px !important;
  }
  .carousel-item {
    height: 50vh !important;
  }
  .carousel-item .carousel1{
      height:90vh !important;
  }
}

.contact-section {
      background-color: #a2e7ef;
      padding-top: 80px;
      padding-bottom: 60px;
      position: relative;
    }

    .contact-card {
      margin-bottom: 20px;
      background-color: #0094b2;
      text-align: center;
      padding: 20px 20px;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      position: relative;
      /* top: -60px; */
    }

    .contact-card .icon {
      font-size: 40px;
      color: white;
      margin-bottom: 15px;
    }

    .contact-card h5 {
      color: white;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .contact-card p {
      color: white;
      margin: 0;
      font-size: 16px;
    }

    a.email-link {
      color: #fff;
      text-decoration: none;
    }

    a.email-link:hover {
      text-decoration: underline;
    }

@media (min-width: 1020px) and (max-width:1100px){
  li.nav-item {
    margin: 8px !important;
    margin-right: 10px !important;
}
}