@import url("style-desktop.css");

/* Outfit */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Outfit-Bold.ttf') format('truetype');
}

/* Playfair Display */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
}

/* Patrick Hand */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/PatrickHand-Regular.ttf') format('truetype');
}

/* Roboto */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

/* Lora */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Lora-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Lora-Bold.ttf') format('truetype');
}

/* Pacifico */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Pacifico-Regular.ttf') format('truetype');
}

/* Yellowtail */
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Yellowtail-Regular.ttf') format('truetype');
}

/* Sniglet */
@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Sniglet-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Sniglet-ExtraBold.ttf') format('truetype');
}

/* Poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}

/* Boldonse */
@font-face {
  font-family: 'Boldonse';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Boldonse-Regular.ttf') format('truetype');
}

/* Cal Sans */
@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/CalSans-Regular.ttf') format('truetype');
}

/* Bernard MT Condensed */
@font-face {
  font-family: 'Bernard MT Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/BernardMTCondensed-Regular.ttf') format('truetype');
}



/* tablet.css */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* HERO: tighten up & center */
    #hero {
      flex-direction: column;
      padding: 2rem 1rem;
      justify-content: center;
      text-align: center;
    }
    .headline-rotate-wrapper {
      max-width: 80%;
      margin: 0 auto;
    }
    .hero-btn {
      margin: 1.5rem auto 0;
    }

    .hero-title-main .hero-paw {
      position: absolute;
      top: -12px;
      right: -37px;
      font-size: 35px;
      transform: rotate(20deg);
      color: #000;
  }
  
/* desktop & tablet: hide the button, show the full text */
#read-journey-btn {
  display: none !important;
}
.about-content .about-text {
  display: block !important;
  text-align:center;
}



    /* SERVICES: 2-column grid + smaller cards */
    .services-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-top: 1.5rem;
    }
    .services-cards .card {
      padding: 1rem;
      transform: translateY(0);
      opacity: 1;
    }
    .services-cards .card:hover {
      transform: translateY(-3px);
    }
  
    /* ABOUT: smaller portrait */
    .about-portrait-wrapper {
      float: none;
      width: 150px;
      margin: 0 auto 1rem;
      display: block;
    }
  
    /* SAFETY: stack & center everything */
    #safety {
      flex-direction: column;
      padding: 2rem 1rem;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .safety-animation,
    .safety-content {
      flex: none;
      width: 100%;
      max-width: 600px;
      margin: 0 auto 1.5rem;
    }
  
    /* tighten global section padding */
    section {
      padding: 1.5rem;
    }
  
    /* REVIEWS: constrain width */
    .review-rotator {
      max-width: 600px;
      margin: 0 auto;
    }

    .nav-wrapper {
        padding: 0.5rem 1rem;
        width: 95%;
      }
      nav#navbar {
        gap: 1.2rem;
      }
      nav#navbar a {
        font-size: 0.9rem;
      }
    
      /* SECTION TITLES: slightly smaller */
      h2.section-title {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        text-align: center;
      }
    
      /* HERO: shrink logo & headline font */
      #hero .logo-hero {
        width: 200px;
        height: 200px;
      }
      .hero-title-main {
        font-size: clamp(60px, 8vw, 90px);
      }
      .hero-title-sub {
        font-size: clamp(18px, 4vw, 28px);
      }
    
      /* ABOUT: text width cap + line-height boost */
      #about .about-content {
        padding: 2rem;
        max-width: 600px;
      }
      #about p {
        line-height: 1.75;
      }
    
      /* SERVICES: icon & text sizing */
      .services-cards .service-icon {
        font-size: 2.5rem;
      }
      .services-cards .card-title {
        font-size: 1.2rem;
      }
      .services-cards .card p {
        font-size: 0.95rem;
        line-height: 1.4;
      }
    
      /* SAFETY: reduce animation size */
      .safety-animation {
        width: 150px;
        height: 150px;
      }
      .safety-paw {
        font-size: 2.5rem;
      }
      .safety-list-wrapper {
        max-width: 500px;
        margin: 0 auto;
      }

      .safety-list li.active i {
        padding-left: 0rem !important;
      }
      
    
      /* GALLERY: make the stack smaller */
      .photo-stack-wrapper {
        max-width: 400px;
      }
      .photo-stack {
        width: 300px;
        height: 300px;
      }
    
      /* REVIEWS: smaller cards */
      .review-card {
        padding: 0.75rem 1rem;
      }
      .review-avatar {
        width: 60px;
        height: 60px;
      }
      .review-text {
        font-size: 1rem;
      }
    
      /* PARTNERS: shrink logos */
      .partner-logos img {
        max-width: 120px;
        padding: 1rem 0.5rem;
      }
    
      /* CONTACT: compact list */
      #contact .contact-details ul {
        font-size: 0.9rem;
      }
      #contact .social-links {
        gap: 0.5rem;
      }
      #contact .social-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
      }



      #hero {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 1rem;
        height: auto;            /* let it grow to fit */
        scroll-snap-align: start;
      }
    
      /* center your logo and shrink it a touch */
      .logo-hero {
        margin: 0 auto 1rem;
        width: 180px;
        height: 180px;
      }
    
      /* shrink the typing animation text */
      .headline-rotate {
        font-size: clamp(1rem, 3.5vw, 1.8rem);
        max-width: 90%;
        text-align: center;
      }
    
      /* remove the hero-bottom spill-over entirely */
      .hero-bottom-img {
        display: none !important;
      }
    
      /* ensure your “Contact” button sits nicely under the text */
      .hero-btn {
        margin-top: 2rem;
      }


      #hero {
        height: 100vh !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6rem 1rem 2rem;   /* push content down beneath the navbar */
        overflow: hidden;
        z-index: 1;               /* sit above other sections */
      }
    
      /* ensure the typing text is centered */
      .headline-rotate {
        font-size: clamp(1rem, 3.5vw, 1.8rem);
        max-width: 90%;
        text-align: center;
      }
    
      /* shrink & center the logo */
      .logo-hero {
        width: 160px;
        height: 160px;
        margin: 0 auto 1rem;
      }
    
      /* hide that bottom spill-over image entirely */
      .hero-bottom-img {
        display: none !important;
      }
    
      /* bump your main content lower so it won’t start under the hero */
      main {
        margin-top: 100vh;  /* so AboutUs begins just beneath #hero */
      }


      /* ─── FORCE HERO VISIBLE & CENTERED ────────────────────────────────────── */
