/* General Layout Styles */
:root {
    --font-sans: 'DM Sans', sans-serif;
    --font-serif: 'Staatliches', serif; /* Define Staatliches for titles or any other special use */
    --green-color: #abd267; /* Green color for Blog Article */
    --peach-color: #f7c097; /* Orange color for article category */
    --white-color:#FDF4FF;
    --aubergine-color:#8C6D91;
    --dark-green-color:#596644;
    --dark-purple-color:#453948;

    /* Define reusable font sizes */
    --font-size-title: 4.5rem; /* Blog Article */
    --font-size-subtitle: 4rem; /* Slightly smaller for About Us */
    --font-size-post-card-title: 4
  }
  
body {
    font-family: var(--font-sans) !important;
    line-height: 1.6;
}

h1{
    font-family: var(--font-serif) !important; /* Apply Staatliches to titles */
    font-weight: 700 ;
  }

h2, h3 {
    font-family: var(--font-sans) 
}

/*shared styling for Featured and Blog Article*/

.subtitle{
    font-family: var(--font-sans) !important; /* Same font family */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    font-weight: 400; /* Normal weight for "Featured" */
    color: black; /* Default color */
    font-size: var(--font-size-subtitle);
}
.title {
    font-family: var(--font-serif) !important; /* Same font family */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    font-weight: 400 !important; /* Bold for "Blog Article" */
    color: var(--green-color); /* Green color */
    font-size: var(--font-size-title);
    line-height: 1; /* Set a tight line-height to reduce spacing */
}
/* Specific Styling for Featured and Blog Article */

.subtitle-about {
    font-size: var(--font-size-subtitle); /* Ensures the correct font size */
    font-weight: 400; /* Normal weight, same as "About Us" */
}

.article-category {
    font-family: var(--font-sans) !important;
    font-weight: 400; /* Regular weight */
    color: var(--peach-color); /* Orange color */
    text-transform: uppercase; /* Always display in uppercase */
    text-decoration: underline; /* Underline the category */
    margin-bottom: 0.5rem; /* Space below the category */
    font-size: 1rem;
}

.container {
    width: 80%;
    max-width: 1300px;
    margin: 0 auto;
}

/*Default Header*/
.gh-head {
    background-color: #453948; /* Replace `#yourColorCode` with the color code from your design */
    height: 150px;
}
.gh-head,
.has-cover .gh-head,
.home-template .gh-head {
    background-color: #453948 !important; /* Replace with your design's color */
}

.gh-head-menu{
    height: 90%;
}



/* Responsive adjustments for the header */
/* Medium devices (tablets, 768px - 991px) */
@media (max-width: 991px) {
    .site-header-content {
        background-color: #453948 !important;
    }
}
/* Small devices (phones, less than 768px) */
@media (max-width: 767px) {
    .has-cover .site-header-content {
        background-color: #453948 !important;
    }
    .gh-head {
        background-color: #453948 !important; /* For header navigation */
    }
}
@media (max-width: 767px) {
    .gh-head-open.has-cover #gh-head, .gh-head-open.has-cover #gh-head .gh-head-actions {
        background: none;
    }
}


/* Blog page styling */

.blog-header-image{
    display: flex;
    justify-content: center;
    padding: 10px;
}
.post-feed{
    padding-left: 100px !important ;
    padding-right: 100px !important ;
    column-gap: 5vmin;
}

.blog-card-title{
    color: var(--aubergine-color);
    padding: 50px;
}
.post-card-title{
    font-size: 3rem;
}
/* Adjust content width to match the image width above */

/* Adjust parent container (.gh-canvas) for consistent layout */
.gh-canvas {
    max-width: 1200px !important; /* Match the blog image width */
    margin: 0 auto !important; /* Center content */
    padding: 0 20px !important; /* Add some side padding for spacing */
}

.gh-canvas>* {
    grid-column: wide-start / wide-end;
}

.article-excerpt{
    max-width: 100%;
}
.gh-content {
    max-width: 1200px !important; /* Match canvas width */
    margin: 0 auto !important;
    padding: 0 !important;
}
/* Ensure av-content inherits and overrides styles */
.av-content {
    max-width: 1100px !important; /* Match image width */
    margin: 0 auto !important; /* Center content */
    padding: 0 20px !important; /* Side padding */
}

