/* ========================
     Base / Reset
======================== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
:root {
    --cream:#fbf8ef;
    --sage:#969674;
    --olive:#505631;
    --olive-80:rgba(80,86,49,.8);
    --cream-80:rgba(251,248,239,.8);
    --shadow:0 10px 30px rgba(0,0,0,.15);
    --transition:.35s cubic-bezier(.4,.2,.2,1);
}
body { font-family:'Cairo','Segoe UI',Tahoma,Verdana,sans-serif; background:var(--cream); color:var(--olive); line-height:1.6; font-size:clamp(15px,1.5vw + .4rem,18px); }
body.no-scroll { overflow:hidden; }
section { scroll-margin-top:90px; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Header */
/* ========================
    Header / Navigation
======================== */
header { background:linear-gradient(135deg,var(--olive),var(--sage)); color:var(--cream); padding:.75rem 0; position:fixed; width:100%; top:0; z-index:1000; box-shadow:0 2px 20px rgba(80,86,49,.3); }
nav { display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; }
.logo-img { height:44px; width:auto; transition:transform .3s ease; }
.logo-img:hover { transform:scale(1.05); }
.brand-name { margin-inline-start:10px; font-weight:700; letter-spacing:.5px; }
.nav-links { display:flex; list-style:none; gap:2rem; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--cream); font-size:1.65rem; cursor:pointer; padding:.5rem .65rem; line-height:1; border-radius:8px; }
.mobile-menu-btn:hover, .mobile-menu-btn:focus { background:rgba(255,255,255,.15); outline:none; }
.nav-links a { color:var(--cream); text-decoration:none; transition:all .3s ease; padding:.5rem 1rem; border-radius:5px; font-size:.95rem; }
.nav-links a:hover { background:rgba(251,248,239,.2); transform:translateY(-2px); }
.nav-links a.active { background:rgba(251,248,239,.25); }
.lang-toggle { background:var(--cream); color:var(--olive); border:none; padding:.5rem 1rem; border-radius:25px; cursor:pointer; font-weight:700; transition:all .3s ease; }
.lang-toggle:hover { transform:scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,.2); }

/* Hero Section */
/* ========================
    Hero
======================== */
.hero { background:linear-gradient(rgba(80,86,49,.7),rgba(150,150,116,.5)),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23969674" width="1200" height="600"/><polygon fill="%23505631" points="0,600 400,200 800,400 1200,100 1200,600"/><circle fill="%23fbf8ef" cx="300" cy="150" r="50" opacity="0.3"/><circle fill="%23fbf8ef" cx="900" cy="250" r="80" opacity="0.2"/></svg>'); background-size:cover; background-position:center; min-height:92vh; display:flex; align-items:center; text-align:center; color:var(--cream); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(45deg,rgba(80,86,49,.1),rgba(150,150,116,.1)); animation:shimmer 3s ease-in-out infinite; }
@keyframes shimmer {0%,100%{opacity:.1}50%{opacity:.3}}
.hero-content { position:relative; z-index:2; margin:0 auto; }
.hero-logo { margin-bottom:1rem; }
.hero-logo-img { width:128px; height:128px; margin:0 auto .75rem; display:block; border-radius:50%; border:2px solid var(--cream); box-shadow:0 8px 24px rgba(0,0,0,.25); animation:fadeInDown .9s ease-out; }
.hero-card { max-width:760px; margin:0 auto; padding:1.25rem 1.25rem 1.5rem; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.25); border-radius:16px; backdrop-filter:blur(6px); box-shadow:var(--shadow); }
.hero-title { font-size:2.2rem; margin:0 0 .5rem; text-shadow:1px 2px 4px rgba(0,0,0,.3); animation:fadeInUp .9s ease-out; }
.hero-subtitle { font-size:1.05rem; color:var(--cream); }
.hero p { font-size:1.3rem; margin-bottom:1.25rem; animation:fadeInUp 1s ease-out .3s both; }
.cta-row { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin:.75rem 0 .5rem; }
.cta-button, .cta-secondary { font-weight:700; border-radius:50px; text-decoration:none; transition:all .3s ease; display:inline-block; }
.cta-button { background:var(--cream); color:var(--olive); padding:1rem 2rem; font-size:1.05rem; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.cta-button:hover { transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,.3); background:#fff; }
.cta-secondary { background:transparent; color:var(--cream); border:2px solid var(--cream); padding:.85rem 1.4rem; }
.cta-secondary:hover { background:rgba(255,255,255,.15); }
.hero-features { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:.5rem; color:var(--cream); opacity:.95; }
.hero-features li { list-style:none; }
@keyframes fadeInUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }

