:root {
    --primary-dark: #002b28;
    --primary-medium: #003d38;
    --primary-light: #004d47;
    --accent-teal: #e57e3a;
    --accent-gold: #cfb53b;
    --green: #2ecc71;
    --blue: #3498db;
    --orange: #e67e22;
    --purple: #9b59b6;
    --red: #e74c3c;
    --text-white: #ffffff;
    --text-dim: #aebdbb;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
}

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

body {
    font-family: 'Cairo', sans-serif;
}

body {
    font-family: "Cairo", sans-serif;
    background-color: var(--primary-dark);
    color: var(--text-white);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 90px;
    background: #001f1d;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-inline-end: 1px solid var(--border-color);
    z-index: 100;
    padding: 20px 0;
}


.logo-area {
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo-area img {
    height: 30px;
}

.logo-area img {
    height: 30px;
}

.nav-icons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    width: 100%;
    align-items: center;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 5px 0;
}

.nav-icons::-webkit-scrollbar {
    display: none;
}

.nav-icons::-webkit-scrollbar {
    display: none;
}

.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-teal);
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-teal);
}

.nav-btn.active {
    background: var(--accent-teal);
    color: var(--primary-dark);
    box-shadow: 0 0 15px rgba(156, 235, 200, 0.3);
}


.nav-btn::after {
    content: attr(title);
    position: absolute;
    inset-inline-start: 70px;
    background: var(--accent-teal);
    color: var(--primary-dark);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
}

.nav-btn:hover::after {
    opacity: 1;
}

.nav-btn:hover::after {
    opacity: 1;
}

.back-home-btn {
    margin-top: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.back-home-btn:hover {
    background: var(--accent-gold);
    color: var(--primary-dark);
}

.back-home-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.content-area {
    flex: 1;
    position: relative;
    background: radial-gradient(circle at top left, #0a4540, var(--primary-dark), #001a18);
    overflow: hidden;
}

.content-area {
    flex: 1;
    position: relative;
    background: radial-gradient(circle at top left,
            #0a4540,
            var(--primary-dark),
            #001a18);
    overflow: hidden;
}

.content-section {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
    padding: 40px;
}

.content-section.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.content-section::-webkit-scrollbar {
    width: 6px;
}

.content-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.content-section::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 3px;
}

.section-er {
    margin-bottom: 30px;
    text-align: center;
}

.section-er h1 {
    font-size: 36px;
    color: var(--accent-teal);
    margin-bottom: 10px;
}

.section-er p {
    color: var(--text-dim);
    font-size: 16px;
}

/* ===== OVERVIEW SECTION ===== */
.sustainability-hero {
    background: linear-gradient(135deg,
            rgba(46, 204, 113, 0.1),
            rgba(0, 77, 71, 0.2));
    border-radius: 25px;
    padding: 60px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(229, 126, 58, 0.2);
}

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-teal);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 8s infinite ease-in-out;
}

.particle:nth-child(1) {
    inset-inline-end: 10%;
    top: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    inset-inline-end: 30%;
    top: 60%;
    animation-delay: 2s;
}

.particle:nth-child(3) {
    inset-inline-end: 50%;
    top: 30%;
    animation-delay: 4s;
}

.particle:nth-child(4) {
    inset-inline-end: 70%;
    top: 70%;
    animation-delay: 1s;
}

.particle:nth-child(5) {
    inset-inline-end: 90%;
    top: 40%;
    animation-delay: 3s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-20px) translateX(10px);
    }

    50% {
        transform: translateY(-40px) translateX(-10px);
    }

    75% {
        transform: translateY(-20px) translateX(10px);
    }
}

.hero-content-sust {
    position: relative;
    z-index: 1;
}

.sust-badge {
    display: inline-block;
    background: var(--green);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 20px;
}

.sustainability-hero h1 {
    font-size: 48px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--accent-teal), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sust-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.sust-highlights>* {
    flex: 1 1 calc(25% - 15px);
    min-width: 220px;
}

.highlight-box {
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.highlight-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0.1;
}

.highlight-box.green {
    background: linear-gradient(135deg, var(--green), #27ae60);
}

.highlight-box.blue {
    background: linear-gradient(135deg, var(--blue), #2980b9);
}

.highlight-box.orange {
    background: linear-gradient(135deg, var(--orange), #d35400);
}

.highlight-box.purple {
    background: linear-gradient(135deg, var(--purple), #8e44ad);
}

.highlight-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


.highlight-box.green {
    background: linear-gradient(135deg, var(--green), #27ae60);
}

.highlight-box.blue {
    background: linear-gradient(135deg, var(--blue), #2980b9);
}

.highlight-box.orange {
    background: linear-gradient(135deg, var(--orange), #d35400);
}

.highlight-box.purple {
    background: linear-gradient(135deg, var(--purple), #8e44ad);
}

.highlight-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.highlight-icon-large {
    font-size: 50px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}




.highlight-number {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}




.highlight-label {
    font-size: 15px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}




.highlight-trend {
    font-size: 12px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}




.sdg-commitment {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}




.sdg-commitment h2 {
    color: var(--accent-teal);
    margin-bottom: 15px;
}




.sdg-commitment p {
    color: var(--text-dim);
    margin-bottom: 30px;
}




.sdg-goals {
    display: flex;
    justify-content: center;
    gap: 20px;
}




.sdg-goal {
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}


.sdg-goal:hover {
    transform: translateY(-5px);
}


.sdg-goal:hover {
    transform: translateY(-5px);
}

.sdg-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-teal), var(--green));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto 10px;
}




.sdg-goal span {
    font-size: 12px;
    color: var(--text-dim);
}


/* ===== VISION SECTION ===== */


.vision-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.vision-statement {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}




.vision-statement>* {
    flex: 0 0 calc(50% - (30px / 2));
    max-width: calc(50% - (30px / 2));
}




.statement-box {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}




.statement-box h3 {
    color: var(--accent-teal);
    margin-bottom: 20px;
    font-size: 24px;
}




.statement-box p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dim);
}




.pillars-grid h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}




.pillars>* {
    flex: 0 0 calc(25.0000% - (25px * 3 / 4));
    max-width: calc(25.0000% - (25px * 3 / 4));
    min-width: calc(25.0000% - (25px * 3 / 4));
}




.pillar-card {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.pillar-card:hover {
    border-color: var(--accent-teal);
    transform: translateY(-5px);
}




.pillar-icon {
    font-size: 50px;
    margin-bottom: 20px;
}




.pillar-card h4 {
    margin-bottom: 15px;
    color: var(--accent-teal);
}




.pillar-card p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 20px;
}


.pillar-progress {
    margin-top: 20px;
}


.pillar-progress {
    margin-top: 20px;
}

.progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);

    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}