.av-content a{
   color: blue;
   text-decoration: underline;
}
.av-content > p,
.av-content > blockquote:not([class]),
.av-content > ol,
.av-content > ul,
.av-content > dl {
    font-family: var(--font-sans) !important; /* Override Ghost's serif font */
    font-weight: 400 !important; /* Reset bold text to normal */
    font-size: 2rem; /* Adjust size to match your desired appearance */
    line-height: 1.6 !important; /* Ensure consistent line spacing */
    color: #333; /* Set a standard text color */
}
/* Responsive Design: Adjustments for smaller screens */
@media (max-width: 768px) {
    .gh-canvas, .gh-content, .av-content {
        max-width: 100% !important; /* Allow full width on small screens */
        padding: 0 15px !important; /* Compact padding */
    }
}


/*Default Footer*/
/* Main footer background */
.site-footer {
    background-color: #596644 !important;
    padding: 40px 0;
    margin-top: 20px;
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/* Footer Row Styling */
.footer-row {
    display: flex;
    justify-content: space-between; /* Spread columns evenly */
    align-items: flex-start;
    border-bottom: 3px solid var(--green-color);
    padding-bottom: 20px;
    gap: 20px; /* Add spacing between columns */
}


/* Footer Columns */
.footer-column .logo-column{
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-column:first-child {
    text-align: left; /* Ensure left alignment for first column containing the logo */
}
.footer-logo {
    max-height: 60px;
    object-fit: contain;
    margin-bottom: 25px /* Removes any margin that may center it */

}
.social-icons {
    display: flex;
    flex-direction: row;
    gap: 15px;
}
.social-icons img {
    width: 40px;
    height: 40px;
}
.footer-column h3 {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 400;
    color: var(--white-color);
}
.footer-links {
    list-style: none;
    padding: 0;
    color: var(--white-color);
}
.footer-links li {
    position: relative;
    padding-left: 20px;
}
.footer-links li:before {
    content: '\25B6'; /* Triangle arrow as bullet */
    position: absolute;
    left: 0;
    color: var(--green-color);
}
.footer-search {
    display: flex;
    justify-content: center;
}
.footer-search input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px 5px 5px 5px;
}
.footer-search-button {
    padding: 10px;
    margin-left:10px;
    background-color: var(--green-color);
    border: none;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
}
.footer-search img {
    width: 15px;
    height: 15px;
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center items horizontally */
        gap: 30px; /* Increase spacing between stacked columns */
    }

    .footer-column {
        width: 100%; /* Make each column take full width */
        text-align: center; /* Center-align content */
    }

    .footer-logo{
        justify-self: center;
    }

    .footer-links li{
        padding-left: 0;
    }
    .footer-search input[type="text"] {
        width: 80%; /* Reduce search bar width */
        max-width: 300px; /* Constrain width */
    }

    .social-icons {
        justify-content: center; /* Center social icons */
        gap: 10px; /* Add space between icons */
    }

    .footer-logo {
        max-height: 50px; /* Resize logo for mobile */
        width: auto; /* Maintain aspect ratio */
    }

    .footer-links li:before {
        visibility: hidden;
        position: absolute;
        left: 0;
        color: var(--green-color);
    }
}

.gh-portal-triggerbtn-container{
    background: var(--aubergine-color) !important;
}

