html{
scroll-behavior:smooth;
}

body{
    margin: 0;
    font-family:'Lato', sans-serif;
    position: relative;
    background-color: #f2efe9; /* matches your site tone */
}

body::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;

        /* Use two layered repeating SVG backgrounds with different sizes and offsets
             to create a fuller, more evenly distributed paw pattern. */
        background-image: 
            url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='20' y='100' font-size='60' fill='%238B6F47'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='20' y='100' font-size='60' fill='%238B6F47'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E");

        /* Smaller tile produces more paws; larger tile spreads them out. */
        background-size: 160px 160px, 320px 320px;
        background-repeat: repeat, repeat;
        /* Offset the second layer so the paws interleave */
        background-position: 0 0, 80px 160px;

        opacity: 0.08;
}

h4 {
    font-size: 18px;
    color: #2f5d3a;
    margin-bottom: 8px;
    text-align: center;
}

/* NAVBAR */

.navbar {
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 30px;
background:white;
position:sticky;
top:0;
z-index:1000;
}

/*.logo{
    display:flex;
    align-items:center;
}

.logo img{
    width:40px;
    margin-right:10px;
}
    */

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo img{
width:60px;
height:60px;
object-fit:contain;
}

.logo h2{
font-size:22px;
margin:0;
color:#2f5d3a;
font-weight:700;
letter-spacing:0.4px;
}

.donate-btn{
background:#2f5d3a;
color:white;
border:none;
padding:12px 25px;
border-radius:15px;
font-weight:600;
:root{
    --cat-cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 64 64'><polygon points='16,18 24,8 32,18' fill='%232f5d3a'/><polygon points='48,18 40,8 32,18' fill='%232f5d3a'/><circle cx='32' cy='32' r='14' fill='%232f5d3a'/><circle cx='26' cy='30' r='2' fill='%23ffffff'/><circle cx='38' cy='30' r='2' fill='%23ffffff'/><path d='M28 38 Q32 42 36 38' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") 12 12, auto;
}

/* Apply cat cursor site-wide when body has .cat-cursor-active */
body.cat-cursor-active, body.cat-cursor-active *{
  cursor: var(--cat-cursor);
}

/* For interactive elements prefer pointer cursor but still show cat icon */
button, a, .carousel-btn{
  cursor: var(--cat-cursor);
}
transition:0.3s;
}

.donate-btn:hover{
background:#69dd84;
transform:scale(1.05);
}



/* HERO */

.hero{
    position:relative;
    text-align:center;
    overflow:hidden;
    height: 420px; /* reduced hero height */
}

/* remove the dark overlay so the banner shows without gray spots */
        .hero::after{
            /* remove the dark overlay so the banner shows without gray spots */
            display: none;
        }

.hero-img{
    display: block;
    width: 100%;
    height: 650px; /* natural image height */
    border-radius: 0;
    background-color: transparent;
}

/* .hero-media{ 
    display: block;
    width: 100%;
    height: auto;
    background-color: transparent;
}*/

/* If a video is present, make it cover the banner area while preserving rounded corners */
/* .hero-media{ */
    /* Allow the video or poster image to display at its natural height
       instead of forcing a cropped cover. This restores the full banner.
       If you later want a fixed banner height, increase max-height here. */
    /* max-height: none; */
    /* height: auto; */
    /* object-fit: contain; */
/* } */

/* .hero-img{ 
    display: block;
    width: 300px;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    object-fit: fill;
}

/* .hero-media{ 
    display: block;
    width: 100%;
    height: auto;
    background-color: transparent;
    object-fit: fill;
}*/

.hero-text p{
    font-size:22px;
}



/* CTA BAR */

.cta-bar{
    display:flex;
    justify-content:center;
    gap:20px;
    padding:20px;
}

.cta{
    background:#3d6b42;
    color:white;
    padding:15px 30px;
    border-radius:20px;
}



/* STATS */

.stats{
    display:flex;
    justify-content:center;
    gap:100px;
    padding:40px;
    text-align:center;
}

.stat h1{
    font-size:48px;
}

/* Dotted separators between stat blocks */
.stat{
    padding: 0 28px;
}
.stat + .stat{
    border-left: 2px dotted rgba(0,0,0,0.08);
}

/* Color variations for stat counters */
.stat--green .counter{
    color: #2f5d3a; /* deep green */
}
.stat--brown .counter{
    color: #a05a2a; /* warm brown */
}

/* Ornament under section title */
.section-ornament{
    display:flex;
    justify-content:center;
    margin-top:8px;
    margin-bottom:12px;
}
.ornament-heart{
    display:inline-block;
    background:white;
    color:#f28c28;
    padding:6px 10px;
    border-radius:20px;
    box-shadow:0 3px 8px rgba(0,0,0,0.08);
    font-size:16px;
}

