:root {
    /* Color variables */
    --rust-clay: #A75835;
    --warm-cream: #FFF5E7;
    --calm-green: #9AC5A0;
    --sky-blue: #84C5E3;
    --mist-grey: #EDEFF1;
    --deep-slate: #2A3E4C;
    --white: #ffffff;
    --black: #000000;
    
    /* Font variables */
    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Satoshi', sans-serif;
}

/* Base Styles */
body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    color: var(--mist-grey);
    background-color: var(--warm-cream);
}

/* Navigation */
.navbar {
    padding: 1rem 0;
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
}

/* Remove border from toggler button */
.navbar-toggler {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-brand img {
    height: 60px;
    width: auto;
}

/* Mobile menu styles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 75%;
        height: 100vh;
        background-color: var(--deep-slate);
        padding: 2rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1050;
    }
    
    .navbar-collapse.show {
        transform: translateX(0);
    }
    
    /* Backdrop for mobile menu */
    .offcanvas-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
    }
    
    .navbar-collapse.show + .offcanvas-backdrop {
        opacity: 1;
        visibility: visible;
    }
    
    .navbar-nav {
        flex-direction: column;
        height: 100%;
        justify-content: flex-start;
    }
    
    .nav-item {
        margin-bottom: 1rem;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
}

/* Desktop menu styles */
@media (min-width: 992px) {
    .navbar-collapse {
        justify-content: center;
    }
    
    .navbar-nav {
        width: 100%;
        max-width: 800px;
        justify-content: space-between;
    }
    
    .offcanvas-backdrop {
        display: none !important;
    }
}

/* Nav link styles */
.nav-link {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    color: var(--mist-grey);
    padding: 0.5rem 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--deep-slate);
    background-color: var(--calm-green);
    border-radius: 8px;
}

