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;
}