:root {
    /* Primary Colors */
    --primary-blue: #0d66ff;
    --primary-yellow: #ffff00;
    --primary-white: #F7F7F7;
    
    /* Secondary Colors */
    --secondary-light-blue: #D1E1FF;
    --secondary-medium-blue: #9EC2FF;
    --secondary-light-gray: #cbcbcb;
    --secondary-medium-gray: #7E7E7E;
    --secondary-dark-gray: #404040;
    --secondary-pale-yellow: #FEFFB6;
    
    /* Tertiary Colors */
    --tertiary-pink: #FF65B2;
    --tertiary-green: #14AE5C;
    --tertiary-gold: #FFE831;
    --tertiary-light-pink: #FFA4D2;
    --tertiary-orange: #FFA60D;
    --tertiary-lavender: #A9A9FF;
    --tertiary-purple: #6565FF;
    --tertiary-gray:#333333;
    /* UNIFIED SPACING SYSTEM - Fibonacci */
    --space-3: 3px;
    --space-5: 5px;
    --space-8: 8px;
    --space-13: 13px;
    --space-21: 21px;
    --space-34: 34px;
    --space-55: 55px;
    --space-89: 89px;
    
    /* STANDARDIZED MEASUREMENTS */
    --section-padding: var(--space-89);
    --title-margin-bottom: var(--space-34);
    --content-spacing: var(--space-21);
    --testimonial-spacing: var(--space-21);
    
    /* STANDARDIZED TYPOGRAPHY */
    --section-title-size: 28px;
    --section-text-size: 16px;
    --testimonial-text-size: 14px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--secondary-dark-gray);
    background-color: white;
    line-height: 1.5;
    overflow-x: hidden;
    font-size: var(--section-text-size);
    margin: 0;
    padding: 0;
}
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: white;
    line-height: 1.2;
}

.nimbo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-21);
}
@media (max-width: 768px) {
    .nimbo-container {
        padding: 0 var(--space-21);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* ===== BACKGROUND IMAGES FOR ALL SECTIONS ===== */
.nimbo-hero {
    background-image: url('images/1Achieve-HeroSection-RenaissanceHandsOceanSunset.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(0px) brightness(1.0) contrast(1.05);
}

.nimbo-participate-counters {
    background-image: 
        linear-gradient(to bottom right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), 
        url('images/2Shape-Section-HandsUpinGrey.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(0px) brightness(1.0) contrast(1.1);
}

.nimbo-testimonials {
    background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%), 
        url('images/3CollectiveFeels-Section-ExtendingHandtoLight.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(0px) brightness(1.0) contrast(1.1);
}

.nimbo-health-unstuck {
    background-image: 
        linear-gradient(to bottom right, rgba(128, 128, 128, 0.7), rgba(64, 64, 64, 0.6), rgba(128, 128, 128, 0.8)), 
        url('images/4NimboHealthUnstuck-Section-Rainbow.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(0px) brightness(1.0) contrast(1.1);
}

.nimbo-my-story {
    padding: var(--section-padding) 0;
    position: relative;
    background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%), 
        url('images/5Origin-section-HandsUpOrangeSky.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(0px) brightness(1.1) contrast(1.1);
}

.nimbo-my-story .nimbo-container {
    width: 100%;
    text-align: center;
}

/* Origin story title clickable styling */
.nimbo-my-story .origin-story-title {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    color: white !important;
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    text-align: center;
    padding-right: 30px;
    background: none !important;
    text-shadow: none !important;
    -webkit-text-fill-color: white !important;
}

.nimbo-my-story .origin-story-title::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    transition: transform 0.3s ease;
    font-weight: 400;
    line-height: 1;
    z-index: 10;
}

.nimbo-my-story .origin-story-title.expanded::after {
    display: none;
}

.nimbo-my-story .origin-story-title:hover {
    color: var(--tertiary-gold) !important;
    transform: translateY(-2px);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    -webkit-text-fill-color: var(--tertiary-gold) !important;
    background: none !important;
}

/* When content is not expanded, center the title Plus prominently */
.nimbo-my-story:not(.has-expanded-content) .origin-story-title {
    text-align: center;
    margin: 0;
    font-size: var(--section-title-size);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: inline-block;
}

/* When content is expanded, return to normal layout */
.nimbo-my-story.has-expanded-content {
    align-items: flex-start;
    min-height: auto;
    padding: var(--section-padding) 0;
}

.nimbo-my-story.has-expanded-content .nimbo-container {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-21);
    width: 100%;
    box-sizing: border-box;
}

.nimbo-my-story.has-expanded-content .nimbo-story-content {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.nimbo-faqs {
    padding-top: var(--section-padding);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-image: 
        linear-gradient(to bottom, rgba(255, 140, 0, 0.6) 0%, rgba(150, 75, 0, 0.5) 25%, rgba(50, 25, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 75%, rgba(209, 225, 255, 0.4) 100%), 
        url('images/6FAQS-section-HandsTouching.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(0px) brightness(0.9) contrast(1.05);
    position: relative;
}
@media (max-width: 768px) {
    .nimbo-faqs {
        padding-bottom: 0 !important;
    }
}



/* ===== Hero overlay and blur effects ===== */

.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), transparent);
    z-index: 1;
}

.hero-blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    animation: float 8s ease-in-out infinite;
}

.hero-blur-blue {
    top: 40%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(13, 102, 255, 0.09) 0%, rgba(13, 102, 255, 0.09) 70%);
    animation-delay: 0s;
}

.hero-blur-yellow {
    bottom: 80px;
    right: 40px;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(255, 255, 0, 0.09) 0%, rgba(255, 255, 0, 0.07) 70%);
    animation-delay: 2s;
}