#hero {
    /* cancel the “scroll-into-view” fade/translate */
    opacity: 1 !important;
    transform: none !important;
  
    /* full-screen flex container, centered both axes */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    /* full viewport height & stop peek-through */
    height: 100vh !important;
    scroll-snap-align: start !important;
  
    /* ensure any overflow is clipped here */
    overflow: hidden;
  }
  
  /* push the rest of the site below your hero (instead of 100vh) */
  main {
    margin-top: 80px; /* adjust to exactly your navbar height */
  }
  
  /* ─── TAME THE TYPING ANIMATION ───────────────────────────────────────── */
  .headline-rotate {
    /* smaller, consistent height so it can’t push your headings */
    font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
    line-height: 1.2 !important;
    max-width: 90%;
    margin: 0.5rem 0 !important;
    text-align: center;
  }
  
  /* don’t let the wrapper stretch or shove things around */
  .headline-rotate-wrapper {
    flex: none !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    align-items: center !important;
  }

  

  /* ─── SAFETY: remove pulsing & show hover-images always ───────────────── */
#safety .safety-animation {
    display: none !important;
  }
  #safety .safety-hover-image {
    position: relative !important;
    display: block !important;
    width: 100%;
    max-width: 350px;         /* tweak as needed */
    margin: 2rem auto 0 auto; /* center under the list */
    opacity: 1 !important;
    pointer-events: none;
    transition: none !important;
  }
  #safety .safety-hover-image img {
    width: 100%;
    height: auto;
    opacity: 1 !important;
  }
  
  /* ─── GALLERY: slide title left ────────────────────────────────────────── */
  #gallery .section-title {
    position: relative;
    left: 2rem;               /* push far left */
    max-width: 40%;           /* keep it from hugging photos */
    text-align: left;
    z-index: 2;               /* sit on top of any decor */
  }
  


  /* ─── CENTER SAFETY IMAGES ─────────────────────────────────────────────── */
#safety .safety-hover-image {
    position: relative !important;
    display: block !important;
    width: 300px;                /* or your desired max width */
    margin: 2rem auto 0 auto;    /* auto left/right to center */
    left: auto !important;
    transform: none !important;
  }
  
  /* ─── MOVE KITTENS TO BOTTOM OF SERVICES ───────────────────────────────── */
  #services {
    position: relative;          /* ensure absolutely-positioned child is inside */
  }
  #services .services-kittens {
    top: auto !important;        /* cancel the “middle” centering */
    bottom: 0 !important;        /* pin it to the bottom edge */
    left: 50% !important;        /* center horizontally */
    transform: translateX(-50%) !important;
    max-width: 80%;              /* scale as needed */
    width: 400px;                /* or whatever width works */
    opacity: 0.8;                /* optional—toning down background clutter */
  }
  

  /* ─── VERTICALLY CENTER SAFETY IMAGE ────────────────────────────────────── */
#safety .safety-list-wrapper {
    display: flex;
    align-items: center;        /* vertical centering of children */
    justify-content: center;    /* optional—centers both list and image */
    gap: 2rem;                  /* space between list and image */
  }
  
  #safety .safety-hover-image {
    position: static;           /* remove any absolute offsets */
    margin: 0;                  /* reset top margin */
    align-self: center;         /* ensure it centers if wrapper flex changes */
  }
  

 /* ensure constant padding so bolding doesn’t shift layout */
 .safety-list li {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    transition: font-weight 0.2s ease;
  }

  /* on hover, text goes bold—but nothing else moves */
  .safety-list li:hover {
    font-weight: 700;
  }

  /* ticks stay gold always */
  .safety-list li i {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    color: var(--gold);
    flex-shrink: 0;
  }


/* make safety section a positioning context */
#safety {
    position: relative;
    height: 100vh;            /* preserve full-screen snap */
    padding-bottom: 6rem;     /* room for images at bottom */
  }

  /* remove old two-column wrapper */
  .safety-list-wrapper {
    display: block;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
  }

  /* center the list itself */
  .safety-list {
    display: inline-block;
    text-align: left;         /* keep bullets left-aligned */
    width: auto;
  }

  /* hide any pulsing or left-column graphics */
  .safety-animation { display: none; }

    /* hide by default on desktop/tablet */
.safety-top-paw {
  display: none;
}

  /* reposition all your safety images here */
  .safety-hover-image {
    position: absolute;
    bottom: 2rem;             /* “underneath” the list */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    pointer-events: none;
  }

  /* size down the images so they sit neatly */
  .safety-hover-image img {
    width: 100px;
    height: auto;
    opacity: 1;               /* always visible */
  }


  .estimate-form {
    grid-template-columns: 1fr;
    gap: 0rem;
}


#estimate .section-title {
  text-align: center;
  font-size: clamp(3.6rem, 5vw, 3rem);
  margin-bottom: 2.5rem;
}



  }