:root {

    /* Colors */

    --color-bg: #F8F9FA;

    --color-surface: #FFFFFF;

    --color-primary: #1A2A3A; /* Azul Marinho Profundo */

    --color-secondary: #2D3748; /* Cinza Carvão */

    --color-accent: #4A6572; /* Azul Ardósia */

    --color-accent-hover: #364A54;

    --color-border: #E5E7EB;

    --color-text: #2D3748;

    --color-text-light: #5C7B89;

    

    /* Typography */

    --font-heading: 'Cinzel', serif;

    --font-body: 'Inter', sans-serif;

    

    /* Spacing */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 2rem;

    --spacing-lg: 4rem;

    --spacing-xl: 6rem;

    

    /* Animations */

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-body);

    color: var(--color-primary);

    background-color: var(--color-bg);

    line-height: 1.6;

    overflow-x: hidden;

}



h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    font-weight: 600;

    line-height: 1.2;

}



a {

    text-decoration: none;

    color: inherit;

    transition: color var(--transition-fast);

}



.container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 var(--spacing-md);

}



.section-padding {

    padding: var(--spacing-xl) 0;

}



/* Navbar */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: #ffffff;

    border-bottom: 1px solid var(--color-border);

    box-shadow: 0 2px 15px rgba(0,0,0,0.08);

    z-index: 1000;

    transition: all 0.4s ease;

    color: var(--color-primary);

}

body {
    padding-top: 80px;
}



.navbar.scrolled {

    background-color: #ffffff !important;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.navbar-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 80px;

}



.logo {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    color: #000000 !important;

}



.logo-img {

    height: 50px;

    width: auto;

}



.logo-text {

    display: flex;

    flex-direction: column;

}



.logo-title {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1;

    color: inherit;

}



.logo-subtitle {

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: inherit;

    opacity: 0.8;

}



.nav-menu ul {

    display: flex;

    list-style: none;

    gap: 2.5rem;

    align-items: center;

}



.nav-menu a {

    font-size: 0.9rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    position: relative;

}



.btn {

    display: inline-block;

    padding: 0.8rem 1.5rem;

    border-radius: 4px;

    font-weight: 500;

    text-align: center;

    cursor: pointer;

    transition: all var(--transition-fast);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 0.85rem;

}



.btn-primary {

    background-color: var(--color-accent);

    color: #fff;

    border: 2px solid var(--color-accent);

}



.btn-primary:hover {

    background-color: var(--color-accent-hover);

    border-color: var(--color-accent-hover);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(124, 176, 152, 0.3);

}



.btn-outline {

    background-color: transparent;

    color: inherit;

    border: 2px solid currentColor;

}



.btn-outline:hover {

    background-color: var(--color-accent);

    color: #fff;

    border-color: var(--color-accent);

}



.btn-outline-light {

    background-color: transparent;

    color: #fff;

    border: 2px solid #fff;

}



.btn-outline-light:hover {

    background-color: #fff;

    color: var(--color-primary);

}



.btn-secondary {

    background: transparent;

    color: var(--color-surface);

    border: 1px solid var(--color-surface);

}



.btn-secondary:hover {

    background: rgba(255, 255, 255, 0.1);

}



/* Modern Form Controls for Public Site */

.form-control, .search-input {

    width: 100%;

    padding: 14px 20px;

    border: 1px solid #D1D5DB;

    border-radius: 8px;

    font-family: var(--font-body);

    font-size: 1rem;

    color: var(--color-primary);

    background-color: #F9FAFB;

    transition: all 0.3s ease;

    outline: none;

}



.search-input {

    border-radius: 25px;

    padding: 14px 24px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.02);

}



.form-control:hover, .search-input:hover {

    border-color: #9CA3AF;

}



.form-control:focus, .search-input:focus {

    border-color: var(--color-accent);

    background-color: #FFFFFF;

    box-shadow: 0 0 0 3px rgba(74, 101, 114, 0.15);

}



.mobile-menu-btn {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    flex-direction: column;

    gap: 5px;

}



.mobile-menu-btn span {

    display: block;

    width: 25px;

    height: 2px;

    background-color: currentColor;

    transition: var(--transition-fast);

}



/* Hero Section */

.hero {

    position: relative;

    height: 100vh;

    min-height: 600px;

    display: flex;

    align-items: center;

    color: #fff;

    overflow: hidden;

    margin-top: 0;

}



.hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--color-primary);

    background-image: linear-gradient(135deg, #111111 0%, #2A2A2A 100%);

    z-index: -2;

    overflow: hidden;

}



/* Video-like Particle Animation in Hero */

.hero-animation {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    overflow: hidden;

}



#hero-canvas {

    width: 100%;

    height: 100%;

    display: block;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);

    z-index: 0;

}



.hero-content {

    width: 100%;

    position: relative;

    z-index: 1;

    display: flex;

    justify-content: flex-start;

    padding-left: 5%;

}



.hero-brand {

    display: flex;

    align-items: center;

    gap: 30px;

}



.hero-large-logo {

    height: 150px;

    width: auto;

    color: #ffffff; /* Branca muito carregada */

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); /* Efeito carregado e intenso */

}



.hero-large-title {

    font-family: var(--font-body);

    font-size: 5rem;

    font-weight: 300;

    letter-spacing: 2px;

    margin: 0;

    color: #fff;

}



