@media (max-width: 1000px) {
    .carousel {height: 540px;}
    .carousel-item {width: 330px;height: 235px;}
    .carousel-item.center {transform: translate(-50%, -50%) scale(1.3);}
    .carousel-item.left {transform: translate(-135%, -50%) scale(0.85);}
    .carousel-item.right {transform: translate(35%, -50%) scale(0.85);}
}

@media (max-width: 900px) {
    .carousel {height: 500px;}
    .carousel-item {width: 300px;height: 210px;}
    .carousel-item.center {transform: translate(-50%, -50%) scale(1.25);}
    .carousel-item.left {transform: translate(-125%, -50%) scale(0.85);}
    .carousel-item.right {transform: translate(25%, -50%) scale(0.85);}

    .pricing-container {flex-direction: column;}
    .pricing-left,
    .pricing-right {width: 100%;}
    .pricing-left {align-items: stretch;}
}

@media (max-width: 800px) {
    .carousel {height: 460px;}
    .carousel-item {width: 280px;height: 200px;}
    .carousel-item.center {transform: translate(-50%, -50%) scale(1.2);}
    .carousel-item.left {transform: translate(-120%, -50%) scale(0.8);}
    .carousel-item.right {transform: translate(20%, -50%) scale(0.8);}
}

@media (max-width: 768px) {
    .hero-text {margin-top: 280px;}
    .hero-icon {width: 300px;height: auto;}
    .hero-section, .hero-overlay {min-height: 75vh;}

    .hero-overlay h1 {font-size: 2.1rem;}
    .hero-overlay p {font-size: 1rem;}

    .about-section, .pricing-section {padding: 60px 15px;}

    .content-box {padding: 28px 18px; border-radius: 20px;}
    .content-box h2 {font-size: 1.6rem;}

    .pricing-list li {font-size: 1rem;padding-left: 30px;}

    .paw {width: 32px;height: 32px;opacity: 0.18;}
    .paw-1 { left: 45%; bottom: 4%; }
    .paw-2 { left: 51%; bottom: 12%; }
    .paw-3 { left: 38%; bottom: 25%; }
    .paw-4 { left: 57%; bottom: 35%; }
    .paw-5 { left: 30%; bottom: 48%; }
    .paw-6 { left: 63%; bottom: 58%; }
    .paw-7 { left: 24%; bottom: 72%; }
    .paw-8 { left: 68%; bottom: 84%; }

    .contact-card p {font-size: 15px;}
    h1 {font-size: 2rem;}
    h2 {font-size: 1.5rem;}
    section {padding: 40px 15px;}
}


@media (max-width: 768px) {
    .contact-card {display: flex;flex-direction: column;gap: 10px;padding: 20px 10px;}
    .contact-item {display: flex;align-items: center;justify-content: flex-start;gap: 10px;}
    .contact-icon {font-size: 18px;min-width: 20px;}
    .contact-item strong {font-size: 13px;font-weight: 700;min-width: 90px;text-align: left;}

    .contact-item p {font-size: 13px;margin: 0;flex: 1;text-align: center;font-weight: 650 !important;}
    .contact-card::before, .contact-card::after {display: none;content: none;}

    .email-link {color: inherit;font-weight: 700 !important;}
    .address-value {font-size: 13px !important;}
}


@media (max-width: 768px) {
    .custom-footer .legal-toggle {width: 100% !important;display: flex !important;justify-content: center !important;}
    .custom-footer .footer-content {gap: 20px;padding: 10px 15px;}
    .custom-footer .footer-info {font-size: 14px;line-height: 1.4;}
    .custom-footer .footer-info p {margin: 4px 0;}
    .custom-footer .legal-toggle {width: 100%;font-size: 14px;gap: 8px;padding: 10px 12px;border-radius: 6px;}
    .custom-footer .legal-content {width: 100%;font-size: 13px;}
    .custom-footer .legal-text {font-size: 13px;line-height: 1.5;}
    .custom-footer .social-links {gap: 12px;}
    .custom-footer .social-icon {font-size: 18px;width: 36px;height: 36px;}
    .custom-footer hr {margin: 10px 0;}
}

@media (max-width: 768px) {
  .ripple {
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(107, 79, 58, 0.1) 50%,
      transparent 70%
    ) !important;

    animation: rippleEffectMobile 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    box-shadow:
      0 0 5px rgba(107, 79, 58, 0.15),
      inset 0 0 3px rgba(255, 255, 255, 0.15);
    /*backdrop-filter: blur(1.2px);*/
  }

  @keyframes rippleEffectMobile {
    to {
      transform: translate(-50%, -50%) scale(7);
      opacity: 0;
    }
  }

  .ripple::after {
    border: 0.8px solid rgba(107, 79, 58, 0.1);
    animation: rippleWaveMobile 1.1s ease-out;
  }

  @keyframes rippleWaveMobile {
    to {
      transform: scale(1.4);
      opacity: 0;
    }
  }
}

@media (max-width: 700px) {
    .carousel {height: 380px;overflow: hidden;}
    .carousel-item {width: 290px;height: 200px;}
    .carousel-item.center {transform: translate(-50%, -50%) scale(1.05);}
    .carousel-item.left {transform: translate(-100%, -50%) scale(0.6);}
    .carousel-item.right {transform: translate(0%, -50%) scale(0.6);}
}


@media (max-width: 600px) {
    .reviews-wrapper {width: 96%;border-radius: 16px;}
    .review-slide {padding: 1.2rem;justify-content: flex-start;}
    .review-card {display: flex;flex-direction: column;align-items: flex-start;text-align: left;height: 100%;}
    .review-name {width: 100%;text-align: left;align-self: flex-start;font-size: 0.85rem;margin: 0 0 0.4rem 0;}
    .review-stars {top: 8px;right: 10px;font-size: 0.7rem;}
    .review-text {font-size: 0.78rem;line-height: 1.5;margin-top: 0.6rem;padding-bottom: 0.2rem;display: block;overflow: visible;}
}

@media (max-width: 600px) {
    .carousel {height: 380px;overflow: hidden;}
    .carousel-item {width: 315px;height: 215px;}
    .carousel-item.center {transform: translate(-50%, -50%) scale(1.05);}
    .carousel-item.left {transform: translate(-100%, -50%) scale(0.4);}
    .carousel-item.right {transform: translate(0%, -50%) scale(0.4);}
}

@media (max-width: 500px) {
    .carousel {height: 380px;overflow: hidden;}
    .carousel-item {width: 300px;height: 200px;}
    .carousel-item.center {transform: translate(-50%, -50%) scale(1.05);}
    .carousel-item.left {transform: translate(-100%, -50%) scale(0.38);}
    .carousel-item.right {transform: translate(0%, -50%) scale(0.38);}
}

@media (max-width: 480px) {
    .hero-overlay h1 {font-size: 1.8rem;}
    .hero-overlay p {font-size: 0.95rem;}
    .paw {width: 26px;height: 26px;opacity: 0.16;}
}

.services-marquee {margin-top: 25px;}
.service-item {padding: 10px 14px;font-size: 0.95rem;}
.service-icon {width: 24px;height: 24px;font-size: 1rem;}