.hero-blur-pink {
    top: 40%;
    left: 60%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 101, 178, 0.2) 0%, rgba(255, 101, 178, 0.05) 70%);
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
}

/* Ensure content is above overlays */
.hero-content {
    position: relative;
    z-index: 10;
}



/* ===== Shape the future overlay and blur effects ===== */
.nimbo-participate-counters {
    position: relative;
}

.shape-blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    animation: float 8s ease-in-out infinite;
}

.shape-blur-blue {
    top: 10%;
    left: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(13, 102, 255, 0.06) 0%, rgba(13, 102, 255, 0.06) 70%);
    animation-delay: 1s;
}

.shape-blur-grey {
    bottom: 25%;
    right: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(158, 194, 255, 0.1) 0%, rgba(158, 194, 255, 0.05) 70%);
    animation-delay: 3s;
}

.shape-blur-dark {
    top: 60%;
    left: 70%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(100, 100, 100, 0.08) 0%, rgba(100, 100, 100, 0.04) 70%);
    animation-delay: 5s;
}




/* ===== Health unstuck (mission) overlay and blur effects ===== */

.nimbo-health-unstuck {
    position: relative;
}

.unstuck-blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    animation: float 8s ease-in-out infinite;
}

.unstuck-blur-blue {
    top: 25%;
    left: 10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(13, 102, 255, 0.18) 0%, rgba(13, 102, 255, 0.1) 70%);
    animation-delay: 1s;
}

.unstuck-blur-purple {
    bottom: 30%;
    right: 15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(101, 101, 255, 0.15) 0%, rgba(101, 101, 255, 0.08) 70%);
    animation-delay: 3s;
}

.unstuck-blur-teal {
    top: 60%;
    left: 60%;
    width: 1080px;
    height: 1080px;
    background: radial-gradient(circle, rgba(76, 201, 240, 0.12) 0%, rgba(76, 201, 240, 0.06) 70%);
    animation-delay: 5s;
}





/* ===== Origin story overlay and blur effects ===== */

.nimbo-my-story {
    position: relative;
}

.story-blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 2;
    animation: float 8s ease-in-out infinite;
}

.story-blur-orange {
    top: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.2) 0%, rgba(255, 140, 0, 0.12) 70%);
    animation-delay: 1s;
}

.story-blur-yellow {
    bottom: 25%;
    left: 15%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 200, 50, 0.18) 0%, rgba(255, 200, 50, 0.1) 70%);
    animation-delay: 3s;
}

.story-blur-warm {
    top: 60%;
    right: 5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 166, 13, 0.15) 0%, rgba(255, 166, 13, 0.08) 70%);
    animation-delay: 5s;
}






/* ===== FAQs overlay and blur effects ===== */

.nimbo-faqs {
    position: relative;
}

.faqs-blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(8vw);
    z-index: 1;
}

.faqs-blur-orange {
    bottom: 10vh;
    left: 8vw;
    width: 30vw;
    height: 30vw;
}

.faqs-blur-blue {
    bottom: 12vh;
    left: 3vw;
    width: 24vw;
    height: 24vw;
}

