/* ==========================================================================
   Nadra Al-Mustakbal — main stylesheet
   ========================================================================== */

:root{
	--c-blue:#302A7A;
	--c-mid:#86184A;
	--c-red:#CB2026;
	--gradient: linear-gradient(120deg, var(--c-blue) 0%, var(--c-mid) 55%, var(--c-red) 100%);
	--gradient-soft: linear-gradient(120deg, rgba(48,42,122,.12) 0%, rgba(134,24,74,.10) 55%, rgba(203,32,38,.12) 100%);

	--c-ink:#15131f;
	--c-body:#4a4658;
	--c-muted:#7a7688;
	--c-light:#f6f5fa;
	--c-line:#e8e6f0;
	--c-white:#ffffff;

	--radius:16px;
	--radius-sm:10px;
	--shadow-sm: 0 2px 10px rgba(21,19,31,.06);
	--shadow-md: 0 12px 30px rgba(21,19,31,.10);
	--shadow-lg: 0 24px 60px rgba(21,19,31,.16);

	--font-latin: 'Poppins', 'Cairo', sans-serif;
	--font-ar: 'Cairo', 'Poppins', sans-serif;

	--container: 1180px;
	--header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family: var(--font-latin);
	color: var(--c-ink);
	background: var(--c-white);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
body.is-rtl{ font-family: var(--font-ar); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:700; line-height:1.2; }
p{ margin:0 0 1em; color: var(--c-body); }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.container.narrow{ max-width: 820px; }
.section{ padding: 96px 0; }
@media (max-width: 782px){ .section{ padding: 64px 0; } }

.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
.skip-link{
	position:fixed; top:-60px; left:16px; z-index:9999;
	background:var(--c-ink); color:#fff; padding:10px 16px; border-radius:8px; transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px;
	border:1.5px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
	white-space:nowrap;
}
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-primary{ background: var(--gradient); color:#fff; box-shadow: var(--shadow-md); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost{ background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover{ border-color: var(--c-mid); color: var(--c-mid); transform: translateY(-2px); }
.btn-light{ background:#fff; color: var(--c-ink); box-shadow: var(--shadow-md); }
.btn-light:hover{ transform: translateY(-2px); }
.btn-arrow{ width:16px; height:16px; transition: transform .25s ease; }
.is-rtl .btn-arrow{ transform: scaleX(-1); }
.btn:hover .btn-arrow{ transform: translateX(4px); }
.is-rtl .btn:hover .btn-arrow{ transform: scaleX(-1) translateX(4px); }
.btn-arrow-back{ transform: scaleX(-1); }
.is-rtl .btn-arrow-back{ transform: none; }

.nadra-icon{ width:22px; height:22px; flex-shrink:0; }

/* ---------- Header ---------- */
.site-header{
	position: fixed; inset-inline:0; top:0; z-index:100;
	height: var(--header-h);
	display:flex; align-items:center;
	background: rgba(255,255,255,0); transition: background .3s ease, box-shadow .3s ease;
	color:#fff;
}
.site-header.is-scrolled{ background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); color: var(--c-ink); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-logo{ height:46px; width:auto; filter: brightness(0) invert(1); transition: filter .3s ease; }
.site-header.is-scrolled .brand-logo{ filter:none; }
.main-nav ul{ display:flex; gap:34px; align-items:center; }
.main-nav a{ font-weight:600; font-size:15px; position:relative; padding:6px 0; color:inherit; }
.main-nav a::after{
	content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--gradient);
	transition: width .25s ease;
}
.main-nav a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:16px; }
.lang-switch{
	font-weight:600; font-size:14px; padding:8px 14px; border-radius:999px; border:1.5px solid rgba(255,255,255,.45); color:#fff;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.site-header.is-scrolled .lang-switch{ border-color: var(--c-line); color: var(--c-ink); }
.lang-switch:hover{ border-color: var(--c-mid); color: var(--c-mid); background: rgba(255,255,255,.9); }
.header-cta{ display:inline-flex; }
.nav-toggle{ display:none; background:none; border:none; padding:6px; color:inherit; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width: 900px){
	.header-cta{ display:none; }
	.nav-toggle{ display:flex; }
	.main-nav{
		position:fixed; top: var(--header-h); left:0; right:0; bottom:0;
		background:#fff; transform: translateY(-8px); opacity:0; pointer-events:none;
		transition: transform .25s ease, opacity .25s ease;
		padding: 32px 24px; overflow-y:auto;
	}
	.main-nav.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
	.main-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
	.main-nav a{ font-size:20px; color: var(--c-ink); }
}

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-reveal-delay="1"]{ transition-delay:.08s; }
.reveal[data-reveal-delay="2"]{ transition-delay:.16s; }
.reveal[data-reveal-delay="3"]{ transition-delay:.24s; }
.reveal[data-reveal-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
	.reveal, html{ transition:none !important; scroll-behavior:auto !important; }
	.reveal{ opacity:1; transform:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height: 92vh; display:flex; align-items:center; overflow:hidden; padding-top: var(--header-h); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,12,28,.78) 0%, rgba(21,15,40,.86) 55%, rgba(10,8,20,.94) 100%); }