.nav-link.active {
    color: var(--deep-slate);
    background-color: var(--calm-green);
    border-radius: 8px;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background-image: url('../images/pexels-ezz7-979503.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

/* Hero Section Animation */
.hero-content {
    position: relative;
    z-index: 10;
    padding: 2rem;
    max-width: 800px;
    margin-left: -42px;
    opacity: 0; 
    animation: fadeIn 1.5s ease-in-out forwards;
    animation-delay: 0.3s; 
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero {
    opacity: 0;
    animation: fadeInHero 1s ease-in-out forwards;
}

@keyframes fadeInHero {
    from { opacity: 0; }
    to { opacity: 1; }
}
.hero-content > p:last-child {
    margin-bottom: 0;
}


.hero h1 {
    font-family: var(--font-heading);
    font-size: 70px; /* Desktop h1 size */
    font-weight: 800; /* extrabold */
    color: var(--warm-cream);
    line-height: 1.2;
    margin-bottom: 39px;
}

.hero .lead {
    font-family: var(--font-body);
    font-size: 20px; /* p: satoshi, regular, 20 */
    font-weight: 400;
    margin-bottom: 39px;
}

.hero p {
    font-family: var(--font-body);
    font-size: 20px; /* p: satoshi, regular, 20 */
    color: var(--mist-grey);
    margin-bottom: 2rem;
}

/* Buttons */
.btn {
    font-family: var(--font-body);
    font-weight: 700; /* bold */
    font-size: 20px; /* buttons: satoshi, black, 20 */
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: var(--deep-slate);
    background-color: var(--calm-green);
    border: none;
}

.btn:hover {
    background-color: var(--rust-clay);
    transform: translateY(-2px);
    color: var(--warm-cream);
}


/* Responsive Adjustments */
@media (max-width: 991.98px) { /* Tablet */
    .hero h1 {
        font-size: 56px; /* Tablet h1 */
    }
    
    .hero .lead,
    .hero p {
        font-size: 20px;
    }
    
    .nav-link {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) { /* Mobile */
    .hero {
        min-height: 500px;
        text-align: left;
    }
    
    .hero h1 {
        font-size: 47px; /* Mobile h1 */
    }
    
    .hero-content {
        margin-left: -42px;
        padding: 1rem;
    }
    
    .navbar-brand img {
        height: 50px;
    }
    
    .nav-link {
        font-size: 20px;
    }
}

/* =========================
   Stats Bar Section
   ========================= */
.stats-bar {
    font-family: var(--font-body);
}

/* Common Stat Block Styles */
.stat-block {
    min-height: 250px;
    border-bottom-right-radius: 80px 80px;
}

.stat-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 4rem;
    margin-left: 55px;
}

.stat-text {
    display: flex;
    align-items: flex-end;
}

.stat-block h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 95px;
    margin-bottom: 0;
    margin-right: 1rem;
    line-height: 0.9;
}

.stat-block p {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}

.badge {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 34px;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    position: absolute; 
    right: 100px; 
    bottom: 20px; 
    width: 233px;
    height: 66.73px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.stat-content {
    position: relative; 
}

.stats-bar .stat-block.stat-1 .stat-content {
    margin-left: 110px; 
}

.stats-bar .stat-block.stat-2 .stat-content {
    margin-left: 195px; 
}

.stats-bar .stat-block.stat-3 .stat-content {
    margin-left: 260px; 
}

/* Stat 1 Badge */
.stats-bar .stat-block.stat-1 .badge {
    right: 320px;
}

/* Stat 2 Badge - Move more left */
.stats-bar .stat-block.stat-2 .badge {
    right: 280px; /* Lower number = more left */
}

/* Stat 3 Badge */
.stats-bar .stat-block.stat-3 .badge {
    right: 230px;
}


/* Individual Stat Blocks */
.stat-1 {
    background-color: var(--rust-clay);
}
.stat-1 h1,
.stat-1 p {
    color: var(--warm-cream);
}
.stat-1 .badge {
    background-color: var(--warm-cream);
    color: var(--rust-clay);
}

.stat-2 {
    background-color: var(--warm-cream);
}
.stat-2 h1,
.stat-2 p {
    color: var(--rust-clay);
}
.stat-2 .badge {
    background-color: var(--rust-clay);
    color: var(--warm-cream);
}

.stat-3 {
    background-color: var(--sky-blue);
}
.stat-3 h1,
.stat-3 p {
    color: var(--deep-slate);
}
.stat-3 .badge {
    background-color: var(--deep-slate);
    color: var(--mist-grey);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .stat-block h1 {
        font-size: 85px;
    }
    .stat-block p {
        font-size: 28px;
    }
    .stat-content {
        padding: 1rem 2rem;
        margin-left: 42px;
    }
}

@media (max-width: 767.98px) {
    .stat-block {
        min-height: 250px;
    }
    .stat-block h1 {
        font-size: 70px;
    }
    .stat-block p {
        font-size: 24px;
    }
    .badge {
        font-size: 25px;
        position: relative;
        right: auto;
        margin-left: 0;
        width: 180px;
        height: 50px;
        margin-top: 10px;
    }
    .stat-content {
        padding: 1rem;
        margin-left: 30px;
        flex-direction: column;
        align-items: flex-start;
    }
    .stat-text {
        margin-bottom: 1rem;
    }
}


/* =========================
   Why We Rescue Section 
   ========================= */
.why-rescue {
    padding: 60px 0;
    background-color: var(--warm-cream);
}

.why-rescue .section-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 800;
    color: var(--rust-clay);
    margin-bottom: 40px;
    text-align: left;
}

.why-rescue .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Card boxes */
.why-rescue .card-box {
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

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

/* Image boxes */
.why-rescue .image-box {
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    min-height: 250px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.why-rescue .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
}

.why-rescue .image-box:hover .img-cover {
    transform: scale(1.05);
}

/* Color boxes */
.why-rescue .box-green {
    background-color: var(--calm-green);
    color: var(--deep-slate);
    grid-column: 1;
    grid-row: 1;
}

.why-rescue .box-blue {
    background-color: var(--sky-blue);
    color: var(--deep-slate);
    grid-column: 3;
    grid-row: 1;
}

.why-rescue .box-rust {
    background-color: var(--rust-clay);
    color: var(--warm-cream);
    grid-column: 2 / span 2;
    grid-row: 2;
}

.why-rescue h3 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    line-height: 1.2;
}

.why-rescue p {
    font-size: 20px;
    margin-bottom: 0;
    font-family: var(--font-body);
    line-height: 1.5;
}

/* =========================
   Responsive Adjustments
   ========================= */

/* Tablet Layout (768px - 992px) */
@media (max-width: 992px) {
    .why-rescue .grid-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .why-rescue .box-green {
        grid-column: 1;
        grid-row: 1;
    }
    
    .why-rescue .box-blue {
        grid-column: 2;
        grid-row: 1;
    }
    
    .why-rescue .box-rust {
        grid-column: 1 / span 2;
        grid-row: 3;
    }
    
    /* Move images between cards */
    .why-rescue .image-box:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }
    
    .why-rescue .image-box:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Large Mobile Layout (576px - 768px) */
@media (max-width: 768px) {
    .why-rescue {
        padding: 40px 0;
    }
    
    .why-rescue .section-title {
        font-size: 36px;
        margin-bottom: 30px;
    }
    
    .why-rescue h3 {
        font-size: 28px;
    }
    
    .why-rescue p {
        font-size: 18px;
    }
}

/* Small Mobile Layout (under 576px) */
@media (max-width: 576px) {
    .why-rescue .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .why-rescue .section-title {
        font-size: 32px;
    }
    
    .why-rescue .card-box,
    .why-rescue .image-box {
        grid-column: 1 !important;
        min-height: 200px;
    }
    
    .why-rescue .box-green {
        grid-row: 1;
    }
    
    .why-rescue .image-box:nth-of-type(1) {
        grid-row: 2;
    }
    
    .why-rescue .box-blue {
        grid-row: 3;
    }
    
    .why-rescue .image-box:nth-of-type(2) {
        grid-row: 4;
    }
    
    .why-rescue .box-rust {
        grid-row: 5;
    }
    
    .why-rescue h3 {
        font-size: 24px;
    }
    
    .why-rescue p {
        font-size: 16px;
    }
    
    .why-rescue .card-box {
        padding: 20px;
    }
}



/* =========================
   Featured Cats Section 
   ========================= */

.featured-cat {
  padding: 80px 0;
  background-color: var(--warm-cream);
  position: relative;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
  color: var(--rust-clay);
  text-align: left;
  margin-bottom: 50px;
  position: relative;
  z-index: 10;
}

.stacked-cards {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
}

/* Background Layers with Progressive Width */
.card-layer {
  position: absolute;
  height: 90px;
  border-radius: 30px;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.layer-1 {
  background-color: var(--deep-slate);
  width: 90%;
  transform: translate(-50%, 0);
}

.layer-2 {
  background-color: var(--sky-blue);
  width: 92%;
  transform: translate(-50%, 20px);
}

.layer-3 {
  background-color: var(--rust-clay);
  width: 94%;
  transform: translate(-50%, 40px);
  z-index: 2;
}

/* Featured Card - Wider than layers */
.featured-card {
  background-color: var(--calm-green);
  border-radius: 30px;
  padding: 40px;
  position: relative;
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  min-height: 400px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  width: 96%;
  left: 50%;
  transform: translateX(-50%);
}

.featured-card .row {
  width: 100%;
  align-items: center;
}

.featured-card .col-md-5 {
  height: 100%;
}

.featured-card img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Text Content */
.featured-card .cat-breed {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--rust-clay);
  margin-bottom: 15px;
  display: block;
}

.featured-card h3 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  color: var(--deep-slate);
  margin-bottom: 10px;
}

.featured-card p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--deep-slate);
  margin-bottom: 25px;
}

