html, body, pre, code, kbd, samp, input, button, select, option, textarea {
    font-family: var(--font-theme-1);
    font-weight: var(--font-medium);
    font-style: normal;
    font-size: 1.3vw;
    color: var(--color-theme-1);
}
p {
    line-height: 165%;
    margin: 0px 0 1.5vw 0;
}
p a {
    text-decoration: underline;
}
p a:hover {}
strong {
    font-weight: var(--font-semibold);
}
a {
    text-decoration: none;
    outline: none;
    cursor: pointer;
    color: var(--color-theme-1);
    transition: var(--transition-all);
}
button, a, input[type="button"], .btn {
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-theme-2);
    font-size: 100%;
    line-height: 120%;
    font-weight: var(--font-regular);
    color: var(--color-theme-2);
}
html,body{
    background-color: #fff;
}
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    width: 100%;
    height: 50vh;
    background: -webkit-linear-gradient(#519dd9 0%, #fff 100%);
    background: -o-linear-gradient(#519dd9 0%, #fff 100%);
    background: linear-gradient(#519dd9 0%, #fff 100%);
}
.source {
    position: relative;
    padding: 10px 5% 15px 5%;
    font-size: 12px;
    font-weight: 500;
}
.wrapper.is-wrapper-1, .intro-container, .text-area {
    position: initial;
}
.cloud {
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 120vh;
    top: 0vw;
    left: 0;
    padding-bottom: 0;
    z-index: 2;
}
.cloud img {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(100%)
    }
    to {
        -moz-transform: translateX(-100%)
    }
}
@keyframes animCloud {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
.cloud1 {
    -webkit-animation: animCloud 20s infinite linear;
    -moz-animation: animCloud 20s infinite linear;
    animation: animCloud 20s infinite linear
}
.cloud2 {
    -webkit-animation: animCloud 40s infinite linear;
    -moz-animation: animCloud 40s infinite linear;
    animation: animCloud 40s infinite linear
}
.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}
.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
}
/*-- Preloader --*/
.header-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
    z-index: 1000;
    transition: 0.2s ease-in;
    /*
    background-color: rgb(255 255 255 / 65%);
    backdrop-filter: blur(10px);
*/
}
.container.header-container {
    height: 64px;
    transition: var(--transition-all);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    z-index: 2;
}
.is-scroll.header-wrapper {
    background-color: var(--color-theme-1);
    box-shadow: 0px 1px 6px rgb(0 0 0 / 10%);
}
.is-scroll.is-up.header-wrapper {
    transform: translate3d(0, -100%, 0);
}
.is-scroll.is-up.header-wrapper {
    transform: translate3d(0, -100%, 0);
}
.header-left {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    column-gap: 10px;
    position: relative;
    top: 2px;
    user-select: none;
}
.logo-header {
    width: 140px;
    display: block;
}
.logo-header svg {
    height: auto;
    width: 100%;
    vertical-align: sub;
}
.logo-header svg .st0 {
    fill: var(--color-black);
}
.logo-header svg .st1 {
    fill: var(--color-ndtv-red);
}
.header-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-size: 90%;
    font-weight: var(--font-medium);
}
.sub-header {
    display: none;
}
.header-right a {
    color: #fff;
}
.header-right .header-nav ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
}
.header-right .header-nav ul li {
    margin: 0 20px 0 0;
    position: relative;
}
.header-right .header-nav ul li a {
    display: inline-block;
    background: #fff;
    color: #000;
    border-radius: 4px;
    padding: 0px 10px;
    height: 32px;
    line-height: 32px;
}
.header-right .header-nav ul li a:hover {
    background-color: #fbff32;
    color: #000;
}
.header-right .header-nav ul li a.is-active {
    background-color: #fbff32;
    color: #000;
}
.header-right .header-nav ul li::after {
    position: absolute;
    width: 2px;
}
.header-right .social-nav ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    align-items: center;
    color: var(--color-black);
    font-size: 1.2vw;
}
.header-right .social-nav ul li a {
    width: 28px;
    height: 28px;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    transition: 0.2s all ease-in;
}
.social-nav ul li a svg * {
    transition: 0.2s all ease-in;
}
.social-nav ul li a svg path {
    fill: var(--color-black);
}
.social-nav ul li.is-x a svg polygon {
    /*    fill: var(--color-white);*/
}
.social-nav ul li a:hover {
    background-color: var(--color-white);
}
.social-nav ul li.is-facebook a:hover svg path {
    fill: #1877f2;
}
.social-nav ul li.is-x a:hover svg path {
    fill: #1da1f2;
}
.social-nav ul li.is-x a:hover svg polygon {
    fill: #1da1f2;
}
.social-nav ul li.is-linkedin a:hover svg path {
    fill: #0a66c2;
}
.social-nav ul li.is-whatsapp a:hover svg path {
    fill: #25d366;
}
.container {
    position: relative;
    z-index: 2;
}
/**/
@-webkit-keyframes zoomin {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes zoomin {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes fall {
    0% {
        transform: translateY(-100vh);
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}
.splash {
    position: absolute;
    width: 5px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: splash-animation 0.3s ease-out;
    opacity: 0;
}
@keyframes splash-animation {
    0% {
        transform: scale(0.1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.is-100 {
    height: 100vh;
}
.wrapper {
    position: relative;
}
.wrapper.is-wrapper-1 {
    padding: 4vw 0 45vw 0;
    background-image: url("../images/bg-1.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-2 {
    padding: 4vw 0 35vw 0;
    background-image: url("../images/bg-2.jpg"); 
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-3 {
    padding: 0vw 0 50vw 0;
    background-image: url("../images/bg-3.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-4 {
    padding: 0vw 0 48vw 0;
    background-image: url("../images/bg-4.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-5 {
    padding: 0vw 0 40vw 0;
    background-image: url("../images/bg-5.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-6 {
    padding: 0vw 0 40vw 0;
    background-image: url("../images/bg-6.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-7 {
    padding: 0vw 0 40vw 0;
    background-image: url("../images/bg-7.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.wrapper.is-wrapper-8 {
    padding: 0vw 0 40vw 0;
}
.rain-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    pointer-events: none;
    z-index: 100;
}
.raindrop {
    position: absolute;
    width: 3px;
    height: 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50% 50% 0 0;
    transform: rotate(0deg);
    animation: fall linear infinite;
    opacity: 0.7;
}
.intro-container {
    height: 100%;
    width: 50vw;
    text-align: center;
    z-index: 4;
    margin: 0 auto;
}
.intro-container .headline-1 {
    font-size: 400%;
    font-weight: var(--font-black);
    line-height: 100%;
    color: #164442;
    margin: 0 0 2vw 0;
}
.intro-container p {
    margin: 0 auto;
    font-size: 120%;
    line-height: 130%;
    font-weight: 500;
    max-width: 80%;
    width: 100%;
    position: relative;
    z-index: 10;
}
.headline-2 {
    color: var(--color-theme-2);
    font-size: 250%;
    font-weight: var(--font-extrabold);
    line-height: 120%;
    margin: 0 0 2vw 0;
}
/*CSS For widget 1*/
.header {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInUp 1s ease-out forwards;
}
.subtitle {
    margin: 0 auto;
    font-size: 120%;
    line-height: 130%;
    font-weight: 500;
    max-width: 80%
}
.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.legend-text {
    font-size: 0.9rem;
    color: #475569;
}
.chart-container {
    flex: 1;
    position: relative;
    min-height: 400px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out 0.3s forwards;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(203, 213, 225, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out 0.6s forwards;
}
.stat-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(203, 213, 225, 0.5);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(8, 145, 178, 0.5);
    box-shadow: 0 8px 25px rgba(8, 145, 178, 0.15);
}
.stats-hero > *:last-child {
    grid-column: 1 / -1; /* This makes the last child span all columns */
}
.is-widget-5 .stat-value {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.stat-label {
    font-size: 0.9rem;
    color: #64748b;
}
.cyan {
    color: #0891b2;
}
.emerald {
    color: #059669;
}
.red {
    color: #dc2626;
}
.blue {
    color: #2563eb;
}
.ontime {
    background-color: #059669;
}
.normal {
    background-color: #0891b2;
}
.early {
    background-color: #2563eb;
}
.late {
    background-color: #dc2626;
}
.tooltip {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(203, 213, 225, 0.5) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    color: #1e293b !important;
    padding: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    .chart-container {
        padding: 1rem;
    }
    .legend {
        gap: 1rem;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/*CSS For Widget -2*/
.header-meta {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}
.main-chart {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    animation: slideUp 0.8s ease-out 0.2s both;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.04);
}
.main-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}
.chart-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 32px;
    color: #1e293b;
}
.is-widget-2 .chart-container-2 {
    position: relative;
    height: 500px;
    margin-bottom: 40px;
}
.chart-grid {
    position: absolute;
    top: 0;
    left: 60px;
    right: 0;
    bottom: 60px;
    pointer-events: none;
}
.grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
}
.y-axis-labels {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 60px;
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    padding-right: 12px;
}
.chart-area {
    position: absolute;
    left: 60px;
    right: 0;
    top: 0;
    bottom: 60px;
    display: flex;
    align-items: end;
    gap: clamp(8px, 2vw, 24px);
    padding: 0 20px;
}
.year-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.year-group:hover {
    transform: translateY(-8px);
}
.bars-stack {
    display: flex;
    gap: 2px;
    align-items: end;
    height: 400px;
    position: relative;
}
.bar {
    width: clamp(6px, 1.5vw, 12px);
    border-radius: 8px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}
.bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.bar:hover::before {
    opacity: 1;
}
.bar:hover {
    transform: scale(1.1);
    filter: brightness(1.1) saturate(1.2);
}
.bar-all-india {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
.bar-central {
    background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%);
}
.bar-south {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
.bar-northwest {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}
.bar-east {
    background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
}
.bar-2025 {
    filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.4));
    animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
    from {
        filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.4));
    }
    to {
        filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.6));
    }
}
.year-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-top: 16px;
    transition: color 0.3s ease;
}
.year-group:hover .year-label {
    color: #0f172a;
}
.year-2025 .year-label {
    color: #3b82f6;
    font-weight: 700;
}
.legend-modern {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
    animation: fadeIn 0.8s ease-out 0.6s both;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    transition: all 0.3s ease;
    cursor: pointer;
}
.legend-item:hover {
    color: #0f172a;
    transform: translateY(-2px);
}
.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.legend-item:hover .legend-dot {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.stats-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    animation: fadeIn 0.8s ease-out 0.8s both;
}
.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.stat-card:hover::before {
    opacity: 1;
}
.stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.stat-value {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 12px;
    font-weight: 500;
}
.stat-badge {
    font-size: 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.tooltip_1 {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #0f172a;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    max-width: 280px;
}
.tooltip-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #0f172a;
}
.tooltip-content {
    line-height: 1.5;
    color: #475569;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 20px 16px;
    }
    .main-chart {
        padding: 24px;
    }
    .is-widget-2 .chart-container-2 {
        height: 400px;
    }
    .bars-stack {
        height: 300px;
    }
    .y-axis-labels {
        font-size: 0.7rem;
    }
    .legend-modern {
        gap: 16px;
    }
    .stats-hero {
        grid-template-columns: 1fr;
    }
    .stat-card {
        padding: 24px;
    }
}
.is-widget-2 .header {
    padding-top: 4vw;
}
.is-widget-2 .header-meta {
    padding-top: 0.5vw;
}
/*Widget 3*/
.main-timeline {
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}
.year-selection-section {
    text-align: left;
}
.year-cta {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 12px;
    font-weight: 500;
}
.current-year {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-theme-2);
}
.year-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.year-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.year-btn:hover {
    color: #0f172a;
    border-color: #94a3b8;
    background: #e2e8f0;
}
.year-btn.active {
    background: var(--color-theme-2);
    color: #ffffff;
    border-color: var(--color-theme-2);
}
.india-map-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px;
    aspect-ratio: 1;
}
.india-outline {
    width: 100%;
    height: 100%;
    background: #f8fafc;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}
.monsoon-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(0deg, rgba(34, 197, 94, 0.8) 0%, rgba(14, 165, 233, 0.6) 50%, rgba(59, 130, 246, 0.4) 100%);
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 18px 18px 0 0;
}
.kerala-marker {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #22c55e;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
    z-index: 10;
}
.kerala-label {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #22c55e;
    font-weight: 700;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    backdrop-filter: blur(10px);
}
.coverage-label {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: var(--color-theme-2);
    font-weight: 700;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(14, 165, 233, 0.3);
    backdrop-filter: blur(10px);
}
.progress-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.info-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    text-align: center;
}
.info-label {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 8px;
}
.info-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
}
.info-value.highlight {
    color: var(--color-theme-2);
}
.timeline-scrubber {
    position: relative;
    height: 60px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 40px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.scrubber-track {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    transform: translateY(-50%);
}
.scrubber-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #22c55e, var(--color-theme-2));
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease;
}
.scrubber-handle {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: var(--color-theme-2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.scrubber-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}
.date-markers {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94a3b8;
}
.controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.control-btn {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.control-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
.control-btn.primary {
    background: var(--color-theme-2);
    color: #ffffff;
    border-color: var(--color-theme-2);
}
.control-btn.primary:hover {
    background: #0284c7;
    border-color: #0284c7;
}
.comparison-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.comparison-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.comparison-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 20px;
}
.year-comparison {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.year-comparison:last-child {
    border-bottom: none;
}
.comparison-year {
    font-weight: 500;
    color: #64748b;
}
.comparison-date {
    font-weight: 600;
    color: #0f172a;
}
.comparison-days {
    font-size: 0.875rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.comparison-days.early {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}
.comparison-days.late {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.comparison-days.normal {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}
.insights {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    margin-top: 40px;
}
.insights-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 20px;
}
.insight-item {
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}
.insight-item:last-child {
    border-bottom: none;
}
.insight-highlight {
    font-weight: 600;
    color: var(--color-theme-2);
}
.insight-text {
    color: #64748b;
    margin-top: 8px;
}
@media (max-width: 768px) {
    .container {
        padding: 20px 16px;
    }
    .timeline-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .year-selection-section {
        text-align: center;
    }
    .india-map-container {
        max-width: 400px;
    }
    .progress-info {
        grid-template-columns: 1fr 1fr;
    }
    .comparison-section {
        grid-template-columns: 1fr;
    }
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
.pulsing {
    animation: pulse 2s infinite;
}
.loading-indicator {
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 20px 0;
}
/*widget 4*/
/* Main visual section layout: grid for chart and details, responsive */
.main-visual {
    display: grid;
    gap: 40px;
    margin-bottom: 50px;
    align-items: center;
}
/* Rainfall chart container styling: background, border, blur effect (lighter) */
.rainfall-chart {
    background: rgba(255, 255, 255, 0.7); /* Lighter background */
    border-radius: 10px;
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Lighter border */
    backdrop-filter: blur(10px); /* Slightly less blur for light theme */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}
/* Chart header: title and current value display */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.chart-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #2d3748; /* Darker title */
}
.current-value {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-theme-2); /* Light blue */
}
/* Bars container: flexbox for horizontal bars, aligned to bottom */
.bars-container {
    position: relative;
    height: 300px;
    display: flex;
    align-items: flex-end; /* Align bars to the bottom */
    gap: 8px;
    padding: 0 10px;
}
/* Individual rainfall bar styling: flex-item, gradient, rounded corners, hover effects */
.rainfall-bar {
    flex: 1; /* Distribute space equally */
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); /* Lighter blue gradient */
    border-radius: 4px 4px 0 0;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transitions */
    min-height: 4px; /* Ensure visibility even for low values */
    opacity: 0.8; /* Slightly more opaque for light theme */
}
.rainfall-bar:hover {
    opacity: 1;
    transform: translateY(-4px); /* Lift on hover */
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3); /* Blue shadow */
}
/* Active bar styling */
.rainfall-bar.active {
    background: linear-gradient(180deg, var(--color-theme-2) 0%, #0284c7 100%); /* Brighter blue */
    opacity: 1;
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.4);
}
/* Special styling for record-breaking years */
.rainfall-bar.record {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%); /* Green gradient */
    opacity: 1;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}
