/* CSS Variables & Reset */
:root {
    --primary-color: #0f172a;
    /* Deep Navy */
    --primary-light: #1e293b;
    --accent-color: #d4af37;
    /* Gold */
    --accent-hover: #b4975a;
    --text-color: #334155;
    --text-light: #94a3b8;
    --white: #ffffff;
    --off-white: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);

    --font-main: 'Cairo', sans-serif;

    --header-height: 150px;
    --border-radius: 12px;
    --transition: all 0.3s ease;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--off-white);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white);
    border: 2px solid var(--accent-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--accent-color);
}

.btn-secondary {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    margin-right: 1rem;
}

.btn-secondary:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-gold {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: white;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

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

.section {
    padding: 5rem 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 60px;
    height: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.section-desc {
    color: var(--text-light);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    background-color: transparent;
}

.header.scrolled {
    background-color: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}


.header-container {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: height 0.3s ease;
}

.header.scrolled .header-container {
    height: 110px;
}

.logo img {
    height: 100px;
    object-fit: contain;
    transition: var(--transition);
}

.header.scrolled .logo img {
    height: 70px;
}


.nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: var(--white);
    /* Start white for Hero overlay */
    font-weight: 600;
    transition: var(--transition);
    position: relative;
}

/* Adjust nav link color when sticky if background is white? 
   Actually, our sticky header is dark, so text stays white. 
   But if the hero background is light before scroll... 
   Design Assumption: Hero is dark. */

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.btn-contact {
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 4px;
}

.btn-contact:hover {
    background-color: var(--accent-color);
    color: var(--white);
}

.nav-toggle {
    display: none;
    /* Hidden on Desktop */
}

.mobile-nav-overlay {
    display: none;
    /* Hidden on Desktop */
}


/* Hero Section */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Premium background: Dark gradient overlay + bg-2.jpg */
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.7)), url("./bg-2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}


/* Abstract Background Pattern */
.hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 20%);
    pointer-events: none;
}

.hero-content {
    text-align: center;
    z-index: 10;
    color: var(--white);
    max-width: 800px;
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: #cbd5e1;
    font-weight: 300;
}

/* About Section */
.about {
    background-color: var(--white);
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--text-color);
    font-size: 1.05rem;
}

.stats {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--primary-light);
    font-weight: 600;
}

.abstract-shape {
    width: 100%;
    height: 400px;
    background-color: var(--off-white);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    color: var(--primary-light);
    /* Placeholder for image */
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.abstract-shape::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(212, 175, 55, 0.1), transparent);
}

