/* =====================================================
   HOMEPAGE STYLES
   File: homepage.css
===================================================== */

/* ===============================
   Gradient Animation
================================ */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bluebg3 {
    background: linear-gradient(145deg, #b0c4de, #0091d6, #434cc5, #87a8c4);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

/* ===============================
   Main Banner (Desktop)
================================ */
.mainbanner .item {
    background-size: cover;
    background-position: center;
}

/* ===============================
   Buttons & Hover Effects (Global)
================================ */
.btn-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-blue2 {
    background-color: #007bff;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-blue2:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

li:hover strong {
    color: #ee5a00;
    transition: color 0.3s ease;
}

li:hover i {
    color: #ee5a00;
    transition: color 0.3s ease;
}

/* ===============================
   Mobile Styles
================================ */
@media only screen and (max-width: 767px) {

    .mainbanner .item {
        background-image: none !important;
    }

    .mainbanner {
        background: linear-gradient(
            145deg,
            #b0c4de,
            #0091d6,
            #434cc5,
            #87a8c4,
            #b0c4de
        );
        background-size: 300% 300%;
        animation: gradientShift 8s ease infinite;
        height: 550px;
    }

}