.montserrat {
  font-family: "Montserrat", sans-serif;
  /* font-optical-sizing: auto; */
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  color: var(--text-white);
  text-transform: uppercase;
  color: black;
  padding-top: 25px;
}

/* --- Color Palette & Reset --- */
:root {
    --dark-blue: #24589F;
    --light-blue: #c4f4ff;
    --text-light: #f0f0f0;
    --text-dark: #333333;
    --text-white: #ffffff;
    --pink: #E1BBE5;
    --card-bg-opacity: rgba(255, 255, 255, 0.3);
}

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

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Hide animation overflow */
}

/* --- 1. Gradient Rotation Background (LinearGradient + Rotation) --- */
.app-background {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* Flutter's initial colors */
    background: linear-gradient(
        140deg, 
        var(--light-blue) 0%, 
        var(--pink) 100%
    );
    /* Make background large for smooth rotation effect */
    background-size: 100% 100%; 
    animation: gradient-rotation 10s infinite linear;
}

/* @keyframes for the gradient rotation */
@keyframes gradient-rotation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- 2. Pulsing/Scaling Circles (Animated Blobs) --- */
.animated-blob {
    position: absolute;
    width: 260px; /* Base size */
    height: 260px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05); /* Very faint core color */
    
    /* Apply the pulse animation from Flutter (5s duration, easeInOut, reverse: true) */
    animation: 
        pulse-scale 5s infinite alternate ease-in-out, 
        pulse-move 5s infinite alternate ease-in-out;
    will-change: transform, opacity; /* Optimization */
}

/* Specific positioning and color glows for each blob */
#blob-pink {
    bottom: -120px;
    left: -70px;
    /* Mimic Colors.pink glow */
    box-shadow: 0 0 100px 100px rgba(233, 30, 99, 0.4); 
    background-color: rgba(233, 30, 99, 0.4); 
    opacity: 0.37; /* Base opacity */
    animation-delay: 0s, 0s;
}

#blob-green {
    top: -150px;
    left: -100px;
    /* Mimic Colors.green glow */
    box-shadow: 0 0 150px 70px rgba(76, 175, 80, 0.3);
    background-color: rgba(76, 175, 80, 0.3);
    opacity: 0.55;
    animation-delay: -1s, -1s; /* Offset animation start */
}

#blob-yellow {
    top: 50px;
    left: -100px; 
    box-shadow: 0 0 100px 400px rgba(115, 233, 135, 0.43);
    background-color: rgba(115, 233, 135, 0.43);
    opacity: 0.10;
    animation-delay: -2.5s, -2.5s;
}

#blob-cyan {
    top: -150px;
    right: -100px;
    box-shadow: 0 0 80px 30px rgba(0, 255, 255, 0.2);
    background-color: rgba(0, 255, 255, 0.2);
    opacity: 0.25;
    animation-delay: -3s, -3s;
}

#blob-purple {
    bottom: -50px;
    right: -160px;
    box-shadow: 0 0 100px 200px rgba(103, 58, 183, 0.6);
    background-color: rgba(103, 58, 183, 0.6);
    opacity: 0.35;
    animation-delay: -4s, -4s;
}

#blob-orange {
    top: -50px;
    right: -70px;
    box-shadow: 0 0 80px 150px rgba(255, 152, 0, 0.2);
    background-color: rgba(255, 152, 0, 0.2);
    opacity: 0.57;
    animation-delay: -1.5s, -1.5s;
}

/* @keyframes for the pulsing animation (Scale and slight vertical move) */
@keyframes pulse-scale {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.35); /* Max scale from Flutter Tween */
    }
}

@keyframes pulse-move {
    /* Mimics the slight vertical movement (e.g., top: -150 + (currentPulseValue * 40)) */
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(40px);
    }
}



.ekko-logo {
  text-align: center;
  padding-top: 18%;
}
.ekko-logo img {
  width: 100%;
  height: auto;
  max-width: 250px;
}