/*
Theme Name: Damec Legal
Theme URI: https://damec.sa
Author: Damec Law Firm
Version: 1.5.0
Text Domain: damec
*/

/* ====================================================
   VARIABLES
==================================================== */
:root {
    --navy:  #14274d;
    --dark:  #0f1f3d;
    --gold:  #d2b589;
    --light: #f5f5f5;
    --muted: #a0aec0;
    --cream: #f5f3ef;
    --bg:    #faf9f7;
    --border: rgba(210,181,137,.25);
    --shadow: rgba(210,181,137,.2);
}

/* ====================================================
   RESET
==================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Tajawal','Montserrat',sans-serif;background:var(--bg);color:#1a202c;line-height:1.8;overflow-x:hidden}
a{text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none;padding:0;margin:0}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:5px}

/* ====================================================
   HEADER
==================================================== */
#site-header{
    position:fixed;top:0;right:0;left:0;z-index:1000;
    background:transparent;border-bottom:1px solid transparent;
    transition:all .4s ease;
}
#site-header.scrolled{
    background:rgba(20,39,77,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);box-shadow:0 4px 30px rgba(0,0,0,.3);
}
.header-container{
    max-width:1400px;margin:0 auto;padding:1rem 3rem;
    display:flex;justify-content:space-between;align-items:center;
}
.logo{display:flex;align-items:center}
.logo img{height:50px;width:auto;transition:all .3s ease}
.logo:hover img{transform:scale(1.05);filter:brightness(1.1)}

#mainNav{display:flex;align-items:center}
.nav-links{display:flex;gap:3rem;align-items:center;list-style:none;padding:0;margin:0}
.nav-links li a{
    color:var(--light);font-size:.95rem;font-weight:500;
    position:relative;padding:.5rem 0;transition:color .3s ease;white-space:nowrap;
}
.nav-links li a::before{
    content:'';position:absolute;bottom:0;right:0;width:0;height:2px;
    background:var(--gold);transition:width .3s ease;
}
.nav-links li a:hover,.nav-links li a.active{color:var(--gold)}
.nav-links li a:hover::before,.nav-links li a.active::before{width:100%}

.mobile-menu-btn{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:10px}
.mobile-menu-btn span{width:28px;height:2px;background:var(--gold);display:block;transition:all .3s ease}

/* ====================================================
   SHARED: section, containers, badges
==================================================== */
section{padding:5rem 0}
.section-container{max-width:1400px;margin:0 auto;padding:0 3rem}
.section-header{text-align:center;margin-bottom:3rem}

.section-badge{
    display:inline-flex;align-items:center;gap:.4rem;
    background:rgba(210,181,137,.1);border:1px solid var(--border);
    padding:.4rem 1.25rem;border-radius:50px;
    margin-bottom:1rem;color:var(--gold);font-size:.8rem;font-weight:500;
}
.section-title{
    font-family:'Montserrat','Tajawal',sans-serif;
    font-size:2.25rem;color:var(--navy);margin-bottom:.75rem;
}
.section-subtitle{
    font-size:1.05rem;color:#64748b;
    max-width:900px;margin:0 auto;line-height:1.9;
}

/* section-header stagger animation */
.section-header .section-badge,
.section-header .section-title,
.section-header .section-subtitle{
    opacity:0;transform:translateY(20px);transition:all .6s ease-out;
}
.section-header.animate-visible .section-badge  {opacity:1;transform:translateY(0);transition-delay:0s}
.section-header.animate-visible .section-title  {opacity:1;transform:translateY(0);transition-delay:.15s}
.section-header.animate-visible .section-subtitle{opacity:1;transform:translateY(0);transition-delay:.3s}

/* ====================================================
   PAGE HERO (about + services)
==================================================== */
.page-hero{
    background:var(--navy);padding:10rem 0 5rem;
    position:relative;overflow:hidden;
}
.page-hero::before{
    content:'';position:absolute;inset:0;
    background-image:url("https://green-spider-727022.hostingersite.com/wp-content/uploads/2025/12/Pattern1.png");
    background-repeat:no-repeat;background-position:left center;
    background-size:contain;opacity:.1;
}
.page-hero-container{
    max-width:1400px;margin:0 auto;padding:0 3rem;
    position:relative;z-index:1;text-align:center;
}
.page-hero-badge{
    display:inline-flex;align-items:center;gap:.4rem;
    background:rgba(210,181,137,.1);border:1px solid var(--border);
    padding:.4rem 1.25rem;border-radius:50px;
    margin-bottom:1.5rem;color:var(--gold);font-size:.8rem;
    animation:fadeInDown .8s ease-out .2s backwards;
}
.page-hero-badge::before{content:'⚖️'}
.page-hero h1{
    font-family:'Montserrat','Tajawal',sans-serif;
    font-size:3rem;font-weight:700;color:var(--light);
    margin-bottom:1rem;animation:textReveal 1s ease-out .4s backwards;
}
.page-hero h1 span{color:var(--gold)}
.breadcrumb{
    display:flex;justify-content:center;align-items:center;
    gap:.75rem;color:var(--muted);font-size:.9rem;
    animation:fadeInUp .8s ease-out .6s backwards;
}
.breadcrumb a{color:var(--muted);transition:color .3s ease}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--muted)}

