/* Pre-Footer Social Section */
.social-connect-section {
    background-color: #f8f9fa; /* Light, clean background */
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

.social-connect-container h3 {
    font-size: 1.6rem;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-family: Arial, sans-serif;
}

.social-connect-container p {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Flexbox container for horizontal buttons */
.social-connect-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Stacks icons naturally on mobile screens */
}

/* Styled Pill-Buttons for each platform */
.social-connect-icons a {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    padding: 10px 22px;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border: 2px solid #e0e0e0;
    border-radius: 30px; /* Perfect pill shape */
    transition: all 0.3s ease;
}

/* Base Hover Setup */
.social-connect-icons a:hover {
    color: #ffffff;
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* LinkedIn Hover (Blue) */
.social-connect-icons a[aria-label="LinkedIn"]:hover {
    background-color: #0077b5;
    border-color: #0077b5;
}

/* YouTube Hover (Red) */
.social-connect-icons a[aria-label="YouTube"]:hover {
    background-color: #ff0000;
    border-color: #ff0000;
}

/* X Hover (Black) */
.social-connect-icons a[aria-label="X"]:hover {
    background-color: #0f1419;
    border-color: #0f1419;
}

/* Reddit Hover (Orange-Red) */
.social-connect-icons a[aria-label="Reddit"]:hover {
    background-color: #ff4500;
    border-color: #ff4500;
}

/* Substack Hover (Organic Orange/Vibrant Orange) */
.social-connect-icons a[aria-label="Substack"]:hover {
    background-color: #ff5c35;
    border-color: #ff5c35;
}

/* Instagram Hover (Purple) */
.social-connect-icons a[aria-label="Instagram"]:hover {
    background-color: #833AB4;
    border-color: #833AB4;
}

/* Clean Simplified Footer Styling */
footer {
    background-color: #1a1a1a;
    color: #b3b3b3;
    padding: 20px;
    text-align: center;
    font-size: 0.85rem;
}
/* Carousel Container sizing and boundary */
.carousel-container {
  max-width: 100%;
  width: 100vw;
  position: relative;
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Hide slides by default */
.carousel-slide {
  display: none;
  position: relative;
  width: 100%;
}

/* This forces EVERY image inside the carousel to look exactly the same */
.carousel-slide img {
  width: 100% !important;
  height: 600px !important;    /* Forces a uniform height */
  object-fit: cover !important; /* Crops them perfectly so they don't stretch */
  display: block !important;
}

/* Only display the active slide */
.carousel-slide.active {
  display: block;
}

/* Navigation Arrow Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 12px;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.2s ease;
  z-index: 10;
}
.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.carousel-btn.next {
  right: 0;
  border-radius: 4px 0 0 4px;
}
.carousel-btn.prev {
  left: 0;
}

/* Text Captions at the bottom of each photo */
.carousel-caption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  width: 100%;
  padding: 15px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}
/* This forces everything inside this section to sit perfectly in the center */
.carousel-section {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically if the section has height */
  width: 100%;
  padding: 40px 0;         /* Adds clean breathing room above and below the carousel */
}
/* Center and containerize the image area */
.image-wrapper {
  max-width: 500px;
  margin: 30px auto;
  padding: 10px;
}

/* Force the figure block to act as a solid container frame */
figure.effect-caption {
  position: relative;
  overflow: hidden; /* This hides the caption while it sits just below the frame line */
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  background: #1b5e20; /* Dark forest green background shows through during blend */
}

/* Ensure the image looks crisp and fills the card space */
figure.effect-caption img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Style the hidden caption overlay box */
figure.effect-caption figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  color: white;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
  
  /* The Secret: Move it down out of sight and make it invisible by default */
  transform: translateY(100%);
  transition: transform 0.4s ease;
  
  /* Centers the text nicely inside the box */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Text styling inside the caption */
figure.effect-caption figcaption h3 {
  margin: 0 0 8px 0;
  color: #4caf50; /* Bright accent green for the header text */
  font-family: Arial, sans-serif;
  font-size: 20px;
}

figure.effect-caption figcaption p {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

/* 🚀 THE HOVER EFFECTS */

/* 1. Slide the text caption smoothly UP into view */
figure.effect-caption:hover figcaption {
  transform: translateY(0);
}

/* 2. Slightly zoom and dim the background photo for contrast */
figure.effect-caption:hover img {
  transform: scale(1.05); /* Soft, cinematic zoom effect */
  opacity: 0.6;           /* Dims the image slightly so text is easy to read */
}