.hero-title-wrapper {

    overflow: hidden; /* This hides the text when translated left */

    padding-right: 10px;

}



.hero-text-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* Hero Background Layers */

.hero-bg-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

    opacity: 0;

}



.hero-layer-1 {

    overflow: hidden;

    opacity: 1;

}

@keyframes bgLayer1Seq {

    0%, 30% { opacity: 1; }

    33%, 100% { opacity: 0; }

}



.hero-layer-2 {

    animation: bgLayer2Seq 24s infinite;

    background: radial-gradient(circle at center, #111827 0%, #030712 100%);

    overflow: hidden;

}

@keyframes bgLayer2Seq {

    0%, 30% { opacity: 0; }

    33%, 63% { opacity: 1; }

    66%, 100% { opacity: 0; }

}



/* Abstract Lines for Layer 2 */

.abstract-lines {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0.15;

}

.abstract-lines .line {

    position: absolute;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);

    height: 1px;

    width: 200%;

    --rot: 0deg;

    transform-origin: center;

    animation: linePan 10s infinite linear;

}

.line-1 { top: 20%; --rot: 15deg; }

.line-2 { top: 40%; --rot: -10deg; animation-duration: 15s; animation-direction: reverse; }

.line-3 { top: 60%; --rot: 5deg; animation-duration: 12s; }

.line-4 { top: 80%; --rot: -20deg; animation-duration: 18s; animation-direction: reverse; }

.line-5 { top: 50%; --rot: 45deg; animation-duration: 20s; }



@keyframes linePan {

    0% { transform: translateX(-50%) rotate(var(--rot)); }

    100% { transform: translateX(0%) rotate(var(--rot)); }

}



.hero-layer-3 {

    animation: bgLayer3Seq 24s infinite;

    overflow: hidden;

}

@keyframes bgLayer3Seq {

    0%, 63% { opacity: 0; }

    66%, 96% { opacity: 1; }

    100% { opacity: 0; }

}



/* Image Video-like Animations (Ken Burns) */

.ken-burns-img-2 {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.6;

    transform-origin: center center;

    animation: kenBurns2 24s infinite linear;

}

@keyframes kenBurns2 {

    0%, 32% { transform: scale(1); }

    33% { transform: scale(1); }

    65% { transform: scale(1.15) translate(-1%, -1%); }

    66%, 100% { transform: scale(1); }

}



.ken-burns-img-3 {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.8;

    transform-origin: center center;

    animation: kenBurns3 24s infinite linear;

}

@keyframes kenBurns3 {

    0%, 65% { transform: scale(1); }

    66% { transform: scale(1); }

    100% { transform: scale(1.15) translate(-1%, -1%); }

}



/* Unified 24s Animation Sequence */

/* 1. Logo Draw */

.hero-large-logo path[stroke="currentColor"], 

.hero-large-logo line {

    stroke-dasharray: 1500;

    stroke-dashoffset: 1500;

    opacity: 1;

    animation: drawLogoSeq 24s infinite;

}

@keyframes drawLogoSeq {

    0% { stroke-dashoffset: 1500; }

    6.25%, 30% { stroke-dashoffset: 0; }

    34%, 100% { stroke-dashoffset: 1500; }

}



/* 2. Logo Fill */

.hero-large-logo path[fill="currentColor"], 

.hero-large-logo circle, 

.hero-large-logo text {

    opacity: 0;

    animation: fillLogoSeq 24s infinite;

}

@keyframes fillLogoSeq {

    0%, 6.25% { opacity: 0; filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }

    8.33%, 30% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); }

    34%, 100% { opacity: 0; }

}



/* 3. Title Slide */

.slide-from-logo {

    transform: translateX(-120%);

    opacity: 0;

    animation: titleSlideSeq 24s infinite;

}

@keyframes titleSlideSeq {

    0%, 7.5% { transform: translateX(-120%); opacity: 0; }

    12.5%, 29.1% { transform: translateX(0); opacity: 1; }

    33.3%, 100% { transform: translateX(-120%); opacity: 0; }

}



/* 4. Line Expand */

.hero-line-expand {

    width: 0;

    height: 1px;

    background-color: var(--color-accent);

    margin: 10px 0;

    animation: lineExpandSeq 24s infinite;

}

@keyframes lineExpandSeq {

    0%, 10.4% { width: 0; opacity: 0; }

    14.5%, 25% { width: 100%; opacity: 1; }

    29.1%, 100% { width: 0; opacity: 0; }

}



/* 5. Subtitle Reveal */

.hero-large-subtitle {

    font-family: var(--font-body);

    font-size: 1.25rem;

    color: #E5E7EB;

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-top: 5px;

    opacity: 0;

    transform: translateY(15px);

    animation: subtitleSeq 24s infinite;

}

@keyframes subtitleSeq {

    0%, 12.5% { opacity: 0; transform: translateY(15px); }

    16.6%, 25% { opacity: 1; transform: translateY(0); }

    29.1%, 100% { opacity: 0; transform: translateY(-15px); }

}



/* 6. Anniversary Badge Sequence */

.hero-brand {

    display: flex;

    align-items: center;

    gap: var(--spacing-xl);

    z-index: 2;

    animation: fadeOutSeq 24s infinite;

}

@keyframes fadeOutSeq {

    0%, 30% { opacity: 1; visibility: visible; transform: scale(1); }

    33%, 96% { opacity: 0; visibility: hidden; transform: scale(0.95); }

    100% { opacity: 1; visibility: visible; transform: scale(1); }

}



