:root {
    --background-image-url: url("/images/image1.png");
}
.b-s-hover {
  transition: all 0.3s ease-in-out;
}
.validation-message{
    font-family: 'Poppins', sans-serif
}
.b-s-hover:hover {
  box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.35);
}

  .slick-list.draggable {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lst-card {
    box-shadow: none !important;
  }

  .lst-card:hover {
    box-shadow: 4px 4px 2px 0px #00000040 !important;
  }

  .card-1:hover {
    background: #ff7f50 !important;
  }

  .card-1:hover .img-hover {
    transform: translateY(-18px);
    background: #ff7f50;
  }

  #card-3:hover {
    border-color: #ff7f50 !important;
  }

  .home-different-card:hover {
    background: #ff7f50 !important;
  }

  .home-different-card:hover .lst-card-text {
    color: #ffffff !important;
  }

  .home-different-card:hover .lst-card-img {
    filter: none;
  }
.group:hover .icon-hover {
  filter: brightness(0) saturate(100%) invert(92%) sepia(100%) saturate(0%)
    hue-rotate(202deg) brightness(106%) contrast(106%);
}

.bg-dashboard-layout2 {
  background: rgba(217, 217, 217, 0.2) url("src/Rectangle 241.png") center/cover
    no-repeat;
}
.bs-img {
  filter: brightness(0) saturate(100%) invert(92%) sepia(100%) saturate(0%)
    hue-rotate(202deg) brightness(106%) contrast(106%);
}

html,
body {
  width: 100%;
  /* background-color: red !important; */
  overflow-x: hidden;
}
.underline-text {
  position: relative;
  display: inline-block;
}

.underline-text:after {

  position:absolute;
  left: -4%;
  top: 54%;


}


.underline-text-2 {
  position: relative;
  display: inline-block;
}

.underline-text-2:after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: -14px;
  width: 100%;
  height: 38px;
  background-size: cover;
  transition: background-image 0.3s ease;
}

.underline-text-3 {
  position: relative;
  display: inline-block;
}

.underline-text-3:after {

  position: absolute;
      left: -4%;
    top: 23%;


}
.input-div {
  box-shadow: 4px 8px 4px 0px #00000040;
}
.search-dropdown {
  border-right: 1px solid #969696;
}
.bg-image {
  position: relative;
}
.bg-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 422px;
  background-size: cover; /* Adjust as needed */
  background-position: center; /* Adjust as needed */
}
.card-hover {
  transition: all 0.3s ease-in-out;
}
.card-hover:hover {
  box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.35);
}
.card-1 {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.card-1:hover {
  box-shadow: 6px 6px 2px 0px #00000059;
}
#card-1:hover {
  background: #00c6b2;
}
.card-1:hover .text-hover {
  color: #ffff;
}
.img-hover {
  transition: all 0.3s ease-in-out;
}
.card-1:hover .img-hover {
  transform: translateY(-18px);
}
#card-2:hover {
  background: #ff7f50;
}
#card-3:hover {
  background: #87d387;

}
#card-4:hover {
  background: #575757;
}
#card-5:hover {
  background: #181c3a;
}
.bg-grd {
  background: linear-gradient(
    90deg,
    rgba(0, 198, 178, 0.35) 0%,
    rgba(255, 131, 79, 0.35) 100%
  );
}
.bg-slides {
  position: relative;
}
.bg-slides:before {
  position: absolute;
  top: 25px;
  left: 0;
  content: url("src/Group 155.png");
}
.slick-prev:before {
  opacity: 1 !important;
}
.slick-next:before {
  opacity: 1 !important;
}
.bg-slides:after {
  position: absolute;
  right: 0;
  bottom: 20px;
}
/* .slick-prev {
    left: -43px !important;
} */
.lst-card {
}
.lst-card {
  transition: all 0.3s ease-in-out;
}
.lst-card-text {
  transition: all 0.3s ease-in-out;
}
.lst-card:hover .lst-card-img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(8deg) brightness(105%) contrast(106%);
}
/* .lst-card:hover .lst-card-text {
  color: white;
}
#lst-card1:hover {
  background: #00c6b2;
}
#lst-card2:hover {
  background: #ff834f;
}
#lst-card3:hover {
  background: #87d387;
} */
.fb {
  transition: all 0.3s;
}
.fb:hover {
  background: #1f2c7f;
}
.fb:hover .social-image {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(8deg) brightness(105%) contrast(106%);
}
.tele {
  transition: all 0.3s;
}
.tele:hover {
  background: #00aaff;
}
.tele:hover .social-image {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(8deg) brightness(105%) contrast(106%);
}
.insta {
  transition: all 0.3s;
}
.insta:hover {
  background: linear-gradient(360deg, #620029 0%, #c84800 100%);
}
.insta:hover .social-image {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(8deg) brightness(105%) contrast(106%);
}

.twitter {
  transition: all 0.3s;
}
.twitter:hover {
  background: rgb(0, 0, 0);
}
.twitter:hover .social-image {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(8deg) brightness(105%) contrast(106%);
}
.footer-links {
  transition: all 0.3s ease-in-out;
}
.footer-links:hover {
  text-decoration: underline;
}
.shadow-card {
  box-shadow: 4px 4px 4px 0px #00000040;
}
.underline-span {
  position: relative;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.underline-span:after {
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 64%;
  left: 6px;
}
.underline-span:hover:after {
  filter: brightness(0) saturate(100%);
}
.bg-custom-ms::before {
  content: "";
  position: absolute;
  width: 100%;
  left: 87%;
  height: 100%;
  background: #f5f5f5;
  top: 0;
  z-index: -2;
}
.bg-custom-ms2::before {
  content: "";
  position: absolute;
  width: 100%;
  left: 87%;
  height: 165%;
  background: #f5f5f5;
  top: 0;
  z-index: -2;
}
.bg-custom-ms2::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0%;
  height: 100%;
  background: #f5f5f5;
  top: 65%;
  z-index: -2;
}
.ecom-card {
  box-shadow: 0px 4px 4px 0px #00000040;
}
.cards-availability {
  box-shadow: 0px 4px 4px 0px #00000040;
}
.faq-background {
  background-position: center;
  background-size: cover;
}

/* Tablet devices (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  button.slick-next.slick-arrow {
    right: -5px;
  }
  .slick-prev {
    left: -15px !important;
  }
  .underline-span:after {
    top: 106%;
  }
  .bg-custom-ms2::before {
    height: 100%;
  }
  .bg-custom-ms2::after {
    top: 0;
  }
}
@media only screen and (max-width: 767px) {
  button.slick-next.slick-arrow {
    right: -5px;
  }
  .slick-prev {
    left: -15px !important;
  }
  .underline-text-2:after {
    bottom: -21px !important;
  }


  .underline-span:after {
    top: 90%;
    left: -13px;
  }
  .bg-custom-ms2::before {
    height: 100%;
  }
  .bg-custom-ms2::after {
    top: 0;
  }
}