/*Footer Newsletter Row */
.newsletter-row {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px;
    padding-top: 20px;
    
}
.newsletter-row h3{
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 400;
    color: var(--white-color);
}
.newsletter-row input[type="text"] {
    width: 40%;
    max-width: 300px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.newsletter-row button {
    padding: 15px;
    
    background-color: var(--green-color);
    font-weight: 600;
    font-size: 2rem;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Responsive adjustments for the footer */

/* Medium devices (tablets, 768px - 991px) */
@media (max-width: 991px) {
    .site-footer .inner {
        background-color: #596644 !important;
        .footer-row {
            flex-direction: column;
            align-items: flex-start;
        }
        .newsletter-row input[type="text"] {
            width: 80%;
        }
    }
}
/* Small devices (phones, less than 767px) */
@media (max-width: 767px) {
    .site-footer {
        background-color: #596644 !important;
        .footer-container {
            width: 90%;
        }
        .newsletter-row input[type="text"] {
            width: 100%;
        }
    }
}



/* Featured Section */
.featured-section {
    display: flex;
    flex-direction: column;
    margin-top: 200px;
    gap: 20px; /* Added spacing between elements */
}
.featured-container {

    margin-top: 20px; /* Adjust spacing from featured section */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
    width: 100%;
}
.featured-row{
    display: flex;
    gap: 20px; /* Space between columns */
    flex-wrap: wrap; /* Allow rows to wrap when there's not enough space */
}
.featured-preview {
    display: flex;
    align-items: stretch; /* Make the articles fill the height */
    padding: 0px;
    flex: 1;
    min-width: 300px; /* Prevent the preview from shrinking too much */
    
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow */
}
.featured-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Align vertically centered */
    max-width: 48%; /* Set a max width to keep two columns side by side */
    padding-right: 20px;
    margin-left: 0;
}

.featured-left h2{
    font-size: 5rem;
}

.featured-title{
    margin: 10px 0 30px 0;
    font-size: 4rem;
}

.featured-left p{
    color: var(--dark-green-color);
    font-weight: 600;
    font-family: var(--font-sans);
}


.featured-left img{
    width: 20%;
}
.featured-right {
    flex: 1;
    max-width: 48%;
}
.featured-right img {
    width: 100%;
    height: auto;
    margin-right: 40px;
    margin-left: 30px;
    border-radius: 5px;
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .featured-row {
        flex-direction: column; /* Stack children vertically */
    }

    .featured-left,
    .featured-right {
        width: 100%;
        max-width: 100%; /* Ensure both sections take full width */
    }

    .featured-right img {
        width: 100%; /* Ensure the image resizes to full width */
        height: auto; /* Maintain aspect ratio */
        margin: 0;
    }

    .featured-preview{
        width: 80%;
        flex-direction: column;
        row-gap: 20px;
    }

    .featured-container{
        width: 80%;
    }

}




.article-link {
    display: flex; /* Make the link a flex container */
    flex-direction: row; /* Align children (image and content) horizontally */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Ensure text color is inherited everywhere */
}
.article-link:hover {
    text-decoration: none;
    transform: scale(1.02); /* Optional subtle hover effect */
    transition: transform 0.3s ease;
}
.article-image {
    flex: 0 0 40%; /* Allow image to take up 35% of the width */
    overflow: hidden; /* Crop the image if necessary */
}
.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make sure the image fills its container */
}
.article-row {
    display: flex;
    gap: 40px; /* Space between columns */
    flex-wrap: wrap; /* Allow rows to wrap when there's not enough space */
}
.article-preview {
    display: flex;
    align-items: stretch; /* Make the articles fill the height */
    border: 2px solid var(--green-color); /* Green border for each article */
    padding: 0px;
    flex: 1;
    min-width: 300px; /* Prevent the preview from shrinking too much */
    max-width: 48%; /* Set a max width to keep two columns side by side */
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow */
    border-radius: 5px;
}
.articles-container {
    margin-top: 30px; /* Adjust spacing from featured section */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
}
.article-content {
    flex: 1;
    padding-left: 15px; /* Space between image and text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 10px;
}
.article-content h3 {
    margin-bottom: 10px;
    margin-top: 0px;
    font-family: var(--font-sans);
    font-weight: 700;
    color: black;
    font-size: 2rem;
    line-height: 1.4; /* Set line-height to make text more readable */
}
/* Media query for smaller screens */
@media (max-width: 768px) {

    .article-row{
        gap: 20px;
    }

    .articles-container{
        width: 90%;
    }
    .byline-meta-date{
        font-size: 1rem;
    }
    .article-row {
        flex-direction: column; /* Stack articles on top of each other on small screens */
    }
    .article-preview {
        max-width: 100%; /* Make sure previews take up the full width */
        flex-direction: column;
        max-height: 150px;
    }

    .article-content{
        margin: 5px;
        padding: 5px;
    }
    .article-content h3{
        margin: 0;
    }
    .article-image {
        flex-direction: column;
        width:fit-content;
    } 
    .article-content h3 {
        font-size: 1.25rem; /* Adjust font size for smaller screens */
    }
}





/*About page*/
/* Hero Image Styling */
.about-hero {
    /* background: url('/content/images/smartphones-in-a-circle.jpg') no-repeat center center / cover; */
    width: 100%; /* Ensure the section spans the full width */
    padding: 20% 25% 10%;
    /* Adjust padding for spacing */
    margin-top: 0; /* Adjustable space above the section */
}

