p {
    text-align: justify !important;
}



#facts {
  background: url("../images/bg.webp") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 0 0;
  position: relative;
}
#facts::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(102, 101, 101, 0.5);
  z-index: 9;
}
#facts .container {
  position: relative;
  z-index: 10;
}
#facts .counters span {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 48px;
  display: block;
  color: #9b7f8d;
}
#facts .counters p {
  padding: 0;
  margin: 0 0 20px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #111;
}
#facts .facts-img {
  text-align: center;
  padding-top: 30px;
}


  .custom-card {
  position: relative;
  height: 691px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  z-index: 1;
}

.custom-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: #b82428; /* hover fill color */
  /* border-radius: 20%;   rounded expanding shape */
  filter: blur(5px);   /* soft blur edges */
  transform: scale(0);
  transform-origin: bottom left;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

.custom-card:hover::before {
  transform: scale(1); /* expand fully */
}

.custom-card .card-body {
  position: relative;
  z-index: 2;
  transition: color 0.5s;
}
.custom-card {
  transition: all 0.4s ease;
}
.card-img{
  height: 35vh;
}
.custom-card .card-img img {
  transition: transform 0.5s ease;
}

.custom-card:hover {
  /* background: #b82428; */
}

.custom-card:hover h3 {
  color: white;
}

.custom-card:hover p {
  color: white;
 
}
.custom-card p {
   text-align: justify;
 
}

.custom-card:hover ul li {
  color: white;
}

.custom-card:hover .card-img img {
  transform: scale(1.1);
}

.custom-padding {
  padding: 70px 14px 0px 14px !important;
}



/* Title underline */
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #f39c12;
  margin-top: 10px;
  border-radius: 2px;
}

.feature {
  background: #fff;
  transition: all 0.4s ease;
  cursor: pointer;
}
.feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.number-circle {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
  background: linear-gradient(135deg, #f39c12, #e74c3c);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.img-wrap {
  border-radius: 20px;
  overflow: hidden;
}
.zoom-img {
  transition: transform 1s ease;
}
.img-wrap:hover .zoom-img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  top:0; left:0;
  width: 100%; height: 100%;
  background: rgba(243, 156, 18, 0.25);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.img-wrap:hover .overlay {
  opacity: 1;
}



.blur-background {
  background: rgba(255, 255, 255, 0.2); /* translucent layer */
  backdrop-filter: blur(10px);          /* blur whatever is behind */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  padding: 20px;
  border-radius: 12px;
}




    .custom-a {
      /*height: 60px;*/
      color: white;

      transition: all 0.3s ease;
      position: relative;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .custom-a:hover {
      background-color: white;
      color: #dc3545;
      border: none;
    }

    .custom-a:hover .overlay-btn {
      background-color: #dc3545;
      color: white;
      border: none;
      cursor: pointer;
    }

    .overlay-btn {
      position: absolute;
      bottom: -30px;
      right: 30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: white;
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    .overlay-btn:hover {
      background-color: #dc3545;
      color: white;
      border: none;
    }

    .custom-h {
      background-color: white;
    }

.image-d-shape {
  width: 100%;
  height: 550px;
  object-fit: cover;

  /* Create a D-shape with only right side rounded */
  border-top-right-radius: 300px;
  border-bottom-right-radius: 300px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pill-column {
  height: 550px;
  padding-left: 2rem;
  padding-right: 2rem;
}

.pill {
  background-color: #0d6efd;
  color: #fff;
  padding: 1rem 1.5rem;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, background-color 0.3s ease;
  cursor: default;
}

.pill:hover {
  background-color: #0056b3;
  transform: translateX(5px);
}



/* product */

.product-image {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Shake animation */
@keyframes shake {
  0% { transform: scale(1.01) translateX(0); }
  25% { transform: scale(1.01) translateX(-2px); }
  50% { transform: scale(1.01) translateX(2px); }
  75% { transform: scale(1.01) translateX(-2px); }
  100% { transform: scale(1.01) translateX(0); }
}

/* Image hover effect */
.product-image:hover img{
  animation: shake 1s ease infinite;
  transform: scale(1.01);
  transition: transform 0.3s ease;
  cursor: pointer;
}