/* Root Variables for Colors and Fonts */
:root {
    --custom-dark: #301E15; /* Dark brown */
    --custom-darker: #1A1613; /* Darker brown close to black */
    --custom-primary: #C1D64D; /* Olive green */
    --custom-primary-darker: #A3BF2B; /* Darker olive green on hover */
    --custom-primary-light: #E8D6C6; /* Light beige/tan */
    --custom-gold: #FFD700; /* Gold for crown icon */
    --custom-black: #000000; /* Black for contrast */
    
    /* Fonts */
    --font-lora: 'Lora', serif;
    --font-inter: 'Inter', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
}

/* Promotional Banner */
@keyframes bannerPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
} 
 
.promo-banner {
    background: linear-gradient(120deg, var(--custom-primary), var(--custom-primary-light), var(--custom-primary-darker));
    background-size: 200% 200%;
    animation: bannerPulse 5s ease infinite;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
} 

.promo-banner:hover {
    background: linear-gradient(to right, var(--custom-primary-darker), var(--custom-primary));
}

.promo-banner p {
    margin: 0;
    font-weight: 600;
    color: var(--custom-dark);
    font-size: 1.1rem;
}

@media (max-width: 767.98px) {
    .promo-banner p {
        font-size: 0.9rem;
    }
}

/* custom teaks */

.f500 {
    font-weight: 500; /* Keep it slightly bold */
    color: var(--custom-darker); /* For accent */
    background-color: rgba(255, 255, 255, 0.15); /* Light highlight background */
    padding: 0.2rem 0.3rem; /* Small padding for emphasis */
    letter-spacing: 0.1px; /* Slightly increased spacing */
    display: inline-block; /* Ensure padding applies correctly */
}

/* Adding bottom padding specifically */
div.f500 {
    padding-right: 2rem; /* 2 rem padding at the bottom */
}
.f600 {
    font-weight: 600; 
    color: var(--custom-darker); /*  for accent */
    letter-spacing: 0.1px; /* Slightly increased spacing */
}
 .inner70{   max-width:70%; display:block; }
.inner85{   max-width:85%; display:block; }
@media (max-width: 767.98px) {
.inner70{   max-width:100%; width:100%;  }
.inner85{   max-width:100%; width:100%; }
    
}
/* Padding Margin for Mobile */
@media (max-width: 767.98px) {
    /* Reduce top and bottom margin */
    .mt-5, .my-5 {
        margin-top: 1.5rem !important; /* Previously 3rem */
    }
    .mb-5, .my-5 {
        margin-bottom: 1.5rem !important; /* Previously 3rem */
    }

    /* Reduce top and bottom padding */
    .pt-5, .py-5 {
        padding-top: 1.5rem !important; /* Previously 3rem */
    }
    .pb-5, .py-5 {
        padding-bottom: 1.5rem !important; /* Previously 3rem */
    }
}