.about-header {
    margin: 40px 20% 40px 20%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px 20px 0 20px;
    justify-content: center;
    border-bottom: 2px solid;
   border-color: lightgrey;
    max-height: 200px;
    
 }

 .about-header-text{
    padding-top: 20px;
 }

 .about-header-image{
    max-width: 100px;
 }
 
.about-header h1{
    color: var(--aubergine-color);
    font-size: 7rem;
    margin: 0;
}

.about-bg{
        background: url('/content/images/purple-avo-background.png') no-repeat center center / cover;
        text-align: center;
        padding: 50px 20px; /* Adjust padding for spacing */
        margin-top: 50px; /* Adjustable space above the section */
        margin-bottom: 100px;
        color: #fff; /* Ensure text contrasts with the background */
        
}

.level-up-bg{
    background: url('/content/images/green-avo-background.png') no-repeat center center / cover;
    text-align: center;
    padding: 50px 20px; /* Adjust padding for spacing */
    margin-top: 50px; /* Adjustable space above the section */
    color: #fff; /* Ensure text contrasts with the background */
}

.level-up-bg h3{
    color: black;
    margin: 0;
}

.level-up-bg h1{
    color: var(--dark-green-color);
    font-size: 8rem;
    margin: 0;
    position: relative;
}
.about-hero h1{
    background-color: rgba(0,0,0, 0.5);
    text-align: center;
    font-size: 7rem;
    font-weight: 500;
    width: fit-content;
    padding: 10px 20px 10px 20px;
    color: white;
    border-radius: 5px;
}
.about-hero .hero-image {
    width: 100%; /* Make the image span the full width */
    height: 80vh; /* Set the height to 80% of the viewport height */
    object-fit: cover; /* Ensures the image covers the container */
    object-position: center center; /* Centers the cropping */
    display: block; /* Removes default inline spacing from the image */
}