.faqs-blur-warm {
    bottom: 20vh;
    right: 10vw;
    width: 20vw;
    height: 20vw;
}

.nimbo-faqs h2,
.nimbo-faqs .nimbo-container {
    position: relative;
    z-index: 2;
}

/* ===== HEADER ===== */
.nimbo-header {
    padding: var(--space-21) 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
    .nimbo-header {
        background: rgba(30, 30, 30, 0.25)!important;
        backdrop-filter: blur(60px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3)!important;
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    }
}
.nimbo-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-21);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nimbo-logo {
    background-image: url('images/HeaderLogo_NimboHealth_Small_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 140px;
    height: 32px;
    text-indent: -9999px;
    display: block;
    text-decoration: none;
}

.nimbo-nav {
    display: flex;
    gap: var(--space-34);
    align-items: center;
}

@media (max-width: 768px) {
    .nimbo-nav {
        display: none;
    }
}

.nimbo-nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.3s ease;
}

.nimbo-nav a:hover {
    color: white;
}

.nimbo-header-cta {
    background-color: var(--primary-blue);
    color: white;
    padding: var(--space-8) var(--space-13);
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s ease;
}

.nimbo-header-cta:hover {
    background-color: var(--tertiary-purple);
}

/* ===== HERO SECTION ===== */
.nimbo-hero {
    min-height: 100vh;
    padding: var(--section-padding) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.nimbo-platform-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
    padding: var(--space-5) var(--space-13);
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: var(--space-13);
}

.hero-title {
    font-size: 69px;
    font-weight: 800;
    margin-bottom: var(--title-margin-bottom);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: white;
}

.hero-title .primary-text {
    color: white;
}

.hero-title .light-text {
    color: var(--primary-yellow);
    font-weight: 600;
}

.hero-subtitle {
    font-size: var(--section-text-size);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--title-margin-bottom);
    line-height: 1.5;
}

.nimbo-waitlist-form {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(50px);
    border-radius: 20px;
    padding: var(--space-34);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.nimbo-waitlist-title {
    font-size: 20px;
    font-weight: 600;
    color: white !important;
    margin-bottom: var(--space-5);
    text-align: center;
}

.nimbo-waitlist-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: var(--space-13);
    font-size: 12px;
    text-align: center;
}

.form-group {
    margin-bottom: var(--space-13);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--space-13);
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px);
    color: rgba(255, 255, 255, 0.9) !important;
    min-height: 48px;
}


.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.form-group input[type="email"]:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(13, 102, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}
/**Laura: colour of the background of the fill in space, AFTER the email field has been filled.  you have to change this but also teh webkit autofill below .form-group input[type="email"]:-webkit-autofill,!!!!*/
.form-group input[type="email"]:not(:placeholder-shown) {
    background: rgba(150, 150, 150, 0.2) !important;
    color: white !important;
    border-color: rgba(205, 205, 205, 0.4) !important;
}

.form-group input[type="email"]:-webkit-autofill,
.form-group input[type="email"]:-webkit-autofill:hover,
.form-group input[type="email"]:-webkit-autofill:focus,
.form-group input[type="email"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(150, 150, 150, 0.2) inset !important;
    -webkit-text-fill-color: white !important;
    border: 2px solid rgba(205, 205, 205, 0.4) !important;
    background-color: rgba(150, 150, 150, 0.2) !important;
    background-image: none !important;
    color: white !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

.nimbo-join-button {
    width: 100%;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: var(--space-13);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
}

.nimbo-join-button:hover {
    background-color: var(--tertiary-purple);
}

.waitlist-note {
    margin-top: var(--space-13);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* ===== UNIFIED SECTION STYLING ===== */
.section-title {
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    color: white;
    text-align: center;
}

.section-text {
    font-size: var(--section-text-size);
    line-height: 1.6;
    color: white;
    margin-bottom: var(--content-spacing);
}

/* ===== SHAPE FUTURE SECTION ===== */
.nimbo-participate-counters {
    padding: var(--section-padding) 0;
    text-align: center;
    position: relative;
}

.nimbo-participate-section {
    margin-bottom: var(--title-margin-bottom);
    position: relative;
    z-index: 3;
}

.nimbo-participate-section h2 {
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    color: white;
}

.nimbo-participate-section p {
    font-size: var(--section-text-size);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--title-margin-bottom);
    line-height: 1.6;
}

.nimbo-story-actions {
    display: flex;
    gap: var(--space-13);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--testimonial-spacing);
}