.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-teal), var(--green));
    transition: width 1s ease;
}




.pillar-progress span {
    font-size: 12px;
    color: var(--text-dim);
}


/* ===== ENVIRONMENT SECTION ===== */


.environment-initiatives {
    display: flex;
    flex-direction: column;
    gap: 30px;
}




.initiative-featured {
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
}




.initiative-image {
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}



.initiative-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 70%);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
}




.initiative-badge {
    display: inline-block;
    background: var(--green);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 15px;
    align-self: flex-start;
}




.initiative-overlay h3 {
    font-size: 32px;
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.initiatives-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.initiatives-grid>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}




.initiative-card {
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.initiative-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-teal);
}




.init-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
}


.init-icon.green {
    background: rgba(46, 204, 113, 0.2);
}

.init-icon.blue {
    background: rgba(52, 152, 219, 0.2);
}

.init-icon.purple {
    background: rgba(155, 89, 182, 0.2);
}

.init-icon.orange {
    background: rgba(230, 126, 34, 0.2);
}


.init-icon.green {
    background: rgba(46, 204, 113, 0.2);
}

.init-icon.blue {
    background: rgba(52, 152, 219, 0.2);
}

.init-icon.purple {
    background: rgba(155, 89, 182, 0.2);
}

.init-icon.orange {
    background: rgba(230, 126, 34, 0.2);
}

.initiative-card h4 {
    margin-bottom: 15px;
    color: var(--accent-teal);
}




.init-stats-row {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}


.stat-item {
    flex: 1;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
}


.stat-item {
    flex: 1;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
}

.stat-item strong {
    display: block;
    font-size: 20px;
    color: var(--accent-teal);
    margin-bottom: 5px;
}




.stat-item span {
    font-size: 11px;
    color: var(--text-dim);
}




.initiative-card p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== ENERGY SECTION ===== */


.energy-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}


.energy-dashboard>*:nth-child(2) {
    flex: 1.5;
}


.energy-dashboard>*:nth-child(1) {
    flex: 1;
}




.energy-mix,
.energy-projects {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}




.energy-mix h3,
.energy-projects h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
}




.energy-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}




.donut-chart {
    width: 200px;
    height: 200px;
}




.energy-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}




.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}




.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}


.legend-color.renewable {
    background: var(--accent-teal);
}

.legend-color.traditional {
    background: var(--accent-gold);
}


.legend-color.renewable {
    background: var(--accent-teal);
}

.legend-color.traditional {
    background: var(--accent-gold);
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.project-item {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
}


.project-item {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
}

.project-icon {
    font-size: 40px;
    flex-shrink: 0;
}


.project-info {
    flex: 1;
}

.project-info h4 {
    margin-bottom: 8px;
}


.project-info {
    flex: 1;
}

.project-info h4 {
    margin-bottom: 8px;
}

.project-info p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 10px;
}




.project-capacity {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}


.project-capacity strong {
    color: var(--accent-teal);
}


.project-capacity strong {
    color: var(--accent-teal);
}

.energy-savings {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.energy-savings h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.savings-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.savings-cards>* {
    flex: 0 0 calc(33.3333% - (20px * 2 / 3));
    max-width: calc(33.3333% - (20px * 2 / 3));
    min-width: calc(33.3333% - (20px * 2 / 3));
}



.saving-card {
    background: rgba(0, 0, 0, 0.2);

    padding: 30px;
    border-radius: 15px;
    text-align: center;
}




.saving-number {
    font-size: 36px;
    font-weight: bold;
    color: var(--accent-teal);
    margin-bottom: 10px;
}




.saving-label {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== CARBON SECTION ===== */


.carbon-journey {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}


.carbon-journey>* {
    flex: 1;
}




.journey-timeline,
.emissions-data {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}




.journey-timeline h3,
.emissions-data h3 {
    color: var(--accent-teal);
    margin-bottom: 30px;
}




.timeline {
    display: flex;
    flex-direction: column;
    gap: 25px;
}




.timeline-item {
    display: flex;
    gap: 20px;
    position: relative;
}


.timeline-item::before {
    content: '';

    .timeline-item::before {
        content: "";

        position: absolute;
        inset-inline-end: 20px;
        top: 40px;
        width: 2px;

        height: calc(100% + 15px);
        background: var(--border-color);
    }

    .timeline-item:last-child::before {
        display: none;
    }


    height: calc(100%+15px);
    background: var(--border-color);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.3);

    background: rgba(0, 0, 0, 0.3);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    font-size: 18px;
}




.timeline-item.completed .timeline-marker {
    background: var(--green);
    border-color: var(--green);
}




.timeline-item.active .timeline-marker {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    animation: pulse 2s infinite;
}


@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(156, 235, 200, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(156, 235, 200, 0);
    }
}


@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(156, 235, 200, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(156, 235, 200, 0);
    }
}

.timeline-content h4 {
    margin-bottom: 8px;
    color: var(--accent-teal);
}




.timeline-content p {
    font-size: 13px;
    color: var(--text-dim);
}




.emissions-chart {
    display: flex;
    flex-direction: column;
}




.chart-bars {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 250px;
    margin-bottom: 15px;
}




.year-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}




.year-bar .bar {
    width: 40px;
    background: linear-gradient(to top, var(--accent-teal), var(--green));
    border-radius: 8px 8px 0 0;
    position: relative;
    transition: height 0.5s ease;
}




.year-bar .bar span {
    position: absolute;
    top: -25px;
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-teal);
}




.bar-label {
    font-size: 12px;
    color: var(--text-dim);
}




.chart-unit {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}