.mission-title{
    font-size: 7rem;
    color: var(--green-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-mission {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    margin-bottom: 20px; /* Add space above and below the section */
    padding: 20px 20px 0px 20px;
    /*background-color: var(--white-color); /* Optional background color */
}
.mission-container {
    max-width: 400px; /* Constrain the image size */
    width: 100%;
    display: flex;
    gap: 30px;
    text-align: left; /* Center content inside the container */
}

.mission-text{
    align-self: end;
}


.mission-image {
    width: 50%; /* Scale the image to the container width */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove inline spacing */
    border-radius: 10px; /* Optional: Slightly round the corners */
}
/* Mission Summary Section */
.mission-summary {
    display: flex;
    justify-content: center; /* Center the container horizontally */
    align-items: center; /* Center the content vertically if there’s more space */
    margin: 0; /* Add vertical spacing between sections */
    padding: 0px 20px 20px 20px;
}
.summary-container {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack image and text vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    width: 66%; /* Set container width to 66% of the screen */
    max-width: 800px; /* Optional: Add a maximum width */
    padding: 40px;
    border: 2px solid var(--green-color); /* Green border */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-sizing: border-box; /* Ensure padding is included in the width */
    /*background-color: var(--white-color); /* Optional: Add a background color */
    text-align: center; /* Center the text inside */
}
.summary-image {
    max-width: 100px; /* Constrain the image size */
    width: 100%; /* Scale the image proportionally */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Add space between the image and text */
    display: block; /* Remove inline spacing */
    object-fit: contain; /* Ensure the image fits nicely */
}
.summary-text {
    font-family: var(--font-sans); /* Use your sans-serif font */
    font-size: 2rem; /* Adjust text size */
    line-height: 1.6; /* Improve readability */
    color: #333; /* Slightly muted color for text */
    margin: 0; /* Remove default margin */
}
/* About Banner Section */
.about-banner {
    background: url('/content/images/purple-avo-background.png') no-repeat center center / cover;
    width: 100%; /* Full width */
    position: relative;
    margin: 50px 0; /* Add spacing above and below the banner */
}
.about-image {
    width: 100%; /* Ensure the image spans the full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes inline spacing */
}


/* About Links Section */
.about-links {
    display: flex;
    justify-content: center; /* Center the entire section */
    align-items: center; /* Vertically center the section */
    margin: 50px 0; /* Add spacing above and below the section */
    padding: 20px;
}.about-link {
    display: block; /* Ensure the anchor behaves as a block-level element */
    text-decoration: none; /* Remove underline from the link */
    width: 100%; /* Match the width of the image */
}
.about-link:hover {
    transform: scale(1.03); /* Subtle zoom effect on hover */
    transition: transform 0.3s ease; /* Smooth transition */
}
.links-container {
    display: flex;
    justify-content: space-between; /* Space the boxes evenly */
    align-items: center; /* Center content vertically */
    gap: 40px; /* Space between the boxes */
    width: 100%; /* Use the full width of the page */
    max-width: 1200px; /* Constrain the container width */
    flex-wrap: wrap; /* Allow stacking on smaller screens */
}
.link-box {
    flex: 1 1 45%; /* Two boxes side by side, each taking 45% width */
    max-width: 400px; /* Optional: Limit the maximum width */
    display: flex;
    flex-direction: column; /* Stack image, title, and blurb vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center the text inside */
    padding: 20px;
}
.link-image {
    width: 80px; /* Size of the image */
    height: 80px; /* Size of the image */
    margin-bottom: 15px; /* Add space below the image */
}
.link-title {
    font-family: var(--font-sans);
    font-size: 2rem; /* Title size */
    font-weight: bold;
    color: var(--aubergine-color); /* Use your chosen color */
    margin: 10px 0; /* Space above and below the title */
}
.link-blurb {
    font-family: var(--font-sans);
    font-size: 1.6rem; /* Adjust blurb size */
    line-height: 1.6; /* Improve readability */
    color: #555; /* Muted color for the blurb text */
    margin: 0; /* Remove default margin */
}

/*terms section about page*/

.terms-link:hover{
    transform: scale(1.03); /* Subtle hover effect */
    transition: transform 0.2s ease;
}

.terms-bg{
    background-color: white;
    padding: 10px;
    width: fit-content;
    max-width: 500px;
    justify-self: center;
    border-radius: 5px;
    margin-bottom: 10px;
}

.terms-h1{
    margin: 0;
    color: var(--green-color);
    font-size: 6rem;
    border-radius: 5px;
    font-weight: 400; 
}   

.terms-p{
    margin: 0;
    font-size: 2rem;
    line-height: 2rem;
}
/* About Links Section Anchor Wrapper */
.link-wrapper {
    text-decoration: none; /* Remove underline */
    display: flex; /* Maintain flex behavior */
    flex: 1 1 45%; /* Inherit width and spacing behavior from link-box */
    max-width: 400px; /* Ensure width constraints are respected */
}
.link-wrapper:hover {
    transform: scale(1.03); /* Subtle hover effect */
    transition: transform 0.2s ease;
}

.contact-us-bg{
    background-color: var(--white-color);
    text-align: center;
    padding: 50px 20px; /* Adjust padding for spacing */
    margin-top: 50px; /* Adjustable space above the section */
}

.contact-us-container button{
    padding: 10px;
    border-radius: 5px;
    background-color: var(--green-color);

}
.mailto-link{
    font-size: 2.5rem;
    font-family: var(--font-sans);
    color: white;
    text-decoration: underline;
}

.mailto-link-privacy{
    color: blue;
    text-decoration: underline;
    font-size: 1.6rem;
    
}
/* Responsive Styling */
@media (max-width: 768px) {
    .links-container {
        flex-direction: column; /* Stack boxes vertically */
        gap: 20px; /* Add space between stacked boxes */
    }

    .link-box {
        flex: 1 1 100%; /* Make each box full width */
        max-width: none; /* Remove maximum width restriction */
    }
}

@media (max-width: 768px) {
    .about-page h1 {
        width: 100%;
        font-size: 4rem;
        margin-top: 0;

    }
     
    .mission-text{
        margin-left: 20px;
    }
    .about-page h2{
        font-size: 3rem;
    }

    .link-box {
        flex: 1 1 100%; /* Make each box full width */
        max-width: none; /* Remove maximum width restriction */
    }

   .about-mission{
        margin: 0 !important;
   }
    .mission-container img{
        width: 40%;
        justify-self: center;
    }

    .mission-summary{
        margin: 0 !important;
    }

    .summary-container{
        width: 100% !important;
        padding: 20px !important;
        
    }

    .about-page p{
        font-size: 1.5rem;
    }

    .summary-container img{
        width: 20%;
    }

    .terms-h1{
        font-size: 4rem !important;
    }
}



/* Terms Page Styles */
.terms-page {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}
/* Header Section */
.terms-header {
    width: 66%; /* Takes up 66% of the container width */
    display: flex;
    justify-content: center;
    margin: 0 auto 30px auto; /* Center the header with spacing below */
    border-bottom: 2px solid var(--peach-color); /* Pale color border */
    padding-bottom: 20px;
}

.terms-header img{
    max-width: 90px;
}
.header-content {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align image and text vertically */
    gap: 20px; /* Space between image and text */
}
.header-image {
    flex: 0 0 33%; /* Image takes 1/3 width */
    max-width: 150px; /* Constrain the image size */
    height: auto; /* Maintain aspect ratio */
}
.header-text {
    flex: 0 0 66%; /* Text takes 2/3 width */
    display: flex;
    flex-direction: column; /* Stack the lines vertically */
    justify-content: center; /* Center text vertically */
}
.header-line1 {
    font-family: var(--font-sans);
    font-size: 2rem; /* Adjust as needed */
    font-weight: 400; /* Regular weight */
    color: black;
}
.header-line2 {
    font-family: var(--font-sans);
    font-size: 2.5rem; /* Slightly larger than the first line */
    font-weight: 700; /* Bold for emphasis */
    color: var(--aubergine-color); /* Aubergine color */
}
/* Terms Content Section */
.terms-content {
    width: 66%; /* Takes up 66% of the container width */
    margin: 0 auto; /* Center the content */
    text-align: left; /* Left justify the text */
}

.terms-content p {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.6;
    color: #333; /* Dark grey for readability */
    margin-bottom: 20px; /* Space between paragraphs */
}

.terms-content .last-updated {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    color: #555; /* Slightly muted color */
    margin-top: 30px;
}






/* blogs page */
.blogs-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
}
.blogs-row {
    display: flex;
    justify-content: space-between; /* Spread items evenly */
    flex-wrap: wrap; /* Allow rows to wrap on smaller screens */
    gap: 20px; /* Space between blog previews */
}
.blogs-row:last-child {
    justify-content: flex-start; /* Align items to the left */
    gap: calc((100% - (4 * calc(25% - 20px))) / 3); /* Match the gap of full rows */
}
.blogs-preview {
    flex: 1 1 calc(25% - 20px); /* Four items per row */
    max-width: calc(25% - 20px); /* Ensure consistent spacing */
    display: flex;
    flex-direction: column; /* Stack image and content vertically */
    border: 2px solid var(--green-color); /* Green border for each preview */
    box-sizing: border-box; /* Include padding in size */
    overflow: hidden;
    transition: transform 0.3s ease; /* Add a subtle hover effect */
    border-radius: 10px;
}
.blogs-preview:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
}
.blogs-image {
    flex: 0 0 50%; /* Take up the top half of the preview */
    width: 100%;
    overflow: hidden; /* Crop overflowing parts */
    background-color: #f4f4f4; /* Fallback background */
}
.blogs-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers its container */
}
.blogs-content {
    flex: 1;
    padding: 10px; /* Add spacing inside the content */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center text */
    text-align: center; /* Center align text for smaller articles */
}
.blogs-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 2rem; /* Adjusted for smaller articles */
    color: black;
    margin: 0 0 5px 0; /* Add spacing below the title */
}
.blogs-excerpt {
    font-family: var(--font-sans);
    font-size: 1.5rem; /* Smaller font for excerpts */
    color: #555; /* Slightly muted color for readability */
    line-height: 1.4;
    margin: 0;
}
.byline-meta-date{
    font-weight: 700;
    color: grey;
}



