/* =========================================================
   ALKHUZAMA GROUP — SABIC-INSPIRED CORPORATE DESIGN
   Original Alkhuzama content, branding and functionality retained.
========================================================= */
:root{
    --ag-green:#007a4d;
    --ag-green-dark:#005b3a;
    --ag-teal:#00a6a6;
    --ag-blue:#1675b9;
    --ag-sky:#42b8d5;
    --ag-ink:#15242b;
    --ag-muted:#65757d;
    --ag-line:#dbe4e8;
    --ag-soft:#f2f6f7;
    --ag-white:#ffffff;
    --ag-shadow:0 14px 38px rgba(20,52,62,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0!important;
    background:#fff!important;
    color:var(--ag-ink)!important;
    font-family:"Segoe UI",Arial,sans-serif!important;
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.025;
    background-image:linear-gradient(45deg,var(--ag-green) 1px,transparent 1px),linear-gradient(-45deg,var(--ag-blue) 1px,transparent 1px);
    background-size:36px 36px;
    z-index:-1;
}
.particles{display:none!important}

/* top utility / language bar */
.lang-switch{
    position:relative!important;
    top:auto!important;right:auto!important;
    min-height:42px;
    padding:6px clamp(22px,5vw,70px)!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:4px!important;
    background:#eef4f5!important;
    border-bottom:1px solid #dce6e9;
    z-index:1002!important;
}
.lang-switch:before{
    content:"ALKHUZAMA GROUP  |  KINGDOM OF SAUDI ARABIA";
    margin-right:auto;
    font-size:11px;
    letter-spacing:1.2px;
    font-weight:700;
    color:#607079;
}
body.rtl .lang-switch:before{content:"مجموعة الخزامى  |  المملكة العربية السعودية";margin-right:0;margin-left:auto;letter-spacing:0}
.lang-switch button{
    width:auto!important;height:30px!important;
    padding:0 13px!important;margin:0!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;
    color:#4e626b!important;
    font-size:12px!important;font-weight:700!important;
    box-shadow:none!important;cursor:pointer;
}
.lang-switch button:hover{color:var(--ag-green)!important;background:#fff!important}

/* main header */
.main-header{
    position:sticky!important;top:0!important;z-index:1000!important;
    min-height:82px;
    padding:0 clamp(22px,5vw,70px)!important;
    display:flex!important;justify-content:space-between!important;align-items:center!important;
    background:rgba(255,255,255,.97)!important;
    border:0!important;border-bottom:1px solid var(--ag-line)!important;
    box-shadow:0 5px 18px rgba(26,60,70,.07)!important;
    backdrop-filter:blur(14px);
}
.logo-text{
    display:block!important;
    width:190px!important;
    height:76px!important;
    flex:0 0 190px!important;

    margin:0!important;
    padding:0!important;
    position:relative!important;
    overflow:hidden!important;
    white-space:nowrap!important;

    background:url("../logos/logo.png") left center / contain no-repeat!important;

    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
}

.logo-text::before{
    display:none!important;
    content:none!important;
}

body.rtl .logo-text{
    background-position:right center!important;
}
.main-header nav{display:flex!important;align-items:center!important;gap:clamp(13px,1.8vw,27px)!important}
.main-header a,.main-header .nav-link{
    position:relative;
    margin:0!important;padding:31px 0 27px!important;
    color:#364a53!important;text-decoration:none!important;
    font-size:14px!important;font-weight:650!important;
    line-height:1;
}
.main-header a:after,.main-header .nav-link:after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
    background:linear-gradient(90deg,var(--ag-green),var(--ag-teal),var(--ag-blue));
    transform:scaleX(0);transform-origin:center;transition:.25s ease;
}
.main-header a:hover,.main-header .active{color:var(--ag-green)!important}
.main-header a:hover:after,.main-header .active:after{transform:scaleX(1)}

/* mobile nav toggle */
.nav-toggle{
    display:none!important;
    flex-direction:column!important;justify-content:center!important;
    gap:5px!important;
    width:42px!important;height:42px!important;
    padding:0!important;margin:0!important;
    border:1px solid var(--ag-line)!important;border-radius:6px!important;
    background:#fff!important;
    cursor:pointer;
    flex-shrink:0;
}
.nav-toggle span{
    display:block!important;width:20px!important;height:2px!important;margin:0 auto!important;
    background:var(--ag-ink)!important;border-radius:2px!important;
    transition:transform .25s ease,opacity .25s ease!important;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
.nav-toggle.open span:nth-child(2){opacity:0!important}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

/* hero family */
.hero,.about-hero,.ceo-hero,.companies-hero,.services-hero,.projects-hero,.news-hero,.career-hero,.contact-hero{
    position:relative!important;
    min-height:430px!important;
    padding:80px clamp(24px,7vw,110px)!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
    text-align:left!important;
    background-image:linear-gradient(90deg,rgba(0,76,57,.93) 0%,rgba(0,96,72,.78) 42%,rgba(0,110,94,.20) 72%,rgba(0,0,0,.03) 100%),url("../logos/hero.jpg")!important;
    background-size:cover!important;background-position:center!important;
    overflow:hidden!important;border:0!important;box-shadow:none!important;
}
body.rtl .hero,body.rtl .about-hero,body.rtl .ceo-hero,body.rtl .companies-hero,body.rtl .services-hero,body.rtl .projects-hero,body.rtl .news-hero,body.rtl .career-hero,body.rtl .contact-hero{
    align-items:flex-start!important;text-align:right!important;
    background-image:linear-gradient(270deg,rgba(0,76,57,.93) 0%,rgba(0,96,72,.78) 42%,rgba(0,110,94,.20) 72%,rgba(0,0,0,.03) 100%),url("../logos/hero.jpg")!important;
}
.hero:before,.about-hero:before,.ceo-hero:before,.companies-hero:before,.services-hero:before,.projects-hero:before,.news-hero:before,.career-hero:before,.contact-hero:before{
    content:""!important;display:block!important;position:absolute!important;inset:auto -85px -130px auto!important;
    width:430px!important;height:430px!important;border:78px solid rgba(255,255,255,.09)!important;border-radius:50%!important;background:none!important;
}
.hero:after,.about-hero:after,.ceo-hero:after,.companies-hero:after,.services-hero:after,.projects-hero:after,.news-hero:after,.career-hero:after,.contact-hero:after{
    content:"";position:absolute;left:0;bottom:0;width:100%;height:7px;
    background:linear-gradient(90deg,var(--ag-green) 0 34%,var(--ag-teal) 34% 67%,var(--ag-blue) 67%);
}
.hero h1,
.section-title{
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 0 20px !important;

    color: #fff !important;
    text-align: left !important;

    /* Reduced size */
    font-size: clamp(34px, 4.2vw, 56px) !important;

    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;

    /* Don't force all caps */
    text-transform: none !important;

    text-shadow: 0 7px 26px rgba(0,0,0,.22) !important;
}
body.rtl .hero h1,body.rtl .section-title{text-align:right!important;letter-spacing:0!important}
.hero h1:after,.section-title:after{
    content:""!important;display:block!important;position:static!important;
    width:86px!important;height:5px!important;margin:22px 0 0!important;
    transform:none!important;background:#fff!important;opacity:1!important;
}
body.rtl .hero h1:after,body.rtl .section-title:after{margin-left:auto!important}
.hero p,.section-subtitle{
    position:relative;z-index:1;
    max-width:720px!important;margin:0 0 28px!important;
    color:rgba(255,255,255,.93)!important;
    font-size:18px!important;line-height:1.75!important;text-align:left!important;
    text-shadow:none!important;
}
body.rtl .hero p,body.rtl .section-subtitle{text-align:right!important}

/* buttons */
.primary-btn,.contact-btn,.submit-btn,.apply-btn,.whatsapp-btn{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:46px;padding:12px 25px!important;
    border:0!important;border-radius:0!important;
    background:var(--ag-green)!important;color:#fff!important;
    font-weight:750!important;text-decoration:none!important;
    box-shadow:none!important;cursor:pointer;
    transition:.25s ease!important;
}
.hero .primary-btn{position:relative;z-index:1;background:#fff!important;color:var(--ag-green)!important}
.primary-btn:after,.contact-btn:after,.apply-btn:after,.whatsapp-btn:after{content:"›";font-size:22px;margin-left:12px;line-height:0}
body.rtl .primary-btn:after,body.rtl .contact-btn:after,body.rtl .apply-btn:after,body.rtl .whatsapp-btn:after{content:"‹";margin-left:0;margin-right:12px}
.primary-btn:hover,.contact-btn:hover,.submit-btn:hover,.apply-btn:hover,.whatsapp-btn:hover{
    background:var(--ag-blue)!important;color:#fff!important;transform:translateY(-2px)!important;
    box-shadow:0 10px 24px rgba(20,90,120,.18)!important;
}

/* content sections */
.preview-section,.about-section,.vm-section,.values-section,.timeline-section,.sectors-section,.why-section,.ceo-section,.leader-section,.job-section,.career-intro,.contact-wrapper,.map-section{
    background:#fff!important;color:var(--ag-ink)!important;
}
.preview-section{
    max-width:none!important;margin:0!important;padding:90px clamp(24px,8vw,130px)!important;text-align:left!important;
    display:grid;grid-template-columns:minmax(230px,.65fr) minmax(420px,1.35fr);gap:70px;align-items:start;
    border:0!important;
}
.preview-section h2{
    margin:0!important;color:var(--ag-green)!important;font-size:35px!important;line-height:1.15!important;text-shadow:none!important;
}
.preview-section p{margin:0!important;max-width:none!important;color:#52656e!important;font-size:17px!important;line-height:1.95!important;text-align:justify!important}
body.rtl .preview-section,body.rtl .preview-section p{text-align:right!important}

.about-section,.vm-section,.values-section,.timeline-section,.sectors-section,.why-section,.ceo-section,.leader-section,.job-section,.career-intro,.contact-wrapper{
    padding-left:clamp(22px,6vw,90px)!important;padding-right:clamp(22px,6vw,90px)!important;
}
.vm-section,.timeline-section,.why-section,.job-section,.map-section{background:var(--ag-soft)!important}

/* grids/cards */
.companies-grid,.services-grid,.projects-grid,.news-grid,.job-list,.values-grid,.why-grid{
    max-width:1380px!important;margin:0 auto!important;padding:72px clamp(22px,5vw,68px)!important;
    gap:26px!important;background:#fff!important;
}
.company-card,.service-card,.job-card,.vm-card,.why-card,.value-item,.timeline-item,.apply-box{
    position:relative!important;
    background:#fff!important;color:var(--ag-ink)!important;
    border:1px solid var(--ag-line)!important;border-radius:0!important;
    box-shadow:var(--ag-shadow)!important;
    overflow:hidden;transition:.3s ease!important;
}
.company-card:before,.service-card:before,.job-card:before,.vm-card:before,.why-card:before,.value-item:before,.timeline-item:before{
    content:"";position:absolute;left:0;right:0;top:0;height:5px;
    background:linear-gradient(90deg,var(--ag-green),var(--ag-teal),var(--ag-blue));
}
.company-card:hover,.service-card:hover,.job-card:hover,.why-card:hover,.value-item:hover{
    transform:translateY(-7px)!important;border-color:#b9d1d8!important;
    box-shadow:0 24px 55px rgba(20,62,74,.14)!important;
}
.company-card h3,.service-card h3,.job-card h3,.vm-card h3,.why-card h3,.value-item h3,.timeline-item h3,.ceo-name,.leader-name{
    color:var(--ag-ink)!important;text-shadow:none!important;
}
.company-card p,.service-card p,.job-card p,.vm-card p,.why-card p,.value-item p,.timeline-item p,.ceo-message,.leader-message,.contact-info{
    color:var(--ag-muted)!important;
}
.company-logo,.modal-logo{background:#fff!important;border:1px solid #e1e9ec!important;box-shadow:none!important}
.icon,.year,.ceo-position,.leader-position{color:var(--ag-green)!important}
.sectors-list li{background:#fff!important;color:var(--ag-ink)!important;border:1px solid var(--ag-line)!important;border-left:5px solid var(--ag-teal)!important;box-shadow:0 8px 22px rgba(20,52,62,.06)!important}
body.rtl .sectors-list li{border-left:1px solid var(--ag-line)!important;border-right:5px solid var(--ag-teal)!important}

/* 3D card treatment — Companies & Services */
.company-card,.service-card{
    border-radius:12px!important;
    box-shadow:0 2px 4px rgba(20,52,62,.06),0 14px 30px rgba(20,52,62,.10)!important;
    transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1)!important;
}
.company-card:hover,.service-card:hover{
    transform:perspective(900px) rotateX(4deg) translateY(-12px) scale(1.02)!important;
    box-shadow:0 10px 20px rgba(20,52,62,.14),0 34px 60px rgba(20,52,62,.24)!important;
    border-color:#b9d1d8!important;
}
.modal-logo{box-shadow:0 12px 30px rgba(0,0,0,.28)!important}


/* forms */
.contact-form input,.contact-form textarea,.apply-box input,.apply-box textarea,.apply-box select{
    width:100%;background:#fff!important;color:var(--ag-ink)!important;
    border:1px solid #cfdde2!important;border-radius:0!important;
    box-shadow:none!important;
}
.contact-form input:focus,.contact-form textarea:focus,.apply-box input:focus,.apply-box textarea:focus,.apply-box select:focus{
    outline:none!important;border-color:var(--ag-teal)!important;box-shadow:0 0 0 3px rgba(0,166,166,.12)!important;
}
.contact-info a{color:var(--ag-green)!important}
.map-section iframe{filter:none!important}

/* modals */
.modal{background:rgba(4,28,35,.78)!important;backdrop-filter:blur(7px)}
.modal-content,.apply-popup{
    background:#fff!important;color:var(--ag-ink)!important;
    border:0!important;border-top:7px solid var(--ag-green)!important;border-radius:0!important;
    box-shadow:0 30px 80px rgba(0,25,35,.28)!important;
}
.modal-content:before,.apply-popup:before{content:"";position:absolute;top:-7px;right:0;width:34%;height:7px;background:var(--ag-blue)}
.modal-close,.close-popup{color:var(--ag-green)!important}
.modal-content p,.modal-date,.modal-category,.modal-year{color:var(--ag-muted)!important}

/* footer */
.main-footer{
    position:relative;
    padding:34px clamp(24px,6vw,90px)!important;
    background:#17353e!important;color:#dce8eb!important;
    border:0!important;border-top:7px solid var(--ag-green)!important;
    text-align:center!important;
}
.main-footer:before{content:"ALKHUZAMA GROUP";display:block;margin-bottom:9px;color:#fff;font-size:18px;font-weight:800;letter-spacing:1.2px}
body.rtl .main-footer:before{content:"مجموعة الخزامى";letter-spacing:0}
.main-footer p{margin:0;color:#bacbd0!important}

/* RTL */
body.rtl{direction:rtl!important;text-align:right!important}
body.rtl .main-header{direction:rtl!important}
body.rtl .main-header nav{direction:rtl!important}

@media(max-width:1100px){
    .main-header{padding:16px 24px!important;flex-direction:row!important;gap:10px!important}
    .nav-toggle{display:flex!important}
    .main-header nav{
        position:fixed!important;
        top:82px;
        inset-inline:0!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:0!important;
        background:#fff!important;
        padding:8px 22px 24px!important;
        box-shadow:0 18px 40px rgba(20,52,62,.16)!important;
        max-height:calc(100vh - 82px);
        overflow-y:auto;
        transform:translateY(-12px);
        opacity:0;
        pointer-events:none;
        transition:opacity .25s ease,transform .25s ease;
        z-index:999;
    }
    .main-header nav.open{opacity:1;transform:translateY(0);pointer-events:auto}
    .main-header a,.main-header .nav-link{
        padding:14px 4px!important;
        border-bottom:1px solid var(--ag-line)!important;
        width:100%;
    }
    .main-header a:after,.main-header .nav-link:after{display:none!important}
}
@media(max-width:900px){
    .lang-switch{padding:6px 16px!important}.lang-switch:before{display:none}
    .hero,.about-hero,.ceo-hero,.companies-hero,.services-hero,.projects-hero,.news-hero,.career-hero,.contact-hero{
        min-height:370px!important;padding:65px 22px!important;align-items:center!important;text-align:center!important;
        background-image:linear-gradient(rgba(0,84,62,.86),rgba(0,84,62,.72)),url("../logos/hero.jpg")!important;
    }
    body.rtl .hero,body.rtl .about-hero,body.rtl .ceo-hero,body.rtl .companies-hero,body.rtl .services-hero,body.rtl .projects-hero,body.rtl .news-hero,body.rtl .career-hero,body.rtl .contact-hero{
        align-items:center!important;text-align:center!important;background-image:linear-gradient(rgba(0,84,62,.86),rgba(0,84,62,.72)),url("../logos/hero.jpg")!important;
    }
    .hero h1,.section-title,body.rtl .hero h1,body.rtl .section-title{text-align:center!important;font-size:44px!important;letter-spacing:-1px!important}
    .hero h1:after,.section-title:after,body.rtl .hero h1:after,body.rtl .section-title:after{margin:18px auto 0!important}
    .hero p,.section-subtitle,body.rtl .hero p,body.rtl .section-subtitle{text-align:center!important}
    .preview-section{display:block;padding:65px 24px!important}.preview-section h2{margin-bottom:28px!important}.preview-section p{text-align:left!important}body.rtl .preview-section p{text-align:right!important}
    .companies-grid,.services-grid,.projects-grid,.news-grid,.job-list,.values-grid,.why-grid{padding:50px 20px!important}
}

@media(max-width:900px){
    .logo-text{
        width:150px!important;
        height:64px!important;
        flex-basis:150px!important;
    }
}

@media(max-width:520px){
    .logo-text{
        width:128px!important;
        height:56px!important;
        flex-basis:128px!important;
    }
}

@media(max-width:600px){
    .main-header nav{gap:4px 13px!important}.main-header a,.main-header .nav-link{font-size:13px!important}
    .hero h1,.section-title{font-size:36px!important}.hero p,.section-subtitle{font-size:16px!important}
}

/* Hero subtitle color building a stronger */
.hero p,
.about-hero p,
.ceo-hero p,
.companies-hero p,
.services-hero p,
.projects-hero p,
.news-hero p,
.career-hero p,
.contact-hero p {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}