/* Services Section */
/* ========================
    Sections / Cards
======================== */
.services { padding:5rem 0; background:var(--cream); }
.section-title { text-align:center; font-size:2.5rem; margin-bottom:3rem; color:var(--olive); position:relative; }
.section-title::after { content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:80px; height:3px; background:var(--sage); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2rem; }
.service-card { background:#fff; padding:2rem; border-radius:15px; text-align:center; box-shadow:0 10px 30px rgba(80,86,49,.1); transition:all .3s ease; border:2px solid transparent; }
.service-card:hover { transform:translateY(-10px); box-shadow:0 20px 50px rgba(80,86,49,.2); border-color:var(--sage); }
.service-icon { font-size:3rem; color:var(--sage); margin-bottom:1rem; }
.service-card h3 { color:var(--olive); margin-bottom:1rem; font-size:1.3rem; }

/* About Section */
/* ========================
    About
======================== */
.about { padding:5rem 0; background:linear-gradient(135deg,var(--sage),var(--olive)); color:var(--cream); }
.about-content { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.about-text h2 { font-size:2.5rem; margin-bottom:1.5rem; }
.about-text p { font-size:1.1rem; margin-bottom:1rem; }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin-top:2rem; }
.stat { text-align:center; padding:1rem; background:rgba(251,248,239,.1); border-radius:10px; }
.stat-number { font-size:2.5rem; font-weight:700; color:var(--cream); }
.about-image-wrapper { position:relative; }
.about-image { display:block; width:100%; min-height:300px; height:auto; border-radius:15px; object-fit:cover; box-shadow:0 15px 40px rgba(0,0,0,.2); }

/* Properties Section */
/* ========================
    Properties
======================== */
.properties { padding:5rem 0; background:var(--cream); }
.properties-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2rem; }
.property-card { background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 10px 30px rgba(80,86,49,.1); transition:all .3s ease; }
.property-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(80,86,49,.2); }
.property-image { height:200px; background:linear-gradient(45deg,var(--sage),var(--olive)); position:relative; overflow:hidden; }
.property-image::before { content:'🏠'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:4rem; opacity:.3; }
.property-img { width:100%; height:100%; object-fit:cover; display:block; }
.property-info { padding:1.5rem; }
.property-price { font-size:1.5rem; font-weight:700; color:var(--olive); margin-bottom:.5rem; }
.property-location { color:var(--sage); margin-bottom:1rem; }

/* Contact Section */
/* ========================
    Contact
======================== */
.contact { padding:5rem 0; background:var(--olive); color:var(--cream); }
.contact-content { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-info h3 { font-size:1.8rem; margin-bottom:1rem; }
.contact-item { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; padding:1rem; background:rgba(251,248,239,.1); border-radius:10px; transition:all .3s ease; }
.contact-item:hover { background:rgba(251,248,239,.2); transform:translateX(10px); }
.contact-link { color:var(--cream); text-decoration:underline; }
.contact-form { background:rgba(251,248,239,.1); padding:2rem; border-radius:15px; }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; margin-bottom:.5rem; font-weight:700; }
.form-group input, .form-group textarea { width:100%; padding:1rem; border:none; border-radius:10px; background:var(--cream); color:var(--olive); font-size:1rem; }
.submit-btn { background:var(--cream); color:var(--olive); padding:1rem 2rem; border:none; border-radius:10px; font-weight:700; cursor:pointer; transition:all .3s ease; width:100%; }
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.2); }
.form-status { min-height:24px; margin-bottom:.75rem; font-size:.95rem; }

/* Footer */
/* ========================
    Footer
======================== */
footer { background:var(--olive); color:var(--cream); text-align:center; padding:2rem 0; border-top:3px solid var(--sage); }

/* Breadcrumb */
/* ========================
    Breadcrumb / Skip Link
======================== */
.breadcrumb { position:fixed; top:64px; right:0; left:0; background:rgba(80,86,49,.08); color:var(--olive); padding:.5rem 1rem; font-size:.95rem; backdrop-filter:blur(3px); z-index:900; text-align:center; }

/* Skip link */
 .skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
 .skip-link:focus { position:fixed; left:10px; top:10px; width:auto; height:auto; background:var(--cream); color:var(--olive); padding:.5rem 1rem; border-radius:6px; z-index:2000; }