/* Special styling for low rainfall years */
.rainfall-bar.low {
    background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%); /* Yellow/orange gradient */
    opacity: 1;
}
/* Value label for each bar, hidden by default, shown on hover/active */
.bar-value {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: #4a5568; /* Darker text */
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}
.rainfall-bar:hover .bar-value, .rainfall-bar.active .bar-value {
    opacity: 1;
}
/* Year label for each bar */
.bar-year {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: #718096; /* Darker grey */
    font-weight: 600;
}
/* Year details panel styling (lighter) */
.year-details {
    background: rgba(255, 255, 255, 0.7); /* Lighter background */
    border-radius: 10px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Lighter border */
    backdrop-filter: blur(10px);
    height: fit-content; /* Adjust height to content */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}
.detail-year {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-theme-2); /* Light blue */
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.detail-rainfall {
    font-size: 1.5rem;
    color: #2d3748; /* Darker text */
    margin-bottom: 8px;
}
.detail-status {
    font-size: 1rem;
    color: #4a5568; /* Darker text */
    margin-bottom: 20px;
    font-weight: 300;
}
.detail-metrics {
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Lighter border */
    padding-top: 20px;
}
.metric-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.metric-label {
    color: #718096; /* Darker grey */
    font-size: 0.875rem;
}
.metric-value {
    color: #2d3748; /* Darker text */
    font-weight: 500;
    font-size: 0.875rem;
}
/* Insights section for stacked cards */
.insights-section {
    position: relative;
    height: 320px; /* Fixed height to allow stacking */
    perspective: 1000px; /* For 3D transform effect */
    margin-top: 40px;
}
.insights-stack {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
/* Individual insight card styling (lighter) */
.insight-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.7); /* Lighter background */
    border-radius: 10px;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Lighter border */
    backdrop-filter: blur(10px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transform-style: preserve-3d; /* Enable 3D transforms for children */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}