/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    .section-padding,
    .section-padding-lg {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Custom Navbar Styles */
.custom-navbar {
    background-color: var(--custom-dark);
    padding: 1rem 2rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Logo Styling */
.custom-navbar .navbar-brand img {
    max-height: 60px;
}

/* Slogan Styling */
.slogan {
  font-family: var(--font-lora);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--custom-primary-light);
  letter-spacing: 0.4px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991.98px) {
    .slogan {
        display: none; /* Hide slogan on mobile */
    }
}

/* CTA Button (Shadcn Style) */
.custom-btn {
    background-color: var(--custom-primary);
    color: var(--custom-dark);
    border: 2px solid var(--custom-primary);
    border-radius: 0px;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    font-weight: 500;
}

/* Hover effect for CTA Button */
.custom-btn:hover {
    background-color: var(--custom-primary-darker);
    transform: scale(1.05); /* Slight grow effect */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

/* Alignment for mobile */
@media (max-width: 991.98px) {
    .custom-navbar .custom-btn {
        margin-left: auto;
    }
}

/* Hero Section */
.hero {
    position: relative;
    background-color: var(--custom-primary-light);
    padding: 4rem 2rem;

     background-image: linear-gradient(to right, rgba(232, 214, 198, 0.6), rgba(255, 255, 255, 0.5)), url('https://aliviado.be/assets/images/hero.webp');
    background-size: cover;
    background-position: center center;
    color: var(--custom-dark);
    min-height: calc(100vh - 80px); /* Set minimum height minus navbar */
}

/* Container Styling for 75% Width */
.hero .container-fluid {
    max-width: 65%; 
    padding-left: 2rem;
    margin-left: 0; 
}

@media (max-width: 991.98px) {
    .hero .container-fluid {
        max-width: 100%; /* Full width on mobile */
        padding-left: 1rem; /* Adjust padding for mobile */
        padding-right: 1rem;
    }
}

/* Headline Styling */
.hero-headline {
    font-family: var(--font-inter);
    font-size: 3rem;
    font-weight: 700;
    color: var(--custom-dark);
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .hero-headline {
        font-size: 2rem; /* Reduce headline size for mobile */
    }
}

/* Subheadline Styling */
.hero-subheadline {
    font-family: var(--font-poppins);
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2rem;
    color: var(--custom-dark);
}

@media (max-width: 767.98px) {
    .hero-subheadline {
        font-size: 1.1rem; /* Adjust subheadline size */
    }
}

/* CTA Button in Hero */
.hero .custom-btn {
    background-color: var(--custom-primary);
    color: var(--custom-dark);
    padding: 0.75rem 2rem; 
    border-radius: 0px;
    font-weight: 600;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    
}

/* Hover Effect for CTA */
.hero .custom-btn:hover {
    background-color: var(--custom-primary-darker);
    transform: translateY(-3px);
}

/* Reassurance Text Styling */
.hero-reassurance {
    
    font-family: var(--font-inter);
  /*  font-size: 0.875rem;  Smaller text */
    font-size: 1rem;   
    
    color: var(--custom-black);
    font-style: italic; /* Italic for spoken feel */
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2rem;
}

/* Icon Styling (Crown) */
.hero-reassurance img {
    margin-right: 0.5rem;
    vertical-align: middle; /* Align icon with text */
    width: 36px; /* Ensure a consistent size */
}

@media (max-width: 767.98px) {
    .hero-reassurance {
      font-size: 0.75rem; /* Smaller font size for mobile */
    }
    .hero-reassurance-mobile .f600 {
        font-size: 0.9rem; /* Adjust font size for mobile */
    }
}
 
 
/* Pain Section Styles */
.pain-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(232, 214, 198, 0.75));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.pain-headline {
    font-family: var(--font-inter);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--custom-dark);
}

/* Subtitle Styling */
.pain-subtitle {
    font-family: var(--font-inter);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--custom-primary-darker); /* Use darker olive green */
}

/* Text Paragraphs */
.pain-text {
    font-family: var(--font-poppins);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    color: #000; /* Use plain black for readability */
    font-weight: 400;
    max-width:85%;
}

/* Image Styling */
.pain-section img {
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive Text Adjustments */
@media (max-width: 767.98px) {
    .pain-headline {
        font-size: 2rem;
    }

    .pain-subtitle {
        font-size: 1.15rem;
    }

    .pain-text {
        font-size: 0.95rem;
    }
}

/* Responsive Ordering for Mobile */
 
 
@media (max-width: 767.98px) {
    /* Reverse the order for the first text-image pair */
    .order-md-1 {
        order: 1 !important; /* Place the text second on mobile */
    }
    .order-md-2 {
        order: 2 !important; /* Place the image first on mobile */
    }
    /* Reverse the order for the second image-text pair */
    .order-md-3 {
        order: 2 !important; /* Place the image first on mobile */
    }
    .order-md-4 {
        order: 1 !important; /* Place the text second on mobile */
    }
}


/* Solution Section Styles */
.solution-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(232, 214, 198, 0.5));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Headline Styling */
.solution-headline {
    font-family: var(--font-inter);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--custom-dark);
}

/* Subtitle Styling */
.solution-subtitle {
    font-family: var(--font-inter);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--custom-primary-darker); /* Use darker olive green */
}

/* Text Paragraphs */
.solution-text {
    font-family: var(--font-poppins);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    color: #000; /* Zwarte tekst voor leesbaarheid */
    max-width: 85%; /* Max width for easier reading */
}