/* ====================================================
   HOMEPAGE HERO
==================================================== */
.hero{
    min-height:100vh;background:var(--navy);
    position:relative;display:flex;align-items:center;overflow:hidden;
}
.hero-container{
    max-width:1400px;margin:0 auto;padding:4rem 3rem;
    display:grid;grid-template-columns:1fr 1fr;
    align-items:center;position:relative;z-index:1;width:100%;
}
.hero-badge{
    display:inline-flex;align-items:center;gap:.4rem;
    background:rgba(210,181,137,.1);border:1px solid var(--border);
    padding:.4rem 1.25rem;border-radius:50px;
    margin-bottom:1.5rem;color:var(--gold);font-size:.8rem;
    animation:fadeInDown .8s ease-out .2s backwards;
}
.hero-badge::before{content:'⚖️'}
.hero h1{
    font-family:'Montserrat','Tajawal',sans-serif;
    font-size:3.5rem;font-weight:700;color:var(--light);
    line-height:1.2;margin-bottom:1.25rem;
    animation:textReveal 1s ease-out .4s backwards;
}
.hero h1 span{color:var(--gold);display:block;animation:textReveal 1s ease-out .6s backwards}
.hero-description{
    font-size:1.1rem;color:var(--muted);
    margin-bottom:2rem;max-width:480px;
    animation:fadeInUp .8s ease-out .8s backwards;
}
.hero-pattern{position:absolute;top:0;bottom:0;left:0;width:50%;pointer-events:none}
.hero-pattern-wrapper{
    position:absolute;top:0;bottom:0;left:5%;width:100%;
    background-image:url("https://green-spider-727022.hostingersite.com/wp-content/uploads/2025/12/Pattern1.png");
    background-repeat:no-repeat;background-position:left center;
    background-size:contain;opacity:.3;
    animation:fadeInLeft 1s ease-out .5s backwards;
}

/* CTA button (shared) */
.cta-btn{
    display:inline-flex;align-items:center;gap:.6rem;
    background:var(--gold);color:var(--navy);
    padding:.9rem 2rem;border-radius:8px;
    font-weight:700;font-size:.9rem;
    transition:all .4s ease;box-shadow:0 4px 20px var(--shadow);
}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--shadow)}
.cta-btn svg{width:20px;height:20px;transition:transform .3s ease}
.cta-btn:hover svg{transform:translateX(-5px)}
.hero-content .cta-btn{animation:fadeInUp .8s ease-out 1s backwards}