.nimbo-button {
    padding: var(--space-8) var(--space-21);
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s ease;
    display: inline-block;
}

.nimbo-button-primary {
    background-color: var(--primary-blue);
    color: white;
    border: 2px solid var(--primary-blue);
}

.nimbo-button-primary:hover {
    background-color: var(--tertiary-purple);
    border-color: var(--tertiary-purple);
}

.nimbo-button-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.nimbo-button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.nimbo-counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-34);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.nimbo-counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.nimbo-counter-display {
    display: none !important;
}

.nimbo-counter {
    position: relative;
    z-index: 2;
    color: white;
    font-family: 'Poppins', monospace;
    font-size: 32px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 2px #fff;
    text-align: center;
    width: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: none;
}

.nimbo-counter-label {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ===== TESTIMONIALS SECTION ===== */
.nimbo-testimonials {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.nimbo-testimonials h2 {
    text-align: center;
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    color: white;
    position: relative;
    z-index: 3;
}

.collective-intro {
    max-width: 800px;
    margin: 0 auto var(--title-margin-bottom);
    text-align: center;
    position: relative;
    z-index: 3;
}

.collective-intro p {
    font-size: var(--section-text-size);
    line-height: 1.6;
    color: white;
    margin-bottom: var(--content-spacing);
}

/* ===== TESTIMONIAL_CAROUSEL COMPONENT ===== */
.testimonial_carousel {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 3;
    margin-bottom: var(--content-spacing);
}


.testimonial_carousel_track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

/* ===== TESTIMONIAL_BOX COMPONENT ===== */
.testimonial_box {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 var(--space-21);
    display: flex;
    align-items: center;
    gap: var(--content-spacing);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    min-height: 180px;
    justify-content: center;
}

.testimonial_box.expanded {
    gap: 0;
    align-items: flex-start;
    padding: 0 var(--space-13);
    justify-content: center;
}

.testimonial_box.expanded .testimonial_circle {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    width: 0;
    flex: 0 0 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.testimonial_box.expanded .testimonial_text {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@media (max-width: 768px) {
    .testimonial_box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--content-spacing);
    }

    .testimonial_box.expanded {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
}

/* ===== TESTIMONIAL_CIRCLE COMPONENT ===== */
.testimonial_circle {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    padding: var(--space-13);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.testimonial_circle::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 25%;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 232, 49, 0.2) 40%,
        transparent 70%);
    filter: blur(1px);
}

/* ===== TESTIMONIAL_TEXT COMPONENT ===== */
.testimonial_text {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.testimonial_main_text {
    font-family: 'Inter', sans-serif;
    font-size: var(--testimonial-text-size);
    line-height: 1.6;
    color: white;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-bottom: var(--space-34);
    flex: 1;
    position: relative;
}

.testimonial_main_text::before {
    content: '"';
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== TYPEWRITER ANIMATION (ADDITIVE ONLY) ===== */
.typewriter-text {
    opacity: 0;
}

.typewriter-text.typing {
    opacity: 1;
}

.typewriter-word {
    opacity: 0;
    animation: typeIn 0.1s ease-in forwards;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
}

@keyframes typeIn {
    to {
        opacity: 1;
    }
}

.accordion_wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.accordion_content {
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--testimonial-text-size);
    line-height: 1.6;
    color: white;
}

.Plus_button {
    color: var(--primary-white);
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: var(--testimonial-text-size);
    
    display: inline;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.Plus_button:hover {
    color: var(--primary-yellow);
}

.Plus_button.hidden {
    display: none !important;
}

.testimonial_box.expanded .Plus_button {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

.testimonial_author {
    flex: 0 0 auto;
    margin-top: auto;
    text-align: left;
}

.testimonial_author_name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: white;
    font-size: 14px;
    text-align: left;
    margin-bottom: var(--space-5);
}

.testimonial_author_condition {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: white;
    text-align: left;
    font-weight: 400;
}

/* ===== 4_DOTS COMPONENT ===== */
.four_dots {
    display: flex;
    justify-content: center;
    gap: var(--space-13);
    position: relative;
    z-index: 3;
    padding: 0 var(--space-21);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--secondary-light-gray);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.dot.active {
    background-color: var(--tertiary-gold);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(255, 232, 49, 0.4);
}

.dot:hover:not(.active) {
    background-color: var(--tertiary-gold);
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 232, 49, 0.1)
}

/* ===== health-unstuck SECTION ===== */
.nimbo-health-unstuck {
    padding: var(--section-padding) 0;
    position: relative;
}

.nimbo-health-unstuck h2 {
    text-align: center;
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    color: white;
    position: relative;
    z-index: 3;
}

.nimbo-health-unstuck-content {
    max-width: 800px;
    margin: 0 auto var(--title-margin-bottom);
    text-align: center;
    position: relative;
    z-index: 3;
}

.nimbo-health-unstuck-content p {
    font-size: var(--section-text-size);
    line-height: 1.6;
    color: white;
    margin-bottom: var(--content-spacing);
}

.nimbo-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-34) var(--space-21);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

@media (min-width: 1000px) {
    .nimbo-features-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 800px;
        gap: var(--space-34);
    }
}

