/* Base Styling for Columns */
.col-sm-3 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center dots and text horizontally */
    justify-content: flex-start;
    padding: 0;
    position: relative; /* Necessary for lines */
}

.timeline-container {
    overflow: hidden; /* Prevent child elements from spilling out */
    position: relative; /* Ensure child elements respect this container */
}

/* Dot and Line Container */
.dot-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 30px; /* Adjust height for alignment */
    margin: 0 auto;
}

/* Connecting Horizontal Line Between Circles (Desktop) */
.dot-line::before,
.dot-line::after {
    content: '';
    position: absolute;
    top: 50%; /* Align line with the middle of the circle */
    height: 1px; /* Line thickness */
    background-color: #adb0b5; /* Gray connecting line */
    z-index: 0;
    width: calc(50% - 10px); /* Adjust to prevent overflow */
    max-width: 100%; /* Ensure line doesn't extend past the container */
    box-sizing: border-box;
}

/* Left Line */
.dot-line::before {
    left: 0;
}

/* Right Line */
.dot-line::after {
    right: 0;
}

/* Dot Circle (Hidden on Mobile) */
.dot-line-inner {
    width: 20px;
    height: 20px;
    background-color: white; /* White background for dot */
    border: 2px solid #adb0b5; /* Gray border */
    border-radius: 50%;
    z-index: 1; /* Above the line */
    position: relative;
}

/* Blue Dot Inside Circle (Hidden on Mobile) */
.dot-line-inner::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #046b99; /* Blue dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Inactive Gray Circles (Hidden on Mobile) */
.dot-line-inner.inactive::after {
    content: none; /* No blue dot for inactive steps */
}

/* Text Block Below Dot */
.dot-text {
    text-align: center; /* Center text under dot */
    margin-top: 0.5rem; /* Spacing between dot and text */
    max-width: 90%;
}

/* Title and Paragraph Styling */
.dot-text h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #323a45;
}

.dot-text p {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Design for Mobile Screens */
@media (max-width: 576px) {
    /* Hide Horizontal Lines on Mobile */
    .dot-line {
        display: none;
    }

    /* Hide Dots (Gray Circles and Blue Dots) on Mobile */
    .dot-line-inner {
        display: none;
    }

    .col-sm-3 {
        width: 100%; /* Full-width for stacking */
        margin-bottom: 2rem; /* Space between stacked items */
        
    }

    .dot-text {
        text-align: left; /* Align text to the left for mobile */
        margin-left: 0; /* No additional margin */
    }
}
/* Panel Styling */
.panel.panel-standout .panel-heading-safe-drinking {
  background-color: #035a80; /* Desired blue background color */
  color: #ffffff; /* White text */
  padding: 10px 15px; /* Standard padding */
  font-size: 1.25rem; /* Larger font size for prominence */
  font-weight: bold; /* Bold text for emphasis */
  border-bottom: 3px solid #fdb81e; /* Add golden-yellow border for detail */
}

.panel-body-safe-drinking p {
  color: #333; /* Dark gray text */
  line-height: 1.5; /* Comfortable line height */
  margin-bottom: 15px; /* Space between paragraphs */
}

/* Specific styling for Quotes from Our Community */
.panel.panel-understated .panel-heading-quotes {
  background-color: #046b99; /* Lighter blue background */
  color: #ffffff; /* White text */
  padding: 10px 15px;
  font-size: 1.25rem;
  font-weight: bold;
  border-bottom: 3px solid #fdb81e; /* Golden-yellow bottom border */
}

/* Adjust panel body alignment and spacing */
.panel-body-quotes {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center-align the image and text */
  text-align: left; /* left-align the text */
  gap: 10px; /* Space between image and text */
}

.panel-body-quotes-other {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center-align the image and text */
  text-align: left; /* left-align the text */
  gap: 10px; /* Space between image and text */
}

.panel-quote-image-other {
    height: auto;
    margin-right: 10px;
    border-radius: 5px;
}

.panel-body-quotes-lausd {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center-align the image and text */
  text-align: left; /* left-align the text */
  gap: 10px; /* Space between image and text */
}

.panel-quote-image-lausd {
	width: 150px;
    height: auto;
    margin-right: 10px;
    border-radius: 5px;
}

/* Adjust image size and spacing */
.panel-quote-image {
  width: 250px; /* Slightly smaller image size */
  height: auto; /* Maintain aspect ratio */
  margin-right: 10px; /* Reduce space to the right of the image */
  border-radius: 5px; /* Keep rounded corners */
}

/* Text Styling for Quotes */
.panel-quote-text {
  font-size: 1rem; /* Standard text size */
  color: #333; /* Dark gray for readability */
  line-height: 1.5; /* Comfortable line height */
  margin: 0; /* Remove default margin */
}

.panel-quote-footer {
  margin-top: 10px; /* Space above the footer */
  font-size: 0.9rem; /* Slightly smaller text */
  color: #555; /* Subdued gray for footer */
}

/* Section Impact Styling */
.section-impact {
  background-color: #f5f9fb; /* Light background */
  color: #555; /* Gray text for readability */
  padding: 15px; /* Inner padding */
  border: 1px solid #ddd; /* Light border for definition */
}

.section-impact h4 {
  color: #034867; /* Deep blue for emphasis */
  font-size: 1.2rem; /* Prominent heading size */
  margin-bottom: 10px; /* Space below heading */
}

.section-impact h3 {
  color: #034867; /* Deep blue for emphasis */
  font-size: 1rem; /* Prominent heading size */
  margin-bottom: 10px; /* Space below heading */
}

.section-impact blockquote {
  font-size: 1rem; /* Standard text size for quotes */
  color: #555; /* Gray text */
  margin: 0 0 15px; /* Space below each blockquote */
}

.section-impact footer {
  font-size: 0.9rem; /* Slightly smaller text for footer */
  color: #777; /* Muted gray for footer */
  margin-top: 5px; /* Space above footer */
}

.shadow2.bg-white.text-center {
    width: 100%; /* Adjust to desired size */
    max-width: 500px; /* Optional: set a max width */
    margin: 0 auto; /* Center the block */
    padding: 20px; /* Adjust padding for consistency */
	box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
}
.short-stories-container {
	width: 100%; /* Ensure it adapts to its parent */
    margin: 0 auto; /* Center it horizontally */
    box-sizing: border-box; /* Ensure padding is included in width */
}
/* Refine spacing for row-social */
.row-social {
    display: flex; /* Ensure the icons are in a horizontal row */
    text-align: center; /* Center align the icons */
    gap: 5px; /* Reduce space between icons */
    margin: 0 auto; /* Center the entire row */
}

/* Adjust individual columns */
.row-social .col-lg-3 {
    flex: 0 1 auto; /* Allow the columns to size automatically */
    padding: 0; /* Remove extra padding */
}

/* Center and size the icons */
.row-social .col-lg-3 a {
    display: inline-block; /* Ensure icons align properly */
    margin: 0; /* Remove extra margin */
}

/* Optional: Adjust icon size if needed */
.row-social .col-lg-3 a span {
    font-size: 40px; /* Reduce icon size slightly, if needed */
}