:root {
--rex-deep-green: #1a312b;
--rex-gold: #c5a059;
--rex-gold-light: #e0c58a;
--rex-text: #2d2d2d;
--rex-text-muted: #666;
--rex-white: #ffffff;
--rex-soft-bg: #fcfaf7;
--rex-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
--rex-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


/* ==========================================
TOP BAR (Desktop)
========================================== */
.rex-top-bar {
background: var(--rex-deep-green);
padding: 10px 5%;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-size: 13px;
z-index: 1001;
position: relative;
}

.rex-top-bar-left {
display: flex;
gap: 25px;
}

.rex-top-bar-left a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: var(--rex-transition);
}

.rex-top-bar-left a:hover {
color: var(--rex-gold);
}

.rex-badge-group {
display: flex;
gap: 10px;
align-items: center;
}

.rex-badge {
background: rgba(255, 255, 255, 0.1);
padding: 4px 12px;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================
MAIN HEADER
========================================== */
.rex-header {
background: var(--rex-white);
height: 100px;
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
transition: var(--rex-transition);
}

.rex-header.scrolled {
height: 80px;
}

.rex-logo {
display: flex;
align-items: center;
text-decoration: none;
gap: 15px;
}

.rex-logo img {
height: 60px;
width: auto;
transition: var(--rex-transition);
}

.rex-header.scrolled .rex-logo img {
height: 50px;
}

.rex-logo-text {
display: flex;
flex-direction: column;
}

.rex-logo-name {
color: var(--rex-deep-green);
font-weight: 800;
font-size: 18px;
text-transform: capitalize;
line-height: 1;
}

.rex-logo-tag {
color: var(--rex-gold);
font-size: 11px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: 1px;
margin-top: 4px;
}

/* Navigation Links */
.rex-desktop-nav {
display: flex;
height: 100%;
align-items: center;
}

.rex-nav-item {
position: relative;
height: 100%;
display: flex;
align-items: center;
}

.rex-nav-link {
text-decoration: none;
color: var(--rex-text);
font-weight: 700;
font-size: 13px;
padding: 0 18px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
height: 100%;
transition: var(--rex-transition);
}

.rex-nav-link svg {
width: 10px;
transition: transform 0.3s;
stroke-width: 4;
}

.rex-nav-item:hover .rex-nav-link {
color: var(--rex-gold);
}

.rex-nav-item:hover .rex-nav-link svg {
transform: rotate(180deg);
}

/* ==========================================
ADVANCED MEGA MENU (Safari Focus)
========================================== */
.rex-mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--rex-white);
width: 900px;
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 40px;
box-shadow: var(--rex-shadow);
opacity: 0;
visibility: hidden;
transition: var(--rex-transition);
border-bottom: 4px solid var(--rex-gold);
border-radius: 0 0 12px 12px;
}

.rex-nav-item:hover .rex-mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}

.rex-mega-title {
display: block;
font-size: 12px;
font-weight: 800;
color: var(--rex-gold);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 25px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}

.rex-mega-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.rex-mega-list a {
text-decoration: none;
display: flex;
flex-direction: column;
}

.rex-link-head {
color: var(--rex-deep-green);
font-weight: 700;
font-size: 14px;
transition: 0.3s;
}

.rex-link-sub {
color: var(--rex-text-muted);
font-size: 12px;
margin-top: 3px;
line-height: 1.4;
}

.rex-mega-list a:hover .rex-link-head {
color: var(--rex-gold);
padding-left: 5px;
}

/* Featured Content Card */
.rex-featured-card {
background: var(--rex-deep-green);
padding: 30px;
border-radius: 12px;
color: white;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 250px;
background-image: linear-gradient(to bottom, rgba(26, 49, 43, 0.2), rgba(26, 49, 43, 0.9)), url('https://www.resiliencesafaris.com/images/wildlife-central-seronera-central-small.webp');
background-size: cover;
background-position: center;
}

.rex-featured-card h4 {
font-size: 20px;
font-weight: 800;
margin-bottom: 8px;
color: var(--rex-white);
}

.rex-featured-card p {
font-size: 13px;
opacity: 0.9;
margin-bottom: 20px;
}

/* CTA Buttons */
.rex-btn {
background: var(--rex-gold);
color: white !important;
text-decoration: none;
padding: 14px 28px;
border-radius: 4px;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--rex-transition);
display: inline-block;
text-align: center;
border: none;
}

.rex-btn:hover {
background: var(--rex-deep-green);
transform: translateY(-3px);
}

/* ==========================================
MOBILE NAVIGATION
========================================== */
.rex-hamburger {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
}

.rex-hamburger span {
width: 28px;
height: 3px;
background: var(--rex-deep-green);
border-radius: 10px;
transition: 0.3s;
}

.rex-mobile-drawer {
position: fixed;
top: 0;
right: -100%;
width: 320px;
height: 100vh;
background: var(--rex-white);
z-index: 3000;
padding: 40px 25px;
transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}

.rex-mobile-drawer.active {
right: 0;
}

.rex-drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2500;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

.rex-drawer-overlay.active {
opacity: 1;
visibility: visible;
}

.rex-mob-nav {
margin-top: 30px;
}

.rex-mob-item {
border-bottom: 1px solid #f0f0f0;
}

.rex-mob-trigger {
width: 100%;
padding: 20px 0;
background: none;
border: none;
text-align: left;
font-size: 15px;
font-weight: 700;
color: var(--rex-deep-green);
display: flex;
justify-content: space-between;
text-transform: uppercase;
}

.rex-mob-content {
display: none;
padding: 0 0 20px 15px;
}

.rex-mob-sublink {
display: block;
padding: 8px 0;
text-decoration: none;
color: var(--rex-text-muted);
font-size: 14px;
}

@media (max-width: 1150px) {

.rex-desktop-nav,
.rex-header>.rex-btn,
.rex-top-bar {
display: none;
}

.rex-hamburger {
display: flex;
}

.rex-header {
height: 85px;
}
}