:root {
  --primary: #46ad79;
  --light: #f1f8ff;
  --dark: #0f172b;
}
/*---------------------------- preloader area ----------------------------*/

.loader_bg {
  position: fixed;
  z-index: 9999999;
  background: #fff;
  width: 100%;
  height: 100%;
}

.loader {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 280px;
}
.back-to-top {
  position: fixed;
  display: none;
  right: 45px;
  bottom: 45px;
  z-index: 99;
}

body,
ul,
li,
p,
a,
label,
input,
div {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
  font-weight: 300 !important;
}

/* CSS for Search Bar */
.search-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #f8f9fa;
}

.search-bar form {
    display: flex;
    width: 100%;
    max-width: 400px; /* Adjust the maximum width as needed */
}

.search-bar input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.search-bar button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .search-bar {
        justify-content: center;
    }
}

/* Default styles for the search results popup */
#search-results {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    max-width: 80%;
    max-height: 80%; /* Set the maximum height for the popup */
    overflow-x: auto; /* Add a horizontal scrollbar if the content overflows horizontally */
    z-index: 9999; /* Ensure it appears on top of everything */
}

/* Style for individual search result items */
.search-result {
    display: inline-block; /* Display results inline with each other */
    margin-right: 20px; /* Add spacing between results */
}

/* Style for search result image */
.search-result img {
    max-width: 100px; /* Set the maximum width for the image */
    max-height: 100px; /* Set the maximum height for the image */
    margin-right: 10px; /* Add some spacing between image and text */
}

/* Responsive styles for smaller screens */
@media screen and (max-width: 768px) {
    #search-results {
        max-width: 90%; /* Adjust the width for smaller screens */
        max-height: 90%; /* Adjust the height for smaller screens */
    }

    /* Reduce the maximum image size for smaller screens */
    .search-result img {
        max-width: 60px;
        max-height: 60px;
    }
}


/* Popup Styles */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.h1 {
  font-family: "Roboto", sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: "Roboto", sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: "Roboto", sans-serif;
  font-size: 22px !important;
}
.filter-dropdown {
  text-align: center;
  margin: 20px 0;
}

#order-filter {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

button#apply-filter {
  padding: 5px 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Style for smaller screens */
@media (max-width: 768px) {
  .filter-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #order-filter {
    margin-bottom: 10px;
  }
}
/* General */

.text-warning {
  color: #ede861 !important;
}

.text-muted {
  color: #bcbcbc !important;
}

.text-success {
  color: #59ab6e !important;
}

.text-light {
  color: #ffffff !important;
}
.bg-dark {
  background-color: #a8dabd !important;
}

.bg-light {
  background-color: #e9eef5 !important;
}

.bg-black {
  background-color: #8f9eb1 !important;
}

.bg-success {
  background-color: #59ab6e !important;
}

.btn-success {
  background-color: #59ab6e !important;
  border-color: #56ae6c !important;
}

.footer {
  background-color: #333333;
}

/* Nav */

#msc_nav_top {
  min-height: 40px;
}
#msc_nav_top * {
  font-size: 0.9em !important;
}
#msc_main_nav a {
  color: #212934;
cursor: pointer;
}
#msc_main_nav a:hover {
  color: #69bb7e;
cursor: pointer;
}
#msc_main_nav .navbar .nav-icon {
  margin-right: 20px;
}

/* Hero Carousel */
#msc-carousel {
  background: #efefef !important;
}

/* Features CSS */
.features-div {
  text-align: center;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

.features-div:hover {
  margin-top: -10px;
}

.features-div i {
  font-size: 35px;
  font-weight: 300;
  color: #65cd00;
}

.features-div h4 {
  color: #393939;
  font-weight: 400;
}

.features-div p {
  color: #636363;
  font-size: 17px;
  font-weight: 300;
  line-height: 25px;
}

.more-features-div {
  margin-top: 40px;
  overflow: hidden;
}

.more-feature-div {
  background: #f8f8f8;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 70px 0px;
  margin-bottom: 0px;
  padding: 50px 0px;
}

.more-feature-div .col-md-6 img {
  width: 100%;
}

.more-features-div-icon {
  float: left;
  width: 60px;
  height: 60px;
  padding-top: 6px;
  background: #65cd00;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 45px;
  text-align: center;
}

.more-features-div-heading {
  float: right;
  width: 86%;
  margin-top: 0;
  font-weight: 400;
}

.more-features-div-description {
  float: right;
  width: 86%;
  font-weight: 300;
}
/*** Service ***/
.service-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
  transition: 0.5s;
}

