body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.info-container {
    background: #eef6fc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: calc(100% - 40px);
    max-width: none;
    border: 2px solid yellow;
    padding: 20px;
    box-sizing: border-box;
}

.header {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.column {
    width: 100%; /* Keep this full-width default for mobile */
    box-sizing: border-box;
}

/* This part handles larger screens - KEEP */
@media (min-width: 601px) {
    .column {
        width: 48%; /* Two columns for larger screens */
    }
}

/* New media query for small screens - ADD this block */
@media (max-width: 600px) {
    .column {
        width: 100%; /* Full width for mobile */
        padding: 10px 0; /* Add spacing between columns for better readability */
    }
}

.key-takeaways {
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.feature-icon {
    margin-right: 10px;
    font-size: 20px;
}

/* Category Styles */
.category {
    text-align: center;
    margin-bottom: 20px; /* Space below the image */
}

.category img {
    width: 90%; /* Image will fill the width of the container */
    height: auto;
    border-radius: 10px; /* Rounded corners */
}

.quote-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem auto;
    width: 100%;
    max-width:70%;
    word-break: break-word;
}

.quote-text {
    display: inline-block;
    margin-right: 1rem;
    font-size: 20px;
}

.quote-button {
    background-color: #0077FF;
    background-image: url("https://i0.wp.com/serendipity-adventures.com/wp-content/uploads/2023/08/Serendipty-adventures-copypaste.png?ssl=1&resize=438%2C438");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #FFFFFF;
    border: none;
    padding: 0;
    font-size: 1.5rem;
    cursor: pointer;
    align-self: center;
    width: 2.5rem;
    height: 2.5rem;
}

.quote-button:hover {
    background-color: #FFFF00;
}

.quote-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.1rem #0077FF;
}

.column ol, .column ul {
    display: block; /* Ensures that list behaves normally */
}

.column li {
    display: block; /* Ensures each list item takes full width of its container */
}

.key-takeaways ol {
    list-style-type: decimal; /* Ensures numbers are shown */
    padding-left: 20px; /* Adds some padding for alignment */
}