/* Stacking effect for insight cards */
.insight-card:nth-child(1) {
    transform: translateZ(0px) translateY(0px) translateX(0px);
    z-index: 3; /* Top card */
}
.insight-card:nth-child(2) {
    transform: translateZ(-30px) translateY(12px) translateX(8px) scale(0.94);
    z-index: 2;
    opacity: 0.7;
}
.insight-card:nth-child(3) {
    transform: translateZ(-60px) translateY(24px) translateX(16px) scale(0.88);
    z-index: 1;
    opacity: 0.5;
}
/* Hover effect for insight cards */
.insight-card:hover {
    transform: translateZ(20px) translateY(-8px) scale(1.02);
    border-color: rgba(14, 165, 233, 0.3); /* Blue border on hover */
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.2); /* Blue shadow on hover */
}
/* Active insight card (currently displayed) */
.insight-card.active {
    transform: translateZ(0px) translateY(0px) translateX(0px) scale(1);
    z-index: 3;
    opacity: 1;
}
/* Styling for content within insight cards */
.insight-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
    line-height: 1;
}
.insight-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: #2d3748; /* Darker title */
    margin-bottom: 16px;
    line-height: 1.2;
}
.insight-number {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-theme-2); /* Light blue */
    margin-bottom: 16px;
    line-height: 1;
}
.insight-text {
    color: #4a5568; /* Darker text */
    font-size: 0.95rem;
    line-height: 1.5;
    flex-grow: 1; /* Allows text to take available space */
}
/* Controls for the insight stack (dots) */
.stack-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    display: none;
}
.stack-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2); /* Lighter background for dots */
    cursor: pointer;
    transition: all 0.3s ease;
}
.stack-dot.active {
    background: var(--color-theme-2); /* Light blue active dot */
    transform: scale(1.2);
}
/* Redundant/slightly adjusted styles for insights (can be refactored) */
.insight-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}
.insight-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 12px;
}
.insight-text {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
}
.insight-number {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-theme-2);
    margin: 12px 0;
}
/* Media queries for responsiveness */
@media (max-width: 1024px) {
    .main-visual {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        gap: 30px;
    }
    .rainfall-chart {
        padding: 30px;
    }
    .bars-container {
        height: 250px;
    }
    .insights-section {
        height: 300px;
        margin-top: 30px;
    }
    .insights-stack {
        max-width: 380px;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 20px 15px;
    }
    .rainfall-chart {
        padding: 20px;
    }
    .bars-container {
        height: 200px;
        gap: 4px;
    }
    .insight-card {
        padding: 24px;
        height: 260px;
    }
    .insights-section {
        height: 280px;
    }
    .insights-stack {
        max-width: 350px;
    }
    .detail-year {
        font-size: 2.5rem;
    }
    .insight-number {
        font-size: 2.4rem;
    }
    .insight-title {
        font-size: 1.2rem;
    }
}
/* Fade-in animation for elements */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*Widget 5*/
.date {
    font-size: 0.85rem;
    color: #475569;
}
.intro-space {
    height: 80vh; /* Adjust this to control how much you need to scroll */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #64748b;
    margin-bottom: 50px;
    text-align: center;
    padding: 0 20px;
}
/* Glass Container for the Rainfall Visual */
.glass-container {
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 30px 0;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.glass-tumbler {
    width: 220px;
    height: 350px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 50%, rgba(255, 255, 255, 0.95) 100%);
    border: 3px solid rgba(71, 85, 105, 0.2);
    border-radius: 8px 8px 12px 12px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* Glass reflections/highlights */
.glass-tumbler::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.3) 0%, rgba(148, 163, 184, 0.2) 50%, rgba(71, 85, 105, 0.25) 100%);
    border-radius: 2px;
}
.glass-tumbler::after {
    content: '';
    position: absolute;
    top: 0;
    right: 20%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.3) 0%, transparent 50%, rgba(148, 163, 184, 0.2) 100%);
    border-radius: 1px;
}
/* Measurement Lines inside the tumbler */
.measurement-lines {
    position: absolute;
    left: 20px;
    top: 0;
    height: 100%;
    width: 80px;
    z-index: 10;
}
.measurement-line {
    position: absolute;
    right: 0;
    background: rgba(71, 85, 105, 0.6);
    border-radius: 1px;
}
.measurement-line.major {
    width: 30px;
    height: 2px;
}
.measurement-line.minor {
    width: 20px;
    height: 1px;
}
.measurement-line.target {
    width: 35px;
    height: 2px;
    background: rgba(220, 38, 38, 0.8);
}
.measurement-line.target.green {
    background: rgba(34, 197, 94, 0.8);
}
.line-label {
    position: absolute;
    left: 40px;
    top: -8px;
    font-size: 0.65rem;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}
