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

:root{
--primary:#0F6D3C;
--primary-dark:#0b4f2c;
--accent:#1F8F4E;
--light:#f6fbf8;
--soft:#eef7f1;
--text:#333;
--muted:#666;
}

body{
font-family:Arial,sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;
line-height:1.7;
}

/* =========================
   CONTAINER
========================= */

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

/* =========================
   NAVBAR
========================= */

.navbar{
position:sticky;
top:0;
z-index:2000;

display:flex;
justify-content:space-between;
align-items:center;

padding:14px 5%;

background:rgba(255,255,255,0.96);

backdrop-filter:blur(12px);

box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

.logo-area{
display:flex;
align-items:center;
gap:12px;
}

.logo{
width:58px;
height:58px;
object-fit:contain;
}

.logo-area h1{
font-size:28px;
font-weight:800;
color:var(--primary);
}

.menu{
display:flex;
align-items:center;
gap:28px;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:600;
font-size:15px;
transition:0.3s ease;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--primary);
transition:0.3s;
}

.menu a:hover::after{
width:100%;
}

.menu a:hover{
color:var(--primary);
}

.dropdown{
position:relative;
}

.dropdown-menu{
display:none;

position:absolute;

top:45px;
right:0;

background:white;

min-width:240px;

border-radius:14px;

padding:10px 0;

box-shadow:0 15px 40px rgba(0,0,0,0.12);

overflow:hidden;

z-index:999;
}

.dropdown-menu a{
display:block;
padding:14px 20px;
}

.dropdown-menu a:hover{
background:#f5f5f5;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* =========================
   HERO
========================= */

.institute-hero{

position:relative;

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:120px 20px 140px;

overflow:hidden;

background:
linear-gradient(
90deg,
rgba(0,30,12,0.86),
rgba(0,30,12,0.65)
),
url("hero.webp");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.hero-overlay{

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(31,143,78,0.25),
transparent 35%
);

z-index:1;
}

.hero-content-box{

position:relative;
z-index:2;

max-width:1000px;

text-align:center;

color:white;
}

.hero-badge{

display:inline-block;

padding:12px 24px;

border-radius:40px;

background:rgba(255,255,255,0.12);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.15);

font-size:14px;
font-weight:600;

margin-bottom:30px;
}

.hero-content-box h1{

font-size:78px;
line-height:1.05;

margin-bottom:28px;

font-weight:800;

letter-spacing:-2px;
}

.hero-content-box p{

font-size:21px;
line-height:1.9;

max-width:760px;

margin:auto auto 40px;

color:rgba(255,255,255,0.92);
}

/* =========================
   HERO BUTTONS
========================= */

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.hero-btn{

padding:16px 34px;

border-radius:40px;

font-weight:700;

text-decoration:none;

transition:0.3s ease;

font-size:15px;
}

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

.primary-btn:hover{

transform:translateY(-5px);

background:#15703c;

box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.secondary-btn{

background:rgba(255,255,255,0.12);

border:1px solid rgba(255,255,255,0.20);

color:white;

backdrop-filter:blur(8px);
}

.secondary-btn:hover{

background:white;
color:var(--primary);

transform:translateY(-5px);
}

/* =========================
   HERO STATS
========================= */

.hero-stats{

margin-top:70px;

display:grid;
grid-template-columns:repeat(4,1fr);

gap:22px;
}

.hero-stat{

background:rgba(255,255,255,0.10);

backdrop-filter:blur(12px);

padding:28px 20px;

border-radius:22px;

border:1px solid rgba(255,255,255,0.10);

transition:0.3s ease;

color:white;
}

.hero-stat:hover{

transform:translateY(-6px);

background:rgba(255,255,255,0.15);
}

.hero-stat h3{

font-size:40px;
margin-bottom:10px;

color:white;
}

.hero-stat span{

font-size:15px;
color:rgba(255,255,255,0.85);
}

/* =========================
   SECTION TAG
========================= */

.section-tag{

display:inline-block;

background:#e8f5ee;
color:var(--primary);

padding:8px 18px;

border-radius:30px;

font-size:13px;
font-weight:700;

margin-bottom:20px;
}

/* =========================
   INTRO
========================= */

.institute-intro{
padding:110px 20px;
background:#f8faf8;
}

.intro-grid{

display:grid;
grid-template-columns:1.2fr 0.8fr;

gap:50px;
align-items:center;
}

.intro-text h2{

font-size:48px;
line-height:1.2;

margin-bottom:25px;
}

.intro-text p{

font-size:17px;
line-height:1.9;
color:#555;

margin-bottom:22px;
}

.intro-buttons{
display:flex;
gap:18px;
margin-top:30px;
flex-wrap:wrap;
}

.intro-btn{

background:var(--accent);
color:white;

padding:14px 28px;

border-radius:35px;

text-decoration:none;
font-weight:600;

transition:0.3s ease;
}

.intro-btn:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(0,0,0,0.12);
}