/* CTA Styling */
/*.solution-cta {
    font-family: var(--font-inter);
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--custom-dark);  Dark color for better readability 
}*/
.solution-subtitle {
    font-family: var(--font-inter);
    font-size: 1.5rem;
    font-weight: 600;
}
.custom-btn.btn-outline-light {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.custom-btn.btn-outline-light:hover {
    background-color: #fff;
    color: var(--custom-primary);
}


/* Bold CTA Button Text */
.custom-btn {
    font-weight: bold; /* Bold text for CTA button */
}
.solution-cta {
    color: var(--custom-darker); /* Gebruik een donkerdere tint */
}
.custom-btn.btn-outline-dark {
    background-color: transparent;
    border: 2px solid var(--custom-darker);
    color: var(--custom-darker);
    border-radius: 8px;
    padding: 0.75rem 2rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.custom-btn.btn-outline-dark:hover {
    background-color: var(--custom-darker);
    color: #fff; /* Contrasterende witte tekst */
}


/* Image Styling */
.solution-section img {
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
}


.middle-cta-block {
    background: linear-gradient(to right, #c1d64d, #F5ECE5);
} 
/* Responsive Text Adjustments */
@media (max-width: 767.98px) {
    .middle-cta-block {
    background: #c1d64d;
  padding-bottom:2rem !important;        
} 
    
    .solution-headline {
        font-size: 2rem;
    }

    .solution-subtitle {
        font-size: 1.15rem;
    }

    .solution-text {
        font-size: 0.95rem;
        max-width: 100%; /* Full width on mobile */
    }

    .solution-cta {
        font-size: 1.1rem;
    }
}



/* Steps Section Styles */
.steps-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(232, 214, 198, 0.88));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Headline Styling */
.steps-headline {
    font-family: var(--font-inter);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--custom-dark);
}

/* Step Number Circle */
.step-number-circle {
    width: 70px;
    height: 70px;
    background-color: var(--custom-primary);
    color: var(--custom-dark);
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Circle shape */
    margin-bottom: 1rem;
}
/* Chevron Icon Styling */
.step-chevron {
    font-size: 2rem; /* Adjust size to fit between circles */
    color: var(--custom-primary); /* Olive green */
    transform: scale(1.1); /* Slight size increase */
}

@media (max-width: 767.98px) {
    .step-chevron {
        font-size: 1.5rem; /* Smaller size for mobile */
    }
}

/* Ensure Proper Mobile Alignment */
@media (max-width: 767.98px) {
    .col-md-3 {
        margin-bottom: 2rem; /* Space between steps on mobile */
    }
    
    /* Chevron between steps */
    .col-md-1 {
        order: 1; /* Position chevron between text and circle */
        margin-bottom: 1rem; /* Space for chevron */
    }
    
    /* Move subline for Step 3 */
    .steps-section .row .col-md-3:nth-child(5) {
        order: 3; /* Place step text below previous step */
    }
}


@media (max-width: 767.98px) {
    .step-chevron {
        font-size: 2rem; /* Adjust size for mobile */
    }
}


/* Step Subtitle */
.step-subtitle {
    font-family: var(--font-inter);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--custom-primary-darker);
    margin-bottom: 0.75rem;
}

/* Step Text */
.step-text {
    font-family: var(--font-poppins);
    font-size: 1rem;
    color: var(--custom-dark);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Responsive Adjustments for Mobile */
@media (max-width: 767.98px) {
    .step-number-circle {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .steps-headline {
        font-size: 2rem;
    }
    
    .step-subtitle {
        font-size: 1.15rem;
    }
    
    .step-text {
        font-size: 0.95rem;
    }
}

/* Serge Section Styles */
.serge-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 1));
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

/* Background Image Styling */
.serge-bg-image {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: url('https://aliviado.be/assets/images/sergeMuurBW.jpeg') center center / cover no-repeat; /* Replace with actual image */
    opacity: 0.2; /* Light opacity for subtle background */
    transform: translateX(-50%);
}

/* Section Headline */
.serge-headline {
    font-family: var(--font-inter);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--custom-dark);
}

/* Subtitle Styling */
.serge-subtitle {
    font-family: var(--font-inter);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--custom-primary-darker);
}

/* Text Paragraphs */
.serge-text {
    font-family: var(--font-poppins);
    font-size: 1.1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    color: #000; /* Use plain black for readability */
}

/* Image Styling - Larger & Shadowed */
.serge-section img {
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
}

/* Quote Styling */
.blockquote {
    font-family: var(--font-lora);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--custom-dark);
    border-left: 5px solid var(--custom-primary);
    padding-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Adjustments for Mobile */
@media (max-width: 767.98px) {
    .serge-headline {
        font-size: 2rem;
    }

    .serge-subtitle {
        font-size: 1.3rem;
    }

    .serge-text {
        font-size: 1rem;
    }

    /* Adjust background image to fit smaller screens */
    .serge-bg-image {
        background-position: top center;
        opacity: 0; /* Unvisible on mobile */
    }
}