.line-label.target {
    color: #dc2626;
    font-weight: 700;
}
.line-label.target.green {
    color: #22c55e;
}
/* Water Level Elements */
.water-level {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0 0 10px 10px;
    height: 0%; /* Initial state: water level is at 0 */
    transition: height 2.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition for height */
}
/* Animation trigger classes for water levels */
.old-level.animate {
    height: 30%; /* Target height for old level */
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.8) 0%, rgba(100, 116, 139, 0.9) 100%);
    z-index: 1;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 15px rgba(148, 163, 184, 0.3);
}
.new-level.animate {
    height: 56%; /* Target height for new level */
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.95) 60%, rgba(21, 128, 61, 1) 100%);
    z-index: 2;
    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.4), 0 0 30px rgba(34, 197, 94, 0.3);
    transition-delay: 2s; /* Delay new level fill after old one starts */
}
/* Darken bottom of new water level */
.new-level.animate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 41, 59, 0.1) 50%, rgba(15, 23, 42, 0.15) 100%);
    opacity: 0;
    animation: darkenBottom 1s ease-out 4.5s forwards;
}
/* Water Surface Shimmer */
.water-surface {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
    border-radius: 50%;
    opacity: 0; /* Hide initially */
}
/* Animate shimmer only when water level fills */
.old-level.animate .water-surface {
    animation: shimmer 3s ease-in-out infinite 2s forwards; /* Start shimmer after old level is almost filled */
    opacity: 1;
}
.new-level.animate .water-surface {
    animation: shimmer 3s ease-in-out infinite 4s forwards; /* Start shimmer after new level is almost filled */
    opacity: 1;
}
/* External Markers (outside the tumbler) */
.external-markers {
    position: absolute;
    left: -140px;
    top: 0;
    height: 100%;
    width: 100px;
}
.external-marker {
    position: absolute;
    display: flex;
    align-items: center;
    opacity: 0; /* Hidden initially */
}
/* Animation trigger classes for external markers */
.old-marker.animate {
    animation: showOldMarker 0.5s ease-out 2.5s forwards; /* Delayed after old level fills */
}
.new-marker.animate {
    animation: showNewMarker 0.5s ease-out 4.5s forwards; /* Delayed after new level fills */
}
.marker-line {
    width: 40px;
    height: 2px;
    background: currentColor;
    margin-right: 12px;
    position: relative;
}
.marker-line::before {
    content: '';
    position: absolute;
    right: -6px;
    top: -2px;
    width: 6px;
    height: 6px;
    background: currentColor;
    transform: rotate(45deg);
}
.marker-text {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.marker-value {
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 2px;
}
.old-marker {
    color: #64748b;
    bottom: 30%;
}
.new-marker {
    color: #16a34a;
    bottom: 56%;
}
/* Level Indicators (inside the tumbler but on the right) */
.level-labels {
    position: absolute;
    right: -90px;
    top: 0;
    height: 100%;
    width: 80px;
}
.level-indicator {
    position: absolute;
    display: flex;
    align-items: center;
    opacity: 0; /* Hidden initially */
}
/* Animation trigger classes for level indicators */
.old-indicator.animate {
    animation: showOldLabel 0.5s ease-out 2.5s forwards; /* Delayed after old level fills */
}
.new-indicator.animate {
    color: #16a34a;
    animation: showNewLabel 0.5s ease-out 4.5s forwards; /* Delayed after new level fills */
}
.indicator-line {
    width: 30px;
    height: 1px;
    background: currentColor;
    margin-right: 8px;
}
.indicator-text {
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.old-indicator {
    color: #475569;
    bottom: 30%;
}
.new-indicator {
    color: #16a34a;
    bottom: 56%;
}
/* Record Badge */
.record-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0; /* Hidden initially */
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}
.record-badge.animate {
    animation: dropIn 0.8s ease-out 5s forwards; /* Delayed after everything else */
}
/* Measurement Cards Section */
.measurements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}
.measurement-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(71, 85, 105, 0.1);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.measurement-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.measurement-year {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.measurement-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.old-value {
    color: #475569;
}
.new-value {
    color: #16a34a;
}
.measurement-unit {
    font-size: 0.75rem;
    color: #64748b;
}
/* Stats Section */
.stats-section {
    margin-top: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(71, 85, 105, 0.1);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.stats-title {
    font-size: 1rem;
    color: #334155;
    margin-bottom: 20px;
    font-weight: 500;
}
.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.08);
}
.stat-item:last-child {
    border-bottom: none;
}
.stat-label {
    font-size: 0.85rem;
    color: #64748b;
}
.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: #dc2626;
}
/* Keyframe Animations */
@keyframes fillOld {
    from {
        height: 0%;
    }
    to {
        height: 30%;
    }
}
@keyframes fillNew {
    from {
        height: 0%;
    }
    to {
        height: 56%;
    }
}
@keyframes shimmer {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.2);
    }
}
@keyframes showOldMarker {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes showNewMarker {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes showOldLabel {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes showNewLabel {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes darkenBottom {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* Responsive Adjustments */
@media (max-width: 480px) {
    .container {
        max-width: 350px;
    }
    .glass-container {
        height: 350px;
        margin: 40px 0;
    }
    .glass-tumbler {
        width: 180px;
        height: 300px;
    }
    .measurement-lines {
        left: 15px;
        width: 70px;
    }
    .line-label {
        font-size: 0.6rem;
        left: 35px;
    }
    .level-labels {
        right: -80px;
        width: 70px;
    }
    .external-markers {
        left: -100px;
        width: 90px;
    }
    .marker-text {
        font-size: 0.7rem;
    }
    .marker-value {
        font-size: 0.8rem;
    }
    .indicator-text {
        font-size: 0.65rem;
    }
    .measurement-value {
        font-size: 1.6rem;
    }
}
@media (max-width: 360px) {
    .measurements {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .glass-tumbler {
        width: 160px;
        height: 280px;
    }
    .measurement-lines {
        left: 12px;
        width: 65px;
    }
    .line-label {
        font-size: 0.55rem;
        left: 30px;
    }
    .level-labels {
        right: -75px;
    }
    .external-markers {
        left: -90px;
        width: 80px;
    }
    .marker-line {
        width: 30px;
    }
}
.is-wrapper-8 .video-background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.is-wrapper-8 .video-background video {
    width: 100%;
    height: auto;
}
/*Credits*/
.wrapper.credit-wrapper {
    background-color: #000;
    padding: 3vw 0;
    color: #fff;
    font-size: 1.2vw;
}
.credit-wrapper .credit-container {
    width: 100%;
    margin: 0 auto;
    max-width: 70vw;
}
.credit-wrapper .content-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.credit-wrapper .col-left {
    width: 10%;
}
.credit-wrapper .storylab-logo a {
    display: block;
}
.credit-wrapper .storylab-logo img {
    width: 100%;
    height: auto;
}
.credit-wrapper .col-right {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    width: 75%;
    row-gap: 1.2vw;
}
.credit-wrapper .copyright {
    font-size: 90%;
}
.credit-wrapper .storylab-credit {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.credit-wrapper .single-credit {
    line-height: 140%;
     padding-right: 30px;
}
.credit-wrapper .single-credit strong {
    display: block;
    font-weight: 600;
    opacity: 0.6;
}
@media (max-width: 1199px) {
    .wrapper.credit-wrapper {
        font-size: 15px;
    }
}
@media (max-width: 991px) {
    .wrapper.credit-wrapper {
        padding: 30px 0px;
    }
}
@media (max-width: 767px) {
    .wrapper.credit-wrapper {
        font-size: 13px;
    }
    .credit-wrapper .credit-container {
        max-width: 86vw;
    }
    .credit-wrapper .content-row {
        align-items: flex-start;
    }
    .credit-wrapper .col-left {
        width: 80px;
    }
    .credit-wrapper .col-right {
        width: calc(100% - 80px);
        row-gap: 15px;
        padding-left: 12%;
    }
}
@media (max-width: 432px) {
    .credit-wrapper .storylab-credit {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 10px;  
    }
}