.anniversary-badge-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    visibility: hidden;

    animation: badgeSeq 24s infinite;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    color: #ffffff;

}

@keyframes badgeSeq {

    0%, 30% { opacity: 0; visibility: hidden; transform: translate(-50%, -40%); }

    33%, 96% { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

    100% { opacity: 0; visibility: hidden; transform: translate(-50%, -60%); }

}



.anniversary-badge {

    height: 350px;

    width: auto;

}



.badge-draw {

    stroke-dasharray: 800;

    stroke-dashoffset: 800;

    animation: badgeDrawSeq 24s infinite;

}

@keyframes badgeDrawSeq {

    0%, 33% { stroke-dashoffset: 800; }

    40%, 96% { stroke-dashoffset: 0; }

    100% { stroke-dashoffset: 800; }

}



.badge-text {

    opacity: 0;

    animation: badgeTextSeq 24s infinite;

}

@keyframes badgeTextSeq {

    0%, 38% { opacity: 0; }

    43%, 96% { opacity: 1; }

    100% { opacity: 0; }

}



.map-animation-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    max-width: 500px;

    opacity: 0;

    visibility: hidden;

    animation: mapSeq 24s infinite;

}

@keyframes mapSeq {

    0%, 63% { opacity: 0; visibility: hidden; transform: translate(-50%, -40%); }

    66%, 96% { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

    100% { opacity: 0; visibility: hidden; transform: translate(-50%, -60%); }

}



.jump-path {

    fill: none;

    stroke: var(--color-accent);

    stroke-width: 0.1;

    stroke-dasharray: 100;

    stroke-dashoffset: 100;

    animation: jumpDraw 2s infinite alternate;

}

.jump-path:nth-child(even) {

    animation-delay: 1s;

}

@keyframes jumpDraw {

    to { stroke-dashoffset: 0; }

}



.map-node {

    fill: #ffffff;

    filter: url(#glow);

    opacity: 0.8;

    animation: nodePulse 1.5s infinite alternate;

}

.map-node:nth-child(odd) {

    animation-delay: 0.75s;

}

@keyframes nodePulse {

    from { r: 0.2; opacity: 0.4; }

    to { r: 0.5; opacity: 1; }

}



@media (max-width: 768px) {

    .hero-brand {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    .hero-large-logo {

        height: 80px;

    }

    .hero-large-title {

        font-size: 2.5rem;

    }

}



.hero-subtitle {

    font-size: 1.25rem;

    font-weight: 300;

    color: #E5E7EB;

    margin-bottom: var(--spacing-lg);

    max-width: 600px;

}



.hero-actions {

    display: flex;

    gap: var(--spacing-md);

}



/* Highlights Grid */

.highlights {

    margin-top: calc(var(--spacing-xl) * -0.5);

    position: relative;

    z-index: 10;

    padding-bottom: var(--spacing-xl);

}



.highlights-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: var(--spacing-md);

}



.highlight-card {

    background: var(--color-surface);

    padding: var(--spacing-lg) var(--spacing-md);

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

    border-top: 4px solid transparent;

}



.highlight-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);

    border-top-color: var(--color-accent);

}



.highlight-icon {

    width: 60px;

    height: 60px;

    background: rgba(124, 176, 152, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-accent);

    margin-bottom: var(--spacing-md);

}



.highlight-card h3 {

    margin-bottom: var(--spacing-sm);

    font-size: 1.5rem;

}



.highlight-card p {

    color: var(--color-secondary);

    margin-bottom: var(--spacing-md);

    font-size: 0.95rem;

}



.nav-menu {

    display: flex;

    align-items: center;

    gap: 30px;

}



.nav-links {

    list-style: none;

    display: flex;

    gap: var(--spacing-md);

    margin: 0;

    padding: 0;

}



.nav-links a {

    color: inherit;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    transition: color var(--transition-fast);

    position: relative;

    padding: 10px 0;

}



.nav-item {

    position: relative;

}



/* Traço vertical em cima da aba */

.nav-item > a::before {

    content: '';

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 2px;

    height: 0;

    background-color: var(--color-accent);

    transition: height 0.3s ease;

}



.nav-item:hover > a::before,

.nav-item.active > a::before {

    height: 15px;

}



.nav-links a:hover {

    color: var(--color-accent);

}



/* Dropdown Popup */

.dropdown-popup {

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(20px);

    background: rgba(15, 20, 25, 0.95);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-top: 3px solid var(--color-accent);

    min-width: 260px;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 100;

    padding: 15px 0;

    border-radius: 0 0 6px 6px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.3);

}



.nav-item:hover .dropdown-popup,

.nav-item.active .dropdown-popup {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}



.dropdown-popup ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

}



.dropdown-popup ul a {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    font-weight: 400;

    white-space: normal;

    padding: 12px 30px;

    display: block;

    transition: all 0.3s ease;

    line-height: 1.4;

}



.dropdown-popup ul a::before {

    display: none;

}



.dropdown-popup ul a:hover {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.05);

    padding-left: 35px;

    color: var(--color-accent);

}



.nav-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}



.nav-icon {

    color: inherit;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: color var(--transition-fast);

}



.nav-icon:hover {

    color: var(--color-accent);

}



