/* =========================================
CARNOCEAN SHIPYARDS HEADER
ELEMENTOR HTML WIDGET
========================================= */
.carnocean-header {
width: 100%;
background: #062B5C;
border-top: 3px solid #D99A16;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.carnocean-header * {
box-sizing: border-box;
}
/* =========================================
MAIN HEADER CONTAINER
========================================= */
.carnocean-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 15px 25px 12px;
}
/* =========================================
LOGO + COMPANY NAME
========================================= */
.carnocean-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.carnocean-logo {
width: 125px;
height: 125px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.carnocean-title {
color: #ffffff;
font-size: 29px;
font-weight: 500;
line-height: 1.2;
text-align: center;
}
/* =========================================
NAVIGATION BAR
========================================= */
.carnocean-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
margin-top: 18px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.carnocean-nav a {
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
transition: color 0.2s ease;
}
.carnocean-nav a:hover {
color: #D99A16;
}
/* ACTIVE / HIGHLIGHTED LINK */
.carnocean-nav a.training {
color: #D99A16;
}
/* =========================================
TABLET
Logo remains 125 × 125
========================================= */
@media (max-width: 1100px) {
.carnocean-title {
font-size: 24px;
}
.carnocean-logo {
width: 125px;
height: 125px;
}
.carnocean-nav {
gap: 22px;
}
.carnocean-nav a {
font-size: 14px;
}
}
/* =========================================
MOBILE
Logo becomes slightly larger: 135 × 135
========================================= */
@media (max-width: 700px) {
.carnocean-container {
padding: 12px 15px;
}
/* LOGO + COMPANY NAME */
.carnocean-brand {
flex-direction: column;
gap: 8px;
}
/* MOBILE LOGO */
.carnocean-logo {
width: 135px;
height: 135px;
}
.carnocean-title {
font-size: 20px;
line-height: 1.3;
}
/* NAVIGATION */
.carnocean-nav {
margin-top: 15px;
padding-top: 12px;
gap: 10px 18px;
flex-wrap: wrap;
}
.carnocean-nav a {
font-size: 13px;
}
}
/* =========================================
SMALL MOBILE
Logo remains 135 × 135
========================================= */
@media (max-width: 450px) {
.carnocean-container {
padding: 12px 12px;
}
.carnocean-logo {
width: 135px;
height: 135px;
}
.carnocean-title {
font-size: 17px;
line-height: 1.3;
}
.carnocean-nav {
gap: 9px 14px;
}
.carnocean-nav a {
font-size: 12px;
}
}
CARNOCEAN SHIPYARDS AND CRUISE MANAGEMENT