/* Adjust for smaller screens */
@media (max-width: 768px) {
    .blogs-row {
        flex-direction: column; /* Stack blog previews vertically */
        gap: 20px; /* Maintain spacing between stacked previews */
    }

    .blogs-preview {
        flex: 1 1 100%; /* Make each blog preview take full width */
        max-width: 100%; /* Remove width restrictions */
    }

    .blogs-image {
        width: 100%; /* Ensure images scale to the container width */
    }

    .blogs-content {
        text-align: center; /* Center-align text for better readability on mobile */
    }

    .blogs-title {
        font-size: 1.5rem; /* Adjust font size for mobile screens */
    }

    .blogs-excerpt {
        font-size: 1rem; /* Adjust excerpt size for mobile screens */
    }
}

/* socials page */

.social-header {
   margin: 40px 20% 40px 20%;
   display: flex;
   flex-direction: row;
   gap: 20px;
   padding: 20px 20px 20px 20px;
   justify-content: center;
   border-bottom: 2px solid;
   border-color: lightgrey;
   max-height: 200px;
   
}

.social-header-text{

}
.elfsight-app-904f2454-1f9e-4888-b840-f3bdc50d9f43{
    margin: 40px 40px 0 40px;
}

.social-header h1{
    color: var(--aubergine-color);
    font-size: 6rem;
    margin: 0;
}

