.navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(8px, 2vw, 15px);
    border-bottom: 3px solid navy;
    margin-bottom: clamp(5px, 1.5vw, 15px);
    height: auto;
    min-height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}



.HPVLogo {
    height: clamp(55px, 10vw, 75px) !important;
    right: 15px !important;
}

/*mobile stuff */
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .navbar {
        padding: 12px;
        min-height: 60px;
        margin-bottom: 15px;
    }
    
    .navbar-title{
        font-size: clamp(22px, 5vw, 28px);
    }

    .NKFLogo {
        height: clamp(50px, 8vw, 60px) !important;
        right: 5px !important;
    }
    
    .HPVLogo {
        height: clamp(50px, 8vw, 65px) !important;
    }
}

@media only screen and (max-width: 480px) {
    .navbar {
        padding: 10px;
        min-height: 55px;
        margin-bottom: 12px;
    }
    
    .HPVLogo {
        height: clamp(45px, 9vw, 60px) !important;
    }
    
    .NKFLogo {
        height: clamp(45px, 9vw, 55px) !important;
    }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .navbar {
        padding: 4px;
        min-height: 40px;
        margin-bottom: 4px;
    }
    
    .navbar-title {
        font-size: 16px;
    }
    
    .HPVLogo, .NKFLogo {
        height: 30px !important;
    }
}