/* =================================================================
   BRAND COLORS & BASE STYLES
==================================================================== */
:root {
  --brand-primary: #2C3E50;      /* Dark Blue-Grey */
  --brand-secondary: #E74C3C;    /* Vivid Red */
  --brand-accent: #F39C12;       /* Warm Amber */
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* =================================================================
   HERO SECTION & VIDEO CAROUSEL
==================================================================== */

/* Container for the entire hero section */
.hero-section {
  position: relative;
  width: 100%;
  height: 70vh;        /* Fixed/Responsive height for consistent display */
  overflow: visible;   /* IMPORTANT: was hidden; changed to visible so the search bar isn't clipped */
  background: #f5f5f5; /* or remove if you rely on video background */
  margin-bottom: 2rem; /* optional spacing below hero */
}

/* Wrapper for the video carousel */
.video-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* keep videos contained horizontally */
  z-index: 1;
}

/* Carousel track that holds all the slides in a row */
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 1s ease-in-out; 
}

/* Renamed to match your HTML: .video-carousel-item rather than .carousel-item */
.video-carousel-item {
  min-width: 100%;
  height: 100%;
  display: flex;              /* For multi-video layout if needed */
  justify-content: center;    /* optional */
  align-items: center;        /* optional */
}

/* The video fills its slide */
.hero-video {
  width: 50%;            /* If you want 2 videos side by side -> 50% each */
  height: 100%;          /* Fill parent vertically */
  object-fit: cover;     /* No black bars, edges may be cropped */
  object-position: center;
}

/* Optional overlay to darken the video slightly */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* Adjust opacity as needed */
  pointer-events: none;
  z-index: 2;
}

/* Banner text and call-to-action placed above the video */
.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 1.5rem;
  border-radius: 8px;
}

/* =================================================================
   FROSTED GLASS SEARCH CONTAINER
==================================================================== */
.search-container {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  z-index: 4; /* Ensure it's above .overlay (2) and .banner-text (3) */
  margin-top: 1rem; /* some spacing from top or from the banner-text */
}

.nav-pills .nav-link.active {
  background-color: var(--brand-accent) !important;
  color: #fff !important;
  border-radius: 0.25rem;
}

#heroSearchForm {
  max-width: 700px;
  margin: 0 auto;
}

/* =================================================================
   FEATURE CARDS SECTION
==================================================================== */
.card-img-top-random {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

.card-title {
  color: var(--brand-primary);
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

/* =================================================================
   NEAREST SERVICES SECTION
==================================================================== */
.image-caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px 10px;
  border-radius: 3px;
}

.image-caption h5 {
  color: #fff;
  margin: 0;
  font-size: 1.25rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

/* =================================================================
   BLOG, BREED & NEWSLETTER SECTIONS
==================================================================== */
.Blog-section, .Breed-section {
  background-color: #f8f9fa;
  color: #333;
}

.newsletter-section {
  background-color: #1a2d40;
  color: #fff;
  border-radius: 8px;
}

.btn-outline-light {
  border-color: #fff;
  color: #fff;
}
.btn-outline-light:hover {
  background-color: #fff;
  color: #000;
}

/* =================================================================
   BRAND BUTTON STYLING
==================================================================== */
.btn-brand {
  background-color: var(--brand-accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}
.btn-brand:hover {
  background-color: #cf3f30;
}