.lang-selector {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

    font-weight: 500;

    cursor: pointer;

    color: inherit;

}



.lang-selector .divider {

    height: 20px;

    width: 1px;

    background-color: currentColor;

    opacity: 0.3;

    margin: 0 5px;

}



.lang-selector .chevron {

    margin-top: 2px;

}



.link-arrow {

    display: inline-flex;

    align-items: center;

    font-weight: 600;

    color: var(--color-primary);

    text-transform: uppercase;

    font-size: 0.85rem;

    letter-spacing: 1px;

}



.link-arrow .arrow {

    margin-left: 8px;

    transition: transform var(--transition-fast);

}



.link-arrow:hover {

    color: var(--color-accent);

}



.link-arrow:hover .arrow {

    transform: translateX(5px);

}



/* Expertise Section */

.expertise-section {

    background-color: #fff;

}



.section-header {

    text-align: center;

    margin-bottom: var(--spacing-lg);

}



.section-title {

    font-size: 2.5rem;

    margin-bottom: var(--spacing-sm);

}



.section-desc {

    color: var(--color-secondary);

    max-width: 600px;

    margin: 0 auto;

}



.expertise-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 1px;

    background-color: var(--color-border);

    border: 1px solid var(--color-border);

}



.expertise-item {

    background-color: var(--color-surface);

    padding: var(--spacing-md);

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family: var(--font-heading);

    font-size: 1.2rem;

    font-weight: 600;

    transition: all var(--transition-fast);

}



.expertise-item:hover {

    background-color: var(--color-primary);

    color: var(--color-accent);

}



/* Footer */

.site-footer {

    background-color: #ffffff;

    color: var(--color-primary);

    padding: 60px 0 20px;

    font-family: var(--font-body);

}



.site-footer a {

    color: var(--color-secondary);

    text-decoration: none;

    transition: color 0.3s ease;

}



.site-footer a:hover {

    color: var(--color-accent);

}



.footer-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--color-border);

    padding-bottom: 30px;

    margin-bottom: 30px;

    flex-wrap: wrap;

    gap: 20px;

}



.contact-info {

    display: flex;

    gap: 30px;

    align-items: center;

    flex-wrap: wrap;

}



.contact-link {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--color-primary) !important;

    font-weight: 500;

    font-size: 1.1rem;

}



.contact-link svg {

    stroke: var(--color-accent);

}



.contact-link:hover {

    color: var(--color-accent) !important;

}

.contact-fax {

    color: var(--color-secondary);

    font-size: 0.9rem;

    margin-top: 5px;

}



@media (max-width: 992px) {

    .city-details {

        grid-template-columns: 1fr;

    }

}



/* ==========================================================================

   EQUIPA PAGE

   ========================================================================== */

.team-header-grid {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 60px;

    margin-top: 40px;

    margin-bottom: 60px;

}

.team-kicker {

    font-size: 0.8rem;

    color: var(--color-accent);

    text-transform: uppercase;

    font-weight: 600;

    letter-spacing: 1px;

    display: block;

    margin-bottom: 10px;

}

.team-stats {

    font-size: 1.4rem;

    color: var(--color-primary);

    margin-top: 20px;

    line-height: 1.4;

    font-family: var(--font-body);

}

.team-stats .text-accent {

    color: var(--color-accent);

}

.team-search-area {

    display: flex;

    gap: 40px;

    border-left: 1px solid var(--color-border);

    padding-left: 40px;

}

.search-inputs, .alphabet-filter {

    flex: 1;

}

.search-inputs label, .alphabet-filter label {

    font-size: 0.75rem;

    color: var(--color-secondary);

    text-transform: uppercase;

    margin-bottom: 15px;

    display: block;

    letter-spacing: 1px;

}

.input-group {

    position: relative;

    margin-bottom: 15px;

}

.input-group input, .input-group select {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid var(--color-border);

    border-radius: 2px;

    font-size: 0.95rem;

    outline: none;

    color: var(--color-primary);

    background: transparent;

    transition: border-color 0.2s ease;

    appearance: none;

    -webkit-appearance: none;

}

.input-group select {

    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 15px center;

    background-size: 15px;

    cursor: pointer;

}

.input-group input:focus, .input-group select:focus {

    border-color: var(--color-accent);

}

.search-icon {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--color-primary);

    display: flex;

}

.letters-grid {

    display: grid;

    grid-template-columns: repeat(9, 1fr);

    gap: 5px;

}

.letters-grid a {

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #F3F4F6;

    color: var(--color-secondary);

    font-size: 0.85rem;

    height: 35px;

    text-decoration: none;

    transition: all 0.2s ease;

    border-radius: 2px;

}

.letters-grid a:hover {

    background-color: var(--color-accent);

    color: #fff;

}



/* Join Us Promotional Section */

.bg-light {

    background-color: #F9FAFB;

    border-top: 1px solid var(--color-border);

    border-bottom: 1px solid var(--color-border);

}

.join-grid {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 60px;

    align-items: center;

}

.join-text h2 {

    font-family: var(--font-heading);

    font-size: 2.8rem;

    color: var(--color-primary);

    line-height: 1.1;

    margin-bottom: 10px;

}

.text-accent-link {

    color: var(--color-accent);

    font-weight: 600;

    text-decoration: none;

    display: inline-block;

    margin-bottom: 30px;

    font-size: 1.1rem;

}

