/* Setting up Poppins font for the entire body */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #1f2937;
    /* Dark text for general content */
}

/* Custom class for the primary section spacing */
.main-container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* Custom style for the large, bold headline (responsive) */
.bold-headline {
    /* Desktop base (>=1024px) */
    font-size: 3.5rem;
    /* base reference */
    line-height: 1;
    font-weight: 900;
    /* Extra bold */
    letter-spacing: -0.05em;
    /* Tighter spacing */
    margin-bottom: 0.5rem;
    /* Space below the headline */
}

/* Tablet: ~15–20% reduction (768–1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .bold-headline {
        font-size: 2.9rem;
    }
}

/* Mobile: ~30–35% reduction (<=767px) */
@media (max-width: 767px) {
    .bold-headline {
        font-size: 2.3rem;
    }
}

/* --- Section headers responsive font size --- */
.text-28px {
    font-size: 28px;
}

/* Desktop base */
@media (max-width: 1023px) and (min-width: 768px) {
    .text-28px {
        font-size: 24px;
    }

    /* ~15% smaller on tablet */
}

@media (max-width: 767px) {
    .text-28px {
        font-size: 19px;
    }

    /* ~32% smaller on mobile */
}

/* ----------------------------------------------- */
/* --- SendScore Meter Styles (Updated Colors) --- */
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Base color for the background ring - light gray for contrast on white card */
.progress-ring__background {
    stroke: #e5e7eb;
    /* Light Gray 200 */
}

/* Define the 5 color classes for the active progress ring (METER COLORS) */
/* These are optimized for the ring/circle visualization */
.score-red {
    stroke: #f4496d;
}

/* 0-20% */
.score-orange {
    stroke: #ff9500;
}

/* 20-40% */
.score-yellow {
    stroke: #ffcd1e;
}

/* 40-60% */
.score-lime {
    stroke: #3BCA6D;
}

/* 60-80% */
.score-green {
    stroke: #00FF7F;
}

/* 80-100% */
/* Utility function to color the text based on score percentage (METER TEXT COLORS) */
/* These are also optimized for the ring/circle text */
.text-score-red {
    color: #f4496d;
}

.text-score-orange {
    color: #ff9500;
}

.text-score-yellow {
    color: #ffcd1e;
}

.text-score-lime {
    color: #3BCA6D;
}

.text-score-green {
    color: #00FF7F;
}

/* --- Text Colors specifically for the Table (Darker for Contrast) --- */
.text-table-red {
    color: #f4496d;
}

/* Darker Red */
.text-table-orange {
    color: #ff9500;
}

/* Darker Orange */
.text-table-yellow {
    color: #ffcd1e;
}

/* Darker Yellow/Olive */
.text-table-lime {
    color: #3BCA6D;
}

/* Darker Lime */
.text-table-green {
    color: #00FF7F;
}

/* Darker Emerald Green */
/* Custom style to hide scrollbar on horizontal scroll container for cleaner look */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}