.featured-card .btn-primary {
  background-color: var(--rust-clay);
  border-color: var(--rust-clay);
  color: var(--mist-grey);
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.featured-card .btn-primary:hover {
  background-color: var(--deep-slate);
  border-color: var(--deep-slate);
  transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .featured-card {
    min-height: 380px;
    width: 94%;
  }
  
  .layer-1 { width: 88%; }
  .layer-2 { width: 90%; }
  .layer-3 { width: 92%; }
}

@media (max-width: 992px) {
  .section-title {
    font-size: 42px;
  }
  
  .featured-card {
    min-height: 350px;
    padding: 30px;
    width: 92%;
    margin-top: 50px;
  }
  
  .featured-card h3 {
    font-size: 32px;
  }
  
  .layer-1 { width: 86%; }
  .layer-2 { width: 88%; }
  .layer-3 { width: 90%; }
}

@media (max-width: 768px) {
  .featured-cat {
    padding: 60px 0;
  }
  
  .section-title {
    font-size: 36px;
    text-align: center;
  }
  
  .stacked-cards {
    padding-top: 40px;
  }
  
  .featured-card {
    flex-direction: column;
    min-height: auto;
    padding: 25px;
    margin-top: 40px;
    width: 90%;
  }
  
  .featured-card .col-md-5 {
    margin-bottom: 25px;
    height: auto;
  }
  
  .featured-card img {
    max-height: 300px;
  }
  
  .card-layer {
    height: 70px;
  }
  
  .layer-1 { width: 84%; }
  .layer-2 { width: 86%; }
  .layer-3 { width: 88%; }
  
  .featured-card h3 {
    font-size: 28px;
  }
  
  .featured-card p {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 32px;
  }
  
  .featured-card {
    padding: 20px;
    width: 88%;
    margin-top: 30px;
  }
  
  .featured-card img {
    max-height: 250px;
  }
  
  .card-layer {
    height: 60px;
    border-radius: 20px;
  }
  
  .layer-1 { width: 82%; }
  .layer-2 { width: 84%; }
  .layer-3 { width: 86%; }
}


/* =========================
   Testimonials Section
   ========================= */

.testimonials {
  background-color: var(--warm-cream);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
  color: var(--rust-clay);
  text-align: left;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.testimonial-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  max-width: 1400px;
  min-height: 300px;
  margin: 0 auto;
  position: relative;
}

.testimonial-card {
  background-color: var(--sky-blue);
  border-radius: 30px;
  padding: 60px 40px 40px;
  width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 25px;
  transition: transform 0.3s ease;
}

/* Left Card (Rotated) */
.card-left {
  transform: rotate(-10deg);
  z-index: 1;
  margin-right: -30px;
}

/* Center Card (Featured) */
.card-center {
  background-color: var(--calm-green);
  transform: scale(1.05);
  z-index: 3; /* Highest z-index to stay on top */
}

/* Right Card (Rotated) */
.card-right {
  background-color: var(--deep-slate);
  transform: rotate(10deg);
  z-index: 1;
  margin-left: -30px;
}

.card-image-container {
  position: absolute;
  top: 10px;
  left: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  z-index: 4;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stars {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 4;
  margin: 25px 0 0 0px;
}

.star-icon {
  width: 18px;
  height: 18px;
}

.quote {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--deep-slate);
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 4;
}

.card-right .quote {
  color: var(--mist-grey);
}

.divider {
  width: 170px;
  height: 1.5px;
  border-radius: 50px;
  background-color: var(--rust-clay);
  margin: 0;
  position: relative;
  z-index: 4;
}

.card-left .divider {
  background-color: var(--deep-slate);
}
.card-center .divider {
  background-color: var(--deep-slate);
}
.card-right .divider {
  background-color: var(--mist-grey);
}

.author {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--deep-slate);
  display: block;
  text-align: left;
  position: relative;
  z-index: 4;
  margin: 0;
}
.card-right .author {
  color: var(--mist-grey);
}

