@import 'large.css';
@import 'small.css';
@import 'dropdown.css';
@import 'experience.css';

.navbar {
    margin-bottom: 24px;
    padding: 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    background: #FFFAF4;
    position: unset;
    top: unset;
    z-index: unset;
}

.navbar .navbar-logo {
    width: 92px;
    height: 92px;
}

.navbar .nav-link:hover {
    color: #24D6D6;
}

.navbar-radius {
    border-radius: 99px;
}

.navbar-header {
    display: flex;
    height: 100%;
    padding: 0 0 0 12px;
    border-top-left-radius: 99px;
    border-bottom-left-radius: 99px;
    align-items: center;
}

.nav-dropdown .dropdown-toggle::after {
    display: none;
}

.nav-dropdown:hover > .dropdown-menu {
    display: block;
}

.wave {
    width: 100%;
    height: 100px;
    background-image: url('../../../img/header-wave.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

@media (max-width: 1024px) {
    /* 當選單展開時，移除 scroll */
    body:has(.navbar-collapse.show) {
        overflow: hidden;
    }

    /* 當選單展開時，移除 navbar 陰影 */
    .navbar:has(.navbar-collapse.show) {
        box-shadow: unset;
    }
}

@media (max-width: 1280px),
    (max-width: 1024px),
    (max-width:  960px) {
    .wave {
        height: 64px;
    }
}

@media (max-width: 480px) {
    .wave {
        height: 32px;
    }
}