.join-text p {

    color: var(--color-secondary);

    line-height: 1.6;

    font-size: 1.05rem;

    margin-bottom: 20px;

}

.logo-mask-svg {

    width: 100%;

    height: auto;

    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));

}



/* Banners Section */

.banners-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}

.banner-item {

    position: relative;

    height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    overflow: hidden;

    background-color: #3f4e56; /* Elegant Slate M&J Color */

    color: #fff;

    transition: opacity 0.3s ease;

}

.banner-item:nth-child(2) { background-color: #4a5c66; }

.banner-item:nth-child(3) { background-color: #556b76; }



.banner-item::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80');

    background-size: cover;

    background-position: center;

    opacity: 0.15;

    transition: transform 0.8s ease, opacity 0.5s ease;

    mix-blend-mode: overlay;

}

.banner-item:hover::before {

    transform: scale(1.1);

    opacity: 0.25;

}

.banner-content {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 1.3rem;

    font-family: var(--font-heading);

}



/* Extended Footer */

.extended-footer {

    background-color: #FFFFFF;

}

.footer-contacts-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 30px 0;

    border-bottom: 1px solid var(--color-border);

}

.contact-items {

    display: flex;

    gap: 30px;

}

.contact-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--color-primary);

    font-size: 1.1rem;

    text-decoration: none;

}

.contact-item svg {

    width: 22px;

    height: 22px;

    color: var(--color-secondary);

}

.contact-item.text-accent {

    color: var(--color-accent);

}

.contact-item.text-accent svg {

    color: var(--color-accent);

}

.btn-outline {

    border: 1px solid var(--color-border);

    padding: 12px 25px;

    color: var(--color-secondary);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 1px;

    text-decoration: none;

    transition: all 0.2s ease;

    border-radius: 2px;

}

.btn-outline:hover {

    border-color: var(--color-primary);

    color: var(--color-primary);

}

.footer-links-bar {

    display: flex;

    align-items: center;

    padding: 30px 0;

    gap: 30px;

}

.join-pill {

    background-color: var(--color-accent);

    color: #fff;

    padding: 8px 20px;

    font-size: 0.8rem;

    font-weight: 600;

    text-decoration: none;

    letter-spacing: 1px;

    border-radius: 2px;

    transition: opacity 0.2s;

}

.join-pill:hover { opacity: 0.9; }

.legal-links {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}

.legal-links a {

    color: var(--color-secondary);

    font-size: 0.85rem;

    text-decoration: none;

    transition: color 0.2s;

}

.legal-links a:hover {

    color: var(--color-primary);

}

.footer-bottom-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 40px;

    padding-top: 10px;

}

.copyright-text {

    color: var(--color-secondary);

    font-size: 0.75rem;

    line-height: 1.5;

}

.social-links {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--color-secondary);

}

.social-links a {

    color: var(--color-secondary);

    transition: color 0.2s;

}

.social-links a:hover {

    color: var(--color-primary);

}



@media (max-width: 992px) {

    .team-header-grid, .join-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .team-search-area {

        border-left: none;

        padding-left: 0;

        flex-direction: column;

        border-top: 1px solid var(--color-border);

        padding-top: 30px;

    }

    .banners-grid {

        grid-template-columns: 1fr;

    }

    .footer-contacts-bar {

        flex-direction: column;

        gap: 20px;

        align-items: flex-start;

    }

    .contact-items {

        flex-direction: column;

        gap: 15px;

    }

    .footer-links-bar {

        flex-direction: column;

        align-items: flex-start;

    }

}



/* ==========================================================================

   MEGA MENU OVERRIDES

   ========================================================================== */

.nav-item.mega-menu-item {

    position: static;

}

.navbar-container {

    position: relative;

}

.dropdown-popup.mega-menu-popup {

    left: 0;

    right: 0;

    width: 100%;

    transform: translateY(10px);

    padding: 0;

    background: transparent;

    box-shadow: none;

    border-radius: 0;

}

.nav-item.mega-menu-item:hover .dropdown-popup.mega-menu-popup {

    transform: translateY(0);

}

.mega-menu-content {

    background-color: #fff;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    padding: 30px;

    border-top: 3px solid var(--color-accent);

}

        grid-template-columns: 1fr;

    }

    .contact-page-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    .subheader-content {

        flex-direction: column;

        gap: 15px;

    }

}



/* ==========================================================================

   NEW HOMEPAGE SECTIONS (UMA EQUIPA, INSIGHTS, BANNERS)

   ========================================================================== */

.equipa-section {

    background-color: #f9f9f9;

    padding: 80px 0;

    border-top: 1px solid var(--color-border);

}

.equipa-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}

.equipa-stats {

    display: flex;

    align-items: center;

    gap: 60px;

}

.equipa-globe-container {

    position: relative;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    border: 2px dashed var(--color-accent);

    margin-bottom: 30px;

    flex-shrink: 0;

}

.globe-graphic {

    position: absolute;

    top: 50%;

    right: -60px;

    width: 250px;

    height: 250px;

    transform: translateY(-50%);

    background-image: url('../images/angola_map_3d.png');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    z-index: 1;

}

.equipa-title-circle {

    position: absolute;

    top: 50%;

    left: -20px;

    transform: translateY(-50%);

    background: #fff;

    padding: 20px 30px 20px 0;

    z-index: 2;

}