.testimonial-navigation {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
  position: relative;
  z-index: 2;
}

.arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: var(--sky-blue);
  color: var(--deep-slate);
  font-size: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.arrow:hover {
  background-color: var(--calm-green);
  transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .testimonial-cards {
    flex-wrap: wrap;
    gap: 25px;
  }
  .testimonial-card {
    width: 100%;
    max-width: 500px;
    padding: 60px 35px 35px;
  }
  .card-left,
  .card-right {
    transform: none;
    margin: 0;
    z-index: auto;
  }
  .card-center {
    order: -1;
    margin-bottom: 0;
    transform: scale(1.03);
  }
}

@media (max-width: 992px) {
  .testimonial-card {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 36px;
    margin-bottom: 40px;
  }
  
  .testimonial-card {
    padding: 50px 30px 30px;
    gap: 18px;
  }
  
  .card-image-container {
    width: 50px;
    height: 50px;
    top: 15px;
    left: 20px;
  }
  
  .quote {
    font-size: 18px;
  }
  
  .star-icon {
    width: 16px;
    height: 16px;
  }
  
  .divider {
    width: 50px;
  }
  
  .author {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .testimonials {
    padding: 60px 0;
  }
  
  .section-title {
    font-size: 32px;
    text-align: center;
  }
  
  .testimonial-card {
    padding: 45px 25px 25px;
    gap: 15px;
  }
  
  .card-image-container {
    width: 45px;
    height: 45px;
    top: 12px;
    left: 15px;
  }
  
  .quote {
    font-size: 16px;
    line-height: 1.5;
  }
  
  .testimonial-navigation {
    margin-top: 40px;
  }
  
  .arrow {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}

/* =========================
Volunteer Spotlight Section
========================= */

.volunteer-spotlight {
    background-color: var(--warm-cream);
}


.volunteer-spotlight h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 48px;
    color: var(--rust-clay);
}

.volunteer-spotlight h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 28px;
    color: var(--rust-clay);
}