.carbon-offset {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.carbon-offset h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.offset-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.offset-methods>* {
    flex: 0 0 calc(33.3333% - (20px * 2 / 3));
    max-width: calc(33.3333% - (20px * 2 / 3));
    min-width: calc(33.3333% - (20px * 2 / 3));
}


.offset-method {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
}




.method-icon {
    font-size: 40px;
    margin-bottom: 15px;
}




.offset-method h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.offset-method p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== WATER SECTION ===== */


.water-management {
    display: flex;
    flex-direction: column;
    gap: 30px;
}




.water-stats-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.water-stats-dashboard>* {
    flex: 0 0 calc(33.3333% - (20px * 2 / 3));
    max-width: calc(33.3333% - (20px * 2 / 3));
    min-width: calc(33.3333% - (20px * 2 / 3));
}




.water-stat-card {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
}




.water-stat-card .stat-icon {
    font-size: 40px;
    margin-bottom: 15px;
}




.water-stat-card .stat-value {
    font-size: 42px;
    font-weight: bold;
    color: var(--accent-teal);
    margin-bottom: 10px;
}




.water-stat-card .stat-label {
    font-size: 15px;
    margin-bottom: 8px;
}




.water-stat-card .stat-detail {
    font-size: 12px;
    color: var(--text-dim);
}




.water-initiatives-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.water-initiatives-grid>* {
    flex: 0 0 calc(50.0000% - (20px * 1 / 2));
    max-width: calc(50.0000% - (20px * 1 / 2));
    min-width: calc(50.0000% - (20px * 1 / 2));
}




.water-init {
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
}




.water-init h4 {
    margin-bottom: 12px;
    color: var(--accent-teal);
}




.water-init p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 15px;
}




.init-metrics {
    display: flex;
    gap: 15px;
}

.init-metrics span {
    background: rgba(0, 0, 0, 0.2);

    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--accent-teal);
}


/* ===== WASTE SECTION ===== */


.waste-management {
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.waste-hierarchy {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
}




.waste-hierarchy h3 {
    color: var(--accent-teal);
    margin-bottom: 30px;
    text-align: center;
}




.pyramid {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}




.pyramid-level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.3s;
}


.pyramid-level:hover {
    transform: scale(1.02);
}

.level-1 {
    background: linear-gradient(90deg, var(--green), #27ae60);
    width: 100%;
}

.level-2 {
    background: linear-gradient(90deg, var(--blue), #2980b9);
    width: 90%;
    margin: 0 auto;
}

.level-3 {
    background: linear-gradient(90deg, var(--accent-teal), #76d7c4);
    width: 80%;
    margin: 0 auto;
}

.level-4 {
    background: linear-gradient(90deg, var(--orange), #d35400);
    width: 70%;
    margin: 0 auto;
}

.level-5 {
    background: linear-gradient(90deg, var(--red), #c0392b);
    width: 60%;
    margin: 0 auto;
}

.level-title {
    font-weight: bold;
}


.pyramid-level:hover {
    transform: scale(1.02);
}

.level-1 {
    background: linear-gradient(90deg, var(--green), #27ae60);
    width: 100%;
}

.level-2 {
    background: linear-gradient(90deg, var(--blue), #2980b9);
    width: 90%;
    margin: 0 auto;
}

.level-3 {
    background: linear-gradient(90deg, var(--accent-teal), #76d7c4);
    width: 80%;
    margin: 0 auto;
}

.level-4 {
    background: linear-gradient(90deg, var(--orange), #d35400);
    width: 70%;
    margin: 0 auto;
}

.level-5 {
    background: linear-gradient(90deg, var(--red), #c0392b);
    width: 60%;
    margin: 0 auto;
}

.level-title {
    font-weight: bold;
}

.level-percent {
    font-weight: bold;
    font-size: 18px;
}




.recycling-programs {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.recycling-programs h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.programs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.programs-grid>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}



.program-card {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.program-card:hover {
    border-color: var(--accent-teal);
    transform: translateY(-3px);
}




.program-icon {
    font-size: 40px;
    margin-bottom: 15px;
}


.program-card h4 {
    margin-bottom: 15px;
}

.program-stat {
    margin: 15px 0;
}


.program-card h4 {
    margin-bottom: 15px;
}

.program-stat {
    margin: 15px 0;
}

.program-stat strong {
    font-size: 28px;
    color: var(--accent-teal);
    display: block;
    margin-bottom: 5px;
}




.program-stat span {
    font-size: 12px;
    color: var(--text-dim);
}




.program-impact {
    font-size: 12px;
    color: var(--green);
    margin-top: 10px;
}




.waste-innovation {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.waste-innovation h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.innovations {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.innovations>* {
    flex: 0 0 calc(33.3333% - (20px * 2 / 3));
    max-width: calc(33.3333% - (20px * 2 / 3));
    min-width: calc(33.3333% - (20px * 2 / 3));
}



.innovation-item {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
}




.innov-emoji {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}




.innovation-item h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.innovation-item p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== BIODIVERSITY SECTION ===== */


.biodiversity-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}




.biodiversity-hero-section {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}




.bio-hero-text h3 {
    color: var(--accent-teal);
    margin-bottom: 15px;
}




.habitats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}




.habitats-grid>* {
    flex: 0 0 calc(33.3333% - (25px * 2 / 3));
    max-width: calc(33.3333% - (25px * 2 / 3));
    min-width: calc(33.3333% - (25px * 2 / 3));
}




.habitat-card {
    background: var(--glass-bg);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.habitat-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-teal);
}




.habitat-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}


.habitat-info {
    padding: 20px;
}


.habitat-info {
    padding: 20px;
}

.habitat-info h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.habitat-info p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 15px;
}




.habitat-stats {
    display: flex;
    gap: 10px;
}


.habitat-stats span {
    background: rgba(0, 0, 0, 0.2);

    padding: 6px 12px;
    border-radius: 15px;
    font-size: 11px;
}




.species-protection {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.species-protection h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.species-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.species-item {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
}


.species-item {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
}

.species-icon {
    font-size: 40px;
    flex-shrink: 0;
}




.species-details h5 {
    margin-bottom: 8px;
    color: var(--accent-teal);
}




.species-details p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== SOCIAL SECTION ===== */


.social-responsibility {
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.programs-showcase {
    display: flex;
    flex-direction: column;
    gap: 25px;
}




.social-program {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
}


.featured-program {
    border-color: var(--accent-teal);
}


.featured-program {
    border-color: var(--accent-teal);
}

.program-er {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}


.program-icon-large {
    font-size: 50px;
}


.program-icon-large {
    font-size: 50px;
}

.program-achievements {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}




.achievement {
    text-align: center;
    flex: 1;
}




.achievement strong {
    display: block;
    font-size: 32px;
    color: var(--accent-teal);
    margin-bottom: 5px;
}




.achievement span {
    font-size: 13px;
    color: var(--text-dim);
}




.programs-grid-social {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.programs-grid-social>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}




.social-program-card {
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.social-program-card:hover {
    border-color: var(--accent-teal);
    transform: translateY(-3px);
}




.sp-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}




.social-program-card h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.social-program-card p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 15px;
}




.sp-impact {
    font-size: 12px;
    color: var(--green);
}




.employee-wellbeing {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.employee-wellbeing h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.wellbeing-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.wellbeing-items>* {
    flex: 0 0 calc(33.3333% - (20px * 2 / 3));
    max-width: calc(33.3333% - (20px * 2 / 3));
    min-width: calc(33.3333% - (20px * 2 / 3));
}



.wellbeing-item {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
}




.wb-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}




.wellbeing-item h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.wellbeing-item p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== SUPPLY CHAIN SECTION ===== */


.supply-chain-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.supplier-standards {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.supplier-standards h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.standards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.standards-grid>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}



.standard-item {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
}




.standard-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}




.standard-item h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.standard-item p {
    font-size: 13px;
    color: var(--text-dim);
}




.local-sourcing {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
}




.local-sourcing h3 {
    color: var(--accent-teal);
    margin-bottom: 30px;
    text-align: center;
}




.sourcing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}




.sourcing-stats>*:nth-child(2) {
    flex: 2;
}




.sourcing-stats>*:nth-child(1) {
    flex: 1;
}




.sourcing-circle {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}




.sourcing-benefits h4 {
    color: var(--accent-teal);
    margin-bottom: 15px;
}




.sourcing-benefits ul {
    list-style: none;
    padding: 0;
}


.sourcing-benefits li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}


.sourcing-benefits li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.supplier-development {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.supplier-development h3 {
    color: var(--accent-teal);
    margin-bottom: 15px;
    text-align: center;
}




.supplier-development p {
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 30px;
}




.development-programs {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}




.development-programs>* {
    flex: 0 0 calc(33.3333% - (25px * 2 / 3));
    max-width: calc(33.3333% - (25px * 2 / 3));
    min-width: calc(33.3333% - (25px * 2 / 3));
}


.dev-program {
    background: rgba(0, 0, 0, 0.2);
    padding: 25px;
    border-radius: 15px;
}


.dev-program {
    background: rgba(0, 0, 0, 0.2);
    padding: 25px;
    border-radius: 15px;
}

.dev-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--accent-teal);
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 15px;
}




.dev-program h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.dev-program p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== INNOVATION SECTION ===== */


.green-innovation {
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.innovation-lab {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
}




.innovation-lab h3 {
    color: var(--accent-teal);
    margin-bottom: 15px;
    text-align: center;
}




.innovation-lab>p {
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 30px;
}




.lab-projects {
    display: flex;
    flex-direction: column;
    gap: 20px;
}



.lab-project {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    position: relative;
}




.project-status {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
}


.project-status.inprogress {
    background: var(--blue);
    color: white;
}

.project-status.pilot {
    background: var(--orange);
    color: white;
}

.project-status.research {
    background: var(--purple);
    color: white;
}


.project-status.inprogress {
    background: var(--blue);
    color: white;
}

.project-status.pilot {
    background: var(--orange);
    color: white;
}

.project-status.research {
    background: var(--purple);
    color: white;
}

.lab-project h4 {
    margin: 10px 0 10px 0;
    color: var(--accent-teal);
}




.lab-project p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 15px;
}



.project-progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);

    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}




.progress-fill-green {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--accent-teal));
    transition: width 1s ease;
}




.progress-text {
    font-size: 12px;
    color: var(--text-dim);
}




.digital-solutions {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.digital-solutions h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.digital-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.digital-grid>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}



.digital-card {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.digital-card:hover {
    border-color: var(--accent-teal);
    transform: translateY(-3px);
}




.digital-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}




.digital-card h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
    font-size: 14px;
}