.nimbo-feature-orb {
    text-align: center;
    padding: var(--space-21);
}

.nimbo-feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto var(--space-21);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(50px);
    border: none;
    font-size: 24px;
    transition: all 0.3s ease;
}

.nimbo-feature-orb:hover .nimbo-feature-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 232, 49, 0.1)
}

.nimbo-feature-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-8);
}

.nimbo-feature-desc {
    font-size: 14px;
    color: white;
    line-height: 1.6;
}

/* ===== MY STORY SECTION ===== */
.nimbo-my-story {
    padding: var(--section-padding) 0;
    position: relative;
}

.nimbo-my-story h2 {
    text-align: center;
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    color: white;
    position: relative;
    z-index: 3;
}

#originStoryContent {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    max-height: 0;
    overflow: hidden;
}

#originStoryContent.expanded {
    opacity: 1;
    transform: translateY(0);
    max-height: none;
    overflow: visible;
}

/* Story content structure */
.nimbo-story-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-34);
    align-items: start;
    max-width: 800px;
    margin: 0 auto;
    padding-top: var(--space-34);
}

.nimbo-story-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

.nimbo-story-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    z-index: -1;
}



.nimbo-story-image img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 0px solid rgba(255, 255, 255, 0);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    backdrop-filter: blur(80px);
    filter: brightness(0.8) contrast(1);
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
}

.nimbo-story-image img:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    filter: brightness(0.9) contrast(1);
}

.nimbo-story-text {
    color: white;
    line-height: 1.6;
}

/* Title styling */
.nimbo-story-text h3.story-title {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-34);
}

/* Hidden content container */
.story-content-hidden {
    opacity: 0;
    visibility: visible;
    transition: opacity 0.6s ease;
}

/* Active typewriter state */
.story-content-hidden.typewriter-active {
    opacity: 1;
    visibility: visible;
}

/* Add styles for individual characters */
.typewriter-char {
    opacity: 0;
    animation: charAppear 0.05s ease-out forwards;
}

@keyframes charAppear {
    to {
        opacity: 1;
    }
}

/* ===== FAQS SECTION ===== */
.nimbo-faqs {
    position: relative;
}

.nimbo-faqs h2 {
    text-align: center;
    font-size: var(--section-title-size);
    font-weight: 700;
    margin-bottom: var(--title-margin-bottom);
    color: white;
    position: relative;
    z-index: 3;
}

.nimbo-faqs-container {
    max-width: 800px;
    margin: 0 auto var(--title-margin-bottom);
    position: relative;
    z-index: 3;
}

.nimbo-faq-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(50px);
    border-radius: 8px;
    margin-bottom: var(--space-13);
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-height: 48px;
}

.nimbo-faq-question {
    padding: var(--space-13);
    cursor: pointer;
    font-weight: 600;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    min-height: 48px;
    font-size: 14px;
}

.nimbo-faq-question:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nimbo-faq-toggle {
    font-size: 20px;
    transition: transform 0.3s ease;
    color: white;
}

.nimbo-faq-item.active .nimbo-faq-toggle {
    transform: rotate(45deg);
}