.social-header img {
    width: 100%;
    max-height: 150px;
    height: auto;
    object-fit: contain;

}

.social-page{
    background: url('/content/images/full-avo-background.png') no-repeat top center / cover;
}

@media (max-width: 768px) {

   
    
    .social-header {
        background: url('/content/images/full-avo-background.png') no-repeat bottom center / cover;
        margin: 0;
        flex-direction: column;
        align-items: center;
        border: none;
    }

    .social-header h1{
        margin: 0;
    }
    

    .social-header-image{
        width: 40%;
        align-items: center;
        margin: 0;
    }
   

}


.pagination {
    display: flex;
    justify-content: center; /* Center the pagination links */
    margin-top: 20px;
}

.pagination .pagination a {
    text-decoration: none;
    font-family: var(--font-sans);
    color: var(--aubergine-color); /* Use a consistent color from your palette */
    margin: 0 10px;
    padding: 10px 15px;
    border: 1px solid var(--green-color); /* Optional border for buttons */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.pagination .pagination a:hover {
    background-color: var(--green-color);
    color: white;
}

.pagination .pagination span {
    font-family: var(--font-sans);
    color: var(--aubergine-color); /* Styling for current/disabled page numbers */
    margin: 0 10px;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #f0f0f0;
    font-weight: bold;
}

@media (max-width: 768px) {
    .blogs-preview {
        flex: 1 1 100%; /* Stack items vertically */
        max-width: 100%;
    }

    .blogs-content {
        padding: 15px; /* Add padding for readability on small screens */
    }

    .blogs-title {
        font-size: 2rem; /* Adjust font size */
    }

    .byline-meta-date{
        font-size: 1.5rem;
    }

    .blogs-excerpt {
        font-size: 1.5rem; /* Adjust font size */
    }

    .av-content{
        margin: 20px !important;
    }

    .av-content p{
        font-size: 1.5rem;
    }

    .read-more-wrap.outer{
        margin-bottom: 40px;
    }
}

.av-content p{

    padding: 40px 0 40px 0;
}

.read-more-wrap.outer{
    margin: 40px;
}

.cta-section {
    background: url('/content/images/green-avo-background.png') no-repeat center center / cover;
    text-align: center;
    padding: 50px 0; /* Adjust padding for spacing */
    margin-top: 50px; /* Adjustable space above the section */
    color: #fff; /* Ensure text contrasts with the background */
}
.cta-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.cta-container img {
    width: 10%;
}


.cta-text {
    font-family: var(--font-sans);
    font-weight: 700;
    text-align: center;
    color: #333;;
    background: none; /* Optional: Add a background for contrast */
    
    border-radius: 5px; /* Optional: Add rounded corners */
    margin: 0 auto;
}

.cta-text h1{
    font-size: 6rem;
}

.cta-text h3{
    font-size: 3rem;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
    .cta-section {
        padding: 30px 15px; /* Adjust padding for smaller screens */
    }

    .cta-container {
        gap: 15px;
    }

    .cta-container img{
        width: 20%;
    }
}



/* About Section */
.empowering{
    background-color: var(--dark-green-color);
    width: 40%;
    border-radius: 5px;
    max-width: 300px;
    padding: 15px;


}

.empowering h2{
    color: var(--white-color);
    text-align: left;
    margin-top: 0;
}

.take-control{
    background-color: var(--green-color);
    width: 40%;
    border-radius: 5px;
    max-width: 300px;
    padding: 20px;
    
}

.take-control h1{
    margin: 10px 0 10px 0;
    text-align: left;
}
.take-control h2{
    margin: 0;
    text-align: left;
}

.btn-newsletter{

    border-radius: 5px;
    background-color: var(--aubergine-color);
    width: 100%;
    margin-top: 40px;
    font-size: 3rem;
    font-family: var(--font-serif);
    color: var(--white-color);
    padding: 10px;
    line-height: 1;
}


.about-section {
    margin-top: 50px;
    text-align: center;
    
}
.about-container {
    display: flex;
    justify-content: center; /* Center the entire content */
    flex-direction: column;
    align-items: center;
    margin: 0 10% 0 10%;
    gap: 20px;
}
.about-text{
    width: 60%;
    text-align: center;
    
    
}
.about-text h2 {
    font-family: var(--font-serif);
    font-size: 5rem;
    color: var(--green-color);
    font-weight: 600;
    margin-bottom: 10px;
}
.about-text p {
    font-family: var(--font-sans);
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 600;
    color: #333;
    
}
/* Images Section Styling */
.about-images {
    display: flex;
    justify-content: center;
    gap: 40px; /* Spacing between images */
    width: 100%;
    margin-bottom: 20px;
}

.about-images img {
    width: 40%; /* Make images equal width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure uniform cropping */
    max-width: 300px; /* Limit the maximum size */
    border-radius: 5px;
}

.empowering img{
    width: 100%;
    border-radius: 5px;
}

.take-control img{
    width: 15%;
    margin-bottom: 20px;

}
/* Mobile Adjustments */
@media (max-width: 768px) {

    .featured-section{
        margin-top: 40px;
    }

    .about-container p{
        font-size: 1.5rem;
    }

    .about-container h2{
        margin-top: 0;
    }
    .about-images {
        flex-direction: column; /* Stack images vertically */
        gap: 15px; /* Adjust spacing for smaller screens */
    }

    .about-images img {
        width: 100%; /* Make images scale appropriately for mobile */
        max-width: none; /* Remove width restrictions */
    }

    .empowering{
        max-width: 350px;
        width: 100%;
    }
    .take-control{
        max-width: 350px;
        width: 100%;
    }
    .take-control h2{
        font-size: 2rem;
    }

    .take-control img{
        width: 15%;
    }
}

/*signup page*/



.signup-container{
    background: url('/content/images/full-avo-background.png') no-repeat top center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5% 0 5% 0;

}

.signup-form{
    
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0 40px 0 40px;
    padding-bottom: 5%;
}

.signup-form img{
    max-width: 150px;
}

.signup-container h1{
    color: var(--aubergine-color);
    font-size: 6rem;
}

.signup-container h3{
    font-size: 4rem;
    margin: 0;
}



.signup-container p{
    margin: 20px;
    width: 40%;
    color: var(--dark-green-color);
    font-weight: 600;
    font-size: 2rem;
    text-align: center;
}


.signup-btn{

    background-color: var(--green-color);
    border-radius: 10px;
    padding: 15px;
    
    font-family: var(--font-serif);
    font-size: 4rem;
    color: var(--white-color);
    align-items: center;

}

.social-icons-container{
    text-align: center;
    width: 100%;
    
    padding: 50px 0 50px 0;
    background-color: var(--white-color);

}

.social-icons-container h2{
    margin: 0;
}

.social-icons-page{
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;;
    
}

.social-icons-page img{
    height: 80px;
    width: 100%;
}





/* about Wrapper to center the inner content */

/* About Content (Text) */

/* About Images Container (All three images) */

/* Flanking Images (Left and Right) */

/* Center CTA Image */

/* CTA Text Styling */




.cta-footer img {
    margin-top: 20px;
    width: 100%;
    max-width: 600px;
}

/* Responsive Styles */
@media (min-width: 768px) {
    .articles-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-container {
        flex-direction: row;
    }
}

/* Navigation Styling */
/* Logo Image Styling */
.site-logo {
    max-width: 150px; /* Adjust height as needed */
    object-fit: contain; /* Maintain aspect ratio of the logo */
}
.site-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.nav-item {
    text-align: center;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    display: block;
    font-size: 2rem;
}

.nav-link i {
    display: block;
    font-size: 2rem;
    margin-bottom: 5px;
}
.nav-link:hover {
    color: var(--green-color); /* Change to primary color on hover */
}


@media (max-width: 768px) {

    .site-nav{
        flex-direction: column;
    }

    .site-logo {
        width: 100%;
    }

    .featured-container {
        flex-direction: row;
    }
}

/* .gh-canvas{
    grid-column-start: wide-start;
    grid-column-end: wide-end;
} */

.para-link{
    color: blue;
    
}