.verdi-mint {
    background-color: #7FFAE1;
}

.verdi-peach {
        background-color: #FFEBE0;
}

.verdi-peach-text{
    color: #FFEBE0;
}

.dark-peach-text {
    color: #99461C;
}

.primary-button {
    background-color: #D9CAB3;
}

.dark-mint-text {
    color: #012B23;
}

.gradient-background {
    background: linear-gradient(to bottom, #7FFAE1, #FFEBE0);
}

.libre-caslon-text-md {
      font-family: "Libre Caslon Text", serif;
  font-weight: 200;
  font-style: normal;
}

.libre-caslon-text-regular {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: normal;
}


.libre-caslon-text-regular_green {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: normal;
  color: #04A848;
}


.libre-caslon-text-bold {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-caslon-text-regular-italic {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: italic;
}
/* Ensure the swiper container is properly contained */
.swiper-container {
    position: relative; /* Make sure controls are positioned relative to this container */
    width: 100%;
    height: auto;
}

/* Style Swiper controls */
.swiper-button-prev,
.swiper-button-next {
    color: #fff; /* Adjust color to match your design */
    width: 48px; /* Adjust size */
    height: 48px; /* Adjust size */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: background color */
    border-radius: 50%; /* Optional: round controls */
}

/* Position pagination dots */
.swiper-pagination {
    position: absolute;
    bottom: 10px; /* Adjust position */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Ensure it's above other elements */
    display: flex;
    gap: 8px;
}

/* Ensure swiper slide doesn't break layout */
.swiper-slide {
    flex-shrink: 0; /* Prevent slides from shrinking */
}

.orange {
    background-color: #FD8548;
}

/* Base container for optimal reading width and default text color */
.richtext-content {
  /* Adjust max-width based on your design. `ch` unit is roughly character width. */
  max-width:80ch;
  /* Or use pixels: max-width: 800px; */
  margin-left: auto; /* Center the content block if desired */
  margin-right: auto; /* Center the content block if desired */
  color: #333; /* Softer than pure black, often easier on the eyes */
}

/* --- Reset --- */
/* Reset specific elements to browser defaults to avoid Tailwind interference */
.richtext-content h1,
.richtext-content h2,
.richtext-content h3,
.richtext-content h4,
.richtext-content h5,
.richtext-content h6, /* Added h6 */
.richtext-content ul,
.richtext-content ol,
.richtext-content li,
.richtext-content p,
.richtext-content a,
.richtext-content img,
.richtext-content blockquote, /* Added blockquote */
.richtext-content pre,        /* Added pre */
.richtext-content code,
.richtext-content strong,      /* Added strong/b */
.richtext-content b,
.richtext-content em,         /* Added em/i */
.richtext-content i,
.richtext-content hr         /* Added hr */
{
  all: revert;
}

/* --- Typography & Spacing --- */

/* Base paragraph style */
.richtext-content p {
  font-size: 1.1rem; /* Slightly larger base font size (e.g., 17.6px if base is 16px) */
  line-height: 1.7;  /* Generous line height for readability */
  margin-top: 0;     /* Remove default top margin */
  margin-bottom: 1.25rem; /* Consistent bottom margin */
}

/* Headings - Clear hierarchy, more space above than below */
.richtext-content h1 {
  font-size: 2.25rem; /* ~36px */
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.richtext-content h2 {
  font-size: 1.75rem; /* ~28px */
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.richtext-content h3 {
  font-size: 1.375rem; /* ~22px */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.richtext-content h4 {
  font-size: 1.125rem; /* ~18px */
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase; /* Optional: Distinguish h4 */
  letter-spacing: 0.05em;   /* Optional: Distinguish h4 */
}

.richtext-content h5 {
  font-size: 1rem; /* ~16px */
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.richtext-content h6 {
  font-size: 0.9rem; /* ~14.4px */
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #555; /* Slightly muted */
}

/* Ensure last element doesn't add extra bottom margin */
.richtext-content > *:last-child {
  margin-bottom: 0;
}

/* --- Links --- */
.richtext-content a {
  color: #007bff; /* Or your brand's link color */
  text-decoration: underline;
  transition: color 0.2s ease;
}

.richtext-content a:hover,
.richtext-content a:focus {
  color: #0056b3; /* Darker shade on hover/focus */
  text-decoration: none; /* Optional: remove underline on hover */
}

/* --- Lists --- */
.richtext-content ul,
.richtext-content ol {
  margin-top: 0;
  margin-bottom: 1.25rem; /* Match paragraph bottom margin */
  padding-left: 1.8em; /* Indentation - use 'em' to scale with font size */
}

.richtext-content li {
  margin-bottom: 0.5rem; /* Space between list items */
}

.richtext-content ul ul,
.richtext-content ol ol,
.richtext-content ul ol,
.richtext-content ol ul {
  margin-top: 0.5rem; /* Space before nested lists */
  margin-bottom: 0.5rem; /* Space after nested lists */
}

/* --- Images --- */
.richtext-content img {
  max-width: 100%;
  height: auto;
  display: block; /* Prevents extra space below image */
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px; /* Optional: slight rounding */
}

/* --- Code --- */

/* Inline code */
.richtext-content :not(pre) > code { /* Target code not inside pre */
  font-family: monospace;
  font-size: 0.9em;
  background-color: #f3f4f6; /* Tailwind gray-100 */
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: #4b5563; /* Tailwind gray-600 for better contrast */
}

/* Code blocks */
.richtext-content pre {
  background-color: #1f2937; /* Tailwind gray-800 */
  color: #d1d5db; /* Tailwind gray-300 */
  padding: 1rem;
  margin-bottom: 1.25rem; /* Match paragraph bottom margin */
  border-radius: 6px;
  overflow-x: auto; /* Handle long lines */
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1.6;
}

/* Style the code element inside pre - remove double background/padding */
.richtext-content pre code {
  font-family: inherit; /* Inherit from pre */
  font-size: inherit;   /* Inherit from pre */
  color: inherit;       /* Inherit from pre */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* --- Blockquotes --- */
.richtext-content blockquote {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.25rem; /* Match paragraph bottom margin */
  padding: 1rem 1.5rem;
  border-left: 4px solid #d1d5db; /* Tailwind gray-300 */
  background-color: #f9fafb; /* Tailwind gray-50 */
  font-style: italic;
  color: #4b5563; /* Tailwind gray-600 */
}

.richtext-content blockquote p {
  margin-bottom: 0.5rem; /* Reduce margin for paragraphs inside quotes */
}

.richtext-content blockquote p:last-of-type {
  margin-bottom: 0; /* Remove margin for last paragraph inside quote */
}

/* --- Horizontal Rules --- */
.richtext-content hr {
  border: none;
  border-top: 1px solid #e5e7eb; /* Tailwind gray-200 */
  margin: 2.5rem auto; /* Generous spacing */
  width: 80%; /* Optional: make it narrower */
}

/* --- Emphasis --- */
.richtext-content strong,
.richtext-content b {
  font-weight: 600; /* Slightly bolder than default potentially */
}

.richtext-content em,
.richtext-content i {
  font-style: italic;
}

/* Add responsive styles for embedded videos/iframes */
.richtext-content iframe,
.richtext-content .embed-responsive,
.richtext-content .youtube-embed {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Alternative method with responsive container */
.richtext-content .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.richtext-content .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .richtext-content img,
    .richtext-content iframe {
        width: 100%;
    }
}



.single_article_banner{
    background-color: #DAF18D;
}

.border_banner {
    box-shadow: 0 0 0 4px #15B1B4; /* Adjust the thickness and color */
}

.article_banner_green_text {
    color: #04A848;
}