.digital-card p {
    font-size: 12px;
    color: var(--text-dim);
}




.partnerships-innovation {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.partnerships-innovation h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.partners-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.partner-item {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
}


.partner-item {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
}

.partner-logo {
    font-size: 40px;
    flex-shrink: 0;
}




.partner-info h5 {
    margin-bottom: 5px;
    color: var(--accent-teal);
}




.partner-info p {
    font-size: 13px;
    color: var(--text-dim);
}


/* ===== REPORTS SECTION ===== */


.reports-certifications {
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.sustainability-reports {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.sustainability-reports h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.reports-list-sust {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}




.reports-list-sust>* {
    flex: 0 0 calc(33.3333% - (25px * 2 / 3));
    max-width: calc(33.3333% - (25px * 2 / 3));
    min-width: calc(33.3333% - (25px * 2 / 3));
}



.report-card-sust {
    background: rgba(0, 0, 0, 0.2);

    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}




.report-card-sust:hover {
    transform: translateY(-5px);
    border-color: var(--accent-teal);
}




.report-cover {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}




.report-year {
    font-size: 48px;
    font-weight: bold;
    color: white;
}


.report-info-sust {
    padding: 20px;
}


.report-info-sust {
    padding: 20px;
}

.report-info-sust h4 {
    margin-bottom: 10px;
    color: var(--accent-teal);
}




.report-info-sust p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 15px;
}




.report-meta-sust {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 12px;
    color: var(--text-dim);
}




.download-report {
    width: 100%;
    background: var(--accent-teal);
    color: var(--primary-dark);
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}


.download-report:hover {
    background: var(--green);
}


.download-report:hover {
    background: var(--green);
}

.certifications {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
}




.certifications h3 {
    color: var(--accent-teal);
    margin-bottom: 25px;
    text-align: center;
}




.certs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.certs-grid>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}


.cert-card {
    background: rgba(0, 0, 0, 0.2);

    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}


.cert-card:hover {
    border-color: var(--green);
}


.cert-card:hover {
    border-color: var(--green);
}

.cert-badge {
    width: 80px;
    height: 80px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}




.cert-icon {
    font-size: 40px;
    color: white;
}




.cert-card h4 {
    margin-bottom: 8px;
    color: var(--accent-teal);
}




.cert-card p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 10px;
}




.cert-year {
    font-size: 11px;
    color: var(--green);
}




.transparency-section {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}




.transparency-section h3 {
    color: var(--accent-teal);
    margin-bottom: 15px;
}




.transparency-section p {
    color: var(--text-dim);
    margin-bottom: 30px;
}