.volunteer-spotlight .lead {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    color: var(--deep-slate);
}

.volunteer-spotlight blockquote {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    font-style: italic;
    color: var(--deep-slate);
    border-left: 4px solid var(--calm-green);
    padding-left: 1.5rem;
    margin-left: 0;
}

.volunteer-highlights {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    color: var(--deep-slate);
    list-style-type: none;
    padding-left: 0;
}

.volunteer-highlights li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
}

.volunteer-highlights li:before {
    content: "•";
    color: var(--calm-green);
    font-size: 2rem;
    position: absolute;
    left: 0;
    top: -0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .volunteer-spotlight h2 {
        font-size: 40px;
    }
    
    .volunteer-spotlight h3 {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .volunteer-spotlight h2 {
        font-size: 36px;
    }
    
    .volunteer-spotlight .lead,
    .volunteer-spotlight blockquote,
    .volunteer-highlights {
        font-size: 16px;
    }
}

/* =========================
   Footer Section
   ========================= */
   
/* Footer Container */
.footer-container {
  display: flex;
  justify-content: center;
  padding: 60px 140px;
  background-color: var(--warm-cream);
}

/* Footer Main Styling */
.site-footer {
  background-color: var(--rust-clay);
  color: var(--warm-cream);
  border-radius: 33px;
  width: 1312px;
  height: 700px;
  padding: 60px 80px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Newsletter Box */
.newsletter-box {
  background-color: var(--sky-blue);
  color: var(--deep-slate);
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 90px !important;
}

.newsletter-box h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.newsletter-form .form-control {
  height: 60px;
  border-radius: 12px;
  border: none;
  padding: 0 20px;
  font-family: var(--font-body);
  flex-grow: 1;
}

.newsletter-form .btn-outline-light {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 2px solid var(--warm-cream);
  color: var(--warm-cream);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: transparent;
}

.newsletter-form .btn-outline-light:hover {
  background-color: var(--warm-cream);
  color: var(--rust-clay);
}

/* Footer Content */
.footer-info {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  margin-top: 30px;
}

.footer-logo img {
  filter: brightness(0) invert(1);
  height: 95px;
  width: auto;
}

.footer-contact-info {
  display: flex;
  flex-grow: 1;
  gap: 80px;
}

.contact-group {
  display: flex;
  gap: 80px;
}

.location-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
}

.contact-item img {
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
}

.contact-item p {
  font-family: var(--font-heading);
  font-size: 20px;
  margin-bottom: 0;
  margin-left: 12px;
  font-weight: 400;
}

.footer-links-group {
  display: flex;
  gap: 80px;
}

.links-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.links-column a {
  color: var(--warm-cream);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.links-column a:hover {
  color: var(--calm-green);
  text-decoration: underline;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgb(255, 245, 231);
  padding-top: 30px;
  margin-top: 40px;
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-family: var(--font-body);
  font-size: 20px;
  margin-bottom: 0;
  text-align: left;
}

.footer-bottom .footer-links {
  text-align: right;
}

.footer-bottom a {
  color: var(--warm-cream);
  text-decoration: none;
  margin-left: 15px;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 1399px) {
  .site-footer {
    width: 100%;
    height: auto;
    min-height: 700px;
    padding: 50px 40px;
  }
  
  .footer-info,
  .contact-group,
  .footer-links-group {
    gap: 40px;
  }
  
  .footer-bottom {
    position: static;
    margin-top: 30px;
    left: auto;
    right: auto;
  }
}

@media (max-width: 991px) {
  .site-footer {
    padding: 40px 30px;
  }
  
  .footer-info {
    flex-direction: column;
    gap: 30px;
  }
  
  .footer-contact-info {
    flex-direction: column;
    gap: 30px;
  }
  
  .contact-group {
    flex-direction: column;
    gap: 20px;
  }
  
  .footer-links-group {
    gap: 40px;
  }
  
  .newsletter-box {
    padding: 40px !important;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding: 30px 20px;
    border-radius: 25px;
  }
  
  .newsletter-box h4 {
    font-size: 28px;
  }
  
  .newsletter-form {
    flex-direction: column;
  }
  
  .newsletter-form .form-control {
    width: 100%;
    margin-bottom: 15px;
    margin-right: 0 !important;
  }
  
  .footer-links-group {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .footer-bottom {
    padding-top: 20px;
    margin-top: 20px;
    flex-direction: column;
    gap: 10px;
  }
  
  .footer-bottom p,
  .footer-bottom .footer-links {
    text-align: center;
    width: 100%;
  }
  
  .footer-bottom a {
    margin: 0 8px;
  }
}



/* =========================
   Adopt Page Styles
   ========================= */


/* For adopt page specifically */
.adopt-page .navbar-brand img {
    height: 140px; /* Larger for adopt page */
    width: auto;
}

@media (max-width: 991.98px) {
    .adopt-page .navbar-brand img {
        height: 90px;
    }
}

@media (max-width: 767.98px) {
    .adopt-page .navbar-brand img {
        height: 70px;
    }
}

/* Navbar positioning for adopt page */
.adopt-page .navbar {
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}

.adopt-page .navbar-brand {
    padding-top: 0; 
    padding-bottom: 0; 
    display: flex;
    align-items: center; 
}


.adopt-page .navbar-logo {
    margin-top: -19px; 
    margin-bottom: -30px; 
}

/* Adopt Hero Section */

/* =========================
   Hero Section with Image
   ========================= */

.adopt-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: var(--warm-cream);
    overflow: hidden;
    background-color: var(--rust-clay); /* Fallback color */
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adopt-hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 800px;
}

.adopt-hero h1 {
    font-family: var(--font-heading);
    font-size: 70px;
    font-weight: 800;
    color: var(--warm-cream);
    line-height: 1.2;
    margin-bottom: 30px;
}

.adopt-hero .lead {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
    color: var(--warm-cream);
}

.adopt-hero .btn-primary {
    background-color: var(--calm-green);
    color: var(--deep-slate);
    border: none;
}

.adopt-hero .btn-primary:hover {
    background-color: var(--sky-blue);
    color: var(--deep-slate);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .adopt-hero h1 {
        font-size: 56px;
    }
    
    .adopt-hero .lead {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .adopt-hero {
        min-height: 500px;
        text-align: left;
    }
    
    .adopt-hero h1 {
        font-size: 47px;
    }
    
    .adopt-hero-content {
        padding: 1rem;
    }
    
  
}

/* =========================
   Meet Our Adoptable Cats Section
   ========================= */

.meet-cats-section {
    padding: 80px 0;
    background-color: var(--warm-cream);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 800;
    color: var(--rust-clay);
    margin-bottom: 20px;
    text-align: left; 
    padding: 0 20px; 
}

.viewing-count {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--deep-slate);
    text-align: left; 
    margin-bottom: 15px;
    padding: 0 20px; 
}

.section-description {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--deep-slate);
    text-align: left; 
    max-width: 800px;
    margin: 0 20px 40px; 
    line-height: 1.6;
}


.filters-container {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 40px;
    padding: 0 20px;
}

.filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--sky-blue);
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--deep-slate);
}