/* Comparison Section Styles */
.comparison-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(232, 214, 198, 0.88));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Section Headline */
.comparison-headline {
    font-family: var(--font-inter);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--custom-dark);
    margin-bottom: 2rem;
}

/* Table Styles */
.comparison-table {
    width: 100%;
/*    background-color: #fff;*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.comparison-table th, .comparison-table td {
    padding: 1rem;
    font-size: 1rem;
    vertical-align: top; /* Align content to the top */
    text-align: left; /* Left-align all text */
}

.comparison-table th {
    font-family: var(--font-inter);
    font-weight: 600;
    background-color: var(--custom-primary);
    color: var(--custom-dark);
}

.comparison-table td {
    font-family: var(--font-poppins);
}

.comparison-table {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(232, 214, 198, 0.85)); /* Light beige gradient */
    border-collapse: separate;
    border-spacing: 0;
}

.comparison-table th {
    background-color: rgba(193, 214, 110, 0.2); /* Light olive for the headers */
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px;
    color: var(--custom-dark);
}

.comparison-table td {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white for cells */
    padding: 16px;
    font-size: 1rem;
    color: var(--custom-dark); /* Dark text for readability */
}

.comparison-table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly different shade for even rows */
}

.comparison-table tbody tr:hover td {
    background-color: rgba(193, 214, 110, 0.1); /* Light olive on hover */
}

.table-responsive {
    margin: 0 auto; /* Center the table within its container */
}


/* Table Icons */
.text-success {
    color: var(--custom-primary-darker); /* Olive green */
    font-size: 1.25rem;
}

.text-danger {
    color: #e3342f; /* Red for contrast */
    font-size: 1.25rem;
}

/* Spacing between icon and text */
.me-2 {
    margin-right: 0.5rem;
}

/* Conclusion Text */
.comparison-conclusion {
    font-family: var(--font-poppins);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--custom-dark);
    max-width: 75%;
    margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .comparison-headline {
        font-size: 1.75rem;
    }

    .comparison-table th, .comparison-table td {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .comparison-conclusion {
        font-size: 1rem;
        max-width: 90%;
    }
}


/* Testimonials Section Styling */
.testimonials-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(193, 214, 77, 0.85)); /* Soft gradient to olive green */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.testimonials-headline {
    font-family: var(--font-inter);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--custom-dark);
}

.testimonials-intro {
    font-family: var(--font-poppins);
    font-size: 1.125rem;
    color: var(--custom-dark);
    margin-bottom: 2rem;
}

/* Testimonial Card Styling */
.testimonial-card {
    background-color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.testimonial-card:hover {
    transform: translateY(-5px); /* Subtle lift effect */
}

.testimonial-card blockquote {
    font-family: var(--font-lora);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--custom-dark);
    quotes: "“" "”";
    position: relative;
}

.testimonial-card blockquote:before {
    content: open-quote;
    font-size: 2rem;
    color: var(--custom-primary);
    position: absolute;
    left: -10px;
    top: -10px;
}

.testimonial-card blockquote:after {
    content: close-quote;
    font-size: 2rem;
    color: var(--custom-primary);
    position: absolute;
    right: -10px;
    bottom: -10px;
}

.testimonial-author {
    font-family: var(--font-poppins);
    font-weight: 600;
    color: var(--custom-dark);
} 

/* CTA Styling */
.testimonial-cta {
    font-family: var(--font-poppins);
    font-size: 1.25rem;
    color: var(--custom-dark);
    margin-bottom: 1rem;
}



/* Custom Booking Module Styles */
.booking-section {
    padding: 4rem 2rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(193, 214, 77, 0.1)); /* Light gradient */
}

.appointment-container {
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(var(--custom-primary-rgb), 0.15);
    padding: 25px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 8px;
}

.appointment-container h2 {
    color: var(--custom-primary-darker);
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}

 
 

/* Pricing Section Styles */
.pricing-section {
  /*  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(193, 214, 77, 0.15));*/
        background: linear-gradient(to right, rgba(255, 255, 255, 0.88), rgba(193, 214, 77, 0.15)); /* Offwhite to transparent olive */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Main Headline */
.pricing-headline {
    font-family: var(--font-inter);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--custom-dark);
    margin-bottom: 1rem;
}

/* Card Style for Blocks */
.pricing-section .col-md-8 {
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(3, 152, 200, 0.15);
    margin-bottom: 2rem; /* Consistent spacing between cards */
}