.disclosure-frameworks {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.disclosure-frameworks>* {
    flex: 0 0 calc(25.0000% - (20px * 3 / 4));
    max-width: calc(25.0000% - (20px * 3 / 4));
    min-width: calc(25.0000% - (20px * 3 / 4));
}


.framework {
    background: rgba(0, 0, 0, 0.2);

    .framework {
        background: rgba(0, 0, 0, 0.2);

        padding: 20px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }




    .framework strong {
        color: var(--accent-teal);
        font-size: 16px;
    }




    .framework span {
        font-size: 12px;
        color: var(--text-dim);
    }


    /* ===== RESPONSIVE ===== */


    @media (max-width: 1024px) {
        .sust-highlights,
        .pillars,
        .initiatives-grid,
        .programs-grid,
        .standards-grid,
        .digital-grid,

        .certs-grid {}

        .sust-highlights>*,
        .pillars>*,
        .initiatives-grid>*,
        .programs-grid>*,
        .standards-grid>*,
        .digital-grid>*,
        .certs-grid>* {
            flex: 0 0 calc(50.0000% - (25px * 1 / 2));
            max-width: calc(50.0000% - (25px * 1 / 2));
            min-width: calc(50.0000% - (25px * 1 / 2));
        }

        .sdg-goals {
            flex-wrap: wrap;
        }

        .vision-statement {}

        .vision-statement>* {
            flex: 1 1 auto;
        }

        .energy-dashboard,
        .carbon-journey {}

        .energy-dashboard>*,
        .carbon-journey>* {
            flex: 1 1 auto;
        }
    }

    /* ===== BOTTOM NAV EXTENDED (10 Items) ===== */

    .certs-grid {}

    .certs-grid>* {
        flex: 0 0 calc(50.0000% - (25px * 1 / 2));
        max-width: calc(50.0000% - (25px * 1 / 2));
        min-width: calc(50.0000% - (25px * 1 / 2));
    }

    .sdg-goals {
        flex-wrap: wrap;
    }

    .vision-statement {}

    .vision-statement>* {
        flex: 1 1 auto;
    }

    .energy-dashboard,
    .carbon-journey {}
}


.framework>* {
    flex: 1 1 auto;
}

.bottom-nav-extended {
    position: fixed;
    bottom: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    background: rgba(81, 76, 82, 0.7) !important;
    backdrop-filter: blur(10px);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 5px;
    border-top: 1px solid rgba(229, 126, 58, 0.2);
    z-index: 1000;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

.bottom-nav-extended>* {
    flex: 0 0 calc(10.0000% - (2px * 9 / 10));
    max-width: calc(10.0000% - (2px * 9 / 10));
    min-width: calc(10.0000% - (2px * 9 / 10));
}




.nav-item-ext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s ease;
    color: var(--text-dim);
    position: relative;
}




.nav-item-ext:hover {
    background: rgba(156, 235, 200, 0.1);
    color: var(--accent-teal);
    transform: translateY(-2px);
}




.nav-item-ext.active {
    background: rgba(156, 235, 200, 0.15);
    color: var(--accent-teal);
}


.nav-item-ext svg {
    flex-shrink: 0;
}


.nav-item-ext svg {
    flex-shrink: 0;
}

.nav-item-ext span {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}



.nav-item-ext.nav-more::after {
    content: "";

    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: pulse 2s infinite;
}


/* ===== EXTENDED MENU POPUP ===== */


.extended-menu-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}




.extended-menu-popup.active {
    pointer-events: auto;
    opacity: 1;
}




.extended-menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}




.extended-menu-content {
    position: absolute;
    bottom: 60px;
    inset-inline-end: 0;
    inset-inline-start: 0;
    max-height: 75vh;
    background: var(--primary-dark);
    border-radius: 25px 25px 0 0;
    padding: 25px 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}


.extended-menu-popup.active .extended-menu-content {
    transform: translateY(0);
}


.extended-menu-popup.active .extended-menu-content {
    transform: translateY(0);
}

.extended-menu-er {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(229, 126, 58, 0.2);
}




.extended-menu-er h3 {
    color: var(--accent-teal);
    font-size: 20px;
    font-weight: bold;
}




.close-extended-menu {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s;
}




.close-extended-menu:hover {
    background: var(--accent-teal);
    color: var(--primary-dark);
    transform: rotate(90deg);
}




.extended-menu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}




.extended-menu-grid>* {
    flex: 0 0 calc(50.0000% - (20px * 1 / 2));
    max-width: calc(50.0000% - (20px * 1 / 2));
    min-width: calc(50.0000% - (20px * 1 / 2));
}




.extended-menu-section h4 {
    color: var(--accent-teal);
    font-size: 13px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}




.extended-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-white);
    transition: all 0.3s;
    border: 1px solid transparent;
    margin-bottom: 8px;
}




.extended-menu-link:hover {
    background: rgba(156, 235, 200, 0.1);
    border-color: var(--accent-teal);
    transform: translateX(-3px);
}




.extended-menu-link .link-icon {
    font-size: 22px;
    flex-shrink: 0;
}




.extended-menu-link span:last-child {
    font-size: 14px;
    font-weight: 500;
}




.extended-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}




.extended-quick-actions>* {
    flex: 0 0 calc(50.0000% - (10px * 1 / 2));
    max-width: calc(50.0000% - (10px * 1 / 2));
    min-width: calc(50.0000% - (10px * 1 / 2));
}




.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--accent-teal);
    color: var(--primary-dark);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s;
}




.quick-action-btn:hover {
    background: var(--text-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(156, 235, 200, 0.3);
}


/* Scrollbar */
.extended-menu-content::-webkit-scrollbar {
    width: 6px;
}

.extended-menu-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}


.extended-menu-content::-webkit-scrollbar {
    width: 6px;
}

.extended-menu-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.extended-menu-content::-webkit-scrollbar-thumb {
    background: var(--accent-teal);
    border-radius: 3px;
}


/* ===== RESPONSIVE ===== */


@media (max-width: 1024px) {
    .bottom-nav-extended {}

    .bottom-nav-extended>* {
        flex: 0 0 calc(20.0000% - (25px * 4 / 5));
        max-width: calc(20.0000% - (25px * 4 / 5));
        min-width: calc(20.0000% - (25px * 4 / 5));
    }


    .nav-item-ext:nth-child(n+6) {
        display: none;
    }


    .nav-item-ext:nth-child(n + 6) {
        display: none;
    }

    .nav-item-ext.nav-more {
        display: flex;
    }
}




