:root {
    --dark-purple: #704FA0;
    --hero: #FFFFFF;
    --problem-purple: #E2DBEC;
    --background-color: #F8F8F8;
    --green-dark: #16C0AB;
    --black-font: #1F1F1F;

    --whisper: #F5F2F9;
    --whisper-light:#F8F5FA;
    --whisper-lighter: #FDFCFD;

    --footer-text: #bbc0c2;

    /* buttons */    
    --cta-btn:#16C0AB;
    --cta-btn-hover: #5AEDDC;
    --cta-btn-active: #A3F5EB;
    --btn-red:#AF1B3F;
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins',  sans-serif;
    line-height: 1.6;
    color: var(--black-font); 
    font-weight: 300;
    overflow-x: hidden;
    background-color {background:var(--background-color)};
}

/* Section Backgrounds */
.bg-white {background: #FFFFFF;}
.bg-thrive {background:var(--background-color)}
.bg-green-dark{background: var(--green-dark);}
.bg-whisper {background: var(--whisper);}
.bg-whisper-light {background: var(--whisper-light);}
.bg-whisper-lighter {background: var(--whisper-lighter);}
.bg-dark-purple {background: var(--dark-purple); }


.eyebrow{
    color: var(--dark-purple);
    font-weight: 700;
    font-size: 1.19rem;
}

.footer-text{
    color: var(--footer-text);
}

.a-footer,
.a-footer:link,
.a-footer:visited {
  color: var(--footer-text);
  text-decoration: none;
}

.a-footer:hover,
.a-footer:focus,
.a-footer:active {
  color: var(--whisper);
}

.purple-icons{
    color:var(--dark-purple);
    font-size: 1.5rem;
    font-weight: 600;
}

.green-icons{
    color:var(--green-dark);
    font-size: 1.4rem;
    font-weight: 600;
}

.red-icons{
    color:var(--btn-red);
    font-size: 1.5rem;
    font-weight: 500;
}

p {
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1.7;
}

.dark-purple{
    color: var(--dark-purple);
}

/* Primary headings with Roboto */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1.125rem, 2vw, 1.25rem); }
h6 { font-size: clamp(1rem, 1.5vw, 1rem); font-weight: 300; }


/* Buttons */
.btn-cta {
  /* background-color: var(--cta-btn); */
    background-color: var(--btn-red);
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-cta:hover, .btn-cta:focus {
  background-color: #E97290;
  color: #ffffff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-cta:active {
  background-color: #E97290;
  box-shadow: none;
}


/* Testimonial Container Styles */
.testimonial-container {
    color: #FFFFFF;
    border-radius: 1.5rem;
}

.testimonial-lead-text {
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.testimonial-heading {
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 2.0rem;
    color: #FFFFFF;
}

.testimonial-description {
    margin-bottom: 0;
    line-height: 1.6;
    font-size: 1.25rem;
    color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .testimonial-container {
        border-radius: 1rem;
    }
    
    .testimonial-heading {
        font-size: 2rem;
    }
    
    .testimonial-lead-text {
        font-size: 1rem;
    }
}


/* Accordion Styles */
/* ===== FONT CUSTOMIZATION - HEADER ===== */
.accordion-button {
    font-family: 'Roboto', sans-serif; 
    font-size: 1.25rem;  
    font-weight: 400; 
    color: var(--black-font); /* header text */
    padding: 2rem 1.25rem; /*The first value controls height, the second value controls left/right padding (width).*/
    background-color: var(--whisper-light);
}

.accordion-button:hover {
    color: var(--black-font);         /* Change header hover text color here */
    background-color: var(--whisper-lighter);        /* Change header hover background color here */
    font-weight: 500;
}

/* ===== FONT CUSTOMIZATION - BODY/DESCRIPTION ===== */
.accordion-body {
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem; 
    color: #4a5568;
    line-height: 1.6;
}

/* Optional: Container styling */
.accordion {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}



/*
    nav bar
*/
.navbar-logo {
    height: 80px;
    width: auto;
}


.navbar-nav .nav-link {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff; 
    padding: 0.5rem 1rem;
    transition: border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.navbar-nav .nav-link:hover {
    color: #FFFFFF; 
}

/*#00BFA6; */
.navbar-nav .nav-link.active {
    color: #FFFFFF;
    border-bottom: 2px solid #FFFFFF; 
    font-weight: 500;
}

/* Optional: Add spacing between menu items */
.navbar-nav .nav-item {
    margin-left: 0.5rem;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    
    .navbar-nav .nav-link.active {
        border-bottom: none;
        border-left: 3px solid #FFFFFF;
        padding-left: 1rem;
    }
}


/* Responsive design */
@media (max-width: 768px) {
    .accordion-button {
        font-size: 1rem;   
    }
    
    .accordion-body {
        font-size: 0.9rem;    
    }
}