#navbar ul li a.active {
  border-color: white;
  /* Change the color to your desired active state color */
  font-weight: bold;
  /* Change the font weight or any other styling as needed */
}



#header {
  background-color: #ffc000;
  padding: 10px 0;
}
 


#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#navbar li {
  margin-right: 20px;
}

#navbar a {
  text-decoration: none;
  color: white;
  /* Set the default color for the menu items */
  transition: color 0.3s ease, background-color 0.3s ease;
  /* Add smooth transition effects for color and background-color */
  padding: 8px 15px;
  /* Adjust padding for better aesthetics */
  border-radius: 5px;
  /* Add border-radius for rounded corners */
  font-size: 14px;


}

#navbar a:hover {
  color: #ffc000;
  /* Set the color for the menu items on hover */
  background-color: #fff;
  /* Set the background color for the menu items on hover */
}




/* Container styling */
.swiper-container {
  width: 100%;
  height: 100vh;
  /* Set the height of the container to the full viewport height */
}

/* Image styling */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: #ffc000;
}



#featured-services .service-item h4.title {
  color: #333333;
  /* Set the title color to black */
}

#featured-services .service-item a.readmore span,
#featured-services .service-item .icon i,
#featured-services .service-item a.readmore i {
  color: #ffc000;
  /* Set the other elements' color to yellow */
}



#about h3 {
  color: #333333;
  /* Set the text color to black for the h3 element in the About Us section */
}

#about li i {
  color: #ffc000;
  /* Set the icon color to yellow for the li elements in the About Us section */
}

#about h5 {
  color: #333333;
  /* Set the text color to black for the h3 element in the About Us section */
}



#faq .accordion-button i.bi-question-circle {
  color: #333333;
  /* Set the color to yellow for the question mark icons */
}

a.cta-btn:hover {
  background-color: #333333 !important;
  color: #fff !important;
  border: 1px solid #333333 !important;
  /* Set the border color to yellow when hovering over the button */
}




#footer {
  background-color: #3a454d;
  /* Set the background color to yellow for the footer */
}


/* for service page */
.section-header h2:after {

  background-color: #333333;
}



#services h2 {
  color: #333333;
}

.services .card a {
  color: #333333;
  transition: 0.3;
}


/* for contact page */
.info-item i {
  background-color: #ffc000 !important;
  /* Set the icon background color to yellow */
}

.info-item h4 {
  color: #333333 !important;
  /* Set the title color to red */
}

.info-item p {
  color: #0A0D13 !important;
  /* Set the subtitle color to green */
}












/* Media query for screens smaller than 768px */
@media (max-width: 1279px) {


  .mobile-nav-show {
    /* Show the mobile navigation toggle icon */
    display: inline-block;
  }

  .mobile-nav-hide {
    /* Hide the desktop navigation toggle icon */
    display: none;
  }

  .navbar ul {
    /* Adjust styles for the navigation menu items */
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 70px;
    /* Adjust the top position as needed */
    left: 0;
    width: 100%;
    background-color: #ffc000;
    /* Add a background color if needed */
    display: none;
  }

  .navbar ul.active {
    /* Show the navigation menu on mobile */
    display: flex;
  }

  .navbar li {
    /* Style each navigation menu item */
    margin: 10px 0;
  }
}



@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
  .logo {
      width: 300px 
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 767px){
  .logo {
      width: 200px 
  }
}