@media (max-width: 768px) {
    .bottom-nav-extended {
        padding: 6px 3px;
    }

    .bottom-nav-extended>* {
        flex: 0 0 calc(20.0000% - (25px * 4 / 5));
        max-width: calc(20.0000% - (25px * 4 / 5));
        min-width: calc(20.0000% - (25px * 4 / 5));
    }


    .nav-item-ext {
        padding: 6px 2px;
    }

    .nav-item-ext span {
        font-size: 9px;
    }


    .nav-item-ext {
        padding: 6px 2px;
    }

    .nav-item-ext span {
        font-size: 9px;
    }

    .nav-item-ext svg {
        width: 18px;
        height: 18px;
    }


    .extended-menu-grid {}


    .extended-menu-grid>* {
        flex: 1 1 auto;
    }


    .extended-menu-grid {}


    .extended-menu-grid>* {
        flex: 1 1 auto;
    }

    .extended-menu-content {
        padding: 20px 15px;
        max-height: 80vh;
    }




    .extended-quick-actions {}




    .extended-quick-actions>* {
        flex: 1 1 auto;
    }
}




@media (max-width: 480px) {
    .bottom-nav-extended {}

    .bottom-nav-extended>* {
        flex: 0 0 calc(20.0000% - (25px * 4 / 5));
        max-width: calc(20.0000% - (25px * 4 / 5));
        min-width: calc(20.0000% - (25px * 4 / 5));
    }


    .nav-item-ext span {
        font-size: 8px;
    }

    .extended-menu-er h3 {
        font-size: 18px;
    }

    .extended-menu-link {
        padding: 10px;
    }


    .nav-item-ext span {
        font-size: 8px;
    }

    .extended-menu-er h3 {
        font-size: 18px;
    }

    .extended-menu-link {
        padding: 10px;
    }

    .quick-action-btn {
        font-size: 12px;
        padding: 10px;
    }
}


/* إخفاء القائمة القديمة على الصفحات الفرعية */
.bottom-nav {
    display: none;
}

/* تحسينات إضافية للقائمة الموسعة */


.bottom-nav {
    display: none;
}

.extended-menu-note {
    background: rgba(156, 235, 200, 0.1);
    border: 1px solid rgba(156, 235, 200, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    text-align: center;
}




.extended-menu-note p {
    color: var(--accent-teal);
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}


/* تمييز العناصر في القائمة المنبثقة */


.extended-menu-link.main-page {
    background: rgba(156, 235, 200, 0.08);
    border: 1px solid rgba(229, 126, 58, 0.2);
}


/* تحسين عرض الأيقونات في الموبايل */


@media (max-width: 768px) {
    .nav-item-ext span {
        font-size: 8.5px;
        max-width: 55px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* تحسين العرض على الشاشات الصغيرة جداً */


@media (max-width: 380px) {
    .bottom-nav-extended {
        padding: 5px 2px;
    }

    .bottom-nav-extended>* {
        flex: 0 0 calc(20.0000% - (25px * 4 / 5));
        max-width: calc(20.0000% - (25px * 4 / 5));
        min-width: calc(20.0000% - (25px * 4 / 5));
    }


    .nav-item-ext {
        padding: 5px 1px;
    }


    .nav-item-ext {
        padding: 5px 1px;
    }

    .nav-item-ext svg {
        width: 16px;
        height: 16px;
    }


    .nav-item-ext span {
        font-size: 7.5px;
    }

    /* إخفاء بعض العناصر على الشاشات الصغيرة جداً */
    .nav-item-ext:nth-child(n+6):not(.nav-more) {
        display: none;
    }
}

/* تأثير خاص للعناصر الرئيسية */
.nav-item-ext:nth-child(-n+9) {
    position: relative;
}

.nav-item-ext:nth-child(-n+9):hover::before {
    content: '';

    .nav-item-ext span {
        font-size: 7.5px;
    }

    .nav-item-ext:nth-child(n + 6):not(.nav-more) {
        display: none;
    }
}

.nav-item-ext:nth-child(-n + 9) {
    position: relative;
}

.nav-item-ext:nth-child(-n + 9):hover::before {
    content: "";

    position: absolute;
    top: 0;
    inset-inline-end: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--accent-teal);
    border-radius: 2px;
}


/* تحسين ترتيب العناصر في التابلت */


@media (max-width: 1024px) and (min-width: 769px) {
    .bottom-nav-extended {}

    .bottom-nav-extended>* {
        flex: 0 0 calc(20.0000% - (25px * 4 / 5));
        max-width: calc(20.0000% - (25px * 4 / 5));
        min-width: calc(20.0000% - (25px * 4 / 5));
    }


    /* إظهار أول 4 عناصر + المزيد */
    .nav-item-ext:nth-child(n+6):not(.nav-more) {
        display: none;
    }


    .nav-item-ext:nth-child(n + 6):not(.nav-more) {
        display: none;
    }

    .nav-item-ext.nav-more {
        display: flex;
    }
}


/* تحسين الظهور على الشاشات العريضة */


@media (min-width: 1400px) {
    .bottom-nav-extended {
        padding: 10px 20px;
        max-width: 1400px;
        margin: 0 auto;
        inset-inline-end: 50%;
        transform: translateX(-50%);
        border-radius: 20px 20px 0 0;
    }


    .nav-item-ext {
        padding: 10px 8px;
    }


    .nav-item-ext {
        padding: 10px 8px;
    }

    .nav-item-ext span {
        font-size: 11px;
    }
}

/* ===== تحديث متغيرات الألوان الرئيسية ===== */

:root {
    --primary-dark: #4a4a4a;
    --primary-medium: #5a5a5a;
    --primary-light: #6a6a6a;
    --accent-orange: #ff8c42;

    --accent-orange-light: #ffad70;
    --accent-orange-dark: #e67530;
    --text-white: #ffffff;
    --text-gray: #d1d1d1;
    --text-dim: #b0b0b0;
    --glass-bg: rgba(74, 74, 74, 0.05);
    --border-color: rgba(255, 140, 66, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
}


/* ===== الخلفية الرئيسية ===== */

body {
    font-family: "Cairo", sans-serif;

    background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
    color: var(--text-white);
    margin: 0;
    padding: 0;
}


/* ===== ER ===== */


.main-er {
    background: rgba(74, 74, 74, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--accent-orange);
    box-shadow: 0 4px 20px rgba(255, 140, 66, 0.2);
}




.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}




.logo-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* شعار درب بالألوان الصحيحة */


.logo-icon svg {
    width: 100%;
    height: 100%;
}




.logo-text {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-orange);
    text-shadow: 0 2px 10px rgba(255, 140, 66, 0.3);
}




.er-btn {
    background: var(--accent-orange);
    border: 2px solid var(--accent-orange);
    color: white;
    font-weight: 600;
    transition: all 0.3s;
}




.er-btn:hover {
    background: var(--accent-orange-dark);
    border-color: var(--accent-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 140, 66, 0.4);
}


/* ===== SIDEBAR ===== */


.map-sidebar {
    background: rgba(74, 74, 74, 0.95);
    backdrop-filter: blur(10px);
    border-inline-end: 2px solid var(--accent-orange);
}




.sidebar-title {
    color: var(--accent-orange);
    font-size: 24px;
    font-weight: bold;
}


.sidebar-subtitle {
    color: var(--text-dim);
}

/* ===== SEARCH BAR ===== */

.sidebar-subtitle {
    color: var(--text-dim);
}

.search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 140, 66, 0.3);
    color: var(--text-white);
}