/* Services Section */
.services {
    background-color: var(--off-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.service-card {
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid transparent;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(212, 175, 55, 0.3);
}

.icon-box {
    width: 70px;
    height: 70px;
    background-color: rgba(15, 23, 42, 0.05);
    /* very light navy */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 0 auto 1.5rem;
    transition: var(--transition);
}

.service-card:hover .icon-box {
    background-color: var(--primary-color);
    color: var(--accent-color);
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.service-card p {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* CTA Section */
.cta-section {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 4rem 0;
}

.cta-container h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
}

/* Footer */
.footer {
    background-color: #020617;
    /* Darker than primary */
    color: #94a3b8;
    padding: 4rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: block;
    margin-bottom: 1.5rem;
}

.footer h4 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer ul li {
    margin-bottom: 0.8rem;
}

.footer ul li a {
    transition: var(--transition);
}

.footer ul li a:hover {
    color: var(--accent-color);
    padding-right: 5px;
    /* RTL shift */
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact-info i {
    color: var(--accent-color);
    width: 20px;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    color: var(--white);
}

.social-links a:hover {
    background-color: var(--accent-color);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.9rem;
}

/* Scroll Animations */
.hidden-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.show-fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive Design --- */

/* Large Tablets & Small Laptops (1024px) */
@media screen and (max-width: 1024px) {
    .container {
        max-width: 95%;
    }

    .radial-container {
        transform: scale(0.8);
        margin: -5rem auto;
    }
}

/* Tablets (968px) */
@media screen and (max-width: 968px) {
    .section {
        padding: 4rem 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .about-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .radial-container {
        transform: scale(0.7);
        margin: -8rem auto;
    }

    .stats {
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Phones & Small Tablets (768px) */
@media screen and (max-width: 768px) {
    :root {
        --header-height: 80px;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Dedicated Mobile Header Polish */
    .header {
        background-color: #010614 !important;
        /* Solid Deep Navy */
        border-bottom: 1px solid var(--accent-color);
        height: 60px !important;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .header-container {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.5rem;
    }

    /* --- Rebuilt Mobile Header & Menu --- */

    /* Hide Desktop Nav */
    .desktop-nav {
        display: none !important;
    }

    /* Header Container */
    /* Header Container */
    .header-container {
        display: flex;
        justify-content: space-between !important;
        /* Force spread */
        align-items: center;
        padding: 0 1rem;
        /* Slightly reduced padding for more edge space */
        height: 70px;
        width: 100% !important;
        /* Ensure full width */
    }



    /* Logo Sizing */
    .logo img {
        height: 50px !important;
        width: auto;
    }

    /* Toggle Button (Fixed/Absolute to ensure placement) */
    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.05);
        /* Subtle background */
        border: 1px solid var(--accent-color);
        border-radius: 8px;
        color: var(--accent-color);
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 10001;
        /* Above Menu */
        transition: all 0.3s ease;
    }

    .nav-toggle:active {
        transform: scale(0.95);
    }

    /* Full Screen Menu Overlay */
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #0f172a;
        /* Solid Corporate Navy */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10000;

        /* Hidden State */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }

    /* Active State */
    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Menu List */
    .mobile-nav-list {
        list-style: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-link {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--white);
        text-decoration: none;
        transition: color 0.3s;
    }

    .mobile-nav-link:hover {
        color: var(--accent-color);
    }

    .btn-mobile-contact {
        border: 2px solid var(--accent-color);
        padding: 0.8rem 2rem;
        border-radius: 5px;
        color: var(--accent-color);
    }






    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-cta {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .btn-secondary {
        margin-right: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-info li,
    .social-links {
        justify-content: center;
    }
}

/* Small Transition for Entities Section at 850px (before list view) */
@media screen and (max-width: 850px) {
    .radial-container {
        transform: scale(0.65);
    }
}



/* Entities Section - Radial Layout */
.entities {
    position: relative;
    /* High visibility test: Lower white opacity (0.7) and robust URL syntax */
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("./bg.jpg") center/cover no-repeat !important;
    overflow: hidden;
    padding: 100px 0;
    /* Ensure section has height */
}

.entities .container {
    position: relative;
    z-index: 5;
    /* Ensure content is above background */
}

.entities .section-desc {
    color: #000 !important;
    font-weight: 700;
    max-width: 800px;
    opacity: 1;
}


.radial-container {
    position: relative;
    width: 850px;
    /* Increased to accommodate items without clipping */
    height: 850px;
    margin: 4rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}




.center-logo {
    width: 250px;
    height: 250px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
    z-index: 20;
    /* Higher than lines */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid var(--accent-color);
}

.center-logo img {
    width: 80%;
    height: auto;
}

/* Orbit System */
.orbit-spinner {
    position: absolute;
    width: 320px;
    /* Increased from 270px */
    height: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: orbit-rotate 60s linear infinite;
    z-index: 5;
}



.orbit-arm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    /* Increased from 300px (Larger orbit) */
    /* Radius from center to entity center */
    height: 2px;
    transform-origin: left center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -1px;
    /* Align with horizontal center line */
}


/* Static Angles for Arms */
.arm-1 {
    --angle: 270deg;
    transform: rotate(var(--angle));
}

.arm-2 {
    --angle: 342deg;
    transform: rotate(var(--angle));
}

.arm-3 {
    --angle: 414deg;
    transform: rotate(var(--angle));
}

.arm-4 {
    --angle: 486deg;
    transform: rotate(var(--angle));
}

.arm-5 {
    --angle: 558deg;
    transform: rotate(var(--angle));
}



.connector-line {
    position: absolute;
    top: 0;
    left: 0;
    /* Arm starts at hub center, so line starts here */
    width: 100%;
    /* Go all the way to entity center */
    height: 100%;
    background-color: var(--accent-color);
    opacity: 0.8;
    z-index: -1;
}

/* We want the line to ONLY be visible between the hub (135px) and the entity mask */
/* But since it's behind the logo hub, it's fine. */

.orbit-item {
    position: absolute;
    right: -75px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    display: flex;
    justify-content: center;
    z-index: 10;
    text-decoration: none;
}

.orbit-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: orbit-counter-rotate 60s linear infinite;
    transform-origin: center center;
}




@keyframes orbit-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


@keyframes orbit-counter-rotate {
    from {
        transform: rotate(calc(var(--angle) * -1));
    }

    to {
        transform: rotate(calc(var(--angle) * -1 - 360deg));
    }
}




/* Additional Entity Styles remain similar but need to ensure no transform conflict */
.entity-circle {
    width: 130px;
    /* Increased from 110px */
    height: 130px;
    background-color: var(--white);
    border-radius: 50%;
    /* Double Frame Effect: Primary border + inner shadow simulating second rim */
    border: 4px solid var(--accent-color);
    box-shadow:
        0 0 0 5px var(--white),
        /* Spacing between frames */
        0 0 0 8px var(--accent-color),
        /* Second golden frame */
        0 15px 30px rgba(0, 0, 0, 0.2),
        /* Soft outer shadow */
        inset 0 0 20px rgba(212, 175, 55, 0.3);
    /* Inner glow */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    /* Scaled up icon size */
    color: var(--primary-color);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 2rem;
    /* Increased space for double frame and label */
    overflow: hidden;
    position: relative;
    z-index: 2;
    background-clip: padding-box;
}


.entity-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}


.entity-circle.full-img {
    padding: 10px;
}

.entity-circle.full-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.orbit-item:hover .entity-circle {
    background-color: var(--white);
    color: var(--primary-color);
    transform: scale(1.1);
    box-shadow:
        0 0 0 4px var(--accent-color),
        0 0 0 6px var(--white),
        0 15px 30px rgba(212, 175, 55, 0.4),
        inset 0 0 20px rgba(212, 175, 55, 0.4);
}


.entity-name {
    font-weight: 700;
    color: var(--white);
    font-size: 1rem;
    background: rgba(15, 23, 42, 0.85);
    /* Dark depth */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    transition: var(--transition);
}

.orbit-item:hover .entity-name {
    background: var(--accent-color);
    color: var(--primary-color);
    transform: translateY(-5px);
}



/* Responsive Adjustments for Entities (Mobile Card View) */
@media screen and (max-width: 768px) {
    .entities {
        padding: 50px 0;
    }

    .radial-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        border: none;
        margin: 2rem 0 0;
        transform: none !important;
        background: none;
    }

    .center-logo,
    .orbit-spinner,
    .connector-line,
    .orbit-arm {
        display: none !important;
        /* Hide mechanical components on mobile */
    }

    .orbit-item {
        position: relative;
        right: auto;
        top: auto;
        transform: none !important;
        width: 100%;
        animation: none !important;
        /* No rotation on mobile */
        background: var(--white);
        padding: 1.25rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(212, 175, 55, 0.15);
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 15px;
        text-align: right;
        transition: transform 0.3s ease;
    }

    .orbit-item:hover {
        transform: translateY(-5px) !important;
        border-color: var(--accent-color);
    }

    .orbit-item-inner {
        animation: none !important;
        flex-direction: row !important;
        gap: 1.5rem;
        width: 100%;
    }

    .entity-circle {
        width: 65px !important;
        height: 65px !important;
        min-width: 65px;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        font-size: 1.5rem !important;
        /* Keep double border but smaller */
        box-shadow:
            0 0 0 2px var(--white),
            0 0 0 4px var(--accent-color);
        border: 2px solid var(--accent-color);
    }

    .entity-name {
        background: none;
        padding: 0;
        color: var(--primary-color);
        font-size: 1rem;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        white-space: normal;
        text-align: right;
        font-weight: 800;
        line-height: 1.3;
    }
}

/* Extra Small Phones (Up to 480px) */
@media screen and (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .entity-name {
        font-size: 0.95rem;
    }

    .stats {
        flex-direction: column;
        gap: 1.5rem;
    }
}