@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.problem-pic {
    max-width: min(400px, 80vw); 
    margin: 0 auto;
}

.animated-gradient {
    background: linear-gradient(
        135deg,
        #1e40af,  /* cobalt */
        #059669,  /* emerald */
        #dc2626
    );
    background-size: 300% 300%;
    animation: gradientFlow 20s ease infinite;
}

.hover-animate {
    transition: all 0.5s ease;
}

.box-fit {
    height: fit-content;
}

.hover-animate:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.notice-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #0284c7;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notice-box i {
    color: #024f75;
    font-style: normal;
    font-weight: 600;
}

/* Custom hyperlink styling */
a:not(.inline-block):not(footer a) {
    color: #2563eb; /* Blue color */
    text-decoration: underline;
    transition: color 0.3s ease;
}

a:not(.inline-block):not(footer a):hover {
    color: #1d4ed8; /* Darker blue on hover */
}