.search-input:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.2);
}


/* ===== FILTERS ===== */


.filter-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 140, 66, 0.3);
    color: var(--text-white);
}




.filter-chip:hover {
    background: rgba(255, 140, 66, 0.2);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}




.filter-chip.active {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    box-shadow: 0 4px 15px rgba(255, 140, 66, 0.3);
}


/* ===== STATION CARD ===== */


.station-card {
    background: rgba(74, 74, 74, 0.6);
    border: 1px solid rgba(255, 140, 66, 0.2);
    transition: all 0.3s;
}




.station-card:hover {
    background: rgba(74, 74, 74, 0.8);
    border-color: var(--accent-orange);
    transform: translateX(-5px);
    box-shadow: 0 5px 20px rgba(255, 140, 66, 0.2);
}




.station-card.active {
    background: rgba(255, 140, 66, 0.15);
    border-color: var(--accent-orange);
    border-width: 2px;
}


.station-name {
    color: var(--text-white);
}

.station-location {
    color: var(--text-dim);
}


.station-name {
    color: var(--text-white);
}

.station-location {
    color: var(--text-dim);
}

.station-status {
    background: var(--accent-orange);
    color: white;
}


.station-status.closed {
    background: #e74c3c;
}


.station-status.closed {
    background: #e74c3c;
}

.action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 140, 66, 0.3);
    color: var(--text-white);
}




.action-btn:hover {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
}


/* ===== MAP CONTROLS ===== */


.map-control-btn {
    background: rgba(74, 74, 74, 0.95);
    border: 1px solid rgba(255, 140, 66, 0.3);
    color: var(--text-white);
}




.map-control-btn:hover {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    box-shadow: 0 5px 20px rgba(255, 140, 66, 0.4);
}


/* ===== CUSTOM MAP MARKERS ===== */


.custom-marker {
    background: var(--accent-orange);
    border: 3px solid white;
    box-shadow: 0 3px 15px rgba(255, 140, 66, 0.5);
}


.custom-marker:hover {
    box-shadow: 0 5px 25px rgba(255, 140, 66, 0.7);
}

/* ===== MAP POPUP ===== */

.custom-marker:hover {
    box-shadow: 0 5px 25px rgba(255, 140, 66, 0.7);
}

.leaflet-popup-content-wrapper {
    background: var(--primary-dark);
    color: white;
    border: 2px solid var(--accent-orange);
}


.leaflet-popup-tip {
    background: var(--primary-dark);
}

.popup-title {
    color: var(--accent-orange);
}

.popup-location {
    color: var(--text-dim);
}


.leaflet-popup-tip {
    background: var(--primary-dark);
}

.popup-title {
    color: var(--accent-orange);
}

.popup-location {
    color: var(--text-dim);
}

.popup-btn {
    background: var(--accent-orange);
    color: white;
    border: none;
}


.popup-btn:hover {
    background: var(--accent-orange-dark);
}

/* ===== 360 VIEWER ===== */
.viewer-360-modal {
    background: rgba(0, 0, 0, 0.95);
}

.viewer-title {
    color: var(--accent-orange);
}


.popup-btn:hover {
    background: var(--accent-orange-dark);
}

.viewer-360-modal {
    background: rgba(0, 0, 0, 0.95);
}

.viewer-title {
    color: var(--accent-orange);
}

.close-viewer-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 140, 66, 0.3);
}




.close-viewer-btn:hover {
    background: var(--accent-orange);
    color: white;
}




.viewer-controls {
    background: rgba(74, 74, 74, 0.95);
    border: 1px solid rgba(255, 140, 66, 0.3);
}




.viewer-control-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 140, 66, 0.2);
    color: var(--text-white);
}




.viewer-control-btn:hover,
.viewer-control-btn.active {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
}


.scene-thumbnail {
    border: 2px solid transparent;
}

.scene-thumbnail:hover {
    border-color: var(--accent-orange);
}


.scene-thumbnail {
    border: 2px solid transparent;
}

.scene-thumbnail:hover {
    border-color: var(--accent-orange);
}

.scene-thumbnail.active {
    border-color: var(--accent-orange);
    box-shadow: 0 0 20px rgba(255, 140, 66, 0.6);
}


/* ===== STATION INFO PANEL ===== */


.station-info-panel {
    background: rgba(74, 74, 74, 0.98);
    border: 2px solid var(--accent-orange);
}


.info-panel-title {
    color: var(--accent-orange);
}

.info-panel-location {
    color: var(--text-dim);
}

.info-row {
    border-bottom: 1px solid rgba(255, 140, 66, 0.2);
}

.info-label {
    color: var(--text-dim);
}


.info-panel-title {
    color: var(--accent-orange);
}

.info-panel-location {
    color: var(--text-dim);
}

.info-row {
    border-bottom: 1px solid rgba(255, 140, 66, 0.2);
}

.info-label {
    color: var(--text-dim);
}

.panel-action-btn {
    background: var(--accent-orange);
    color: white;
}




.panel-action-btn:hover {
    background: var(--accent-orange-dark);
    box-shadow: 0 4px 15px rgba(255, 140, 66, 0.4);
}




.panel-action-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
}


.panel-action-btn.secondary:hover {
    background: rgba(255, 140, 66, 0.2);
}

/* ===== CHATBOT ===== */
.chatbot-toggle {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
    box-shadow: 0 8px 30px rgba(255, 140, 66, 0.4);
}

.chatbot-toggle:hover {
    box-shadow: 0 12px 40px rgba(255, 140, 66, 0.6);
}

.chatbot-er {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
    border-bottom: 2px solid var(--accent-orange);
}

.bot-info h3 {
    color: var(--accent-orange);
}

.status-dot {
    background: var(--accent-orange);
}


.panel-action-btn.secondary:hover {
    background: rgba(255, 140, 66, 0.2);
}

.chatbot-toggle {
    background: linear-gradient(135deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%);
    box-shadow: 0 8px 30px rgba(255, 140, 66, 0.4);
}