.outline-btn{

background:white;
color:var(--primary);

border:2px solid var(--accent);
}

/* =========================
   STATS
========================= */

.intro-stats{

display:grid;
grid-template-columns:1fr 1fr;

gap:20px;
}

.stat-card{

background:white;

padding:35px 25px;

border-radius:18px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,0.06);

transition:0.3s ease;
}

.stat-card:hover{
transform:translateY(-6px);
}

.stat-card h3{

font-size:42px;

margin-bottom:10px;

color:var(--primary);
}

.stat-card p{
color:#666;
font-weight:500;
}

/* =========================
   ABOUT
========================= */

.about-section{
padding:110px 20px;
}

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:60px;
align-items:center;
}

.about-image img{

width:100%;

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.about-content h2{

font-size:42px;
margin-bottom:25px;
}

.about-content p{

font-size:16px;
line-height:1.9;
color:#555;

margin-bottom:20px;
}

.about-highlight{

display:grid;
grid-template-columns:1fr 1fr;

gap:15px;

margin-top:35px;
}

.highlight-box{

background:#f7f7f7;

padding:18px;

border-radius:14px;

font-weight:600;

border-left:4px solid var(--accent);

transition:0.3s ease;
}

.highlight-box:hover{

transform:translateY(-4px);

background:#eef8f1;
}

/* =========================
   SERVICES
========================= */

.services-section{

background:#f9fbf9;
padding:110px 20px;
}

.services-header{

text-align:center;

max-width:800px;

margin:auto auto 60px;
}

.services-header h2{

font-size:46px;
margin-bottom:20px;
}

.services-header p{

font-size:17px;
line-height:1.8;
color:#666;
}

.services-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;
}

.service-card{

background:white;

padding:35px 30px;

border-radius:24px;

box-shadow:0 12px 35px rgba(0,0,0,0.06);

transition:0.35s ease;

position:relative;
overflow:hidden;
}

.service-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:linear-gradient(
90deg,
var(--accent),
#38b46a
);
}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.service-icon{

width:75px;
height:75px;

border-radius:20px;

display:flex;
align-items:center;
justify-content:center;

font-size:34px;

background:#eef8f1;

margin-bottom:25px;
}

.service-card h3{

font-size:24px;
margin-bottom:20px;
}

.service-card ul{
list-style:none;
}

.service-card ul li{

position:relative;

padding-left:28px;

margin-bottom:14px;

font-size:15px;
line-height:1.7;

color:#555;
}

.service-card ul li::before{

content:"✔";

position:absolute;

left:0;
top:0;

color:var(--accent);
font-weight:bold;
}

/* =========================
   BENEFICIARIES
========================= */

.beneficiaries-section{
padding:110px 20px;
}

.beneficiaries-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:70px;
align-items:center;
}