/* ====================================================
   STATS BANNER
==================================================== */
.stats-banner{background:var(--dark);padding:3rem 0}
.stats-container{
    max-width:1400px;margin:0 auto;padding:0 3rem;
    display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
}
.stat-item{
    text-align:center;padding:1.5rem;border-radius:14px;
    background:rgba(210,181,137,.05);border:1px solid var(--border);
    transition:all .4s ease;
}
.stat-item:hover{transform:translateY(-6px);background:rgba(210,181,137,.1);box-shadow:0 15px 30px rgba(0,0,0,.15)}
.stat-icon{
    width:50px;height:50px;margin:0 auto .75rem;
    background:var(--gold);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.stat-icon svg{width:24px;height:24px;fill:var(--navy)}
.stat-number{
    font-size:2.25rem;font-weight:800;color:var(--gold);
    line-height:1;margin-bottom:.35rem;transition:transform .3s ease;
}
.stat-item:hover .stat-number{transform:scale(1.1)}
.stat-number .counter{display:inline-block}
.stat-label{color:var(--muted);font-size:.85rem}

/* ====================================================
   HOMEPAGE ABOUT
==================================================== */
.about-section{background:var(--cream)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-content h2{
    font-family:'Montserrat','Tajawal',sans-serif;
    font-size:2rem;color:var(--navy);margin-bottom:1rem;
}
.about-content h2 span{color:var(--gold)}
.about-content p{font-size:.95rem;color:#4a5568;margin-bottom:1.5rem;line-height:1.8}
.read-more-btn{
    display:inline-flex;align-items:center;gap:.4rem;
    color:var(--gold);font-weight:600;font-size:.9rem;transition:all .3s ease;
}
.read-more-btn:hover{gap:.75rem}
.read-more-btn svg{width:18px;height:18px;transition:transform .3s ease}
.read-more-btn:hover svg{transform:translateX(-4px)}
.about-image{position:relative}
.about-image-wrapper{
    position:relative;border-radius:16px;overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}
.about-image-wrapper::before{
    content:'';position:absolute;top:15px;right:15px;bottom:-15px;left:-15px;
    border:2px solid var(--gold);border-radius:16px;z-index:-1;
}

/* ====================================================
   HOMEPAGE FEATURES
==================================================== */
.features-section{background:var(--bg)}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.feature-card{
    background:white;padding:1.75rem;border-radius:14px;
    border:1px solid #e2e8f0;transition:all .4s ease;
    position:relative;overflow:hidden;
}
.feature-card::before{
    content:'';position:absolute;top:0;right:0;
    width:80px;height:80px;background:var(--gold);
    opacity:.05;border-radius:0 0 0 100%;transition:all .4s ease;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 15px 35px rgba(0,0,0,.08);border-color:var(--gold)}
.feature-card:hover::before{width:120px;height:120px;opacity:.08}
.feature-icon{
    width:55px;height:55px;background:var(--gold);border-radius:12px;
    display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.feature-icon svg{width:26px;height:26px;fill:var(--navy)}
.feature-card h3{font-size:1.05rem;color:var(--navy);margin-bottom:.75rem;font-weight:700}
.feature-card p{color:#64748b;line-height:1.7;font-size:.9rem}

/* ====================================================
   HOMEPAGE MINI SERVICES GRID
==================================================== */
.services-section{background:#fff;position:relative;overflow:hidden}
.services-section .section-badge{background:rgba(210,181,137,.15)}
.services-section .section-title{color:var(--gold)}
.services-section .section-subtitle{color:var(--navy)}

.services-grid{
    display:grid;grid-template-columns:repeat(6,1fr);
    gap:1rem;position:relative;z-index:1;
}
.service-card-link{display:block}
.service-card{
    background:rgba(245,240,235,.95);border-radius:14px;
    padding:1.25rem 1rem;transition:all .4s ease;
    position:relative;display:flex;flex-direction:column;
    min-height:160px;cursor:pointer;
}
.service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    background:var(--navy);
}
.service-card:hover h3{color:var(--light)}
.service-card:hover .service-number{color:var(--gold);opacity:.7}
.service-card:hover .service-icon svg{fill:var(--gold);opacity:1}

/* mini card header row */
.service-card-header{
    display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem;
}
.service-number{
    font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:600;
    color:var(--navy);opacity:.4;transition:all .4s ease;
}
.service-icon{
    width:36px;height:36px;background:transparent;
    display:flex;align-items:center;justify-content:center;
    transition:transform .4s ease;
}
.service-card:hover .service-icon{transform:scale(1.1)}
.service-icon svg{width:24px;height:24px;fill:var(--navy);opacity:.7;transition:all .4s ease}
.service-card h3{
    font-size:.85rem;color:var(--navy);
    margin-top:auto;font-weight:600;line-height:1.6;
    text-align:center;transition:all .4s ease;
}

/* pattern/empty decorative boxes */
.pattern-box{
    background:transparent;border:2px dashed rgba(20,39,77,.12);
    border-radius:14px;position:relative;overflow:hidden;min-height:160px;
}
.empty-box{min-height:160px}
#service-pattern{
    border:1px solid var(--navy);
    background-image:url("https://green-spider-727022.hostingersite.com/wp-content/uploads/2025/12/Screenshot-2025-12-17-at-10-37-25-الملف-التعريفي-العربية-الملف-التعريفي-العربية-.pdf.png");
    background-repeat:no-repeat;background-position:center;background-size:cover;
}

/* ====================================================
   PROMISES
==================================================== */
.promises-section{background:var(--cream)}
.promises-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.promise-item{
    display:flex;gap:1rem;padding:1.25rem;
    background:white;border-radius:12px;border:1px solid #e2e8f0;
    transition:all .3s ease;
}
.promise-item:hover{box-shadow:0 8px 25px rgba(0,0,0,.06);border-color:var(--gold)}
.promise-check{
    flex-shrink:0;width:32px;height:32px;
    background:rgba(210,181,137,.15);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.promise-check svg{width:16px;height:16px;fill:var(--gold)}
.promise-text{color:#4a5568;font-size:.9rem;line-height:1.6}

/* ====================================================
   ARTICLES
==================================================== */
.articles-section{background:var(--bg)}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.article-card{
    background:white;border-radius:14px;overflow:hidden;
    border:1px solid #e2e8f0;transition:all .4s ease;
}
.article-card:hover{transform:translateY(-6px);box-shadow:0 15px 35px rgba(0,0,0,.08)}
.article-image{height:140px;background:var(--navy);overflow:hidden}
.article-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.article-card:hover .article-image img{transform:scale(1.05)}
.article-content{padding:1.25rem}
.article-meta{display:flex;align-items:center;gap:.4rem;color:var(--gold);font-size:.75rem;margin-bottom:.75rem}
.article-meta svg{width:14px;height:14px;fill:var(--gold)}
.article-title{font-size:.95rem;color:var(--navy);font-weight:600;line-height:1.6;transition:color .3s ease}
.article-title a{color:inherit}
.article-card:hover .article-title{color:var(--gold)}

/* ====================================================
   CTA SECTION (shared all pages)
==================================================== */
.cta-section{background:var(--navy);padding:3rem 0;position:relative;overflow:hidden}
.cta-content{text-align:center;position:relative;z-index:1}
.cta-content h2{
    font-family:'Montserrat','Tajawal',sans-serif;
    font-size:1.5rem;color:var(--light);margin-bottom:1.25rem;
}

/* ====================================================
   FOOTER
==================================================== */
#site-footer{
    background:var(--navy);padding:3rem 0 1.5rem;
    border-top:1px solid var(--border);
}
.footer-container{max-width:1400px;margin:0 auto;padding:0 2rem}
.footer-grid{
    display:grid;grid-template-columns:2fr 1fr 1.5fr;
    gap:2.5rem;margin-bottom:2rem;
}
.footer-brand .footer-logo{height:45px;width:auto;margin-bottom:1rem}
.footer-brand p{color:var(--muted);line-height:1.6;font-size:.85rem}
.footer-links h4,.footer-contact h4{color:var(--light);font-size:.95rem;margin-bottom:1rem;font-weight:600}
.footer-links li{margin-bottom:.5rem}
.footer-links a{
    color:var(--muted);font-size:.85rem;
    display:inline-flex;align-items:center;gap:.4rem;transition:all .3s ease;
}
.footer-links a:hover{color:var(--gold);padding-right:.4rem}
.contact-item{
    display:flex;align-items:flex-start;gap:.75rem;
    margin-bottom:.75rem;color:var(--muted);font-size:.85rem;line-height:1.5;
}
.contact-item svg{width:16px;height:16px;fill:var(--gold);flex-shrink:0;margin-top:2px}
.social-links{display:flex;gap:.75rem;margin-top:1rem}
.social-link{
    width:38px;height:38px;
    background:rgba(210,181,137,.1);border:1px solid var(--border);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    transition:all .4s cubic-bezier(.4,0,.2,1);
}
.social-link:hover{background:var(--gold);transform:translateY(-5px) rotate(5deg)}
.social-link svg{width:16px;height:16px;fill:var(--gold);transition:fill .3s ease}
.social-link:hover svg{fill:var(--navy)}

/* footer animation */
.footer-grid .footer-brand,
.footer-grid .footer-links,
.footer-grid .footer-contact{
    opacity:0;transform:translateY(30px);transition:all .6s ease-out;
}
.footer-grid.footer-visible .footer-brand  {opacity:1;transform:translateY(0);transition-delay:.1s}
.footer-grid.footer-visible .footer-links  {opacity:1;transform:translateY(0);transition-delay:.2s}
.footer-grid.footer-visible .footer-contact{opacity:1;transform:translateY(0);transition-delay:.3s}

.footer-bottom{
    padding-top:1.5rem;border-top:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:.75rem;
}
.footer-bottom p{color:var(--muted);font-size:.8rem}
.footer-bottom a{color:var(--muted);font-size:.8rem;transition:color .3s ease}
.footer-bottom a:hover{color:var(--gold)}

/* ====================================================
   SCROLL ANIMATIONS
==================================================== */
.animate-on-scroll{
    opacity:0;transform:translateY(40px);
    transition:all .7s cubic-bezier(.4,0,.2,1);
}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}

.about-content.animate-on-scroll.visible{animation:fadeInRight .8s ease-out backwards}
.about-image.animate-on-scroll.visible  {animation:fadeInLeft .8s ease-out .2s backwards}

/* ====================================================
   KEYFRAMES
==================================================== */
@keyframes fadeInUp   {from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown {from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInLeft {from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn    {from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes textReveal {from{opacity:0;transform:translateY(20px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulse      {0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes bounce     {0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}

/* ====================================================
   ABOUT PAGE
==================================================== */
.about-intro{background:var(--cream)}
.intro-content{max-width:950px;margin:0 auto;text-align:center}
.intro-content p{font-size:1.15rem;color:#4a5568;line-height:2}

/* vision mission */
.vision-mission{background:var(--bg)}
.vm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.vm-card{
    background:white;padding:2.5rem;border-radius:16px;
    border:1px solid #e2e8f0;transition:all .4s ease;
    position:relative;overflow:hidden;
}
.vm-card::before{
    content:'';position:absolute;top:0;right:0;
    width:100px;height:100px;background:var(--gold);
    opacity:.05;border-radius:0 0 0 100%;transition:all .4s ease;
}
.vm-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.08);border-color:var(--gold)}
.vm-card:hover::before{width:150px;height:150px;opacity:.1}
.vm-icon{
    width:70px;height:70px;background:var(--gold);border-radius:16px;
    display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;
}
.vm-icon svg{width:35px;height:35px;fill:var(--navy)}
.vm-card h3{font-size:1.5rem;color:var(--navy);margin-bottom:1rem;font-weight:700}
.vm-card p {color:#64748b;line-height:1.9;font-size:1rem}

/* values */
.values-section{background:var(--navy);position:relative;overflow:hidden}
.values-section::before{
    content:'';position:absolute;inset:0;
    background-image:url("https://green-spider-727022.hostingersite.com/wp-content/uploads/2025/12/Pattern1.png");
    background-repeat:no-repeat;background-position:right center;
    background-size:contain;opacity:.05;
}
.values-section .section-badge{background:rgba(210,181,137,.15)}
.values-section .section-title{color:var(--gold)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:1}
.value-card{
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    border-radius:14px;padding:2rem;transition:all .4s ease;
}
.value-card:hover{background:rgba(255,255,255,.08);transform:translateY(-6px);box-shadow:0 15px 35px rgba(0,0,0,.2)}
.value-number{
    font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:700;
    color:var(--gold);opacity:.5;margin-bottom:1rem;
}
.value-card h4{color:var(--light);font-size:1.1rem;margin-bottom:.75rem;font-weight:600}
.value-card p {color:var(--muted);font-size:.9rem;line-height:1.8}

/* philosophy */
.philosophy-section{background:var(--cream)}
.philosophy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.philosophy-item{
    display:flex;gap:1rem;padding:1.5rem;
    background:white;border-radius:12px;border:1px solid #e2e8f0;
    transition:all .3s ease;
}
.philosophy-item:hover{box-shadow:0 10px 30px rgba(0,0,0,.06);border-color:var(--gold);transform:translateX(-5px)}
.philosophy-icon{
    flex-shrink:0;width:45px;height:45px;
    background:rgba(210,181,137,.15);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.philosophy-icon svg{width:22px;height:22px;fill:var(--gold)}
.philosophy-item p{color:#4a5568;font-size:.95rem;line-height:1.7;align-self:center}

/* beyond */
.beyond-section{background:var(--bg)}
.beyond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.beyond-card{
    background:white;padding:2rem;border-radius:14px;
    border:1px solid #e2e8f0;transition:all .4s ease;text-align:center;
}
.beyond-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,.08);border-color:var(--gold)}
.beyond-icon{
    width:60px;height:60px;background:var(--gold);border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;
}
.beyond-icon svg{width:28px;height:28px;fill:var(--navy)}
.beyond-card p{color:#4a5568;font-size:.95rem;line-height:1.8}

/* loyalty */
.loyalty-section{background:var(--cream)}
.loyalty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.loyalty-card{
    background:white;padding:2.5rem 2rem;border-radius:16px;
    border:1px solid #e2e8f0;transition:all .4s ease;
    text-align:center;position:relative;overflow:hidden;
}
.loyalty-card::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
    background:var(--gold);transform:scaleX(0);transition:transform .4s ease;
}
.loyalty-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.loyalty-card:hover::after{transform:scaleX(1)}
.loyalty-icon{
    width:80px;height:80px;
    background:rgba(210,181,137,.1);border:2px solid var(--gold);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.5rem;transition:all .4s ease;
}
.loyalty-card:hover .loyalty-icon{background:var(--gold)}
.loyalty-icon svg{width:36px;height:36px;fill:var(--gold);transition:all .4s ease}
.loyalty-card:hover .loyalty-icon svg{fill:var(--navy)}
.loyalty-card h4{font-size:1.25rem;color:var(--navy);margin-bottom:1rem;font-weight:700}
.loyalty-card p {color:#64748b;font-size:.95rem;line-height:1.8}

/* red line */
.redline-section{background:var(--dark);position:relative;overflow:hidden}
.redline-section .section-badge{background:rgba(220,53,69,.15);border-color:rgba(220,53,69,.3);color:#dc3545}
.redline-section .section-title{color:#dc3545}
.redline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative;z-index:1}
.redline-item{
    display:flex;gap:1rem;padding:1.5rem;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(220,53,69,.2);
    border-radius:12px;transition:all .3s ease;
}
.redline-item:hover{background:rgba(255,255,255,.06);border-color:rgba(220,53,69,.4);transform:translateY(-4px)}
.redline-icon{
    flex-shrink:0;width:36px;height:36px;
    background:rgba(220,53,69,.15);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.redline-icon svg{width:18px;height:18px;fill:#dc3545}
.redline-item p{color:var(--muted);font-size:.9rem;line-height:1.7;align-self:center}

/* ====================================================
   PAGE HERO SUBTITLE
==================================================== */
.page-hero-subtitle{
    font-size:1.15rem;
    color:var(--muted);
    max-width:700px;
    margin:0 auto;
    animation:fadeInUp .8s ease-out .6s backwards;
}

/* ====================================================
   KNOWLEDGE CENTER — article boxes
==================================================== */
.articles-section .section-container{max-width:1100px}

.articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}

.article-box{
    background:white;border-radius:14px;
    padding:1.75rem 2rem;
    box-shadow:0 3px 15px rgba(0,0,0,.04);
    border:1px solid #e8e8e8;
    text-decoration:none;
    display:flex;justify-content:space-between;align-items:center;
    gap:1.5rem;transition:all .35s ease;
    position:relative;
}
.article-box::before{
    content:'';position:absolute;top:0;right:0;
    width:4px;height:100%;
    background:var(--gold);
    border-radius:0 14px 14px 0;
    transform:scaleY(0);transition:transform .35s ease;
}
.article-box:hover{
    transform:translateX(-8px);
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    border-color:var(--gold);
}
.article-box:hover::before{transform:scaleY(1)}

.article-box-text{flex:1}
.article-box-title{
    font-size:1.05rem;color:var(--navy);font-weight:700;
    line-height:1.7;margin-bottom:.6rem;transition:color .3s ease;
}
.article-box:hover .article-box-title{color:#c4a373}

.article-box-meta{
    display:inline-flex;align-items:center;gap:.4rem;
    color:var(--gold);font-size:.85rem;font-weight:600;
}
.article-box-meta svg{width:16px;height:16px;fill:var(--gold)}

.article-box-arrow{
    width:42px;height:42px;
    background:rgba(210,181,137,.1);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .3s ease;
}
.article-box-arrow svg{
    width:18px;height:18px;stroke:var(--gold);transition:all .3s ease;
}
.article-box:hover .article-box-arrow{background:var(--gold)}
.article-box:hover .article-box-arrow svg{stroke:var(--navy);transform:translateX(-4px)}

/* article box stagger */
.article-box.animate-on-scroll{opacity:0;transform:translateY(25px);transition:all .5s ease}
.article-box.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.article-box:nth-child(1).visible{transition-delay:.02s}
.article-box:nth-child(2).visible{transition-delay:.04s}
.article-box:nth-child(3).visible{transition-delay:.06s}
.article-box:nth-child(4).visible{transition-delay:.08s}
.article-box:nth-child(5).visible{transition-delay:.1s}
.article-box:nth-child(6).visible{transition-delay:.12s}
.article-box:nth-child(7).visible{transition-delay:.14s}
.article-box:nth-child(8).visible{transition-delay:.16s}
.article-box:nth-child(9).visible{transition-delay:.18s}
.article-box:nth-child(10).visible{transition-delay:.2s}

/* ====================================================
   SERVICES PAGE — large cards
   NOTE: uses .service-main-card NOT .service-card
   and .svc-header / .svc-number / .svc-icon-lg / .svc-body
   to AVOID conflicts with homepage mini cards
==================================================== */
.services-intro{background:var(--cream)}
.services-grid-section{background:var(--bg)}
.services-main-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}

.service-main-card{
    background:white;border-radius:20px;
    border:1px solid #e2e8f0;overflow:hidden;
    transition:all .5s cubic-bezier(.4,0,.2,1);
    position:relative;display:flex;flex-direction:column;
    color:inherit;text-decoration:none;
}
.service-main-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:5px;
    background:var(--gold);transform:scaleX(0);transition:transform .4s ease;
}
.service-main-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,.12);border-color:var(--gold)}
.service-main-card:hover::before{transform:scaleX(1)}

/* IMPORTANT: services page uses .service-card-header too — but INSIDE .service-main-card */
.service-main-card .service-card-header{
    background:var(--navy);padding:2.5rem;
    position:relative;overflow:hidden;
    /* override the display:flex from mini-card .service-card-header */
    display:block;
    margin-bottom:0;
}
.service-main-card .service-card-header::before{
    content:'';position:absolute;inset:0;
    background-image:url("https://green-spider-727022.hostingersite.com/wp-content/uploads/2025/12/Pattern1.png");
    background-repeat:no-repeat;background-position:left center;
    background-size:cover;opacity:.08;
}
.service-main-card .service-number{
    font-family:'Montserrat',sans-serif;font-size:3.5rem;font-weight:800;
    color:var(--gold);opacity:.3;
    position:absolute;top:1rem;left:1.5rem;line-height:1;
    /* override mini card .service-number */
    font-size:3.5rem;
}
.service-icon-large{
    width:80px;height:80px;background:var(--gold);border-radius:20px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1.5rem;position:relative;z-index:1;
    transition:all .4s ease;
}
.service-main-card:hover .service-icon-large{transform:scale(1.1) rotate(-5deg)}
.service-icon-large svg{width:40px;height:40px;fill:var(--navy)}
.service-main-card .service-card-header h3{
    font-size:1.5rem;color:var(--light);
    font-weight:700;position:relative;z-index:1;
    text-align:right;margin-top:0;
}
.service-card-body{
    padding:2rem 2.5rem;flex-grow:1;
    display:flex;flex-direction:column;
}
.service-card-body p{color:#64748b;font-size:1rem;line-height:1.9;flex-grow:1}
.service-link{
    display:inline-flex;align-items:center;gap:.5rem;
    color:var(--gold);font-weight:600;font-size:.95rem;
    margin-top:1.5rem;transition:all .3s ease;
}
.service-link svg{width:20px;height:20px;transition:transform .3s ease}
.service-main-card:hover .service-link{gap:.75rem}
.service-main-card:hover .service-link svg{transform:translateX(-5px)}

/* stagger */
.service-main-card.animate-on-scroll.visible{animation:fadeInUp .6s ease-out backwards}
.service-main-card:nth-child(1).visible{animation-delay:.1s}
.service-main-card:nth-child(2).visible{animation-delay:.2s}
.service-main-card:nth-child(3).visible{animation-delay:.3s}
.service-main-card:nth-child(4).visible{animation-delay:.4s}

/* ====================================================
   CONTACT PAGE
==================================================== */
.contact-section{padding:5rem 0;background:var(--cream)}
.contact-container{max-width:1400px;margin:0 auto;padding:0 3rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}

.contact-form-wrapper{background:white;border-radius:20px;padding:2.5rem;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid #e2e8f0}
.form-title{font-size:1.5rem;color:var(--navy);margin-bottom:2rem;font-weight:700;display:flex;align-items:center;gap:.75rem}
.form-title-icon{width:45px;height:45px;background:var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:center}
.form-title-icon svg{width:22px;height:22px;fill:var(--navy)}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-weight:600;color:var(--navy);margin-bottom:.6rem;font-size:.95rem}
.form-group label .required{color:#dc3545;margin-right:.25rem}
.form-control{width:100%;padding:1rem 1.25rem;border:2px solid #e2e8f0;border-radius:12px;font-family:'Tajawal',sans-serif;font-size:1rem;color:var(--navy);background:#fafafa;transition:all .3s ease}
.form-control:focus{outline:none;border-color:var(--gold);background:white;box-shadow:0 0 0 4px rgba(210,181,137,.2)}
.form-control::placeholder{color:#a0aec0}
textarea.form-control{resize:vertical;min-height:150px}
.submit-btn{width:100%;padding:1.15rem 2rem;background:var(--gold);color:var(--navy);border:none;border-radius:12px;font-family:'Tajawal',sans-serif;font-size:1.05rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all .4s ease;box-shadow:0 4px 20px rgba(210,181,137,.2);margin-top:.5rem}
.submit-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(210,181,137,.2)}
.submit-btn svg{width:22px;height:22px;transition:transform .3s ease}
.submit-btn:hover svg{transform:translateX(-5px)}

.contact-info-wrapper{display:flex;flex-direction:column;gap:2rem}
.contact-info-card{background:white;border-radius:20px;padding:2.5rem;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid #e2e8f0}
.info-title{font-size:1.5rem;color:var(--navy);margin-bottom:2rem;font-weight:700;display:flex;align-items:center;gap:.75rem}
.info-title-icon{width:45px;height:45px;background:var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:center}
.info-title-icon svg{width:22px;height:22px;fill:var(--navy)}
.info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;padding:1.25rem;background:rgba(210,181,137,.08);border-radius:12px;transition:all .3s ease}
.info-item:last-child{margin-bottom:0}
.info-item:hover{background:rgba(210,181,137,.15);transform:translateX(-5px)}
.info-icon{width:50px;height:50px;background:var(--navy);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-icon svg{width:24px;height:24px;fill:var(--gold)}
.info-content h4{font-size:1rem;color:var(--navy);margin-bottom:.35rem;font-weight:700}
.info-content p{color:#64748b;font-size:.95rem;line-height:1.7}
.info-content a{color:var(--gold);text-decoration:none;font-weight:600;transition:color .3s ease}
.info-content a:hover{color:#c4a373}

.map-card{background:white;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid #e2e8f0}
.map-header{padding:1.5rem 2rem;background:var(--navy);display:flex;align-items:center;justify-content:space-between}
.map-header h3{color:var(--light);font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.75rem}
.map-header h3 svg{width:22px;height:22px;fill:var(--gold)}
.map-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);text-decoration:none;font-size:.9rem;font-weight:600;transition:all .3s ease}
.map-link:hover{color:#dcc4a0}
.map-link svg{width:18px;height:18px;fill:currentColor}
.map-container{position:relative;height:300px}
.map-container iframe{width:100%;height:100%;border:none}
.map-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;cursor:pointer;transition:background .3s ease}
.map-overlay:hover{background:rgba(20,39,77,.1)}

/* ====================================================
   TEAM PAGE
==================================================== */
.leadership-section{background:var(--cream)}
.leadership-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;max-width:1000px;margin:0 auto}
.leader-card{background:white;border-radius:24px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.08);border:1px solid #e2e8f0;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative}
.leader-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--gold),#dcc4a0);transform:scaleX(0);transition:transform .4s ease}
.leader-card:hover{transform:translateY(-10px);box-shadow:0 25px 60px rgba(0,0,0,.12)}
.leader-card:hover::before{transform:scaleX(1)}
.leader-image{position:relative;height:320px;background:linear-gradient(135deg,var(--navy) 0%,#0f1f3d 100%);overflow:hidden}
.leader-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,white,transparent)}
.leader-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold);gap:1rem}
.leader-placeholder svg{width:100px;height:100px;opacity:.4}
.leader-placeholder span{font-size:.9rem;opacity:.6}
.leader-content{padding:2rem;text-align:center;position:relative}
.leader-role{display:inline-block;background:rgba(210,181,137,.15);color:#c4a373;padding:.35rem 1rem;border-radius:50px;font-size:.8rem;font-weight:600;margin-bottom:.75rem}
.leader-name{font-size:1.5rem;color:var(--navy);font-weight:700;margin-bottom:1rem}
.leader-bio{color:#64748b;font-size:.95rem;line-height:1.8;margin-bottom:1.5rem}
.leader-social{display:flex;justify-content:center;gap:.75rem}
.leader-social a{width:40px;height:40px;background:rgba(210,181,137,.1);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.leader-social a:hover{background:var(--gold);transform:translateY(-3px)}
.leader-social svg{width:18px;height:18px;fill:var(--gold);transition:fill .3s ease}
.leader-social a:hover svg{fill:var(--navy)}
.leader-card.animate-on-scroll.visible{animation:fadeInUp .6s ease-out backwards}
.leader-card:nth-child(1).visible{animation-delay:.1s}
.leader-card:nth-child(2).visible{animation-delay:.2s}

.team-section{background:var(--light)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.team-card{background:white;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);border:1px solid #e2e8f0;transition:all .4s ease;position:relative}
.team-card:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,0,0,.1);border-color:var(--gold)}
.team-image{position:relative;height:240px;background:linear-gradient(135deg,var(--navy) 0%,#0f1f3d 100%);overflow:hidden}
.team-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold);gap:.75rem}
.team-placeholder svg{width:70px;height:70px;opacity:.3}
.team-placeholder span{font-size:.8rem;opacity:.5}
.team-content{padding:1.5rem;text-align:center}
.team-role{display:inline-block;background:rgba(210,181,137,.12);color:#c4a373;padding:.3rem .85rem;border-radius:50px;font-size:.75rem;font-weight:600;margin-bottom:.6rem}
.team-name{font-size:1.15rem;color:var(--navy);font-weight:700;margin-bottom:.6rem}
.team-specialty{color:#64748b;font-size:.85rem;line-height:1.6}
.team-card-hover{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(20,39,77,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:all .4s ease;padding:2rem}
.team-card:hover .team-card-hover{opacity:1}
.team-card-hover p{color:#a0aec0;font-size:.9rem;line-height:1.8;text-align:center;margin-bottom:1.5rem}
.team-card-hover .team-social{display:flex;gap:.75rem}
.team-card-hover .team-social a{width:38px;height:38px;background:rgba(210,181,137,.15);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.team-card-hover .team-social a:hover{background:var(--gold)}
.team-card-hover .team-social svg{width:16px;height:16px;fill:var(--gold);transition:fill .3s ease}
.team-card-hover .team-social a:hover svg{fill:var(--navy)}
.team-card.animate-on-scroll.visible{animation:fadeInUp .5s ease-out backwards}
.team-card:nth-child(1).visible{animation-delay:.05s}
.team-card:nth-child(2).visible{animation-delay:.1s}
.team-card:nth-child(3).visible{animation-delay:.15s}
.team-card:nth-child(4).visible{animation-delay:.2s}
.team-card:nth-child(5).visible{animation-delay:.25s}
.team-card:nth-child(6).visible{animation-delay:.3s}
.team-card:nth-child(7).visible{animation-delay:.35s}
.team-card:nth-child(8).visible{animation-delay:.4s}

.join-section{background:var(--navy);position:relative;overflow:hidden}
.join-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("https://green-spider-727022.hostingersite.com/wp-content/uploads/2025/12/Pattern1.png");background-repeat:no-repeat;background-position:right center;background-size:contain;opacity:.05}
.join-content{text-align:center;position:relative;z-index:1;max-width:700px;margin:0 auto}
.join-content h2{font-family:'Montserrat','Tajawal',sans-serif;font-size:2rem;color:var(--light);margin-bottom:1rem}
.join-content h2 span{color:var(--gold)}
.join-content p{color:#a0aec0;font-size:1.05rem;line-height:1.8;margin-bottom:2rem}
.join-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--gold);color:var(--navy);padding:1rem 2.5rem;border-radius:10px;text-decoration:none;font-weight:700;font-size:1rem;transition:all .4s ease;box-shadow:0 4px 20px rgba(210,181,137,.2)}
.join-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(210,181,137,.2)}
.join-btn svg{width:22px;height:22px;transition:transform .3s ease}
.join-btn:hover svg{transform:translateX(-5px)}

.cta-section-team{background:var(--cream);padding:3rem 0}
.cta-section-team .cta-content h2{color:var(--navy)}
.cta-section-team .cta-btn{background:var(--navy);color:var(--light);box-shadow:0 4px 20px rgba(20,39,77,.3)}
.cta-section-team .cta-btn:hover{background:#0f1f3d;box-shadow:0 8px 30px rgba(20,39,77,.4)}

/* ====================================================
   RESPONSIVE
==================================================== */
@media(max-width:1200px){
    .services-grid{grid-template-columns:repeat(4,1fr)}
    .pattern-box,.empty-box{display:none}
    .values-grid{grid-template-columns:repeat(2,1fr)}
    .beyond-grid{grid-template-columns:repeat(2,1fr)}
    .redline-grid{grid-template-columns:repeat(2,1fr)}
    .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:992px){
    .hero-container{grid-template-columns:1fr;text-align:center}
    .hero-pattern{position:absolute;inset:0;width:100%}
    .hero-pattern-wrapper{background-position:center}
    .hero-description{margin:0 auto 2.5rem}
    .hero h1{font-size:3rem}
    .stats-container{grid-template-columns:repeat(2,1fr)}
    .about-grid{grid-template-columns:1fr}
    .features-grid{grid-template-columns:1fr}
    .promises-container{grid-template-columns:1fr}
    .articles-grid{grid-template-columns:1fr}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .vm-grid{grid-template-columns:1fr}
    .philosophy-grid{grid-template-columns:1fr}
    .loyalty-grid{grid-template-columns:1fr}
    .services-main-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .leadership-grid{grid-template-columns:1fr;max-width:500px}
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .header-container{padding:1rem 1.5rem}
    #mainNav{
        display:none;position:absolute;top:100%;right:0;left:0;
        background:var(--navy);flex-direction:column;
        padding:2rem;gap:1.5rem;border-top:1px solid var(--border);
    }
    #mainNav.active{display:flex}
    .nav-links{flex-direction:column;gap:1.5rem;width:100%}
    .mobile-menu-btn{display:flex}
    .hero-container{padding:7rem 1.5rem 3rem}
    .hero h1{font-size:2.5rem}
    .section-container{padding:0 1.5rem}
    .section-title{font-size:1.75rem}
    .stats-container{grid-template-columns:1fr;padding:0 1.5rem}
    .services-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:2rem}
    .footer-bottom{flex-direction:column;text-align:center}
    .page-hero{padding:8rem 0 3rem}
    .page-hero h1{font-size:2.25rem}
    .page-hero-container{padding:0 1.5rem}
    .service-main-card .service-card-header{padding:2rem}
    .service-card-body{padding:1.5rem 2rem}
    .values-grid,.beyond-grid,.redline-grid{grid-template-columns:1fr}
    .articles-grid{grid-template-columns:1fr}
    .article-box{padding:1.5rem}
    .article-box-title{font-size:.95rem}
    .contact-grid{grid-template-columns:1fr}
    .contact-container{padding:0 1.5rem}
    .contact-form-wrapper,.contact-info-card{padding:2rem 1.5rem}
    .map-header{flex-direction:column;gap:1rem;text-align:center}
    .leadership-grid{grid-template-columns:1fr;max-width:500px}
    .team-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
}