.equipa-title-circle h2 {

    font-size: 2.5rem;

    color: var(--color-accent);

    font-weight: 300;

    line-height: 1.1;

}

.equipa-title-circle strong {

    color: var(--color-primary);

    font-weight: 700;

}

.stats-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.stat-item {

    display: flex;

    align-items: center;

    gap: 15px;

}

.stat-number {

    font-size: 2rem;

    font-weight: 400;

    width: 80px;

}

.stat-label {

    font-size: 0.8rem;

    letter-spacing: 1px;

    color: var(--color-secondary);

}

.equipa-form h2 {

    font-size: 2rem;

    margin-bottom: 30px;

    font-weight: 400;

}

.equipa-form .form-row {

    margin-bottom: 15px;

    display: flex;

    gap: 15px;

}

.equipa-form select {

    flex: 1;

    padding: 15px 20px;

    border: 1px solid #e0e0e0;

    color: var(--color-primary);

    font-size: 1rem;

    outline: none;

    background: #fff;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);

    cursor: pointer;

    border-radius: 2px;

}

.equipa-form p {

    margin-top: 30px;

    font-size: 0.9rem;

    color: var(--color-secondary);

    line-height: 1.5;

}

.mj-partners-logo {

    margin-top: 20px;

    display: flex;

    align-items: center;

}



/* Insights Header & Subnav */

.insights-section {

    padding: 80px 0;

    background-color: var(--color-bg);

}

.insights-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

    border-bottom: 1px solid var(--color-border);

    padding-bottom: 20px;

}

.insights-header h2 {

    font-size: 2rem;

    font-weight: 400;

}

.insights-subnav {

    display: flex;

    gap: 20px;

}

.insights-subnav a {

    font-size: 0.8rem;

    letter-spacing: 1px;

    font-weight: 600;

    color: var(--color-secondary);

    padding: 8px 12px;

}

.insights-subnav a.active {

    background-color: var(--color-accent);

    color: #fff;

}



/* Blog Grid Masonry */

.blog-grid-masonry {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 30px;

}



.blog-card-large, .blog-card-small {

    background: #ffffff;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.4s ease, box-shadow 0.4s ease;

    border: 1px solid rgba(0,0,0,0.05);

}



.blog-card-large:hover, .blog-card-small:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.08);

}



.blog-card-large {

    grid-column: span 2;

    grid-row: span 2;

}



.blog-img-wrapper {

    width: 100%;

    overflow: hidden;

    height: 220px;

    position: relative;

    background-color: var(--color-bg);

}



.blog-card-large .blog-img-wrapper {

    height: 380px;

}



.blog-img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.blog-card-large:hover .blog-img-wrapper img,

.blog-card-small:hover .blog-img-wrapper img {

    transform: scale(1.05);

}



.blog-card-content {

    padding: 30px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

}



.blog-card-large .blog-card-content {

    padding: 40px;

}



.blog-card-content .category {

    color: var(--color-accent);

    font-weight: 600;

    font-size: 0.85rem;

    letter-spacing: 1px;

    margin-bottom: 15px;

    text-transform: uppercase;

}



.blog-card-content h3 {

    font-family: var(--font-heading);

    color: var(--color-primary);

    margin-bottom: 15px;

    line-height: 1.3;

}



.blog-card-large .blog-card-content h3 {

    font-size: 2.2rem;

}



.blog-card-small .blog-card-content h3 {

    font-size: 1.4rem;

}



.blog-card-content .date {

    font-size: 0.9rem;

    color: var(--color-secondary);

    opacity: 0.8;

    margin-top: auto;

}



@media (min-width: 769px) {
    .blog-card-large {
        flex-direction: row;
    }
    .blog-card-large .blog-img-wrapper {
        width: 50%;
        height: 380px;
        flex-shrink: 0;
    }
    .blog-card-large .blog-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
    }
}



/* Footer Banners */

.footer-banners {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    height: 150px;

    background-color: var(--color-primary);

}

.banner-item {

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: #fff;

    transition: all 0.4s ease;

    border-right: 1px solid rgba(255,255,255,0.05);

}

.banner-item:last-child {

    border-right: none;

}

.banner-item:hover {

    background-color: rgba(255,255,255,0.05);

    transform: translateY(-2px);

}

