body{ 
    /*use gradient background*/  
    background: linear-gradient(135deg, #f4f7f6 0%, #afb0b2 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
.hero-card {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: background 0.5s ease-in-out;
    color: #ffffff;
    /* Extra thick shadow to ensure text pops against any custom image */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); 
    border: none;
    min-height: 300px; /* Ensures a consistent look */
}

/* Optional: Add a subtle overlay to the hero card in CSS */
.hero-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Very light dark tint */
    z-index: 0;
}

.hero-card > .row {
    position: relative;
    z-index: 1; /* Ensures text stays above the overlay */
}
.search-btn { 
    border-radius: 0 5px 5px 0; 
}
.search-input { 
    border-radius: 5px 0 0 5px; 
}
.logo-img { 
    width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.2); 
}
    @media (max-width: 576px) {
        .hero-card { text-align: center; }
        .hero-card .row { flex-direction: column; }
        .hero-card .col-md-6 { text-align: center; }
    }

    /* Subtle rotation effect for the gear icon on hover */
        .hover-rotate:hover i {
            display: inline-block;
            transform: rotate(45deg);
            transition: transform 0.3s ease;
            color: #ffc107; /* Warning yellow color to match your theme */
        }

        /* Preloader Styles */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff; /* Matches your light background */
        z-index: 9999; /* Higher than Bootstrap's navbar */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.5s ease, visibility 0.5s;
    }

    .loader-content {
        text-align: center;
    }

    .loader-logo {
        width: 60px;
        height: 60px;
        animation: pulse 1.5s infinite ease-in-out;
    }

    @keyframes pulse {
        0% { transform: scale(0.9); opacity: 0.7; }
        50% { transform: scale(1.1); opacity: 1; }
        100% { transform: scale(0.9); opacity: 0.7; }
    }

    /* Hide preloader class */
    .loader-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .gmt-time {
        font-size: 0.9rem;
        color: #666666;
        margin-top: 5px;
        margin-bottom: 0;
    }

    /*Meteolytics Styles*/
    .chart-container {
            position: relative;
            height: 300px; /* Fixed height for the chart */
            width: 100%;
        }