.section-description{

font-size:17px;
line-height:1.8;

color:#666;

margin-bottom:35px;
}

.beneficiary-list{

display:flex;
flex-direction:column;

gap:22px;
}

.beneficiary-item{

display:flex;
gap:20px;

padding:22px;

background:#f9faf9;

border-radius:18px;

transition:0.3s ease;
}

.beneficiary-item:hover{

transform:translateX(8px);

background:#eef8f1;
}

.beneficiary-icon{

width:65px;
height:65px;

border-radius:18px;

background:#e7f5ec;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;

flex-shrink:0;
}

.beneficiary-item h3{

margin-bottom:8px;
font-size:20px;
}

.beneficiary-item p{

font-size:15px;
line-height:1.7;
color:#666;
}

.beneficiaries-image img{

width:100%;

border-radius:28px;

box-shadow:0 20px 50px rgba(0,0,0,0.12);

object-fit:cover;
}

/* =========================
   CONTACT
========================= */

.contact-section{

padding:120px 20px;

background:
linear-gradient(
135deg,
#f7faf8,
#eef7f1
);
}

.contact-header{

text-align:center;

max-width:800px;

margin:auto auto 70px;
}

.contact-header h2{

font-size:48px;
margin-bottom:20px;
}

.contact-header p{

font-size:17px;
line-height:1.8;
color:#666;
}

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:50px;
align-items:start;
}

.contact-info-wrapper{

display:flex;
flex-direction:column;

gap:20px;
}

.contact-card{

display:flex;
gap:20px;

align-items:flex-start;

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 12px 35px rgba(0,0,0,0.06);

transition:0.3s ease;
}

.contact-card:hover{
transform:translateY(-5px);
}

.contact-icon{

width:60px;
height:60px;

border-radius:18px;

background:#eef8f1;

display:flex;
align-items:center;
justify-content:center;

font-size:26px;

flex-shrink:0;
}

.contact-card h3{

font-size:20px;
margin-bottom:8px;
}

.contact-card p{

font-size:15px;
line-height:1.7;
color:#666;
}

.map-wrapper{

background:white;

padding:20px;

border-radius:28px;

box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.map-wrapper iframe{

width:100%;
height:650px;

border:none;

border-radius:20px;
}

.map-button-wrap{

display:flex;
justify-content:center;

margin-top:25px;
}

.map-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:16px 34px;

background:var(--accent);

color:white;

border-radius:40px;

text-decoration:none;

font-weight:700;

transition:0.3s ease;
}

.map-btn:hover{

transform:translateY(-4px);

background:#15703c;
}

/* =========================
   FOOTER
========================= */

footer{

background:#0d3f22;

color:white;

text-align:center;

padding:30px 20px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:950px){

.menu-toggle{
display:block;
}

.menu{

position:fixed;

top:85px;
right:-100%;

width:280px;
height:calc(100vh - 85px);

background:white;

flex-direction:column;
align-items:flex-start;

padding:30px 25px;

transition:0.4s ease;

box-shadow:-10px 0 30px rgba(0,0,0,0.08);
}

.menu.active{
right:0;
}

.hero-content-box h1{
font-size:54px;
}

.hero-content-box p{
font-size:18px;
}

.hero-stats{
grid-template-columns:1fr 1fr;
}

.intro-grid,
.about-grid,
.beneficiaries-grid,
.contact-grid{

grid-template-columns:1fr;
}

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

.contact-header h2,
.services-header h2{
font-size:38px;
}

}

@media(max-width:600px){

.hero-content-box h1{
font-size:40px;
}

.hero-content-box p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-btn{
width:100%;
max-width:320px;
}

.hero-stats{
grid-template-columns:1fr;
}

.intro-text h2,
.about-content h2{
font-size:32px;
}

.intro-stats{
grid-template-columns:1fr;
}

.about-highlight{
grid-template-columns:1fr;
}

.map-wrapper iframe{
height:350px;
}

}


