.inputRange {
    appearance: none;
    width: 100%;
    height: 18px;
    border-radius: 18px;
    cursor: pointer;
}

/* Thumb: for Chrome, Safari, Edge */
.inputRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    appearance: none;
    width: 34px;
    height: 26px;
    border: 2px solid #ffffff;
    border-radius: 6px;
    background: no-repeat center/10px url(../images/icons/range-thumb-arrows.png);
    background-color: #D72594;
    box-shadow: none;
}


/* Thumb: for Firefox */
.inputRange::-moz-range-thumb {
    width: 34px;
    height: 28px;
    border: 2px solid #ffffff;
    border-radius: 6px;
    background: #D72594;
    box-shadow: none;
}
.quantity-labels {
  position: relative;
 
}

.quantity-label {
  position: absolute;
  color: #D72594;
  font-weight: bold;
  font-family: volkhov;
  font-size: 12px;

}
@media (max-width: 768px) { 
  .quantity-labels {
      display: none;
  }
}
.details .row:nth-child(2n) .image {
    order: -1;
}

@media only screen and (max-width: 991px) {
    .details .row:nth-child(n) .image {
        order: -1;
    }
}
.spinner {
    width: 3em;
    height: 3em;
    cursor: not-allowed;
    border-radius: 50%;
    border: 2px solid #444;
    box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;
    animation: rot55 0.7s linear infinite;
  }
  
  .spinnerin {
    border: 2px solid #444;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  @keyframes rot55 {
    to {
      transform: rotate(360deg);
    }
  }
  
  .comment-card{
    scrollbar-color: #d72594 #f1f1f1;
    scrollbar-width: thin;
  }




.comment-card::-webkit-scrollbar {
    width: 8px; 
    height: 8px; 
}

.comment-card::-webkit-scrollbar-thumb {
    background-color: #d72594; 
    border-radius: 4px; 
}

.comment-card::-webkit-scrollbar-track {
    background-color: #f1f1f1; 
}

.media-post {
  gap: 1rem; 
  overflow-x: auto; 
  -ms-overflow-style: none; 
  /* scrollbar-color: #d72594 #d1d1d1; */
  scroll-behavior: smooth; 
}

.media-post::-webkit-scrollbar {
  border-radius: 15px; 
  height: 15px;
}

.media-post::-webkit-scrollbar-thumb {
  background: #d72594; 
  border-radius: 8px; 
}

.media-post::-webkit-scrollbar-track {
  background-color: #c9c7c7; 
  border-radius: 15px; 
}

.user-posts {
  flex-shrink: 0; 
  width: 75px; 
  height: 75px; 
}






@media (hover: none) {
  .packages-button:hover {
      /* background: linear-gradient(to right, #D72594, #253F73) !important; */
      background: linear-gradient(145deg, rgba(215, 37, 148, 1), rgba(37, 63, 115, 1));
  }
  .get-service-button:hover {
    /* background: linear-gradient(to right, #D72594, #253F73) !important; */
    background: linear-gradient(145deg, rgba(215, 37, 148, 1), rgba(37, 63, 115, 1));
}
}






@media only screen and (max-height: 767px) {
  .modal {align-items: start;}
  .modal form textarea {
      height: 120px;
  }
}

@media only screen and (max-height: 640px) {
  .modal .head {
      padding-block: 12px;
  }

  .modal form {
      padding: 10px 15px;
  }

  .modal form input {
      padding: 8px 12px;
  }

  .modal form .mb-5 {
      margin-bottom: 12px;
  }

  .modal form textarea {
      height: 90px;
  }
}

/* Animation */


@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.animated-image {
  opacity: 0; /* Pehle hidden */
  animation: fadeInUp 1s ease-out forwards;
}






@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(30px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.main {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
}

.main h1 {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out 0.5s forwards; /* Added delay for the heading */
}

.main p {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out 1s forwards; /* Added delay for the paragraph */
}
.animate-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-svg {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-svg.visible {
  opacity: 1;
  transform: scale(1);
}
.animate-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-section.visible {
  opacity: 1;
  transform: translateY(0);
}


@keyframes blinkY {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-5px); opacity: 1; }
}

.animate-blink {
  animation: blinkY 2s infinite ease-in-out;
}



@keyframes customPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}
.custom-animate-pulse {
  animation: customPulse 1.5s infinite ease-in-out;
}

@keyframes blinkYanimated {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-5px); opacity: 0.8; }
}

.animated-blinkY {
  animation: blinkYanimated 2s infinite ease-in-out;
}