.filter:hover {
    background-color: var(--calm-green);
    color: var(--deep-slate);
    transform: 0.3s ease;
    transform: translateY(-2px);
}

.dropdown-icon {
    width: 12px;
    height: 12px;
}

.cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cat-card {
    background-color:var(--mist-grey);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}



.cat-card:nth-child(3) {
    background-color: var(--sky-blue); /* Third card - cream */
}

/* Card 1 - Gracy */
.cat-card:nth-child(1) {
    background-color: var(--deep-slate); /* First card - green */
}
.cat-card:nth-child(1) .cat-name,
.cat-card:nth-child(1) .cat-age,
.cat-card:nth-child(1) .cat-description {
    color: var(--mist-grey); 
}


/* Card 2 - Whiskers */
.cat-card:nth-child(2) {
    background-color: var(--rust-clay);
}
.cat-card:nth-child(2) .cat-name,
.cat-card:nth-child(2) .cat-age,
.cat-card:nth-child(2) .cat-description {
    color: var(--warm-cream); 
}


/* Card 3 - Mochi */
.cat-card:nth-child(3) {
    background-color: var(--sky-blue); 
}
.cat-card:nth-child(3) .cat-name,
.cat-card:nth-child(3) .cat-age,
.cat-card:nth-child(3) .cat-description {
    color: var(--deep-slate); 
}
.cat-card:nth-child(3) .trait {
    background-color: var(--deep-slate);
    color: var(--mist-grey);
}

.cat-traits {
    padding: 20px 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trait {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--deep-slate);
    background-color: var(--calm-green);
    padding: 6px 12px;
    border-radius: 20px;
}

