/* navbar_styles.css */

/* Navigation Bar Styles */
.navbar {
    background-color: #444654 !important;
    border-bottom: 5px groove #07aa75;
    box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.3);
    font-family: 'Kanit', sans-serif;
}

.navbar-brand img.logo {
    max-width: 180px;   /* or whatever width works */
    height: auto;
    display: block;
}


.navbar-brand:hover img.logo {
    transform: scale(1.05);
}

/* Navbar Links */
.navbar-nav .nav-link,
.navbar .navbar-brand {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar .navbar-brand:hover {
    color: #07aa75 !important;
}

/* Navbar Toggler Button */
.navbar-toggler {
    border-color: #ffffff;
}

/* Navbar Text */
.navbar-text {
    color: #ffffff;
}

/* Dropdown Menu Styles */
.navbar .dropdown-menu {
    background-color: #444654;
    border: 1px solid #07aa75;
}

.navbar .dropdown-item {
    color: #ffffff;
}

.navbar .dropdown-item:hover {
    background-color: #07aa75;
    color: #ffffff !important;
}


/* Weather Icon */
.weather-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.weather-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Animations */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