/* Button variants */
.btn{
    background:#f28c28;
    border:none;
    padding:10px 18px;
    border-radius:20px;
    color:white;
    font-weight:600;
    cursor:pointer;
}
.btn--green{
    background:#2f5d3a;
}
.btn--orange{
    background:#f28c28;
}

/* Card thumbnail tuning (thumbnail size set later in the Cats section) */

.footer-marquee {
  width: 100%;
  overflow: hidden; /* Hides the text when it leaves the screen */
  background: #203a24;
  color: #fff;
    padding: 20px 0;
    margin-top: 0;
  white-space: nowrap; /* Keeps everything on one line */
}

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* Start the text off-screen to the right */
  animation: scroll-text 25s linear infinite;
}

.marquee-content span {
  font-size: 2rem;
  font-weight: bold;
  padding-right: 50px;
}

@keyframes scroll-text {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-5%);
  }
}

/* Optional: Pause on hover so people can read it! */
.footer-marquee:hover .marquee-content {
  animation-play-state: paused;
}

/* CATS SECTION */

.cats{
    padding:40px;
}

.cats h2{
    text-align:center;
}

.card-container{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:30px;
}

/* Carousel styles */
.carousel{
    position:relative;
    display:flex;
    align-items:center;
    margin-top:30px;
}

.carousel-track-container{
    overflow:hidden;
    flex:1 1 auto;
}

.carousel-track{
    display:flex;
    gap:20px;
    transition:transform 400ms ease;
    will-change: transform;
}

.carousel-btn{
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(0,0,0,0.08);
    width:44px;
    height:44px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    margin:0 12px;
}

.carousel-btn:disabled{
    opacity:0.35;
    cursor:default;
}

/* ensure cards inside carousel have fixed width to slide */
.carousel .card{
    flex:0 0 260px;
}

/* Story card: image left, text right; stacks on mobile */
.story-card{
    display:flex;
    gap:24px;
    align-items:center;
    background:#f2efe9;
    padding:20px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    max-width:1200px; 
    margin:0 auto;
    width:100%;
}
.story-image{
    flex:0 0 360px;
    max-width:360px;
    overflow:hidden;
    border-radius:10px;
}
.story-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.story-content{
    flex:1 1 0;
}
.story-content h3{
    margin-top:0;
    margin-bottom:8px;
    font-size:22px;
    color:#2f5d3a;
}
.story-content h4{
    line-height:1.5;
    color:#333;
    margin-bottom:12px;
}

@media (max-width: 768px){
    .story-card{ flex-direction:column; }
    .story-image{ width:100%; max-width:100%; height:220px; }
    .story-image img{ height:100%; }
}

.card img{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:10px;
} 

/* Fixed, reduced hero height (adjust this value to taste) */
.hero{
    height: 100%;
}

.card{
background:white;
width:250px;
height:200px;
border-radius:12px;
padding:20px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
    /* start hidden for scroll fade-in */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

/* When a card becomes visible (via JS), fade it in */
.card.visible{
    opacity: 1;
    transform: translateY(0);
}

button{
background:#f28c28;
border:none;
padding:12px 22px;
border-radius:25px;
color:white;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
}

button:hover{
transform:scale(1.05);
background:#f7bc81;
}



/* FOOTER */

footer{
    background:#2f5d3a;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:40px;
}

@media (max-width: 768px){

.hero-text h1{
    font-size:36px;
}

.cta-bar{
    flex-direction:column;
    align-items:center;
}

.stats{
    flex-direction:column;
    gap:30px;
}

.card-container{
    flex-direction:column;
    align-items:center;
}

}

button:hover{
    transform:scale(1.05);
}

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

.socials{
margin-top:10px;
}

.socials a{
color:white;
margin:0 10px;
text-decoration:none;
}

.socials{
margin-top:10px;
}

.socials a{
color:white;
margin:0 12px;
font-size:20px;
transition:0.3s;
}

.socials a:hover{
color:#f28c28;
transform:scale(1.2);
}

/* Wave divider and plain colorful highlight band (no text/buttons) */
/* .wave-divider-bottom svg{ 
    display:block;
    width:100%;
    height:96px;
}*/

/* .highlight-band{ 
    width:100%;
    height:120px; 
    background: linear-gradient(90deg, #fceabb 0%, #f8b500 45%, #f28c28 100%);

 } */

/* @media (max-width: 768px){ 
    .highlight-band{ height:80px; }
}*/