.banner-item.fundacao { background-color: #121E29; }

.banner-item.academia { background-color: #162432; }

.banner-item.alumni { background-color: #1A2A3A; }



.banner-item.fundacao:hover { background-color: #182836; }

.banner-item.academia:hover { background-color: #1C2F40; }

.banner-item.alumni:hover { background-color: #213549; }



.banner-item h3 {

    font-size: 1.5rem;

    font-weight: 400;

    margin: 0;

    font-family: var(--font-heading);

    letter-spacing: 1px;

}

.banner-item small {

    font-size: 0.7rem;

    letter-spacing: 3px;

    color: var(--color-text-light);

    font-weight: 600;

}

.banner-content {

    display: flex;

    align-items: center;

    gap: 15px;

    transition: transform 0.3s ease;

}

.banner-item:hover .banner-content {

    transform: scale(1.02);

}

    gap: 15px;

}

.banner-logo {

    font-family: 'Cinzel', serif;

    font-size: 2.5rem;

    font-weight: bold;

}

.banner-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 2px dotted #fff;

    display: block;

}



/* ==========================================================================

   Insights Landing Page Styles

   ========================================================================== */



.insights-landing-section {

    background-color: #fafafa;

}



.insights-horizontal-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



.card-horizontal {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}



.card-horizontal:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

}



.card-horizontal-img {
    width: 100%;
    height: 220px;
    flex: none;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}



.card-horizontal-content {

    flex: 1;

    padding: 24px 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.card-horizontal-content .category {

    font-size: 0.75rem;

    color: var(--color-text);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;

    font-weight: 600;

}



.card-horizontal-content h3 {

    font-size: 1.3rem;

    font-family: var(--font-heading);

    margin-bottom: 20px;

    line-height: 1.3;

    color: var(--color-primary);

}



.card-horizontal-content .date {

    font-size: 0.85rem;

    color: #999;

    margin-top: auto;

}



/* Responsive adjustments for horizontal cards */

@media (max-width: 992px) {

    .insights-horizontal-list {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 576px) {

    .card-horizontal {

        flex-direction: column;

        height: auto;

    }

    .card-horizontal-img {

        height: 200px;

        flex: none;

    }

    .card-horizontal-content {

        padding: 20px;

    }

}



/* Team Grid Landpage */

.team-grid-3 {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.team-card-horizontal {

    display: flex;

    align-items: center;

    background: #fff;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    padding: 20px;

    border-radius: 4px;

    gap: 20px;

    text-decoration: none;

    transition: transform 0.3s, box-shadow 0.3s;

}



.team-card-horizontal:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

}



.team-card-img-placeholder {

    width: 90px;

    height: 110px;

    background-color: #f3f4f6;

    background-size: cover;

    background-position: center top;

    border-radius: 4px;

    flex-shrink: 0;

}



.team-card-content {

    flex: 1;

}



.team-card-content h4 {

    margin: 0 0 5px 0;

    color: var(--color-primary);

    font-size: 1.1rem;

    font-family: var(--font-body);

}



.team-card-content p {

    margin: 0;

    color: var(--color-accent);

    font-size: 0.85rem;

    font-weight: 500;

}



.letters-grid.page-filter a {

    cursor: pointer;

}

.letters-grid.page-filter a.active {

    background: var(--color-accent);

    color: #fff;

}



@media (max-width: 992px) {

    .team-grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .team-grid-3 {

        grid-template-columns: 1fr;

    }

}




/* ==========================================================================

   MEGA MENU MODERNIZATION (DARK GLASSMORPHISM)

   ========================================================================== */

.mega-menu-content {

    background: rgba(15, 20, 25, 0.95) !important;

    backdrop-filter: blur(15px) !important;

    -webkit-backdrop-filter: blur(15px) !important;

    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;

    padding: 40px !important;

    border-top: 3px solid var(--color-accent) !important;

    color: #fff !important;

}



.mega-menu-content .page-title {

    color: #ffffff !important;

}



.mega-menu-content .team-stats {

    color: rgba(255, 255, 255, 0.8) !important;

}



.mega-menu-content .team-search-area {

    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;

}



@media (max-width: 992px) {

    .mega-menu-content .team-search-area {

        border-left: none !important;

        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    }

}



.mega-menu-content label {

    color: rgba(255, 255, 255, 0.5) !important;

}



.mega-menu-content .input-group {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 4px;

}



.mega-menu-content .input-group input,

.mega-menu-content .input-group select {

    background: transparent !important;

    color: #ffffff !important;

    border: none !important;

}



.mega-menu-content .input-group select option {

    background: var(--color-primary);

    color: #fff;

}



.mega-menu-content .alphabet-letters span {

    color: rgba(255, 255, 255, 0.7) !important;

}



.mega-menu-content .alphabet-letters span:hover {

    color: var(--color-accent) !important;

}



.mega-menu-content .search-icon {

    color: rgba(255, 255, 255, 0.5) !important;

}

/* Cookie Popup */

.cookie-popup {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    max-width: 600px;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    border: 1px solid var(--color-border);

    border-radius: 8px;

    padding: 20px 30px;

    display: flex;

    flex-direction: column;

    gap: 15px;

    z-index: 9999;

    font-family: var(--font-body);

    transition: opacity 0.5s ease, transform 0.5s ease;

}

.cookie-popup.hidden {

    opacity: 0;

    transform: translate(-50%, 20px);

    pointer-events: none;

}

.cookie-text {

    font-size: 0.9rem;

    color: var(--color-primary);

    line-height: 1.5;

}

.cookie-text a {

    color: var(--color-accent);

    text-decoration: none;

    font-weight: 600;

}

.cookie-actions {

    display: flex;

    justify-content: flex-end;

    gap: 15px;

}

.cookie-btn {

    padding: 8px 20px;

    font-size: 0.85rem;

    font-weight: 600;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

    border: none;

}

.cookie-btn-accept {

    background-color: var(--color-accent);

    color: #fff;

}

.cookie-btn-accept:hover {

    opacity: 0.9;

}

.cookie-btn-settings {

    background-color: transparent;

    color: var(--color-secondary);

    border: 1px solid var(--color-border);

}

.cookie-btn-settings:hover {

    color: var(--color-primary);

    border-color: var(--color-primary);

}



/* Redesigned Footer CSS Overrides */

.site-footer {

    background-color: #f8f9fa; /* slightly off-white for contrast */

    border-top: 1px solid var(--color-border);

}

.footer-top {

    flex-direction: row !important;

    gap: 30px;

    border-bottom: 2px solid var(--color-border);

}

.contact-item {

    background: #fff;

    padding: 10px 20px;

    border-radius: 6px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.02);

}

.footer-links-bar {

    display: grid !important;

    grid-template-columns: 1fr 2fr 1fr;

    gap: 40px !important;

    align-items: start !important;

}

.join-pill {

    display: inline-block;

    padding: 12px 30px;

    font-size: 1rem;

    border-radius: 30px;

    text-align: center;

}

.legal-links {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px !important;

}

.fraud-link {

    display: flex;

    flex-direction: column;

    gap: 15px;

    text-align: right;

}

.fraud-link a {

    color: var(--color-secondary);

    font-size: 0.85rem;

    margin: 0 !important;

}

.fraud-link a:hover {

    color: var(--color-primary);

}

.fraud-link a[href*="admin"] {

    color: var(--color-accent) !important;

    text-decoration: underline;

}

@media (max-width: 992px) {

    .footer-links-bar {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .fraud-link {

        text-align: center;

    }

}


/* Legal Pages */

.legal-page {

    max-width: 900px;
    margin: 0 auto;
    padding-top: 100px;

    font-family: var(--font-body);

}

.legal-content {

    color: var(--color-primary);

    line-height: 1.8;

    font-size: 1.05rem;

    padding: 20px 0 60px 0;

}

.legal-content h2 {

    font-family: var(--font-heading);

    margin-top: 40px;

    margin-bottom: 15px;

    font-size: 1.8rem;

    color: var(--color-primary);

}

.legal-content h3 {

    margin-top: 30px;

    margin-bottom: 10px;

    font-size: 1.3rem;

}

.legal-content p {

    margin-bottom: 20px;

    color: var(--color-secondary);

}

.legal-content ul {

    margin-bottom: 20px;

    padding-left: 20px;

    color: var(--color-secondary);

}

.legal-content li {

    margin-bottom: 10px;

}


/* ========================================
   UNIFIED NAVBAR STYLES - ALL PAGES
   ======================================== */

/* Top-level nav links: dark text on white header */
.navbar .nav-links > li > a,
.navbar .nav-icon,
.navbar .current-lang,
.navbar .current-lang span {
    color: var(--color-primary) !important;
}

.navbar .nav-links > li > a:hover,
.navbar .nav-icon:hover {
    color: var(--color-accent) !important;
}

/* Logo always dark */
.navbar .logo-img {
    color: var(--color-primary) !important;
}
.navbar .logo-title,
.navbar .logo-subtitle {
    color: var(--color-primary) !important;
}

/* Dropdown links: WHITE text on dark dropdown background */
.dropdown-popup ul a,
.dropdown-popup .dropdown-content a,
.lang-dropdown ul a,
.lang-option {
    color: #ffffff !important;
}
.dropdown-popup ul a:hover,
.dropdown-popup .dropdown-content a:hover,
.lang-dropdown ul a:hover,
.lang-option:hover {
    color: var(--color-accent) !important;
}

/* MEGA MENU TEXT FIXES (white bg mega menu) */
.mega-menu-content .team-kicker,
.mega-menu-content .search-inputs label,
.mega-menu-content .alphabet-filter label {
    color: var(--color-secondary) !important;
}
.mega-menu-content .alphabet-filter a {
    color: #333333 !important;
}
.mega-menu-content input,
.mega-menu-content select {
    color: #333333 !important;
    background-color: transparent !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
}
.mega-menu-content input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
.mega-menu-content select option {
    color: #13293d !important;
}

.lang-dropdown { min-width: 80px !important; }
.lang-dropdown ul a { padding: 10px 20px !important; }

.lang-switcher:hover .lang-dropdown, .nav-item:hover .lang-dropdown { transform: translateY(0) !important; }
.lang-dropdown { left: auto !important; right: 0 !important; transform: translateY(20px) !important; }

/* ========================================
   MOBILE-FIRST & RESPONSIVE ENHANCEMENTS
   ======================================== */
.insights-subnav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 20px auto 30px auto !important;
    width: 100% !important;
}
.insights-subnav::-webkit-scrollbar {
    display: none !important;
}
@media (max-width: 768px) {
    .insights-subnav {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 4px 12px 4px !important;
        scrollbar-width: none !important;
    }
}
.insights-subnav a {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
}
.insights-subnav a:hover,
.insights-subnav a.active {
    background: var(--color-accent) !important;
    color: #ffffff !important;
}

@media (max-width: 992px) {
    .blog-grid-masonry {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }
    .card-horizontal {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
        background: #ffffff !important;
    }
    .card-horizontal-img {
        height: 240px !important;
        width: 100% !important;
        flex: none !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: #f8f9fa !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .card-horizontal-content {
        padding: 20px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: auto !important;
    }
    .card-horizontal-content .category {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: var(--color-accent) !important;
        margin-bottom: 12px !important;
    }
    .card-horizontal-content h3 {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        color: var(--color-primary) !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 768px) {
    .modal-content {
        padding: 22px 16px !important;
        max-width: 94% !important;
        width: 94% !important;
        border-radius: 14px !important;
        margin: 15px auto !important;
    }
    #modal-main-media {
        height: 200px !important;
        object-fit: contain !important;
    }
    .modal-content h2 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin: 10px 0 20px !important;
    }
    .post-content-html {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
}