.nimbo-faq-answer {
    padding: 0 var(--space-13);
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.nimbo-faq-item.active .nimbo-faq-answer {
    padding: 0 var(--space-13) var(--space-13);
    max-height: 500px;
}

.nimbo-faq-answer p {
    color: white;
    line-height: 1.6;
    font-size: 14px;
}

/* =====SUPPORTED BY SECTION ===== */
.supported-by-carousel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}
.carousel-inner {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.supported-by-carousel h3,
.carousel-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.carousel-track {
    display: flex;
    will-change: transform;
}
.carousel-logo {
    margin-right: 48px;
}
.carousel-logo.last-in-set {
    margin-right: 48px;
}
.carousel-logo {
    height: 80px;
    width: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    flex: 0 0 auto;
    transition: transform 0.2s;
}
.carousel-logo.plexal { width: 100px; background-image: url('images/plexal-svg-logo.svg'); }
.carousel-logo.capital { width: 140px; background-image: url('images/capital_enterprise_logo.png'); }
.carousel-logo.barclays { background-image: url('images/Barclays-eagle_labs_logo.png'); }
.carousel-logo.accelerate { background-image: url('images/accelerateher-logo.png'); }
.carousel-logo.radiant { width: 100px; background-image: url('images/radiant_logo.png'); }
.carousel-logo.innovateuk { background-image: url('images/innovateuk_logo.png'); }
@keyframes carousel-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-900px); }
}

/* ===== FOOTER ===== */
.nimbo-footer {
    position: relative;
    left: 0%;
    right: 0%;
    width: 100vw;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    z-index: 10;
    color: white;
    padding: var(--space-34) 0 var(--space-21);
    margin: 0 0 0 calc(-50vw + 50%);
    box-sizing: border-box;
    overflow-x: hidden;
}
.nimbo-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-21);
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--space-21);
}

.nimbo-footer-logo {
    background-image: url('images/HeaderLogo_NimboHealth_Small_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 120px;
    height: 28px;
    text-indent: -9999px;
    display: block;
    flex: 1;
}

.nimbo-footer-social {
    display: flex;
    gap: var(--space-21);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.nimbo-footer-links {
    display: flex;
    gap: var(--space-21);
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.nimbo-footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.nimbo-footer-link:hover {
    color: white;
}

.nimbo-social-link {
    color: white;
    text-decoration: none;
    font-size: 24px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.nimbo-social-link:hover {
    color: white;
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.nimbo-copyright {
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
    padding-top: var(--space-13);
}
@media (max-width: 768px) {
    .nimbo-footer {
        padding: var(--space-34) 0 var(--space-21);
        margin-top: 0;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        position: relative;
        z-index: 1000;
    }
    
    .nimbo-footer-content {
        flex-direction: column;
        gap: var(--space-21);
        text-align: center;
        align-items: center;
        margin-bottom: var(--space-21);
    }
    
    .nimbo-footer-logo {
        background-image: url('images/HeaderLogo_NimboHealth_Small_white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 180px;
        height: 40px;
        text-indent: -9999px;
        display: block;
        margin: 0 auto;
        order: 1;
    }
    
    .nimbo-footer-social {
        order: 2;
        justify-content: center;
    }
    
    .nimbo-footer-links {
        order: 3;
        justify-content: center;
        flex-wrap: wrap;
        display: flex;
        gap: var(--space-21);
        align-items: center;
    }
    
    .nimbo-footer-link {
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease;
    }

    .nimbo-footer-link:hover {
        color: white !important;
    }

    .nimbo-social-link {
        color: white !important;
        text-decoration: none;
        font-size: 24px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }

    .nimbo-social-link:hover {
        color: white !important;
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }
    
    .nimbo-copyright {
        text-align: center;
        font-size: 12px;
        opacity: 0.8;
        padding-top: var(--space-13);
        margin-top: var(--space-21);
    }
}

/* CUSTOM DROPDOWN STYLING */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    padding: var(--space-13);
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px);
    color: rgba(255, 255, 255, 0.9) !important;
    min-height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    user-select: none;
}
/**Laura: change font settings for the text before filling dropdown i.e. "email address" before its filled */
.custom-select-trigger.placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.custom-select-trigger:focus,
.custom-select.active .custom-select-trigger {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(13, 102, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}
/**Laura: change the background colour for dropdown menu  AFTER filling dropdown i.e. "health focus". to change the email filled find ".form-group input[type="email"]:not(:placeholder-shown) {"AFTER its filled, 200, 200, 200 is ligher, the fourth coma is transparency*/
.custom-select-trigger:not(.placeholder) {
    background: rgba(150, 150, 150, 0.2) !important;
    border-color: rgba(205, 205, 205, 0.4) !important;
    color: white !important;
}
.custom-select-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.custom-select.active .custom-select-arrow {
    transform: rotate(180deg);
}
/**Laura: changing the colour of the background of the dropdown menu dark grey ->background: rgba(64, 64, 64, 0.8)*/
.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(90px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.custom-select.active .custom-select-options {
    max-height: 300px;
    opacity: 1;
}
/**Laura: changing the font colour of the DROPDOWN menu, in white color: rgba(255, 255, 255, 0.9); */
.custom-select-option {
    padding: var(--space-13);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--secondary-dark-gray);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-select-option:hover {
    background: rgba(13, 102, 255, 0.9) !important;
    color: white !important;
}

.custom-select-option:last-child {
    border-bottom: none;
}

/* VALIDATION STYLING */
.form-group.error .custom-select-trigger,
.form-group.error input {
    border-color: #ff3c5c !important;
    box-shadow: 0 0 0 2px rgba(255, 60, 92, 0.2) !important;
}

.error-message {
    color: #ff3c5c;
    font-size: 12px;
    margin-top: var(--space-5);
    display: none;
}

.form-group.error .error-message {
    display: block;
}

.error-message h4 {
    color: #ff3c5c;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 42px !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
    }
    
	/* Fix FAQs section bottom spacing */

    .nimbo-counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nimbo-features-grid {
        grid-template-columns: 1fr;
    }

    .nimbo-hero,
    .nimbo-participate-counters,
    .nimbo-testimonials,
    .nimbo-health-unstuck,
    .nimbo-my-story,
    .nimbo-faqs {
        background-attachment: scroll;
    }

    .Plus_button, 
    .story-plus-button,
    .less_button,
    .story-less-button {
        display: inline !important;
    }

    .collective-intro p,
    .nimbo-health-unstuck-content p,
    .nimbo-story-text p {
        font-size: 14px;
    }

    .testimonial_main_text {
        font-size: 13px;
    }

    .nimbo-participate-section p {
        font-size: 14px;
    }
    
    .nimbo-story-text ul {
        padding-left: var(--space-21);
        list-style-position: inside;
    }
    
    .nimbo-story-text li {
        list-style-position: inside;
        margin-left: 0;
        text-indent: 0;
    }

    .nimbo-logos-track {
        gap: var(--space-34);
    }

    .nimbo-logo-item.barclays,
    .nimbo-logo-item.accelerate {
        width: 100px;
    }

    .nimbo-logo-item.plexal {
        width: 80px;
    }

    .nimbo-logo-item.capital {
        width: 120px;
    }
}
/* iPads and small tablets (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .nimbo-nav {
        display: flex; /* Keep navigation visible on tablets */
    }
    
    .nimbo-counters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-21);
    }
    
    .nimbo-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-34);
    }
    
    .hero-title {
        font-size: 56px;
    }
    
    .nimbo-story-content {
        gap: var(--space-34);
    }
    
    .nimbo-story-image {
        width: 240px;
        height: 240px;
    }
}