.chatbot-toggle:hover {
    box-shadow: 0 12px 40px rgba(255, 140, 66, 0.6);
}

.chatbot-er {
    background: linear-gradient(135deg,
            var(--primary-dark) 0%,
            var(--primary-medium) 100%);
    border-bottom: 2px solid var(--accent-orange);
}

.bot-info h3 {
    color: var(--accent-orange);
}

.status-dot {
    background: var(--accent-orange);
}

.quick-action:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
}




.bot-message .message-bubble {
    background: rgba(74, 74, 74, 0.8);
    color: white;
    border: 1px solid rgba(255, 140, 66, 0.3);
}


.user-message .message-bubble {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
    color: white;
}

.send-btn {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
    color: white;
}

.send-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.4);
}


.user-message .message-bubble {
    background: linear-gradient(135deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%);
    color: white;
}

.send-btn {
    background: linear-gradient(135deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%);
    color: white;
}

.send-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.4);
}

.message-button {
    background: var(--accent-orange);
    color: white;
}




.message-button:hover {
    background: var(--accent-orange-dark);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
}


/* ===== SCROLLBAR ===== */


.stations-list::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
    border-radius: 3px;
}


.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
}

.chatbot-input::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
}

/* ===== LOADING ===== */

.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
}

.chatbot-input::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
}

.loading-spinner {
    border: 4px solid rgba(255, 140, 66, 0.2);
    border-top-color: var(--accent-orange);
}


/* ===== NOTIFICATIONS ===== */
.update-banner {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
    color: white;
}


.update-banner {
    background: linear-gradient(135deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%);
    color: white;
}

.notification-prompt {
    background: rgba(74, 74, 74, 0.98);
    border: 2px solid var(--accent-orange);
}


.prompt-text h3 {
    color: var(--accent-orange);
}


.prompt-text h3 {
    color: var(--accent-orange);
}

.btn-enable {
    background: var(--accent-orange);
    color: white;
}




.btn-enable:hover {
    background: var(--accent-orange-dark);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
}


.install-prompt {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
}


.install-prompt {
    background: linear-gradient(135deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%);
}

.btn-install {
    background: var(--primary-dark);
    color: var(--accent-orange);
}


.btn-install:hover {
    background: var(--primary-medium);
}

/* ===== FOOTER (إذا وجد) ===== */

.btn-install:hover {
    background: var(--primary-medium);
}

.footer {
    background: var(--primary-dark);
    border-top: 2px solid var(--accent-orange);
    color: var(--text-white);
}


.footer-title {
    color: var(--accent-orange);
}

.footer a {
    color: var(--text-dim);
}

.footer a:hover {
    color: var(--accent-orange);
}

/* ===== BUTTONS العامة ===== */

.footer-title {
    color: var(--accent-orange);
}

.footer a {
    color: var(--text-dim);
}

.footer a:hover {
    color: var(--accent-orange);
}

button:not(.er-btn):not(.action-btn):not(.send-btn) {
    background: var(--accent-orange);
    color: white;
    border: none;
}


button:not(.er-btn):not(.action-btn):not(.send-btn):hover {
    background: var(--accent-orange-dark);
}

/* ===== LINKS العامة ===== */

button:not(.er-btn):not(.action-btn):not(.send-btn):hover {
    background: var(--accent-orange-dark);
}

a {
    color: var(--accent-orange);
    text-decoration: none;
}


a:hover {
    color: var(--accent-orange-light);
}

/* ===== GRADIENTS الإضافية ===== */
.gradient-orange {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
}

.gradient-gray {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
}

/* ===== SHADOWS ===== */
.shadow-orange {
    box-shadow: 0 5px 20px rgba(255, 140, 66, 0.3);
}

.shadow-orange-hover:hover {
    box-shadow: 0 8px 30px rgba(255, 140, 66, 0.5);
}

/* ===== تحديث شعار SVG ===== */
.logo-icon svg path:first-child {
    fill: var(--primary-dark);
    /* الجزء الرمادي */
}

.logo-icon svg path:last-child {
    fill: var(--accent-orange);
    /* الجزء البرتقالي */
}

/* ===== ANIMATIONS ===== */
@keyframes glow-orange {

    0%,
    100% {}
}

a:hover {
    color: var(--accent-orange-light);
}

.gradient-orange {
    background: linear-gradient(135deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%);
}

.gradient-gray {
    background: linear-gradient(135deg,
            var(--primary-dark) 0%,
            var(--primary-medium) 100%);
}

.shadow-orange {
    box-shadow: 0 5px 20px rgba(255, 140, 66, 0.3);
}

.shadow-orange-hover:hover {
    box-shadow: 0 8px 30px rgba(255, 140, 66, 0.5);
}

.logo-icon svg path:first-child {
    fill: var(--primary-dark);
}

.logo-icon svg path:last-child {
    fill: var(--accent-orange);
}

@keyframes glow-orange {

    0%,
    100% {

        box-shadow: 0 0 5px rgba(255, 140, 66, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 140, 66, 0.8);
    }
}


.glow-animation {
    animation: glow-orange 2s infinite;
}

/* ===== HOVER EFFECTS ===== */

.glow-animation {
    animation: glow-orange 2s infinite;
}

.hover-orange:hover {
    color: var(--accent-orange);
    transition: color 0.3s ease;
}




.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}


/* ===== BORDERS ===== */
.border-orange {
    border: 2px solid var(--accent-orange);
}

.border-gray {
    border: 1px solid rgba(255, 140, 66, 0.2);
}

/* ===== BACKGROUNDS ===== */
.bg-dark {
    background: var(--primary-dark);
}

.bg-orange {
    background: var(--accent-orange);
}

.bg-orange-light {
    background: rgba(255, 140, 66, 0.1);
}

/* ===== TEXT COLORS ===== */
.text-orange {
    color: var(--accent-orange);
}

.text-gray {
    color: var(--text-gray);
}

.text-dim {
    color: var(--text-dim);
}

.border-orange {
    border: 2px solid var(--accent-orange);
}

.border-gray {
    border: 1px solid rgba(255, 140, 66, 0.2);
}

.bg-dark {
    background: var(--primary-dark);
}

.bg-orange {
    background: var(--accent-orange);
}

.bg-orange-light {
    background: rgba(255, 140, 66, 0.1);
}

.text-orange {
    color: var(--accent-orange);
}

.text-gray {
    color: var(--text-gray);
}

.text-dim {
    color: var(--text-dim);
}