.fa-arrow-up {
    font-size: 0.9rem;
    color: #ff4444 !important;
    animation: maxFloat 2s ease-in-out infinite;
    display: inline-block;
}

.fa-arrow-down {
    font-size: 0.9rem;
    color: #4285f4 !important;
    animation: minFloat 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes maxFloat {
    0%, 100% { 
        transform: translateY(0); 
        color: #ff4444 !important; 
    }
    50% { 
        transform: translateY(-3px); 
        color: #ff0000 !important; 
    }
}

@keyframes minFloat {
    0%, 100% { 
        transform: translateY(0); 
        color: #4285f4 !important; 
    }
    50% { 
        transform: translateY(3px); 
        color: #0066ff !important; 
    }
}

/* Arrow Animations */
@keyframes moveUp {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

@keyframes moveDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

.animate-up {
    animation: moveUp 2s ease-in-out infinite;
    display: inline-block;
    color: #28a745; /* Green color for up arrow */
}

.animate-down {
    animation: moveDown 2s ease-in-out infinite;
    display: inline-block;
    color: #dc3545; /* Red color for down arrow */
}

/* Custom styling for home page text sizes */
/* Trinidad and Tobago tab text - reduced size and using Sofia Sans font */
.tabs-line .nav-tabs li a {
    font-size: 28px !important;
    font-weight: 700 !important;
    font-family: "Sofia Sans", !important;
    letter-spacing: -.025em !important;
}


/* Now and Forecast text - using Poppins font like original tabs */
.weather-now-section .h1,
.bk-focus__info h1,
.bk-focus__qlook .h1,
.weather-now-section .bk-focus__qlook .h1,
.bk-focus__info h1 {
    font-size: 22px !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 700 !important;
    color: #590000 !important;
}

/* Additional specific selectors to ensure red color */
div.h1,
.bk-focus__qlook div.h1,
.bk-focus__info h1 {
    color: #590000 !important;
}