.hero-blob{ position:absolute; border-radius:50%; filter: blur(70px); opacity:.55; animation: float 12s ease-in-out infinite; }
.hero-blob-1{ width:420px; height:420px; background: var(--c-blue); top:-10%; inset-inline-start:-8%; }
.hero-blob-2{ width:360px; height:360px; background: var(--c-red); bottom:-15%; inset-inline-end:-6%; animation-delay:-6s; }
@keyframes float{ 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-30px) scale(1.06); } }

.hero-inner{ position:relative; z-index:1; max-width:820px; text-align:start; }
.eyebrow{
	display:inline-block; padding:8px 18px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.04em;
	color:#fff; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); margin-bottom:22px; backdrop-filter: blur(6px);
}
.hero-title{ font-size: clamp(2.2rem, 5vw, 3.6rem); color:#fff; margin-bottom:.4em; }
.hero-sub{ font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.82); max-width:640px; margin-bottom:2em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }
.hero-actions .btn-ghost{ color:#fff; border-color: rgba(255,255,255,.4); }
.hero-actions .btn-ghost:hover{ border-color:#fff; color:#fff; background: rgba(255,255,255,.1); }
.hero-scroll-cue{
	position:absolute; bottom:28px; inset-inline-start:50%; transform: translateX(-50%);
	width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:20px; z-index:1;
}
.hero-scroll-cue::before{
	content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
	width:4px; height:8px; background:#fff; border-radius:2px; animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ opacity:1; top:8px;} 70%{ opacity:0; top:20px;} 100%{opacity:0;top:8px;} }

/* ---------- Section head ---------- */
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem,3vw,2.4rem); }
.section-head p{ color: var(--c-muted); font-size:1.05rem; }

/* ---------- Services grid ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
@media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{
	background:#fff; border:1px solid var(--c-line); border-radius: var(--radius); padding:34px 28px;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-icon{
	width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
	background: var(--gradient-soft); margin-bottom:20px;
}
.service-icon .nadra-icon{ width:28px; height:28px; }
.service-icon .nadra-icon, .why-icon .nadra-icon{ color: var(--c-mid); }
.service-card h3{ font-size:1.15rem; margin-bottom:.5em; }
.service-card p{ font-size:.95rem; margin-bottom:1.4em; }
.service-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.9rem; color: var(--c-mid); }
.link-arrow{ width:15px; height:15px; transition: transform .25s ease; }
.service-link:hover .link-arrow{ transform: translateX(4px); }
.is-rtl .service-link:hover .link-arrow{ transform: scaleX(-1) translateX(4px); }
.is-rtl .link-arrow{ transform: scaleX(-1); }

/* ---------- Why us ---------- */
.why-us{ background: var(--c-light); }
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
@media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card{ background:#fff; border-radius: var(--radius); padding:30px 24px; text-align:center; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.why-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-icon{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--gradient-soft); }
.why-card h3{ font-size:1.05rem; }
.why-card p{ font-size:.9rem; margin-bottom:0; }

/* ---------- Portfolio ---------- */
.portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width: 900px){ .portfolio-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .portfolio-grid{ grid-template-columns: 1fr; } }
.portfolio-card{
	display:block; border-radius: var(--radius); overflow:hidden; background:#fff; border:1px solid var(--c-line);
	transition: transform .3s ease, box-shadow .3s ease;
}
.portfolio-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.portfolio-thumb{ aspect-ratio: 4/3; overflow:hidden; background: var(--c-light); }
.portfolio-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.portfolio-card:hover .portfolio-thumb img{ transform: scale(1.08); }
.portfolio-info{ padding:22px 24px; }
.portfolio-info h3{ font-size:1.05rem; margin-bottom:.4em; }
.portfolio-info p{ font-size:.9rem; }
.portfolio-view{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem; color: var(--c-mid); }

.portfolio-filters{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:44px; }
.filter-btn{
	padding:10px 20px; border-radius:999px; border:1.5px solid var(--c-line); background:#fff; font-weight:600; font-size:.9rem;
	transition: all .2s ease;
}
.filter-btn:hover{ border-color: var(--c-mid); color: var(--c-mid); }
.filter-btn.is-active{ background: var(--gradient); color:#fff; border-color:transparent; }
.portfolio-card.is-hidden{ display:none; }

/* ---------- CTA banner ---------- */
.cta-banner{ background: var(--gradient); position:relative; overflow:hidden; }
.cta-banner-inner{ text-align:center; max-width:640px; }
.cta-banner h2{ color:#fff; font-size: clamp(1.7rem,3vw,2.3rem); }
.cta-banner p{ color: rgba(255,255,255,.85); margin-bottom:2em; }

/* ---------- Footer ---------- */
.site-footer{ background: #120f1f; color: rgba(255,255,255,.72); padding-top:76px; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; }
@media (max-width: 860px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-inner{ grid-template-columns: 1fr; } }
.footer-logo{ height:42px; margin-bottom:16px; filter: brightness(0) invert(1); opacity:.92; }
.footer-tagline{ font-size:.9rem; color: rgba(255,255,255,.55); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.social-icon{
	width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background: rgba(255,255,255,.08); transition: background .2s ease, transform .2s ease;
}
.social-icon .nadra-icon{ width:17px; height:17px; }
.social-icon:hover{ background: var(--gradient); transform: translateY(-3px); }
.site-footer h4{ color:#fff; font-size:.95rem; letter-spacing:.03em; margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ font-size:.9rem; color: rgba(255,255,255,.65); transition: color .2s ease; }
.footer-links a:hover{ color:#fff; }
.footer-contact{ display:flex; flex-direction:column; gap:16px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; }
.footer-contact .nadra-icon{ width:18px; height:18px; margin-top:2px; flex-shrink:0; color: var(--c-red); }
.footer-contact a{ color: rgba(255,255,255,.65); }
.footer-contact a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:24px 0; }
.footer-bottom p{ margin:0; font-size:.82rem; color: rgba(255,255,255,.45); text-align:center; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ position:relative; padding: calc(var(--header-h) + 90px) 0 70px; background: var(--gradient); overflow:hidden; }
.page-hero::before{
	content:""; position:absolute; inset:0; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.14), transparent 45%);
}
.page-hero-inner{ position:relative; text-align:center; max-width:720px; margin:0 auto; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ color:#fff; font-size: clamp(1.9rem,4vw,2.8rem); margin-bottom:.3em; }
.page-hero p{ color: rgba(255,255,255,.85); margin-bottom:0; }

.page-hero-contact{ background: var(--c-ink); }
.page-hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.page-hero-contact .hero-overlay{ background: linear-gradient(160deg, rgba(48,42,122,.88), rgba(203,32,38,.72)); }

/* ---------- Generic page ---------- */
.generic-page .page-title{ font-size:2rem; margin-top:120px; }
.page-content{ color: var(--c-body); }
.page-content p{ font-size:1.02rem; }

/* ---------- About page ---------- */
.about-intro-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center; }
@media (max-width: 860px){ .about-intro-grid{ grid-template-columns:1fr; } }
.about-intro-media img{ border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.about-intro-text h2{ font-size:1.9rem; }

.mission-vision{ background: var(--c-light); }
.mv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; }
@media (max-width: 700px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{ background:#fff; border-radius: var(--radius); padding:40px; box-shadow: var(--shadow-sm); }
.mv-card .why-icon{ margin:0 0 18px; }
.mv-card h3{ font-size:1.3rem; }

.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
@media (max-width: 900px){ .process-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }
.process-card{ position:relative; padding:30px 26px; border:1px solid var(--c-line); border-radius: var(--radius); }
.process-num{
	display:block; font-size:2.2rem; font-weight:800; background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px;
}
.process-card h3{ font-size:1.05rem; }
.process-card p{ font-size:.9rem; margin-bottom:0; }

/* ---------- Services detail ---------- */
.service-detail:nth-of-type(even){ background: var(--c-light); }
.service-detail-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
@media (max-width: 860px){ .service-detail-grid{ grid-template-columns:1fr; } }
.service-detail.is-flipped .service-detail-grid{ direction: ltr; }
.service-detail.is-flipped .service-detail-media{ order:2; }
.service-detail.is-flipped .service-detail-text{ order:1; direction: inherit; }
body.is-rtl .service-detail.is-flipped .service-detail-grid{ direction: rtl; }
.service-detail-media img{ border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit:cover; }
.service-detail-text h2{ font-size:1.7rem; margin-top:16px; }
.service-bullets{ margin:22px 0 28px; display:flex; flex-direction:column; gap:12px; }
.service-bullets li{ display:flex; align-items:flex-start; gap:10px; font-size:.96rem; color: var(--c-body); }
.service-bullets .nadra-icon{ width:18px; height:18px; color: var(--c-mid); margin-top:2px; flex-shrink:0; }

/* ---------- Portfolio single ---------- */
.project-hero{ position:relative; height:52vh; min-height:360px; overflow:hidden; margin-top: var(--header-h); }
.project-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,12,28,.35), rgba(15,12,28,.85)); }
.project-hero-content{ position:absolute; bottom:40px; inset-inline-start:0; right:0; }
.project-hero-content h1{ color:#fff; font-size: clamp(1.7rem,3.4vw,2.6rem); margin-top:.2em; }
.project-lead{ font-size:1.15rem; color: var(--c-ink); font-weight:600; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:56px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-list{ display:flex; flex-direction:column; gap:22px; margin:26px 0; }
.contact-info-list li{ display:flex; align-items:flex-start; gap:14px; }
.contact-info-list .nadra-icon{ width:22px; height:22px; color: var(--c-mid); margin-top:3px; flex-shrink:0; }
.contact-info-list strong{ display:block; font-size:.85rem; color: var(--c-muted); margin-bottom:2px; }
.contact-info-list span{ font-size:1rem; }
.contact-social{ margin: 8px 0 28px; }
.contact-map{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.contact-map iframe{ width:100%; height:260px; border:0; display:block; }

.contact-form-wrap{ background: var(--c-light); border-radius: var(--radius); padding:44px; }
@media (max-width: 560px){ .contact-form-wrap{ padding:28px; } }
.contact-form{ margin-top:20px; }
.form-row{ margin-bottom:20px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 560px){ .form-row-2{ grid-template-columns:1fr; } }
.contact-form label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; color: var(--c-ink); }
.contact-form input, .contact-form select, .contact-form textarea{
	width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--c-line); background:#fff;
	font-family:inherit; font-size:.95rem; color: var(--c-ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
	outline:none; border-color: var(--c-mid); box-shadow: 0 0 0 3px rgba(134,24,74,.12);
}
.contact-form textarea{ resize:vertical; }
.form-status{ margin-top:14px; font-size:.9rem; font-weight:600; min-height:1.2em; }
.form-status.is-success{ color:#1a8f4c; }
.form-status.is-error{ color: var(--c-red); }
#cf-submit[disabled]{ opacity:.7; pointer-events:none; }

/* ---------- Misc ---------- */
::selection{ background: var(--c-mid); color:#fff; }