/* General Variables */
:root {
  --primary-orange: #EE802C;
  --primary-orange-hover: #d16b1d;
  --dark-text: #222222;
  --muted-text: #666666;
  --bg-light: #FDFDFD;
  --bg-light-gray: #FAFAFA;
  --bg-light-orange: #FFF9F5;
  --bg-yellow: #F4DE9C;
  --bg-blue: #C1DDF1;
  --bg-salmon: #F2AC88;
  --bg-light-yellow: #F6F3CA;
  --bg-purple: #CDBAF3;
  --bg-green: #A5D8CD;
}

body {

  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h5.mt-4.fw-bold.steps-title {
  font-weight: 700 !important;
}

button.btn.btn-theme.btn-pill.mt-5.px-5.py-2.fw-bold.text-white {
  border-radius: 50px;
}

.petcare-about p {
  font-size: 16px !important;
}

.bg-light-gray {
  background-color: var(--bg-light-gray);
}

.bg-light-orange {
  background-color: var(--bg-light-orange);
}

.btn-orange {
  background-color: var(--primary-orange);
  color: white;
  border-radius: 8px;
  transition: all 0.3s;
  border: none;
}

.btn-orange:hover {
  background-color: var(--primary-orange-hover);
  color: white;
  box-shadow: 0 4px 12px rgba(243, 123, 32, 0.3);
}

.cursor-pointer {
  cursor: pointer;
}

/* Hero Section */
.petcare-hero {
  padding: 80px 0;
  background-color: var(--bg-light);
}

.petcare-hero h1 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 25px;
  color: #2c2c2c;
}

button.btn.btn-theme.btn-pill.w-100.py-2.text-white {
  font-size: 19px;
  border-radius: 50px;
}

.hero-subtext {
  color: #474747;
  font-size: 18px;
  margin-bottom: 35px;
  max-width: 85%;
  line-height: 1.5;
}

.app-buttons p {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #222;
}

.store-badge {
  height: 45px;
  width: auto;
  border-radius: 8px;
  transition: transform 0.2s;
  cursor: pointer;
}

.store-badge:hover {
  transform: scale(1.05);
}

.custom-form-card {
  background: white;
  padding: 45px 35px;
  border-radius: 20px;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f1f1;
}

.form-label-small {
  font-size: 0.85rem;
  font-weight: 500;
  color: #777;
  margin-bottom: 4px;
  display: block;
}

.form-control-line {
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 5px 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  width: 100%;
  background: transparent;
  outline: none;
  box-shadow: none !important;
}

.form-control-line:focus {
  border-bottom-color: var(--primary-orange);
}

.form-control-line-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  width: 100%;
}

.form-control-line-input:focus {
  outline: none;
}

.form-select-line {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0px center;
  background-size: 20px;
}

.country-code {
  font-size: 16px;
  color: #222;
}

.dropdown-arrow {
  font-size: 0.8rem;
}

.btn-pill {
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 10px;
}

/* Stats Section */
.petcare-stats h3 {
  color: #222;
}

.petcare-stats h2 {
  font-size: 4.5rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 0px;
  line-height: 1.1;
}

.petcare-stats p {
  color: #555;
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
}

/* About Section */
.petcare-about h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 20px;
  line-height: 1.2;
}