/* Large tablets and small laptops (1025px to 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
    .nimbo-nav {
        display: flex; /* Keep navigation visible */
    }
    
    .nimbo-counters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .nimbo-features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hero-title {
        font-size: 64px;
    }
}

.nimbo-faqs-footer-spacer {
  height: var(--section-padding);
}

.carousel-inner,
.nimbo-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

.three-sphere {
    width: 120px;
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.three-sphere canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Transparent circle styles */
.transparent-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.transparent-circle:hover {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.15),
        inset 0 0 30px rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}

.nimbo-counter {
    position: relative;
    z-index: 2;
    color: white;
    font-family: 'Poppins', monospace;
    font-size: 32px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 2px #fff;
    text-align: center;
    width: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: none;
}

.story-content-hidden p {
    margin-bottom: var(--space-21);
}

.story-content-hidden li {
    opacity: 0;
    margin-bottom: var(--space-8);
}

.story-content-hidden ul {
    margin-bottom: var(--space-21);
}

/* ===== TESTIMONIAL_TITLE COMPONENT ===== */
.testimonial_title {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    padding: var(--space-13);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.testimonial_box.expanded .testimonial_title {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    width: 0;
    flex: 0 0 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

#health_focus_other:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(13, 102, 255, 0.1);
}

#health_focus_other:not(:placeholder-shown) {
    background: rgba(150, 150, 150, 0.2) !important;
    color: white !important;
    border-color: rgba(205, 205, 205, 0.4) !important;
}

.left-arrow {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid rgba(255,255,255,0.8);
    display: inline-block;
}

#health_focus_other_back {
  display: none;
}