body { margin:0; font-family:Arial, sans-serif; }
/* Top Blue Bar */
.top-header { background:#003366; color:#fff; display:flex; justify-content:space-between; align-items:center; padding:1px 5px; position:relative; }
.contact-info { font-size:15px; line-height:1.5; }
.contact-info i { margin-right:6px; color:#ffcc00; }
.pioej-wrapper {
    display: flex;
    align-items: center; /* vertically center */
    justify-content: center; /* horizontally center */
    gap: 0px; /* spacing between PIOEJ, ™ and flag */
}

.pioej {
    font-size: 55px;
    font-weight: bold;
    letter-spacing: 15px;
    text-align: center;
    background: linear-gradient(90deg, red, orange, yellow, green, blue, violet);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: moveColors 3s linear infinite;
}

.trademark {
    font-size: 20px;
    vertical-align: super; /* better alignment with text */
}

.flag img {
    width: 40px; /* size adjust */
    height: auto;
}

@keyframes moveColors { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.trademark { font-size:20px; vertical-align:top; color:#fff; }
.flag img { height:35px; margin-left:8px; animation: wave 0.2s infinite; }
@keyframes wave { 0% {transform: rotate(0deg);} 25% {transform: rotate(2deg);} 50% {transform: rotate(0deg);} 75% {transform: rotate(-2deg);} 100% {transform: rotate(0deg);} }
/* Login Dropdown */
.login-menu { position:relative; }
.login-menu > a { color:#fff; font-weight:bold; text-decoration:none; font-size:20px; cursor:pointer; }
.login-dropdown { display:none; position:absolute; right:0; background:#fff; min-width:200px; box-shadow:0 2px 6px rgba(0,0,0,0.2); z-index:1000; }
.login-dropdown a { color:#333; padding:10px; display:block; text-decoration:none; }
.login-dropdown a:hover { background:#ff6600; color:#fff; }
.login-menu:hover .login-dropdown { display:block; }
/* Logo Row */
.logo-row { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#fff; border-bottom:2px solid #ddd; }
.logo { text-align:center; flex:1; }
.logo img { height:185px; }
.menu-icon { font-size:27px; cursor:pointer; color:#003366; }
/* Sidebar Menu */
.sidebar { height:100%; width:0; position:fixed; top:0; left:0; background:#003366; overflow-x:hidden; transition:0.4s; padding-top:60px; z-index:2000; }
.sidebar a { display:block; color:#fff; padding:12px 20px; text-decoration:none; font-size:12px; }
.sidebar a:hover { background:#ff6600; }
.sidebar .closebtn { position:absolute; top:10px; right:20px; font-size:30px; color:#fff; }