.service-item:hover {
  background: var(--primary);
}

.service-item * {
  transition: 0.5s;
}

.service-item:hover * {
  color: var(--light) !important;
}
/* Product */

.product-wap {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.product-wap .product-color-dot.color-dot-red {
  background: #f71515;
}

.product-wap .product-color-dot.color-dot-blue {
  background: #6db4fe;
}
.product-wap .product-color-dot.color-dot-black {
  background: #000000;
}
.product-wap .product-color-dot.color-dot-light {
  background: #e0e0e0;
}
.product-wap .product-color-dot.color-dot-green {
  background: #0bff7e;
}
.card.product-wap .card .product-overlay {
  background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}

.card.product-wap a {
  color: #000;
}

#carousel-related-product .slick-slide:focus {
  outline: none !important;
}

#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: 0.5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#msc-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}

#msc-carousel .carousel-control-next i,
#msc-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}

/* Carousel Brand */

.msc-carousel .h1 {
  font-size: 0.5em !important;
  color: #000 !important;
}

/* Services */

.services-icon-wap {
  transition: 0.3s;
}

.services-icon-wap:hover,
.services-icon-wap:hover i {
  color: #fff;
}

.services-icon-wap:hover {
  background: #69bb7e;
}

/* Contact map */

.leaflet-control a,
.leaflet-control {
  font-size: 10px !important;
}

.form-control {
  border: 1px solid #e8e8e8;
}
/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item.center .testimonial-item * {
  transition: 0.5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item * {
  color: var(--light) !important;
}

.testimonial-carousel .owl-dots {
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.testimonial-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #cccccc;
  border-radius: 15px;
  transition: 0.5s;
}

.testimonial-carousel .owl-dot.active {
  background: var(--primary);
  border-color: var(--primary);
}
/* Footer */
#msc_footer a {
  color: #dcdde1;
}

#msc_footer a:hover {
  color: #68bb7d;
}

#msc_footer ul.footer-link-list li {
  padding-top: 10px;
}

#msc_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}

#msc_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: 0.5s;
}

#msc_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: 0.5s;
}

#msc_footer .border-light {
  border-color: #e0e0e0 !important;
}
#bottom-logo {
  margin: 20px 0;
}
#bbt {
  display: inline-block;
}
#bbt > img {
  transform: translate(0, -15px);
}
#bbt p {
  margin-left: 4px;
}
@media (max-width: 767px) {
  #msc_footer {
    text-align: center;
  }
}

/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/

.product-wap .h3,
.product-wap li,
.product-wap i,
.product-wap p {
  font-size: 12px !important;
}

.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}
/* Extra Small devices  */
@media (max-width: 480px) {
  .more-features-div-description,
  .more-features-div-heading {
    width: 80%;
  }
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 {
    font-size: 1em !important;
  }
}

/*// Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {
  #msc_main_nav .navbar-nav {
    max-width: 750px;
  }
}

/* Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
  #msc_main_nav .navbar-nav {
    text-align: center;
    max-width: 350px;
  }

  #msc-carousel .carousel-item {
    min-height: 30rem !important;
  }

  .product-wap .h3,
  .product-wap li,
  .product-wap i,
  .product-wap p {
    font-size: 18px !important;
  }

  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  /* Features CSS */
  .features-div {
    text-align: center;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -ms-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
  }

  .features-div:hover {
    margin-top: -10px;
  }

  .features-div i {
    font-size: 35px;
    font-weight: 300;
    color: #65cd00;
  }

  .features-div h4 {
    color: #393939;
    font-weight: 400;
  }

  .features-div p {
    color: #636363;
    font-size: 17px;
    font-weight: 300;
    line-height: 25px;
  }

  .more-features-div {
    margin-top: 40px;
    overflow: hidden;
  }

  .more-feature-div {
    background: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 70px 0px;
    margin-bottom: 0px;
    padding: 50px 0px;
  }

  .more-features-div-icon {
    float: left;
    width: 60px;
    height: 60px;
    padding-top: 6px;
    background: #65cd00;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    line-height: 45px;
    text-align: center;
  }

  .more-features-div-heading {
    float: right;
    width: 86%;
    margin-top: 0;
    font-weight: 400;
  }

  .more-features-div-description {
    float: right;
    width: 86%;
    font-weight: 300;
  }