/* Responsive Design */
/* ========================
     Responsive
======================== */
@media (max-width:768px){
    .container{padding:0 15px;} .mobile-menu-btn{display:block;}
    .nav-links{position:fixed;top:0;bottom:0;right:0;width:68%;max-width:360px;background:linear-gradient(180deg,var(--olive) 0%,#454b29 100%);flex-direction:column;padding:5rem 1.25rem 2rem;gap:.25rem;transform:translateX(100%);transition:var(--transition);box-shadow:-4px 0 24px -4px rgba(0,0,0,.35);overflow-y:auto;}
    [dir='rtl'] .nav-links{right:auto;left:0;transform:translateX(-100%);} [dir='rtl'] .nav-links.active{transform:translateX(0);} .nav-links.active{transform:translateX(0);} 
    .nav-links li{margin:0;opacity:0;transform:translateX(25px);transition:.4s ease;} .nav-links.active li{opacity:1;transform:translateX(0);} 
    .nav-links.active li:nth-child(1){transition-delay:.05s} .nav-links.active li:nth-child(2){transition-delay:.1s} .nav-links.active li:nth-child(3){transition-delay:.15s} .nav-links.active li:nth-child(4){transition-delay:.2s} .nav-links.active li:nth-child(5){transition-delay:.25s} .nav-links.active li:nth-child(6){transition-delay:.3s}
    .nav-links a{display:block;padding:.9rem .75rem;text-align:center;border-bottom:1px solid rgba(251,248,239,.1);} .lang-toggle{margin-top:1rem;width:100%;}
    .hero{min-height:80vh;padding:2rem 0;} .hero-title{font-size:1.55rem;} .hero p{font-size:1.05rem;margin-bottom:1.1rem;} .hero-logo-img{width:94px;height:94px;} .hero-card{padding:1rem 1rem 1.25rem;margin:0 .25rem;} .hero-subtitle{font-size:.95rem;} .hero-features{gap:.6rem;font-size:.8rem;}
    .section-title{font-size:2rem;margin-bottom:2rem;} .services{padding:3rem 0;} .services-grid{grid-template-columns:1fr;gap:1.5rem;} .service-card{padding:1.4rem;} .service-icon{font-size:2.4rem;}
    .about{padding:3rem 0;} .about-content{grid-template-columns:1fr;gap:2rem;} .about-text h2{font-size:2rem;} .about-text p{font-size:1rem;} .stats{grid-template-columns:repeat(2,1fr);gap:1rem;} .stat-number{font-size:1.9rem;} .about-image{min-height:210px;order:-1;}
    .properties{padding:3rem 0;} .properties-grid{grid-template-columns:1fr;gap:1.4rem;} .property-card{margin:0 auto;} .property-image{height:175px;} .breadcrumb{top:56px;font-size:.88rem;padding:.4rem .75rem;} .property-info{padding:1.15rem;} .property-price{font-size:1.25rem;}
    .contact{padding:3rem 0;} .contact-content{grid-template-columns:1fr;gap:2rem;} .contact-info h3,.contact-form h3{font-size:1.45rem;} .contact-item{flex-direction:column;text-align:center;gap:.5rem;} .contact-item span{font-size:1.4rem;} .contact-form{padding:1.4rem;} .form-group input,.form-group textarea{padding:.8rem;font-size:.9rem;} .submit-btn{padding:.8rem 1.4rem;}
}
@media (max-width:480px){
    .container{padding:0 10px;} .hero{min-height:78vh;} .hero h1{font-size:1.38rem;line-height:1.3;} .hero p{font-size:.95rem;padding:0 .75rem;} .hero-logo-img{width:82px;height:82px;} .cta-button{padding:.7rem 1.2rem;font-size:.9rem;} .cta-secondary{padding:.65rem 1.1rem;font-size:.9rem;} .section-title{font-size:1.75rem;} .service-card{padding:1.15rem;} .service-card h3{font-size:1.05rem;} .service-card p{font-size:.85rem;} .about-text h2{font-size:1.65rem;} .stats{grid-template-columns:repeat(2,1fr);gap:.75rem;} .stat{padding:.6rem;} .stat-number{font-size:1.6rem;} .property-image{height:150px;} .breadcrumb{top:52px;font-size:.8rem;} .property-info{padding:1rem;} .property-price{font-size:1.15rem;} .contact-item{padding:.7rem;} .contact-form{padding:1.1rem;} .hero-card{padding:.9rem .85rem 1.1rem;} .hero-title{font-size:1.34rem;} .hero-subtitle{font-size:.82rem;} .hero-features{font-size:.68rem;gap:.4rem;} .cta-row{gap:.45rem;} .cta-button,.cta-secondary{flex:1 1 auto;text-align:center;} .back-to-top{right:14px;bottom:85px;} .about-image{min-height:170px;}
}
@media (max-width:480px) and (max-height:600px){ .breadcrumb{display:none;} }

/* Animations */
/* ========================
    Animations / Utilities
======================== */
.fade-in { opacity:0; transform:translateY(30px); transition:all .8s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.back-to-top { position:fixed; bottom:95px; right:20px; width:48px; height:48px; border-radius:50%; background:linear-gradient(145deg,var(--olive),#3d4424); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(18px) scale(.6); transition:opacity .35s var(--transition), transform .45s var(--transition), box-shadow .3s ease; z-index:1000; isolation:isolate; --progress:0; }
.back-to-top::before { content:""; position:absolute; inset:0; padding:3px; border-radius:50%; background:conic-gradient(var(--cream) calc(var(--progress)*1%), rgba(255,255,255,.15) 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.85; transition:background .2s linear; }
.back-to-top::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(251,248,239,.35); opacity:0; }
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.back-to-top:hover { box-shadow:0 10px 26px rgba(0,0,0,.35); }
.back-to-top:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }
.back-to-top.pulse::after { animation:btRipple .6s ease-out; }
@keyframes btRipple { 0% { box-shadow:0 0 0 0 rgba(251,248,239,.55); opacity:1;} 100% { box-shadow:0 0 0 18px rgba(251,248,239,0); opacity:0;} }
.back-to-top:not(.show){pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .back-to-top{transition:none;} .back-to-top::before{transition:none;} }