/* Responsive adjustments */
  @media (max-width: 768px) {
    .blog-wrapper {
      max-width: 100vw;
      padding: 0 60px;
    }

    .blog-slider-container {
      max-width: 100%;
    }

    .blog-nav-button {
      padding: 12px 16px;
      font-size: 20px;
    }
  }

  @media (max-width: 480px) {
    .blog-wrapper {
      padding: 0 50px;
    }

    .blog-nav-button {
      padding: 10px 14px;
      font-size: 18px;
    }
  }

   @media (min-width: 1025px) {
    .blog-explore {
      padding: 10px 40px;
      margin: 10px 0;
      gap: 100px;
    }

    /* .explore-button {
      padding: 14px 28px !important;
      font-size: 16px !important;
      transition: all 0.3s ease !important;
    }

    .explore-button:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(192, 64, 0, 0.3) !important;
    }
  } */
  }

  /* ========== LARGE DESKTOP ========== */
  @media screen and (min-width: 1200px) {

    /* Home Section */
    .home-content {
      right: 8%;
      max-width: 600px;
    }

    .text-content h1 {
      font-size: 3.2rem;
    }

    /* Contact Section */
    .contact-section {
      /* padding:; */
      gap: 120px;
      /* max-height: 50vh; */
    }

    .form-container {
      width: 450px;
      padding: 40px;
    }

    .info-container {
      max-width: 550px;
    }

    .info-container-map {
      width: 550px;
      height: 300px;
    }
    .service-card.center,
    .service-card:not(.left):not(.right) {
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }
   


  }

  /* ========== DESKTOP ========== */
  @media (max-width: 1199px) and (min-width: 992px) {
    .home-content {
      right: 4%;
      max-width: 500px;
    }

    .text-content h1 {
      font-size: 3rem;
    }

    /* Contact Section */
    .contact-section {
      padding: 50px 30px;
      gap: 80px;
    }

    .form-container {
      width: 420px;
      padding: 35px;
    }

    .info-container {
      max-width: 520px;
    }

    .info-container-map {
      width: 520px;
      height: 280px;
    }
  }

  /* ========== TABLET LANDSCAPE ========== */
  @media screen and (max-width: 1024px) and (min-width: 769px) {

    /* Navigation */
    .navbar {
      padding: 1rem 1.5rem;
      height: 10vh;
    }

    .contact-box .name {
      font-size: 22px;
    }

    .contact-box .phone {
      font-size: 15px;
    }

    .nav-menu {
      gap: 1.5rem;
    }

    .nav-link {
      font-size: 0.95rem;
      padding: 0.4rem 0.8rem;
    }

    /* Home Section */
    .home-content {
      right: 1%;
      max-width: 550px;
    }

    .text-content h1 {
      font-size: 2.4rem;
    }

  }


  /* ========== TABLET LANDSCAPE - CONTACT SPECIFIC ========== */
  @media (max-width: 991px) and (min-width: 769px) {

    /* Contact Section */
    .home-subtitle {
      padding-top: 20px;
    }

    .home-text-h1 {
      padding-top: 10px;
    }

    .home-content-butten {
      padding-top: 70px;
      text-align: center;
    }

    .contact-section {
      padding: 40px 25px;
      gap: 60px;
      min-height: auto;
      height: auto;
    }

    .form-container {
      width: 380px;
      padding: 30px;
    }

    .info-container {
      max-width: 480px;
    }

    .info-container-map {
      width: 100%;
      max-width: 480px;
      height: 250px;
    }

    .contact-heading h1 {
      font-size: 1.6em;
    }

    .info-container h2 {
      font-size: 1.6em;
    }
  }

  /* Blog explore section adjustments for tablet landscape */
  @media (max-width: 1024px) and (min-width: 769px) {
    .blog-explore {
      padding: 10px 20px;
      margin: 10px 0;
      gap: 60px;
    }
/* 
    .explore-button {
      padding: 10px 20px !important;
      font-size: 16px !important;
    } */
  }

  /* ========== TABLET PORTRAIT & MOBILE LANDSCAPE ========== */
  @media screen and (max-width: 768px) {

    /* Navigation */
    .navbar {
      height: 8vh;
      padding: 1rem;
    }

    .contact-box .name {
      font-size: 20px;
    }

    .contact-box .phone {
      font-size: 14px;
    }

    .nav-toggler {
      display: flex;
    }

    .nav-toggler .bar {
      background-color: white !important;
    }

    .nav-toggler.active .bar:nth-child(1),
    .nav-toggler.active .bar:nth-child(3) {
      background-color: white !important;
    }

    .nav-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 70%;
      height: 100vh;
      background: white;
      /* No blur */
      backdrop-filter: none !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 1000;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
      transform: translateX(0);
    }

    .nav-link {
      font-size: 1.2rem;
      padding: 1rem;
      color: black;
      text-shadow: none;
    }

    .nav-link:hover,
    .nav-link.active {
      background-color: rgba(0, 0, 0, 0.1);
      color: black;
    }

    /* Home Section */
    .home-text-h1 {
      top: 15vh;
      right: 10%;
      text-align: center;
    }

    .home-text-h1 h1 {
      font-size: 2.5rem;
      line-height: 1.1;
    }

    .text-content-p {
      margin-top: 40%;
      margin-left: 10%;
      text-align: center;
    }


    .text-content-p .home-subtitle,
    .text-content-p .home-subheading {
      font-size: 24px;

    }

    .home-description {
      margin-left: 10%;
      margin-right: 10%;
      width: 80%;
      text-align: center;
    }

    .home-description p {
      font-size: 18px;
      line-height: 1.4;
    }

    .home-content-butten {
      margin-left: 10%;
      margin-top: 30px;
      text-align: center;
    }

    .home-content button {
      padding: 12px 30px;
      font-size: 1rem;
    }

    .social-icons {
      bottom: 25px;
      left: 20px;
      transform: none;
      justify-content: flex-start;
      gap: 15px;
    }

    .chat-icon {
      bottom: 15px;
      right: 20px;
    }

    .chat-icon img {
      width: 150px !important;
    }

    .home {
      background-attachment: scroll;
    }

    /* Blog explore section adjustments for tablet portrait & mobile landscape */
    .blog-explore {
      padding: 25px 15px !important;
      margin: 30px 0 !important;
      gap: 20px !important;
      flex-direction: column !important;
      text-align: center !important;
    }

    /* .explore-button {
      padding: 12px 24px !important;
      font-size: 14px !important;
      width: auto !important;
      min-width: 120px !important;
    } */

    .decorative-dog {
      max-width: 80px !important;
      height: auto !important;
    }

    /* Contact Section */
    .contact-section {
      flex-direction: column;
      align-items: center;
      padding: 30px 20px;
      gap: 40px;
      min-height: auto;
      height: auto;
    }

    .form-container,
    .info-container {
      width: 100%;
      max-width: 500px;
    }

    .form-container {
      padding: 25px;
    }

    .info-container-map {
      width: 100%;
      height: 220px;
    }

    .contact-heading h1 {
      font-size: 1.5em;
      text-align: center;
    }

    .contact-heading p {
      text-align: center;
      font-size: 0.9em;
    }

    .info-container h2 {
      font-size: 1.5em;
      text-align: center;
    }

    .info-container p {
      text-align: center;
      max-width: 100%;
    }

    .info-container h3 {
      font-size: 1.2em;
      text-align: center;
    }

    .info-item {
      font-size: 0.85em;
      justify-content: center;
      text-align: center;
    }



    /* Hide dog images on tablet portrait and mobile landscape */
    .about-image img[alt="Dog Image"],
    .footer-img .dog-img,
    .dog-img,
    .decorative-dog {
      display: none !important;
    }

    /* Adjust layouts when images are hidden */
    .about-section {
      flex-direction: column;
      text-align: center;
      min-height: auto;
      padding: 25px 20px;
      justify-content: center;
      align-items: center;
      display: flex;
    }

    /* Ensure service card images are properly displayed on tablet/mobile */
    .card-img-wrapper img,
    .service-card img {
      display: block !important;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-content {
      width: 100%;
      max-width: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    .about-content h2 {
      font-size: 1.8rem;
      margin-bottom: 15px;
    }

    .about-content p {
      font-size: 16px;
      line-height: 1.4;
      margin-bottom: 15px;
      text-align: center;
    }

    .about-content button {
      margin-top: 15px;
      padding: 10px 20px;
      font-size: 14px;
    }

    .about-image {
      display: none;
    }

    .service-card {
      text-align: center;
      margin-top: 30px;
      /* Added gap from top for tablet/mobile */
      opacity: 1 !important;
      /* Ensure service cards are visible on tablet */
      filter: none !important;
      /* Remove any blur/filter effects */
      transform: none !important;
      /* Remove any transform effects that might hide content */
    }



    .footer-img {
      display: none;
    }
    .footer-links{
      color: rgba(0, 0, 0, 1) !important;
    }
  }

  /* ========== MOBILE PORTRAIT ========== */
  @media screen and (max-width: 480px) {

    /* Navigation */
    .navbar {
      padding: 0.8rem;
      height: 7vh;
    }

    .contact-box {
      padding: 8px 12px;
    }

    .contact-box .name {
      font-size: 18px;
    }

    .contact-box .phone {
      font-size: 13px;
    }

    .nav-toggler {
      display: flex;
    }

    .nav-toggler .bar {
      background-color: white !important;
    }

    .nav-toggler.active .bar:nth-child(1),
    .nav-toggler.active .bar:nth-child(3) {
      background-color: white !important;
    }

    .nav-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 70%;
      height: 100vh;
      background: white;
      /* Removed blur for clarity */
      backdrop-filter: none !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 1000;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
      transform: translateX(0);
    }

    .nav-link {
      font-size: 1.2rem;
      padding: 1rem;
      color: black;
      text-shadow: none;
    }

    .nav-link:hover,
    .nav-link.active {
      background-color: rgba(0, 0, 0, 0.1);
      color: black;
    }

    /* Home Section */
    .home-text-h1 {
      top: 12vh;
      right: 5%;
      text-align: center;
    }

    .home-text-h1 h1 {
      font-size: 1.5rem;
      line-height: 1.1;
    }

    .text-content-p {
      margin-top: 45%;
      margin-left: 5%;
      text-align: center;
    }

    .text-content-p .home-subtitle,
    .text-content-p .home-subheading {
      font-size: 14px;
    }

    .home-description {
      margin-left: 5%;
      margin-right: 5%;
      width: 90%;
      text-align: center;
    }

    .home-description p {
      font-size: 16px;
      line-height: 1.4;
    }

    .home-content-butten {
      margin-left: 5%;
      margin-top: 25px;
      text-align: center;
    }

    .home-content button {
      padding: 10px 25px;
      font-size: 0.9rem;
      margin-top: 35px;
    }

    .social-icons {
      bottom: 20px;
      left: 15px;
      transform: none;
      justify-content: flex-start;
      gap: 12px;
    }

    .chat-icon {
      bottom: 10px;
      right: 15px;
    }

    .chat-icon img {
      width: 120px !important;
    }

    .home {
      background-attachment: scroll;
    }

    /* Contact Section */
    .contact-section {
      padding: 25px 30px;
      gap: 30px;
    }

    .form-container {
      padding: 20px;
      max-width: 100%;
    }

    .info-container {
      max-width: 100%;
    }

    .contact-heading h1 {
      font-size: 1.3em;
      line-height: 1.2;
    }

    .contact-heading p {
      font-size: 0.85em;
    }

    .info-container h2 {
      font-size: 1.3em;
    }

    .info-container p {
      font-size: 0.85em;
    }

    .info-item {
      font-size: 0.85em;
      justify-content: center;
      text-align: center;
    }

    .info-container h3 {
      font-size: 1.2em;
      text-align: center;
    }

    .info-container-map {
      height: 200px;
    }

    form label {
      font-size: 0.85em;
    }

    form input,
    form textarea {
      padding: 12px;
      font-size: 14px;
    }

    form button {
      padding: 14px;
      font-size: 0.95em;
    }



    /* Hide dog images on mobile portrait */
    .about-image img[alt="Dog Image"],
    .carousel-card img,
    .footer-img .dog-img,
    .dog-img,
    .decorative-dog,
    .leaf {
      display: none !important;
    }
     .carousel-card {
      margin-top: 20px  ;
      width: 250px  ;
      height: 300px ;
      /* Increased height */
      min-width: 250px  ;
      padding: 15px !important;
      padding-top: 20px  ;
      /* Increased top padding for title */
      flex-direction: column !important;
      justify-content: space-between !important;
      box-sizing: border-box !important;
    }

    /* Only apply flex display when card is visible */
    .carousel-card:not([style*="display: none"]) {
      display: flex !important;
    }

    .carousel-card img {
      height: 150px !important;
      width: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      padding: 5px;
    }

    .carousel-card h3 {
      font-size: 16px !important;
      margin-bottom: 8px !important;
      flex-shrink: 0 !important;
    }

    .carousel-card p {
      font-size: 12px !important;
      line-height: 1.4 !important;
      flex: 1 !important;
      /* Take available space */
      margin-bottom: 12px !important;
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 5 !important;
      /* More lines on smaller screen */
      -webkit-box-orient: vertical !important;
    }
     

    /* Adjust layouts when images are hidden */
    .about-section {
      flex-direction: column;
      text-align: center;
      min-height: auto;
      padding: 8px 15px;
      justify-content: center;
      align-items: center;
      display: flex;
    }

    /* Ensure service card images are properly displayed on mobile */
    .card-img-wrapper img,
    .service-card img {
      display: block !important;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-content {
      width: 100%;
      max-width: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    .about-content h2 {
      font-size: 1.5rem;
      margin-bottom: 12px;
    }

    .about-content p {
      font-size: 14px;
      line-height: 1.4;
      margin-bottom: 12px;
      text-align: center;
    }

    .about-content button {
      margin-top: 12px;
      padding: 8px 16px;
      font-size: 13px;
    }

    .about-image {
      display: none;
    }

    .service-card {
      text-align: center;
      margin-top: 25px;
      /* Added gap from top for mobile portrait */
      opacity: 1 !important;
      /* Ensure service cards are visible on mobile portrait */
      filter: none !important;
      /* Remove any blur/filter effects */
      transform: none !important;
      /* Remove any transform effects that might hide content */
    }



    .footer-img {
      display: none;
    }
  }

  /* ========== EXTRA SMALL MOBILE ========== */
  @media screen and (max-width: 360px) {

    /* Navigation */
    .contact-box .name {
      font-size: 16px;
    }

    .contact-box .phone {
      font-size: 12px;
    }

    /* Contact Section */
    .contact-section {
      padding: 20px 10px;
      gap: 25px;
    }

    .form-container {
      padding: 15px;
    }

    .contact-heading h1 {
      font-size: 1.2em;
    }

    .contact-heading p {
      font-size: 0.8em;
    }

    .info-container h2 {
      font-size: 1.2em;
    }

    .info-container p {
      font-size: 0.8em;
    }

    .info-item {
      font-size: 0.8em;
    }

    .info-container h3 {
      font-size: 1.1em;
    }

    .info-container-map {
      height: 180px;
    }

    form input,
    form textarea {
      padding: 10px;
      font-size: 13px;
    }

    form button {
      padding: 12px;
      font-size: 0.9em;
    }

    /* Hide dog images on extra small mobile */
    .about-image img[alt="Dog Image"],
    .carousel-card img,
    .footer-img .dog-img,
    .dog-img,
    .decorative-dog {
      display: none !important;
    }

    /* Adjust layouts when images are hidden */
    .about-section {
      flex-direction: column;
      text-align: center;
    }

    /* Ensure service card images are properly displayed on small mobile */
    .card-img-wrapper img,
    .service-card img {
      display: block !important;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-content {
      width: 100%;
      max-width: none;
    }

    .about-image {
      display: none;
    }

    .service-card {
      text-align: center;
      margin-top: 25px;
      /* Added gap from top for mobile portrait */
      opacity: 1 !important;
      /* Ensure service cards are visible on mobile portrait */
      filter: none !important;
      /* Remove any blur/filter effects */
      transform: none !important;
      /* Remove any transform effects that might hide content */
    }



    .carousel-card {
      text-align: center;
    }

    .footer-img {
      display: none;
    }
  }

  /* Hide service carousel left and right cards below 800px */
  @media (max-width: 799px) {

    .service-card.left,
    .service-card.right {
      display: none !important;
    }

    /* Ensure center service card images are visible and properly sized */
    .service-card.center img,
    .service-card:not(.left):not(.right) img,
    .service-card .card-img-wrapper img {
      display: block !important;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Ensure center service card is always visible */
    .service-card.center,
    .service-card:not(.left):not(.right) {
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }

    /* Add top margin to visible service cards on mobile */
    .service-card {
      margin-top: 35px;
      /* Extra gap from top for mobile service cards */
      opacity: 1 !important;
      /* Ensure service cards are visible on mobile */
      filter: none !important;
      /* Remove any blur/filter effects */
      transform: none !important;
      /* Remove any transform effects that might hide content */
    }
    .footer-column{

    }
  }

  /* Override hiding of carousel images - show blog images at all screen sizes */

  /* Blog carousel responsive - 701px to 870px (smaller cards) */
  @media (min-width: 701px) and (max-width: 870px) {
    .carousel-slider {
      width: 540px !important;
      /* 2 cards * 250px + gap */
      max-width: 540px !important;
    }

    .carousel-card {
      width: 230px !important;
      /* 150px smaller than default 400px */
      min-width: 230px !important;
      height: 340px !important;
      /* Reduced height for better proportions */
    }
  }

  /* Blog carousel responsive - 700px and below */
  @media (max-width: 700px) {
    .blog-section .intro {
      max-width: 90vw;
    }

    .carousel-slider {
      width: 100% !important;
      max-width: 270px !important;
      /* Single card width */
      justify-content: center !important;
    }

    .carousel-card {
      /* margin-top: 20px; */
      /* width: 300px ; */
      height: 350px;
      /* Increased hei/ght */
      /* min-width: 300px ; */
      /* padding: 15px; */
      /* padding-top: 25px ;   */
      /* Increased top padding for title */
      flex-direction: column !important;
      justify-content: space-between !important;
      box-sizing: border-box !important;
    }

    /* Only apply flex display when card is visible */
    .carousel-card:not([style*="display: none"]) {
      display: flex !important;
    }

    .carousel-card img {
      height: 150px !important;
    }

    .carousel-card h3 {
      font-size: 16px !important;
      margin-bottom: 8px !important;
      flex-shrink: 0 !important;
      padding-left: 3px !important;
    }

    .carousel-card p {
      font-size: 12px !important;
      line-height: 1.4 !important;
      flex: 1 !important;
      /* Take available space */
      margin-bottom: 12px !important;
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 5 !important;
      /* More lines on smaller screen */
      -webkit-box-orient: vertical !important;
      margin-top: 10px !important;
      padding-left: 3px;
    }

    /* Ensure blog carousel images are visible */
    .blog-section .carousel-card img {
      display: block !important;
      height: 160px ;
      /* Smaller to fit content */
      flex-shrink: 0 !important;
    }

    /* Ensure read more button is visible and at bottom */
    .blog-section .carousel-card .read-more {
      display: block !important;
      visibility: visible !important;
      margin-top: auto !important;
      font-size: 10px !important;
      padding: 8px 0 2px 0 !important;
      flex-shrink: 0 !important;
      align-self: flex-start !important;
    }

    .carousel-slider {
      max-width: 530px !important;
      /* 2 cards * 250px + gap */
    }

    .carousel-btn {
      padding: 6px !important;
      font-size: 14px !important;

    }

    .carousel-container .carousel-btn-left {
      bottom: 70px !important;
      /* Moved up to create space */
      left: calc(50% - 60px) !important;
    }

    .carousel-container .carousel-btn.right {
      bottom: 70px !important;
      /* Moved up to create space */
      right: calc(50% - 60px) !important;
      margin-left: 20px;
    }

    .carousel-container {
      padding: 15px 15px 10px 15px !important;
      /* Reduced bottom padding to bring explore button closer */
    }

    /* Add bottom spacing to explore button */
    /* .explore-button {
      margin-bottom: 10px !important;
    } */

    /* Better spacing for blog-explore section on mobile */
    .blog-explore {
      padding: 30px 15px !important;
      margin-top: 25px !important;
      margin-bottom: 40px !important;
      gap: 15px !important;
      flex-direction: column !important;
      text-align: center !important;
    }

    .decorative-dog {
      max-width: 60px !important;
      height: auto !important;
    }
  }

  /* Hide leaf images in mobile screen */
  @media (max-width: 699px) {

    .leaf,
    .left-leaf,
    .right-leaf {
      display: none !important;
    }
  }

  /* Prevent horizontal overflow for the entire page */
  html,
  body {
    width: auto !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Client Spotlight Section - Tablet & Mobile */
  @media (max-width: 768px) {
    .client-spotlight {
      width: 100% !important;
      min-height: 50vh !important;
      padding: 30px 15px !important;
      /* margin-bottom: 60px !important; */
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    .spotlight-wrapper {
      width: 100% !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
    }

    .spotlight-card {
      width: 100% !important;
      height: 55vh !important;
      flex-direction: column !important;
      gap: 15px !important;
      padding: 15px !important;
    }

    .testimonial {
      width: 100% !important;
      max-height: 300px !important;
      padding: 10px !important;
      text-align: left !important;
      margin-bottom: 20px !important;
    }

    .images-grid {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      height: auto !important;
    }

    .images-grid img {
      width: 100% !important;
      height: 180px !important;
      object-fit: cover !important;
      border-radius: 8px !important;
    }

    .images-grid img:nth-child(3) {
      display: none !important;
    }

    .spotlight-nav-button {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      margin-top: 25px !important;
      position: static !important;
    }

    .spotlight-nav-button button {
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      background: transparent !important;
      border: 2px solid #2e4c3f !important;
      color: #2e4c3f !important;
      cursor: pointer !important;
      font-size: 18px !important;
    }
  }

  /* Additional adjustments for smaller screens */
  @media (max-width: 480px) {
    .client-spotlight {
      min-height: 60vh !important;
      /* padding: 20px 10px !important; */
    }

    .images-grid img {
      height: 155px !important;
      margin-bottom: -74px !important;
    }

    .testimonial {
      padding: 5px !important;
      /* height: 2000px !important; */
    }

    .headline-strong {
      font-size: 16px !important;
    }

    .headline-p {
      font-size: 14px !important;
    }
  }

  /* Client Section - Adjustments for tablet and mobile */
  @media (max-width: 768px) {
    .client-section {
      padding: 20px 15px;
      gap: 30px;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .client-card {
      width: 100%;
      max-width: 350px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .client-card img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .client-card h3 {
      font-size: 18px;
      margin-bottom: 8px;
      text-align: center;
    }

    .client-card p {
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 10px;
    }

    .client-card a {
      font-size: 14px;
      color: #007bff;
      text-decoration: none;
      transition: color 0.3s;
    }

    .client-card a:hover {
      color: #0056b3;
    }
  }

  /* Book grid: 2 columns, 3 rows on phone */
  @media (max-width: 700px) {
    .book-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: repeat(3, 1fr) !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      box-sizing: border-box;
    }

    .book-grid img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      object-fit: contain !important;
    }

    /* Reviews grid: 3 rows, 1 column, full width, with left and right padding */
    .reviews-row {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: repeat(3, auto) !important;
      gap: 16px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box;
      padding-left: 14px !important;
      padding-right: 14px !important;
      overflow-x: visible !important;
    }

    .review-card {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      box-sizing: border-box;
      overflow: visible !important;
      word-break: break-word;
    }
  }

  @media (max-width: 480px) {
    footer.footer {
      height: auto !important;
      min-height: 70vh !important;
      max-height: 70vh !important;
      width: 100vw !important;
      box-sizing: border-box;
      padding: 15px 10px 1px 5px;
      /* More space on right, less gap at bottom */
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      color: #000000 !important;
    }

    .footer-overlay,
    .footer-content {
      height: 100%;
      min-height: 100%;
      width: 100vw;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: #000000 !important;
    }

    .footer-content {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      width: 100vw;
      padding: 10px 0 5px 0;
      /* Less gap at bottom */
      align-items: stretch;
      justify-items: stretch;
      color: #000000 !important;
    }

    .footer-column-left,
    .footer-column,
    .footer-img {
      min-width: 0;
      min-height: 0;
      box-sizing: border-box;
      padding: 5px;
      margin-right: 10px;
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow: visible;
      /* padding-top: 15px; */
      color: #000000 !important
    }

    .footer-column-left {
      grid-column: 1;
      grid-row: 1;
    }

    .footer-column:nth-of-type(1) {
      grid-column: 2;
      grid-row: 1;
    }

    .footer-column:nth-of-type(2) {
      grid-column: 1;
      grid-row: 2;
    }

    .footer-column:nth-of-type(3) {
      grid-column: 2;
      grid-row: 2;
    }

    .footer-img {
      grid-column: 1 / span 2;
      grid-row: 3;
      justify-self: center;
      align-self: end;
      display: block;
      max-width: 80px;
      max-height: 80px;
    }

    .footer-img img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Ensure no content is cut or hidden */
    .footer-content>* {
      overflow: visible !important;
      max-width: 88%;
      max-height: 95%;
      word-break: break-word;
      color: #000000 !important;
      padding-left: 10px;
      /* Add left gap */
    }

    /* Increase map height and ensure it is not cut */
    .footer-column .map,
    .footer-column iframe {
      max-width: 100%;
      width: 100%;
      height: 160px !important;
      min-height: 120px !important;
      display: block;
      color: #000000 !important;
    }

    /* Make all text inside footer white */
    .footer-content,
    .footer-content *,
    .footer-overlay,
    .footer-overlay *,
    .footer-column,
    .footer-column *,
    .footer-column-left,
    .footer-column-left *,
    .footer-img,
    .footer-img * {
      color: #000000 !important;
    }
  }

  /* Book grid: 2 columns, 3 rows on phone */
  @media (max-width: 700px) {
    .book-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: repeat(3, 1fr) !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      box-sizing: border-box;
    }

    .book-grid img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      object-fit: contain !important;
    }

    /* Reviews grid: 3 rows, 1 column, full width, with left and right padding */
    .reviews-row {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: repeat(3, auto) !important;
      gap: 16px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box;
      padding-left: 14px !important;
      padding-right: 14px !important;
      overflow-x: visible !important;
    }

    .review-card {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      box-sizing: border-box;
      overflow: visible !important;
      word-break: break-word;
    }
 .footer-content,
    .footer-content *,
    .footer-overlay,
    .footer-overlay *,
    .footer-column,
    .footer-column *,
    .footer-column-left,
    .footer-column-left *,
    .footer-img,
    .footer-img * {
      color: #000000 !important;
    }
  }
  

  /* ==== Horizontal overflow fixes ==== */
  html { overflow-x: clip !important; }
  body { overflow-x: clip !important; }
  .main-container,
  .navbar,
  .border-line,
  .carousel-container,
  .carousel,
  .footer-overlay,
  .footer-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  img, video { max-width: 100%; height: auto; }

  /* Footer spacing for large screens */
  @media screen and (min-width: 1200px) {
    .footer-content {
      justify-content: space-evenly !important;
    }
  }

  /* Hide dog image in footer below 1200px */
  @media screen and (max-width: 1199px) {
    .footer-img, .footer-img .dog-img, .dog-img {
      display: none !important;
    }
  }

   @media (max-width: 1024px) {
            .bt-carousel-wrapper {
                padding: 30px 15px;
            }
            
            .bt-main-display {
                gap: 30px;
                padding: 25px;
                height: 420px;
                min-height: 420px;
                max-height: 420px;
            }
            
            .bt-featured-book-image {
                width: 220px;
                height: 330px;
            }

            .bt-book-main-title {
                font-size: 32px;
                height: 100px;
            }

            .bt-reviews-display-row {
                flex-wrap: wrap;
            }

            .bt-individual-review-card {
                max-width: 45%;
            }
        }

        @media (max-width: 768px) {
            .bt-main-display {
                flex-direction: column;
                text-align: center;
                gap: 25px;
                padding: 20px;
                height: 700px;
                min-height: 700px;
                max-height: 600px;
                align-items: center;
            }
            
            .bt-featured-image-container {
                height: 300px;
                flex: none;
            }
            
            .bt-featured-book-image {
                width: 180px;
                height: 270px;
                min-width: 180px;
                min-height: 270px;
            }
            
            .bt-book-details {
                flex: 1;
                height: 250px;
                justify-content: space-between;
            }

            .bt-book-main-title {
                font-size: 24px;
                height: 80px;
                text-align: center;
                justify-content: center;
            }

            .bt-book-description {
                -webkit-line-clamp: 4;
                font-size: 0.9rem;
                padding: 0 0.5rem;
            }

            .bt-action-buttons {
                margin-top: 20px;
                height: 40px;
            }
            
            .bt-carousel-title {
                font-size: 2rem;
            }
            
            .bt-carousel-subtitle {
                font-size: 1rem;
            }
            
            .bt-decorative-leaf {
                display: none;
            }
            
            .bt-books-display-grid {
                gap: 0.8rem;
            }
            
            .bt-grid-book-thumbnail {
                width: 180px;
            }

            .bt-reviews-display-row {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .bt-individual-review-card {
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
             
            
            .bt-main-display {
                height: 550px;
                min-height: 550px;
                max-height: 550px;
                padding: 15px;
            }
            
            .bt-carousel-title {
                font-size: 1.5rem;
            }
            
            .bt-featured-book-image {
                width: 150px;
                height: 225px;
            }

            .bt-book-main-title {
                font-size: 20px;
                height: 70px;
            }

            .bt-book-description {
                font-size: 0.85rem;
                -webkit-line-clamp: 3;
            }
            
            .bt-grid-book-thumbnail {
                width: 150px;
            }
            
            .bt-action-buttons {
                flex-direction: column;
                gap: 10px;
                height: 60px;
            }

            .bt-books-display-grid {
                justify-content: center;
            }
        }



        @media(max-width: 1200px){
            .home-new-updatext{
    display: flex; justify-content: space-evenly ; align-items: center; padding: 10px; gap: 1%; width: 100vw; height: fit-content;
  }
  .home-new-updatext-h1{
    color: white; max-width: 50%; margin-right: 10% ;
    padding: 10px;
  }

  .home-new-subtitle{
    margin-top: 15px; margin-bottom: 15px; font-size: 1.5rem;
  }
  .home-subtitle {
    margin-left: -1%;
  }
   .home-contact-button{
    /* margin-top: -20px!important; */
    margin-left: 40% !important;
    align-items: center;
    margin: 0 auto;
  }
        }
        @media(max-width: 800px){
            /* .home-new-updatext{
    display: grid; justify-content: space-evenly ; align-items: center; padding: 10px; gap: 1%; width: 100vw; height: fit-content;
  } */
  .home-new-updatext-h1{
    color: white; max-width: 100%; ;
    padding: 1px;
  }

  .home-new-subtitle{
    margin-top: 15px; margin-bottom: 15px; font-size: 1.5rem;
  }
  .home-subtitle {
    margin-left: -1%;
  }
   .home-contact-button{
    margin-top: 10px!important;
    margin-left: 25%;
  }
        }
        @media(max-width: 650px){
            .home-new-updatext{
    display: grid; justify-content: center ; align-items: center; padding: 10px; padding-left: 10px; gap: 1%; width: 100vw; height: fit-content;
  }
  .home-new-updatext-h1{
    color: white; max-width: 100%; ;
    padding: 1px;
  }

  .home-new-subtitle{
    margin-top: 15px; margin-bottom: 15px; font-size: 1.5rem;
  }
  .home-subtitle {
    margin-left: -1%;
  }
  .home-book img{
    width: 200PX;
    align-items:center;
    justify-content: center;
    /* margin-left: 25%; */
  }
  .home-book p{
    margin-left: 25%;
    
  }
  .home-contact-button{
    margin-top: 20px!important;
    margin-left: 25%;
  }
        }

         @media(max-width: 480px){
           .home-contact-button{
    margin-top: -20px!important;
    margin-left: 25%;
  }
         }


         @media(max-width: 400px){
      .home-text-h1{
        /* font-size: 1rem!; */
      }

         }