html,
body{
    overflow-x:hidden;
}
/* =========================
   CORE VALUES
========================= */
.core-values-section {
  padding: 100px 20px;
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 100%);
}

.core-values-heading {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.core-values-heading h2 {
  margin: 0 0 14px;
  color: var(--primary-dark);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.15;
}

.core-values-heading .section-tag {
  margin-bottom: 16px;
}

.core-values-heading .section-description {
  margin: 0;
  color: var(--muted);
}

.core-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.core-value-card {
  position: relative;
  min-height: 220px;
  padding: 28px 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4eee7;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15, 109, 60, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.core-value-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), #9ccc65);
  content: "";
}

.core-value-card:hover {
  transform: translateY(-5px);
  border-color: #c8e2d1;
  box-shadow: 0 16px 34px rgba(15, 109, 60, 0.13);
}

.core-value-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  place-items: center;
  color: var(--primary);
  background: var(--soft);
  border-radius: 15px;
  font-size: 24px;
  font-weight: 700;
}

.core-value-card h3 {
  margin: 0 0 9px;
  color: #20392b;
  font-size: 19px;
  line-height: 1.35;
}

.core-value-card h3 span {
  color: var(--primary);
  font-size: 0.88em;
  font-weight: 600;
}

.core-value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .core-values-section { padding: 78px 20px; }
  .core-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 600px) {
  .core-values-section { padding: 64px 16px; }
  .core-values-heading { margin-bottom: 30px; }
  .core-values-grid { grid-template-columns: 1fr; gap: 14px; }
  .core-value-card { min-height: 0; padding: 23px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .core-value-card { transition: none; }
  .core-value-card:hover { transform: none; }
}

/* Center the hero information cards as one balanced group. */
.hero-stats {
  width: 100%;
  max-width: 840px;
  margin: 70px auto 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
}

.hero-stat {
  text-align: center;
}

@media (max-width: 700px) {
  .hero-stats {
    max-width: 520px;
    margin: 45px auto 0;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* =========================================================
   DATE PALM FOUNDATION PAGE — responsive page-specific styles
   ========================================================= */
.datepalm-page{--dp-brown:#633719;--dp-orange:#ed6b2e;--dp-ink:#262626;--dp-muted:#626262;--dp-paper:#f7f7f5;color:var(--dp-ink);font-family:Arial,sans-serif;line-height:1.7}
.datepalm-page *{box-sizing:border-box}
.dp-container{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.dp-narrow{max-width:900px}
.dp-hero{isolation:isolate;position:relative;overflow:hidden;text-align:center;padding:64px 20px 58px;background:#f5f5f3;border-bottom:6px solid #8b8b8b}
.dp-hero-pattern{position:absolute;z-index:-1;inset:0;opacity:.13;background-image:radial-gradient(ellipse at 50% 20%,#fff 0 9%,transparent 10%),repeating-linear-gradient(120deg,transparent 0 42px,rgba(99,55,25,.08) 43px 45px,transparent 46px 85px)}
.dp-brand-mark{font-size:clamp(42px,6vw,76px);line-height:1;margin-bottom:8px;filter:saturate(.8)}
.dp-kicker{margin:0 auto 8px;color:#6e6e6e;font-size:clamp(12px,1.6vw,16px);letter-spacing:.11em;text-transform:uppercase}
.dp-hero h1{margin:0;font-size:clamp(54px,9vw,100px);font-weight:500;line-height:1.05;letter-spacing:-.045em;color:var(--dp-brown)}
.dp-hero h1 strong{color:var(--dp-orange);font-weight:700}
.dp-foundation-word{font-size:clamp(17px,3.8vw,42px);font-weight:300;letter-spacing:.24em;color:#777;line-height:1.4}
.dp-arabic{margin:4px 0 14px;color:var(--dp-brown);font-size:clamp(25px,4.5vw,48px);font-weight:700}
.dp-hero-note{max-width:720px;margin:18px auto 0;color:#393939;font-size:clamp(15px,1.8vw,19px)}
.dp-section{padding:78px 0;border-bottom:6px solid #8b8b8b}
.dp-overview{background:#f3f4f5;text-align:center}
.dp-eyebrow{display:inline-block;margin-bottom:10px;color:var(--dp-orange);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.dp-section h2,.dp-contact h2{margin:0 0 22px;color:var(--dp-orange);font-size:clamp(29px,4vw,43px);line-height:1.2}
.dp-overview p,.dp-management> .dp-container>p{margin:0 auto 19px;font-size:clamp(15px,1.65vw,18px);line-height:1.8}
.dp-overview p:last-child{margin-bottom:0}
.dp-projects{background:#fff}
.dp-section-heading{max-width:800px;margin:0 auto 34px;text-align:center}
.dp-section-heading>p{margin:0;color:var(--dp-muted);font-size:17px}
.dp-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dp-project-card{position:relative;min-width:0;padding:28px 24px 25px;border:1px solid #eee2d9;border-radius:17px;background:#fffaf6;box-shadow:0 9px 26px rgba(67,45,26,.06);transition:transform .2s ease,box-shadow .2s ease}
.dp-project-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(67,45,26,.12)}
.dp-project-number{position:absolute;top:18px;right:19px;color:#d6c5b8;font-size:13px;font-weight:800;letter-spacing:.1em}
.dp-project-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:18px;border-radius:16px;background:#ffeadc;color:var(--dp-brown);font-size:26px}
.dp-project-card h3{margin:0 0 9px;color:#49301f;font-size:19px;line-height:1.35}
.dp-project-card p{margin:0;color:#626262;font-size:15px;line-height:1.7}
.dp-management{background:#f3f4f5;text-align:center}
.dp-management .dp-container>p{margin-bottom:20px}
.dp-prayer{margin-top:34px;padding:28px 30px;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.dp-prayer-mark{display:block;color:var(--dp-orange);font-size:28px;margin-bottom:8px}
.dp-prayer p{margin:0 auto 20px;font-size:16px;line-height:1.8}
.dp-prayer strong{display:block;color:var(--dp-orange);font-size:clamp(16px,2vw,20px)}
.dp-contact{padding:68px 0;background:#fff8f2}
.dp-contact-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px}
.dp-contact h2{color:var(--dp-brown);margin-bottom:15px}
.dp-contact-inner>div:first-child>p{max-width:470px;color:var(--dp-muted);margin:0}
.dp-contact-details{display:grid;gap:14px}
.dp-contact-item{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid #f0dfd2;border-radius:14px;background:#fff}
.dp-contact-item>span{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#ffeadc;color:var(--dp-brown);font-size:23px}
.dp-contact-item strong{display:block;margin-bottom:3px;color:#49301f}
.dp-contact-item p{margin:0;color:#5e5e5e;overflow-wrap:anywhere;line-height:1.65}
.dp-contact-item a{color:#71421f;text-decoration:none}
.dp-contact-item a:hover{text-decoration:underline}
@media(max-width:900px){.dp-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dp-contact-inner{grid-template-columns:1fr;gap:28px}.dp-section{padding:62px 0}}
@media(max-width:600px){.dp-container{width:calc(100% - 30px)}.dp-hero{padding:44px 16px 40px}.dp-foundation-word{letter-spacing:.12em}.dp-section{padding:48px 0}.dp-project-grid{grid-template-columns:1fr;gap:14px}.dp-project-card{padding:24px 21px}.dp-prayer{padding:24px 19px}.dp-contact{padding:48px 0}.dp-contact-item{padding:15px}.dp-overview p,.dp-management> .dp-container>p{line-height:1.72}}
@media(prefers-reduced-motion:reduce){.dp-project-card{transition:none}.dp-project-card:hover{transform:none}}