.blog-link {
  width: 100%; /* Adjust width as needed */
  margin: 20px 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.blog-link a {
  display: block;
  width: 100%;
  overflow: hidden;
}

.blog-link img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.blog-link a:hover img {
  transform: scale(1.05);
}

.container-boxes {
    width: 100%;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}
.container-boxes .header {
    font-size: 24px;
    margin-bottom: 10px;
    color: #000; /* Black color */
    font-weight: bold;
}
.container-boxes .columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.container-boxes .card {
    border: 1px solid #FFD700; /* Yellow color */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 1 1 calc(33.333% - 20px); /* Adjust this to control the number of columns */
    box-sizing: border-box;
    background-color: #ADD8E6; /* Light blue color */
}
.container-boxes .card .title {
    margin-top: 0;
    color: #000; /* Black color */
    font-weight: bold;
}
.container-boxes ul {
    list-style: none;
    padding: 0;
}
.container-boxes li {
    margin: 10px 0;
}
.container-boxes .feature-icon {
    margin-right: 8px;
}

/* Responsive layout adjustments */
@media (max-width: 1024px) {
    .container-boxes .columns {
        display: block; /* Change from flex to block layout */
    }
    .container-boxes .card {
        flex: 1 1 100%;
        margin-bottom: 20px; /* Add space between cards */
    }
}

/* Styles for the Costs Container */
.cost-container {
    background-color: #e0f7e0; /* Green background */
    padding: 20px;
    border-radius: 10px;
    border: 2px solid yellow;
    margin-bottom: 20px;
}

.cost-title {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.quote-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem auto;
    padding: 0.5rem;
    width: 100%;
    max-width: 70%; /* Adjust the width as necessary */
    word-break: break-word;
    background-color: #eef6fc; /* Light blue background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    border: 2px solid #FFFF00; /* Yellow border */
}

.quote-text {
    flex-grow: 1; /* Allows the text to expand and fill the space */
    margin-right: 1rem; /* Adds space between text and button */
    font-size: 1.2rem; /* Adjusts font size */
    color: #333; /* Darker text color */
}

.quote-button {
    background-color: #0077FF; /* Button color */
    background-image: url('https://i0.wp.com/serendipity-adventures.com/wp-content/uploads/2023/08/Serendipty-adventures-copypaste.png?ssl=1&resize=438%2C438');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.quote-button:hover {
    background-color: #FFFF00; /* Changes button color on hover */
}

.quote-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.1rem #0077FF;
}

.shoutout-container {
    background-color: #f0e5ff; /* Light purple background */
    border: 2px solid #ffdb4d; /* Light yellow border */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.shoutout-container .header, .shoutout-container .footer {
    color: #6a4499; /* Darker purple for headers and footer */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center; /* Centers the header and footer text */
}

.shoutout-container .feature-icon {
    font-size: 20px;
    color: #9b6bd9; /* Medium purple */
    margin-right: 5px;
}

.shoutout-container ul {
    list-style-type: none;
    padding: 0;
}

.shoutout-container li {
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 16px;
}

.shoutout-container strong {
    color: #8147e2; /* Bold purple for strong elements */
}

.shoutout-container .footer {
    font-size: 18px; /* Slightly smaller than the header */
    margin-top: 20px; /* Adds space between content and footer */
}

.data-container {
    background-color: #eef6fc; /* Light blue background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border: 2px solid yellow; /* Yellow border */
    padding: 20px; /* Padding inside the container */
    margin-bottom: 20px; /* Space below the container */
    font-family: Arial, sans-serif; /* Font style */
    
    display: flex; /* Enable flexbox */
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    height: 200px; /* Set a fixed height for the container */
}

.data-container p {
    font-size: 1.4em; /* Larger font size for content */
    color: #333; /* Darker text color */
    font-weight: bold; /* Make text bolder */
    background-color: #f0e5ff; /* Light lavender highlight */
    padding: 5px; /* Padding inside the text */
    display: inline-block; /* Ensures the text is highlighted as a block */
    line-height: 1.5; /* Proper line height for readability */
}

.data-container a {
    color: #007bbc; /* Blue color for the link */
    text-decoration: underline; /* Underline the link */
}

.data-container a:hover {
    color: #feca57; /* Hover effect for link */
}

:root {
    /* Define reusable CSS variables */
    --primary-bg: #D9fffe;
    --hover-bg: #b3e7e8;
    --text-color: black;
    --hover-text-color: #333333;
    --font-size: 16px;
    --border-radius: 5px;
    --padding: 10px 15px;
    --max-width: 800px;
}
/* ===== Page Categories (pc-) global styles ===== */
:root{
  --pc-bg: #eef6fc;          /* your light blue */
  --pc-border: #FFFF00;      /* your yellow */
  --pc-text: #000;
  --pc-muted: #333;
  --pc-radius: 12px;
  --pc-gap: 20px;
  --pc-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Optional: if your theme forces odd widths, wrap your landing page content in .pc-wrap */
.pc-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

/* The main reusable “block” */
.pc-block{
  background: var(--pc-bg);
  border: 2px solid var(--pc-border);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: 20px;
  margin: 0 0 22px 0;
  box-sizing: border-box;
}

/* Headings + text */
.pc-title{
  margin: 0 0 10px 0;
  color: var(--pc-text);
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
}
.pc-desc{
  margin: 0 0 16px 0;
  color: var(--pc-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 85ch;
}

/* Jump links / pills */
.pc-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pc-jump a{
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}
.pc-jump a:hover{
  background: #FFFF00; /* your hover yellow */
}

/* Grid of cards inside each block */
.pc-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-gap);
}
.pc-card{
  flex: 1 1 calc(33.333% - var(--pc-gap));
  border: 1px solid #FFD700;        /* matches your card border */
  border-radius: 10px;
  background-color: #ADD8E6;        /* matches your light blue card */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
  overflow: hidden;
}
.pc-card a{
  display: block;
  padding: 16px;
  text-decoration: none;
  color: #000;
}
.pc-card h3{
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.pc-card p{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #000;
}

/* Optional image inside card */
.pc-card img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 12px;
}

/* Ad block placeholder (drop between blocks) */
.pc-ad{
  background: #fff;
  border: 2px dashed #FFD700;
  border-radius: var(--pc-radius);
  padding: 16px;
  margin: 0 0 22px 0;
  text-align: center;
  box-shadow: var(--pc-shadow);
  box-sizing: border-box;
}
.pc-ad small{
  display: block;
  margin-bottom: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #666;
  font-size: 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .pc-card{ flex: 1 1 100%; } /* stacked cards like your current setup */
}

/* Jump links become columns on small screens */
@media (max-width: 600px){
  .pc-title{ font-size: 1.35rem; }
  .pc-block{ padding: 16px; }

  .pc-jump{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pc-jump a{
    text-align: center;
    white-space: normal;
    border-radius: 12px;
    padding: 10px 8px;
  }
}
@media (min-width: 480px) and (max-width: 600px){
  .pc-jump{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* =========================
   PAGE CATEGORIES (pc-)
   FULL REPLACEMENT CSS
   Paste into: Appearance → Customize → Additional CSS
   ========================= */

/* Brand colours */
:root{
  --pc-blue:   #eef6fc;   /* light blue block background */
  --pc-yellow: #FFFF00;   /* yellow border */
  --pc-text:   #000000;
  --pc-muted:  #333333;

  --pc-radius: 12px;
  --pc-gap: 20px;
  --pc-shadow: 0 4px 8px rgba(0,0,0,0.10);
}

/* Optional wrapper (recommended) */
.pc-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Base block */
.pc-block{
  background: var(--pc-blue);
  border: 2px solid var(--pc-yellow);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: 20px;
  margin: 0 0 22px 0;
  box-sizing: border-box;
}

/* Purple variant (personal reflections only) */
.pc-block--purple{
  background: #f0e5ff;
  border-color: #ffdb4d;
}

/* Text */
.pc-title{
  margin: 0 0 10px 0;
  color: var(--pc-text);
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
}
.pc-desc{
  margin: 0 0 16px 0;
  color: var(--pc-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 85ch;
}

/* Jump links / pills (already white) */
.pc-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pc-jump a{
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}
.pc-jump a:hover{
  background: var(--pc-yellow);
}

/* Grid of cards */
.pc-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-gap);
}

/* ✅ Cards as WHITE buttons with YELLOW borders */
.pc-card{
  flex: 1 1 calc(33.333% - var(--pc-gap));
  background: #ffffff;
  border: 2px solid var(--pc-yellow);
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  box-sizing: border-box;
  overflow: hidden;
}

/* Card link + text (locks out theme link colours) */
.pc-card a{
  display: block;
  padding: 16px;
  text-decoration: none;
  background: transparent;
  color: var(--pc-text) !important;
}
.pc-card a:visited,
.pc-card a:hover,
.pc-card a:active{
  color: var(--pc-text) !important;
}

/* Card typography */
.pc-card h3{
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #111111;
}
.pc-card p{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--pc-muted);
}

/* Optional: subtle hover like buttons */
.pc-card:hover{
  background: #f5f5f5;
  transform: translateY(-1px);
  transition: background 0.15s ease, transform 0.15s ease;
}

/* Optional image inside card */
.pc-card img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 12px;
}

/* Optional ad placeholder block */
.pc-ad{
  background: #ffffff;
  border: 2px dashed var(--pc-yellow);
  border-radius: var(--pc-radius);
  padding: 16px;
  margin: 0 0 22px 0;
  text-align: center;
  box-shadow: var(--pc-shadow);
  box-sizing: border-box;
}
.pc-ad small{
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666666;
  font-size: 0.85rem;
}

/* =========================
   Responsive behaviour
   ========================= */

/* Tablet and down: cards stack for clean reading */
@media (max-width: 1024px){
  .pc-card{ flex: 1 1 100%; }
}

/* Mobile: jump links become 2 columns */
@media (max-width: 600px){
  .pc-title{ font-size: 1.35rem; }
  .pc-block{ padding: 16px; }

  .pc-jump{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pc-jump a{
    text-align: center;
    white-space: normal;
    border-radius: 12px;
    padding: 10px 8px;
  }
}

/* Slightly wider phones: 3 columns jump links */
@media (min-width: 480px) and (max-width: 600px){
  .pc-jump{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}