/* Subtitle Styling */
.pricing-subtitle, .scarcity-subtitle, .visualization-subtitle, .benefits-subtitle {
    font-family: var(--font-inter);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--custom-darker); /* Dark olive color for subheaders */
}

/* Text Paragraphs */
.pricing-text, .scarcity-text, .visualization-text {
    font-family: var(--font-poppins);
 /*   font-size: 1.125rem;*/
    color: var(--custom-dark);
    margin-bottom: 1.5rem;
}

/* Pricing List Styling */
.pricing-list li {
    font-family: var(--font-poppins);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--custom-dark);
    margin-bottom: 0.5rem;
}

/* Note Style */
.pricing-note {
    font-family: var(--font-poppins);
    font-size: 1rem;
    color: var(--custom-dark);
}

/* Benefits List Styling */
.benefits-list {
    padding-left: 0; /* Remove padding to align with icons */
    list-style: none;
}

.benefits-list li {
    font-family: var(--font-inter);
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

/* Benefits Icon Styling */
.benefits-list i {
    margin-right: 0.5rem;
}

/* Outcome Text */
.benefits-outcome {
    font-family: var(--font-poppins);
 /*   font-size: 1.125rem;*/
    margin-top: 1.5rem;
    font-weight: 500;
      
    color: var(--custom-dark); /* For accent */
    background-color: rgba(255, 255, 255, 0.15); /* Light highlight background */
    padding: 1rem; /* Small padding for emphasis */
    letter-spacing: 0.1px; /* Slightly increased spacing */
    display: inline-block; /* Ensure padding applies correctly */
}

/* Responsive Spacing Adjustments */
@media (max-width: 767.98px) {
    .pricing-section {
        padding: 1.5rem 1rem;
    }

    .col-md-8 {
        margin-bottom: 1.5rem;
    }

    .pricing-subtitle, .scarcity-subtitle, .visualization-subtitle, .benefits-subtitle {
        font-size: 1.5rem;
    }

    .pricing-text, .scarcity-text, .visualization-text, .benefits-outcome {
        font-size: 1rem;
    }

    .benefits-list li {
        font-size: 1rem;
    }
}

/* FAQ Section Styles */
.faq-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(232, 214, 198, 0.88));
    padding: 4rem 2rem;
}

/* Headline Styling */
.faq-headline {
    font-family: var(--font-inter);
    font-size: 2rem;
    font-weight: 700;
    color: var(--custom-dark);
    margin-bottom: 1rem;
}

.faq-intro {
    font-family: var(--font-poppins);
    font-size: 1.1rem;
    color: var(--custom-darker);
    margin-bottom: 2rem;
}

 
/* Accordion Styling */
.accordion-item {
    border: none; /* Remove border */
    box-shadow: none; /* Remove box-shadow */
    overflow: hidden;
    margin-bottom: 0; /* Remove margin between items */
      border-radius:0;
       background-color: transparent;
}

.accordion-button {
    font-family: var(--font-poppins);
    font-size: 1rem;
    color: var(--custom-dark);
    background-color: var(--custom-primary-light);
    border: none;
    padding: 1rem;
    transition: all 0.2s;
    border-radius: 0; /* Remove rounded corners */
}

.accordion-button:not(.collapsed) {
    color: var(--custom-dark);
    background-color: var(--custom-primary-darker);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    font-family: var(--font-poppins);
    font-size: 0.95rem;
    color: var(--custom-dark);
    padding: 1rem;
    text-align: left;
    font-weight:500;
    
   /* margin: 0 auto;  Center the content */
    background-color: rgba(232, 214, 198, 0.28)
}
.inner-accordion-body{
   width: 70%; /* Limit width to 70% */ 
}
/* Remove border and rounded corners */
.accordion-collapse {
    border: none;
    border-radius: 0;
}

/* Mobile-Friendly Accordion Adjustments */
@media (max-width: 767.98px) {
    .accordion-item {
        width: 100%; /* Full width for accordion items */
    }

    .accordion-body {
        width: 100%; /* Full width for accordion body */
        padding: 1rem;
    }
    .inner-accordion-body{
   width: 95%; /* Limit width to 70% */ 
    font-size:1rem;    
}
}

/* Recap Section Styles */
.recap-section {
    background: linear-gradient(to right, rgba(232, 214, 198, 0.15), rgba(232, 214, 198, 0.05));
    padding: 4rem 2rem;
}

