body {
    font-family: 'Poppins', sans-serif;
}
.font-body {
    font-family: 'Poppins', sans-serif;
}
.font-title {
    font-family: 'Merriweather', serif;
}
.bg-primary {
    background: #FFF8F0;
}
nav .active {
    color: #87CEEB;
}
.shadow-custom-blue {
    box-shadow: 0px 17px 42px rgba(39, 92, 141, 0.15);
}
.shadow-custom-pink {
    box-shadow: 10px 10px 50px rgba(243, 199, 201, 0.10);
}
.max-w-m-content {
    max-width: max-content;
}
#our_pricing {
    background: url('../images/pricing-bg.png') no-repeat; 
    background-position: 0 0;
    background-size: 400px auto;
}
.paw-print-ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.paw-print-ul li::before {
    background: url('../images/PawPrint.svg') no-repeat;
    width: 20px;
    height: 20px;
    background-size: 100% auto;
    display: block;
    content: '';
}

.faq-item.active .faq-btn {
  background-color: #87CEEB; 
}
.faq-item.active .faq-content {
    padding-bottom: 20px;
    padding-top: 20px;
}


/* Slick dots container */
.slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  gap: 0.5rem;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 0;
}

.slick-dots li {
  width: 12px;
  height: 12px;
  list-style: none;
}

.slick-dots li button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #87CEEB; /* gray-300 */
  border: none;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  transition: background-color 0.3s ease;
  opacity: 50%;
}

.slick-dots li.slick-active button {
  opacity: 1;
}

.border-label-group {
    position: relative;
    margin-top: 1.25rem;
  }

  .border-label-group input,
  .border-label-group select {
    width: 100%;
    padding: .6rem 1.2rem 0.6rem;
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    border-radius: 0.25rem;
    font-size: 1rem;
    background-color: #fff;
    outline: none;
  }

  .border-label-group input:focus,
  .border-label-group select:focus {
    border-color: #87CEEB; /* Tailwind blue-600 */
  }

  .border-label-group label {
    position: absolute;
    top: 0;
    left: 1rem;
    transform: translateY(-50%);
    background-color: white;
    padding: 0 0.25rem;
    font-size: 0.875rem;
    color: #6b7280; /* Tailwind gray-500 */
    pointer-events: none;
  }

  .border-label-group select:invalid {
    color: #9ca3af; /* Tailwind gray-400 */
  }


.border-label-group input.valid,
.border-label-group select.valid {
  border-color: #87CEEB; /* blue */
}

.border-label-group input.invalid,
.border-label-group select.invalid {
  border-color: #ef4444; /* red */
}

.validation-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  pointer-events: none;
  display: none;
}

.border-label-group.valid .icon-success {
  display: block;
  fill: #00BFA5;
}

.border-label-group.invalid .icon-error {
  display: block;
  stroke: #ef4444;
}

.border-label-group input.readonly-field {
    border-color: #87CEEB;     /* Tailwind blue-300 */
    cursor: not-allowed;
}

.readonly-icon {
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2300BFA5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z"/></svg>');
    padding-right: 2.5rem;
}

.selected-slot {
    background: #87CEEB !important;
}

.step1 > span::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 25px);
    right: -50%;
    height: 4px;
    background: #87CEEB;
}
.step1 > span svg {
    position: relative;
    z-index: 2;
}

.step2 > span::after {
    content: '';
    position: absolute;
    top: 20px;
    left: -50%;
    right: calc(50% + 25px);
    height: 4px;
    background: #87CEEB;
}
.step2 > span span {
    position: relative;
    z-index: 2;
}

.step3 > span::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(-50% - 48px);
    right: calc(50% + 25px);
    height: 4px;
    background: #87CEEB;
}
.step3 > span span {
    position: relative;
    z-index: 2;
}

.authBG::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #87CEEB;
    opacity: .7;
}

@media (max-width: 991px) {
    .step3 > span::after {
        left: calc(-50% + 20px);
    }
    .step2 > span::after {
        right: calc(50% + 30px);
    }
    .step1 > span::after {
        right: 0;
    }
}

@media (max-width: 767px) {
    .shadow-custom-blue {
        box-shadow: 5px 5px 20px rgba(39, 92, 141, 0.15);
    }  
    #our_pricing {
        background: none;
    }  
    .testimonial-slider .slick-dots {
        bottom: 10px;
    }
    #slotContainer button {
        width: 100%;
        display: block;
    }

    .progressSteps {
        max-width: 550px;
    }
    .step3 > span::after {
        left: -39%;
    }
    .step2 > span::after {
        right: calc(50% + 25px);
        left: -39%;
    }
    .step1 > span::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .progressSteps {
        max-width: 300px;
    }
    .step3 > span::after {
        left: calc(-50% + 25px);
    }
    .step2 > span::after {
        right: calc(50% + 25px);
        left: -25%;
    }
}