#table2{
  display: block !imaportant;
}

}
@media only screen and (max-width: 992px) {
  .main_heading {
    margin-bottom: 0 !important;
  }
 #smallcons{
display: block !important;
}
.navbar-nav .dropdown-menu {
    position: absolute !important;
}
}
@media only screen and (max-width: 576px) {
  .text-align-left {
    display: none;
  }
  .carousel-indicators{
    display: none !important;
  }
  .img-fluid{
   margin: 0 !important;
  }
}

.container-fluid,
.navbar-expand > .container-sm,
.navbar-expand > .container-md,
.navbar-expand > .container-lg,
.navbar-expand > .container-xl {
  flex-wrap: nowrap;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #f8f8f8;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card > .list-group:first-child {
  border-top-width: 0;
}

.card > .list-group:last-child {
  border-bottom-width: 0;
}

.card > .card-header + .list-group,
.card > .list-group {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img,
.card-img-top,
.card-img-bottom {
  flex-shrink: 0;
  width: 100%;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group > .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    column-count: 3;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.bg-light {
  background-color: #ffffff !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #5e5e5e !important;
}

.product-item {
  transition: 0.5s;
}

.product-action {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.product-action a.btn {
  position: relative;
  margin: 0 3px;
  margin-top: 100px;
  opacity: 0;
}

.product-item:hover {
  box-shadow: 0 0 30px #dddddd;
}

.product-item:hover .product-action {
  background: rgba(0, 0, 0, 0);
}

.product-item:hover .product-action a.btn:first-child {
  opacity: 1;
  margin-top: 0;
  transition: 0.3s 0s;
}

.product-item:hover .product-action a.btn:nth-child(2) {
  opacity: 1;
  margin-top: 0;
  transition: 0.3s 0.05s;
}

.product-item:hover .product-action a.btn:nth-child(3) {
  opacity: 1;
  margin-top: 0;
  transition: 0.3s 0.1s;
}

.product-item:hover .product-action a.btn:nth-child(4) {
  opacity: 1;
  margin-top: 0;
  transition: 0.3s 0.15s;
}

.product-item .product-img img {
  transition: 0.5s;
}

.product-item:hover .product-img img {
  transform: scale(1.2);
}

.product-item .btn:hover {
  color: #639724 !important;
}

.table.table-borderless thead tr,
.table.table-borderless tbody tr:not(:last-child) {
  border-bottom: 15px solid #f5f5f5;
}

.contact-form .help-block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.back-to-top {
  position: fixed;
  display: none;
  right: 30px;
  bottom: 30px;
  z-index: 11;
  animation: action 1s infinite alternate;
}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

/** Asked section **/
figure img {
  top: 0;
  max-width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.titlepage h2 {
  font-size: 45px;
  color: #fff;
  line-height: 40px;
  font-weight: bold;
  padding-bottom: 50px;
  text-align: center;
}
.white {
  color: #41c365;
}
.asked_main {
  padding: 5% 0 5% 0;
}

.asked_main .titlepage {
  text-align: right;
}

.asked_main .titlepage h2 {
  color: #000;
}

.slider span {
  float: right;
  cursor: pointer;
  font-size: 30px;
  line-height: 29px;
  color: #41c365;
}

.asked_main .ask_box {
  max-width: 539px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.simpaly {
  padding: 10px 10px 10px 20px;
  border: #41c365 solid 2px;
  margin-bottom: 20px;
}

.slider a {
  color: #272827;
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
}
a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}