/* Recap Headline */
.recap-headline {
    font-family: var(--font-inter);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--custom-dark);
    margin-bottom: 2rem;
}

/* Recap Text */
.recap-text {
    font-family: var(--font-poppins);
    font-size: 1.1rem;
    color: var(--custom-dark);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    
     
}

/* Personal Note Styling */
.personal-note {
      font-family: var(--font-lora); /* Lora for handwriting effect */
    font-weight: 400; /* Lighter weight */
    margin-top: 2rem; /* Add space between button and note */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    color: var(--custom-dark);
 
  background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(232, 214, 198, 0.88));
}


/* Signature Styling */
.signature {
    margin-top: 1rem;
    text-align: right;
    font-family: var(--font-inter);
    font-size: 1.25rem;
    color: var(--custom-dark);
}



/* CTA Button in Recap Section */
.recap-section .custom-btn {
    background-color: var(--custom-primary);
    color: var(--custom-dark);
    padding: 0.75rem 2rem;
    border-radius: 0px;
    font-weight: 600;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover Effect for CTA */
.recap-section .custom-btn:hover {
    background-color: var(--custom-primary-darker);
    transform: translateY(-3px);
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .recap-headline {
        font-size: 2rem;
    }

    .recap-text {
        font-size: 1.1rem;
    }
    
    .personal-note {
        padding: 1rem;
    }

    .signature {
        font-size: 1.15rem;
    }
    .inner70{   width:100% ; max-width:100% }
}
/* Align image to the top */
.recap-section .col-md-4 {
    align-self: flex-start;
}

/* Subtle shadow for image */
.recap-section img {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius:0px
}
 


/* Margin-top for mobile */
@media (max-width: 767.98px) {
    .personal-note {
        margin-top: 1.5rem; /* Adjust spacing for mobile */
    }
    
    .recap-section .col-md-4 {
        margin-bottom: 1.5rem; /* Add spacing for image on mobile */
    }
}


/* Footer Section Styles */
.footer-section {
    background-color: var(--custom-dark); /* Use the same dark color as the header */
    color: var(--custom-primary-light); /* Light beige text color */
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* Footer Logo Styling */
.footer-logo {
    width: 150px; /* Set a standard width */
    height: auto; /* Maintain aspect ratio */
}

/* Footer Headline Styling */
.footer-headline {
    font-family: var(--font-inter);
    font-size: 2rem;
    font-weight: 600;
    color: var(--custom-primary); /* Use olive green for headline */
    margin-bottom: 2rem;
}

/* Footer Subtitle Styling */
.footer-subtitle {
    font-family: var(--font-poppins);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--custom-primary-darker); /* Darker olive green for subtitles */
    margin-bottom: 1rem;
}

/* Footer Links */
.footer-link {
    color: var(--custom-primary-light); /* Light beige for links */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--custom-primary); /* Olive green on hover */
    text-decoration: underline; /* Underline on hover */
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .footer-headline {
        font-size: 1.75rem; /* Adjust headline size for mobile */
    }
    .footer-subtitle {
        font-size: 1.15rem; /* Adjust subtitle size */
    }
    .footer-logo {
        width: 120px; /* Smaller logo on mobile */
    }
}

#solution-video {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}
/* cal tweaks  */
.fw-lg-light{
    color: lime;
}
 
/* Cookie Banner and Modal Styles */
.hidden{display: none}
.cookie-banner {
    background-color: var(--custom-darker); /* Dark Blue Background */
    color: white;
}

.cookie-buttons .btn {
    font-weight: 600;
    padding: 6px 12px; /* Reduced padding for smaller buttons */
}

.cookie-modal .modal-content {
    border-top: 4px solid var(--custom-primary); /* Olive Green Border */
    font-family: 'Poppins', sans-serif;
}

.cookie-modal .form-check-label {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #333;
}

#modal-save {
    background-color: var(--custom-primary);
    color: white;
}

#modal-save:hover {
    background-color: var(--custom-primary-darker);
}

/* Customize button colors */
#accept-all {
    background-color: var(--custom-primary); /* Olive Green */
    border-color: var(--custom-primary);
}

#decline-all {
    background-color: #dc3545; /* Bootstrap danger (red) */
    border-color: #dc3545;
}

#manage-settings {
    background-color: #00aeef; /* Light Blue */
    border-color: #00aeef;
}

#manage-settings:hover {
    background-color: #0398c8; /* Darker Blue on hover */
}