.cat-info {
    padding: 15px 20px;
    flex-grow: 1;
}

.cat-name {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: var(--deep-slate);
    margin-bottom: 5px;
}

.cat-age {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--rust-clay);
    margin-bottom: 15px;
}

.cat-description {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--deep-slate);
    line-height: 1.6;
    margin-bottom: 20px;
}

.cat-image-container {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.cat-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
}

.view-profile-btn {
    position: absolute;
    bottom: 20px;
    left: 20px; 
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--mist-grey);
    background-color: var(--rust-clay);
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.view-profile-btn::after {
    content: "→";
    font-size: 18px;
}

.view-profile-btn:hover {
    background-color: var(--sky-blue);
    color: var(--deep-slate);
    transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .section-title {
        font-size: 42px;
    }
    
    .cats-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .meet-cats-section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .cat-image-container {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 32px;
    }
    
    .viewing-count,
    .section-description {
        font-size: 16px;
    }
    
    .cats-grid {
        grid-template-columns: 1fr;
    }
    
    .cat-image-container {
        height: 160px;
    }
}



/* ======================
   Contact Page Styles
   ====================== */

/* Contact Page Logo Size */
.contact-page .navbar-logo.contact-logo {
    height: 120px; /* Larger size for contact page */
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .contact-page .navbar-logo.contact-logo {
        height: 65px; /* Slightly smaller on tablets */
    }
}

@media (max-width: 767.98px) {
    .contact-page .navbar-logo.contact-logo {
        height: 50px; /* Mobile size */
    }
}

/* Navbar Spacing Adjustments */
.contact-page .navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    position: relative; /* Ensure proper stacking */
    z-index: 1000; /* Keep navbar above other content */
}

.contact-page .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.contact-page .navbar-logo {
    margin-top: -19px;
    margin-bottom: -30px;
}

/* Content Spacing - THIS IS THE KEY CHANGE */
.contact-page main {
    padding-top: 30px; 
}


.contact-page .navbar-nav .nav-link {
    color: var(--deep-slate);
}

.contact-page .navbar-nav .nav-link:hover,
.contact-page .navbar-nav .nav-link.active {
    color: var(--deep-slate);
    background-color: var(--calm-green);
    border-radius: 8px;
}

.contact-page {
    background-color: var(--warm-cream);
    color: var(--deep-slate);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.contact-page main {
    padding-left: 80px; 
}

.contact-info h1,
.contact-form h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--deep-slate);
    margin-bottom: 30px;
}

.contact-info h1 {
    font-size: 48px;
}

.contact-form h2 {
    font-size: 36px;
    color: var(--mist-grey);
    padding-bottom: 10px;
}

.contact-detail {
    margin-bottom: 25px;
}

.contact-detail h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--deep-slate);
}

.contact-detail p {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-icons img:hover {
    transform: scale(1.1);
}

/* Contact Message Layout */

.contact-message-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 25px 0 40px;
}

.contact-message {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: italic;
  margin: 0;
  flex: 1;
}

.contact-arrow {
  fill: var(--deep-slate);
  flex-shrink: 0;
  border-radius: 80px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.contact-message-wrapper:hover .contact-arrow {
  transform: rotate(45deg);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .contact-message-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .contact-arrow {
    transform: rotate(90deg);
    margin-left: 10px;
  }
}


/* Contact Form Styles */
.contact-form {
    background-color: var(--deep-slate);
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 15px; 
    padding-left: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--mist-grey);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--mist-grey);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 16px;
}

.form-group textarea {
    resize: vertical;
}

.submit-btn {
    background-color: var(--calm-green);
    color: var(--deep-slate);
    border: none;
    padding: 12px 30px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: var(--rust-clay);
    color: var(--mist-grey);
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
    
    .contact-info {
        margin-bottom: 40px;
    }
    
    
    .contact-page main {
        padding-top: 60px;
    }
}

@media (max-width: 767px) {
    /* Adjust logo positioning for mobile */
    .contact-page .navbar-logo {
        margin-top: -15px;
        margin-bottom: -20px;
    }
    
    .contact-page main {
        padding-top: 50px;
    }
}

@media (max-width: 576px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .contact-info h1 {
        font-size: 36px;
    }
    
    .contact-form h2 {
        font-size: 28px;
    }
    
    /* Final mobile spacing adjustment */
    .contact-page main {
        padding-top: 40px;
    }
}