.petcare-about p {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Steps Section */
.petcare-steps .phone-mockup {
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 8px solid white;
}

.petcare-steps .scale-up {
  transform: scale(1.1);
  z-index: 10;
  position: relative;
}

/* Species Section */
.species-slider {
  margin-bottom: 70px;
}

.species-slider .slick-slide {
  padding: 10px;
}

h2.fw-bold.mb-3 {
  color: #000;
}

section.petcare-species.text-center.py-5.mt-5 p {
  font-size: 20px;
  width: 60%;
  margin: auto;
  color: #474747;
}

.why-card-custom.h-100.p-4.text-start.bg-white h6 {
  font-size: 20px !important;
  margin-bottom: 5px !important;
}

button.btn.btn-theme.btn-pill.px-5.py-2.fw-bold.text-white {
  border-radius: 50px;
}

.why-card-custom.h-100.p-4.text-start.bg-white {
  color: #474747;
}

/* Custom Slick Arrows */
.custom-slider-arrows .slick-prev,
.custom-slider-arrows .slick-next {
  position: absolute !important;
  top: auto !important;
  bottom: -60px !important;
  transform: none !important;
  width: 50px !important;
  height: 50px !important;
  background-color: white !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
  z-index: 2 !important;
  display: block !important;
  border: 1px solid #ebebeb !important;
  color: transparent !important;
  background-size: 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.custom-slider-arrows .slick-prev {
  left: calc(50% - 65px) !important;
  right: auto !important;
  background-image: url('../img/arrow_menu_open-left.png') !important;
}

.custom-slider-arrows .slick-next {
  right: calc(50% - 65px) !important;
  left: auto !important;
  background-image: url('../img/arrow_menu_open-right.png') !important;
}

.custom-slider-arrows .slick-prev:before,
.custom-slider-arrows .slick-next:before {
  display: none !important;
}

/* Species Custom Design */
.rounded-custom {
  border-radius: 20px;
}

.species-slider .slick-slide {
  padding: 0px 5px !important;
}

.species-card-custom {
  transition: transform 0.4s ease;
  padding: 0px;
  margin: 0px 15px;
  transform: rotate(0deg) translateY(0);
  /* Default */
}

/* Arch Effect for active slides */
.species-slider .slick-active .species-card-custom {
  transform: rotate(-8deg) translateY(20px);
}

.species-slider .slick-active+.slick-active .species-card-custom {
  transform: rotate(-4deg) translateY(5px);
}

.species-slider .slick-active+.slick-active+.slick-active .species-card-custom {
  transform: rotate(0deg) translateY(0);
}

.species-slider .slick-active+.slick-active+.slick-active+.slick-active .species-card-custom {
  transform: rotate(4deg) translateY(5px);
}

.species-slider .slick-active+.slick-active+.slick-active+.slick-active+.slick-active .species-card-custom {
  transform: rotate(8deg) translateY(20px);
}

.species-card-custom:hover {
  transform: scale(1.05) translateY(-5px) !important;
  z-index: 10;
}

.species-pill-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 8px 30px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.species-card:hover {
  transform: translateY(-10px);
}

.bg-yellow {
  background-color: var(--bg-yellow);
}

.bg-blue {
  background-color: var(--bg-blue);
}

.bg-salmon {
  background-color: var(--bg-salmon);
}

.bg-light-yellow {
  background-color: var(--bg-light-yellow);
}

.bg-purple {
  background-color: var(--bg-purple);
}

.bg-green {
  background-color: var(--bg-green);
}

.species-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark-text);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Why Choose Conbun */
.petcare-why-choose h2 {
  color: #2c2c2c;
}

.why-card-custom {
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  border: 1px solid #f8f8f8;
}

.why-card-custom:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.why-icon-box {
  width: 50px;
  height: 50px;
  background-color: var(--primary-orange);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Why Choose Section */
.why-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s;
  border: 1px solid #f5f5f5;
  text-align: left;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.why-card .icon-box {
  width: 50px;
  height: 50px;
  background-color: var(--primary-orange);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-card .icon-box img {
  filter: brightness(0) invert(1);
  width: 24px;
}

/* Testimonial Section */
.petcare-testimonials h2 {
  color: #2c2c2c;
}

.testimonial-card-custom {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #f8f8f8;
  overflow: hidden;
  margin: 10px;
}

.testimonial-content-box {
  background-color: #FFF4F4;
  border-radius: 20px 20px 0 0;
}

.testimonial-content-box p {
  color: #474747 !important;
}

.testimonial-user-box.d-flex.align-items-center.p-4.bg-white small {
  color: #474747 !important;
}

.text-truncate {
  color: #252525 !important;
}

.faq-card-custom p {
  color: #474747 !important;
  font-size: 16px;
}


.testimonial-divider {
  border-top: 1px dashed #d1d1d1;
  opacity: 1;
  margin: 15px 0;
}

.testimonial-user-box {
  border-radius: 0 0 20px 20px;
}

.testimonial-slider .slick-slide {
  height: auto;
  /* ensure equal height for all cards in a row if flex is applied correctly */
}

.testimonial-slider .slick-track {
  display: flex !important;
}

.testimonial-slider .slick-slide {
  height: inherit !important;
  display: flex !important;
  justify-content: center;
}

.testimonial-slider .slick-slide>div {
  width: 100%;
  height: 100%;
  display: flex;
}

/* FAQs */
/* FAQs Section */
.faq-card-custom {
  padding: 20px 25px;
  border-radius: 15px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.faq-card-custom:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.faq-icon-custom {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 15px;
}

.faq-icon-custom.active {
  background-color: var(--primary-orange);
}

.faq-icon {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

/* Bottom CTA */
.petcare-bottom-cta {
  background-color: var(--bg-light-orange);
  position: relative;
  overflow: hidden;
  margin-top: 50px;
}

.z-index-2 {
  z-index: 2;
  position: relative;
}

.blob {
  position: absolute;
  background-color: var(--primary-orange);
  border-radius: 50%;
  z-index: 1;
}

.blob-orange-top {
  width: 200px;
  height: 200px;
  top: -50px;
  right: -50px;
  border-top-right-radius: 0;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.blob-orange-bottom {
  width: 150px;
  height: 150px;
  bottom: -20px;
  left: 50px;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.rounded-top-cta {
  border-top-left-radius: 300px;
  border-top-right-radius: 300px;
  max-width: 80%;
  margin: 0 auto;
  display: block;
  margin-top: 50px;
}

@media (max-width: 991px) {
  .pop-up-width {
    padding: 10px !important;
  }

  h2.fw-bold.mb-5.pb-3.steps-heading {
    font-size: 30px !important;
  }

  .petcare-stats h3 {
    margin-bottom: 50px !important;
    font-size: 30px !important;
  }

  section.petcare-hero.pt-5.bg-white.overflow-hidden.position-relative {
    padding-bottom: 0px;
  }

  section.petcare-hero.pt-5.bg-white.overflow-hidden.position-relative {
    border: none !important;
  }

  h2.fw-bold.mb-10.pb-3.steps-heading {
    font-size: 30px !important;
    margin-bottom: 20px !important;
  }

  p.fw-bold.mb-3.fs-5 {
    font-size: 22px !important;
  }

  button.btn.btn-theme.btn-pill.w-100.py-3.fw-bold.text-white.fs-5 {
    padding: 10px 10px !important;
    font-size: 15px !important;
    border-radius: 50px;
  }

  .petcare-hero h1 {
    font-size: 29px;
    margin-bottom: 9px !important;
    line-height: 40px !important;

  }

  br.d-none.d-lg-block {
    display: block !important;
  }

  .petcare-steps .scale-up {
    transform: scale(1);
  }

  h2.fw-bolder.mb-3 {
    font-size: 39px !important;
    margin-bottom: 0px !important;
  }

  section.petcare-about.py-5 {
    text-align: center;
  }

  section.petcare-about.py-5 h2 {
    font-size: 30px !important;
  }
}

.stat-item {
  text-align: center;
  display: flex;
  justify-content: center;
}

.petcare-stats h3 {
  margin-bottom: 50px;
  font-size: 40px;
}

/* Mobile Hero Slider Dots */
.petcare-mobile-slider .slick-dots {
  bottom: -30px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.petcare-mobile-slider .slick-dots li {
  margin: 0 4px !important;
  width: 12px !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.petcare-mobile-slider .slick-dots li button {
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background-color: #d1d1d1 !important;
  border: none !important;
  border-radius: 50% !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  display: block !important;
}

.petcare-mobile-slider .slick-dots li button:before {
  display: none !important;
  content: '' !important;
}

.petcare-mobile-slider .slick-dots li.slick-active {
  width: 32px !important;
}

.petcare-mobile-slider .slick-dots li.slick-active button {
  width: 32px !important;
  background-color: #EE802C !important;
  border-radius: 10px !important;
}

section.petcare-seo-links.py-5.bg-white.border-top {
  border-top: 0px !important;
}

button.btn.btn-theme.btn-pill.mt-5.px-5.py-2.fw-bold.text-white.d-none.d-lg-inline-block {
  font-size: 20px !important;
}

button.btn.btn-theme.btn-pill.px-5.py-2.fw-bold.text-white.d-none.d-lg-inline-block {
  font-size: 20px !important;
}

section.petcare-stats.py-5 h3 {
  margin-bottom: 50px !important;
}

a.btn.btn-theme.btn-pill.mt-5.px-5.py-2.fw-bold.text-white.d-none.d-lg-inline-block {
  border-radius: 50px;
  font-size: 18px !important;
}

a.btn.btn-theme.btn-pill.px-5.py-2.fw-bold.text-white.d-none.d-lg-inline-block {
  border-radius: 50px;
  font-size: 18px !important;
}

h2.fw-bold.mb-5.pb-3.steps-heading {
  margin-bottom: 50px !important;
}

section.petcare-hero.pt-5.bg-white.overflow-hidden.position-relative {
  border-bottom: 0px !important;
}

button.btn.btn-theme.btn-pill.w-100.py-3.fw-bold.text-white.fs-5 {
  font-size: 18px !important;
  border-radius: 50px !important;
}

@media (max-width: 991px) {
  .d-flex.gap-3.mt-3 {
    display: flex;
    justify-content: center;
  }

  p.hero-subtext.mx-auto.mx-lg-0 {
    margin-bottom: 20px !important;
  }

  .d-lg-none.mt-4.mb-4 {
    margin-top: 0px !important;
  }

  button.btn.btn-theme.btn-pill.px-4.py-2.text-white.fw-bold.d-inline-flex.align-items-center.justify-content-center.gap-2 {
    margin-top: 0px !important;
  }

  h2.text-center.fw-bold.mb-5.pt-5 {
    padding-top: 0px !important;
  }

  section.petcare-faqs.py-5.bg-white.mt-5 {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }

  section.petcare-bottom-cta.py-5.bg-white.overflow-hidden.position-relative {
    margin-top: 0px !important;
  }

  a.btn.btn-dark.d-flex.align-items-center.rounded-3.px-3.py-2.text-decoration-none {
    padding: 8px 0px !important;
  }

  section.petcare-bottom-cta.py-5.bg-white.overflow-hidden.position-relative {
    text-align: center;
  }

  h1.fw-bold.mb-3 {
    font-size: 30px !important;
  }

  .slick-slider.species-slider.custom-slider-arrows.slick-initialized {
    margin-bottom: 0px;
  }

  h2.fw-bold.mb-5.text-center.pb-3 {
    font-size: 30px !important;
    margin-bottom: 8px !important;
  }

  section.petcare-species.text-center.py-5.mt-5 p {
    width: 100%;
    padding-bottom: 15px !important;
  }

  h2.fw-bold.mb-3 {
    font-size: 30px !important;
  }

  .species-slide {
    padding-left: 24px !important;
  }

  /* Make sure sliders have enough bottom margin to show their web arrows on mobile */
  .testimonial-slider.custom-slider-arrows,
  .species-slider.custom-slider-arrows {
    margin-bottom: 80px !important;
  }

  .testimonial-slider.custom-slider-arrows button.slick-prev,
  .testimonial-slider.custom-slider-arrows button.slick-next,
  .species-slider.custom-slider-arrows button.slick-prev,
  .species-slider.custom-slider-arrows button.slick-next {
    display: block !important;
  }

  /* Disable arch effect on mobile */
  .species-slider .species-card-custom,
  .species-slider .slick-active .species-card-custom,
  .species-slider .slick-active+.slick-active .species-card-custom,
  .species-slider .slick-active+.slick-active+.slick-active .species-card-custom {
    transform: none !important;
  }

  .species-slider .species-card-custom {
    margin: 0px 5px !important;
  }

  .species-pill-label {
    bottom: 12px !important;
  }

  h2.fw-bold.mb-5 {
    font-size: 30px !important;
  }

  .px-3.py-2 {
    padding: 0px !important;
  }

  .why-mobile-slider {
    margin-bottom: 60px !important;
  }

  .why-mobile-slider .slick-dots {
    bottom: -45px !important;
  }
}

button.btn.dropdown-toggle.btn-default.bs-placeholder {
  border-bottom: 1px solid #d8d8d8;
  border-radius: 0px !important;
  background-color: #ffffff !important;
  padding: 10px 10px !important;
  color: #000 !important;
}

.dropdown.bootstrap-select.form-control.bs3 {
  padding: 0px !important;
}

button.btn.dropdown-toggle.btn-default {
  border-bottom: 1px solid #d8d8d8;
  border-radius: 0px !important;
  background-color: #ffffff !important;
  padding: 10px 10px !important;
  color: #000 !important;
}

label.control-label {
  margin-bottom: 0px !important;
}

/* Testimonial Equal Height */
.testimonial-slider .slick-track {
  display: flex !important;
}

.testimonial-slider .slick-slide {
  height: auto !important;
  display: flex !important;
}

.testimonial-slider .slick-slide>div {
  width: 100% !important;
  height: 100% !important;
}

.testimonial-content-box {
  flex-grow: 1 !important;
}