/* ============ Fadhakir Islamic Foundation ============ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --teal:#16a0ab; --teal-d:#0e6f78; --teal-dd:#0b5a63;
  --green:#2f9e6a; --green-d:#24824f;
  --ink:#10262b; --ink-2:#0b1c20;
  --cream:#f7f4ee; --cream-2:#f2efe8;
  --muted:#57696d; --muted-2:#6b7c7f;
  --line:#eceee9;
  --serif:'Marcellus', Georgia, serif;
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); color:#16323a; background:#fff; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:var(--sans); }
.container{ max-width:1160px; margin:0 auto; padding:0 28px; }
.serif{ font-family:var(--serif); font-weight:400; }

/* ---------- Buttons ---------- */
.btn{ cursor:pointer; border:none; font-family:var(--sans); font-weight:700; font-size:15px; padding:14px 30px; border-radius:5px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 10px 26px rgba(47,158,106,.3); }
.btn-primary:hover{ background:var(--green-d); }
.btn-outline{ background:transparent; border:1.5px solid var(--teal); color:var(--teal-d); }
.btn-outline:hover{ background:var(--teal); color:#fff; }
.btn-white{ background:#fff; color:var(--teal-d); }
.btn-white:hover{ background:var(--cream); }

/* ---------- Eyebrow ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--teal); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; margin-bottom:16px; }
.eyebrow svg{ width:13px; height:13px; }
.eyebrow.on-dark{ color:#8fe0e8; }

.h-section{ font-family:var(--serif); font-weight:400; font-size:41px; line-height:1.15; margin:0 0 16px; color:var(--ink); }
.lead{ font-size:16.5px; line-height:1.7; color:var(--muted); margin:0; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--ink); color:#cfe4e6; font-size:13.5px; padding:9px 0; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.topbar .tb-left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar span.tb-item{ display:inline-flex; align-items:center; gap:8px; }
.topbar svg{ width:14px; height:14px; }
.topbar .tb-right{ display:flex; align-items:center; gap:16px; }
.topbar .divider{ height:14px; width:1px; background:rgba(255,255,255,.2); }
.topbar .arabic{ color:#e9f3f4; letter-spacing:.02em; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid #eef1ef; box-shadow:0 4px 24px rgba(16,38,43,.05); }
.site-header .container{ height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand img{ height:52px; width:auto; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ text-decoration:none; color:#16323a; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; position:relative; padding:6px 0; }
.nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--green); border-radius:2px; transition:right .25s ease; }
.nav a:hover::after{ right:0; }
.nav a.active{ color:var(--teal-d); }
.nav a.active::after{ right:0; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:transparent; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.3s; }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--ink); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(11,25,28,.96) 0%, rgba(11,25,28,.86) 40%, rgba(11,25,28,.35) 70%, rgba(11,25,28,.1) 100%); }
.hero-inner{ position:relative; max-width:640px; padding:118px 0 128px; }
.hero .chip{ display:inline-flex; align-items:center; gap:10px; background:rgba(22,160,171,.16); border:1px solid rgba(22,160,171,.4); color:#8fe0e8; padding:8px 18px; border-radius:40px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:26px; }
.hero .chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero h1{ font-family:var(--serif); font-weight:400; color:#fff; font-size:57px; line-height:1.1; margin:0 0 22px; }
.hero p{ color:#c8d6d8; font-size:18.5px; line-height:1.65; margin:0 0 38px; max-width:540px; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.play-btn{ cursor:pointer; display:inline-flex; align-items:center; gap:14px; background:transparent; border:none; color:#fff; font-weight:600; font-size:16px; }
.play-circle{ width:54px; height:54px; border-radius:50%; background:rgba(47,158,106,.92); display:inline-flex; align-items:center; justify-content:center; animation:fdhk-pulse 2.6s infinite; }
.play-circle svg{ width:18px; height:18px; fill:#fff; }

/* ---------- Stats ---------- */
.stats-wrap{ background:#fff; position:relative; z-index:2; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; transform:translateY(-46px); }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px 24px; text-align:center; box-shadow:0 18px 44px rgba(16,38,43,.09); }
.stat-ic{ width:46px; height:46px; margin:0 auto 14px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.stat-ic svg{ width:24px; height:24px; }
.stat-ic.teal{ background:rgba(22,160,171,.1); color:var(--teal); }
.stat-ic.green{ background:rgba(47,158,106,.12); color:var(--green); }
.stat-num{ font-family:var(--serif); font-size:40px; color:var(--ink); line-height:1; }
.stat-label{ color:var(--muted-2); font-size:13.5px; margin-top:8px; font-weight:600; }

/* ---------- Sections ---------- */
.section{ padding:88px 0; }
.section.tight{ padding:60px 0 92px; }
.bg-cream{ background:var(--cream); }
.bg-dark{ background:var(--ink); }
.center-head{ max-width:660px; margin:0 auto 54px; text-align:center; }

/* ---------- About intro (home) ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.mv-card{ border-radius:16px; padding:30px 32px; display:flex; gap:20px; align-items:flex-start; }
.mv-card .mv-ic{ flex-shrink:0; width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
.mv-card .mv-ic svg{ width:26px; height:26px; }
.mv-card h3{ font-family:var(--serif); font-weight:400; font-size:21px; margin:0 0 7px; }
.mv-card p{ margin:0; font-size:14.5px; line-height:1.65; }
.mv-light{ background:var(--cream); }
.mv-light .mv-ic{ background:#fff; box-shadow:0 6px 16px rgba(16,38,43,.08); color:var(--teal); }
.mv-light h3{ color:var(--ink); } .mv-light p{ color:var(--muted); }
.mv-dark{ background:var(--teal-d); }
.mv-dark .mv-ic{ background:rgba(255,255,255,.14); color:#fff; }
.mv-dark h3{ color:#fff; } .mv-dark p{ color:#cdeef1; }

/* ---------- Cards / programs ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ height:100%; background:#fff; border-radius:16px; padding:34px 30px; box-shadow:0 12px 34px rgba(16,38,43,.07); border:1px solid #efe9df; transition:transform .3s ease, box-shadow .3s ease; }
.card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(16,38,43,.15); }
.card-ic{ width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.card-ic svg{ width:28px; height:28px; }
.card-ic.teal{ background:rgba(22,160,171,.12); color:var(--teal-d); }
.card-ic.green{ background:rgba(47,158,106,.14); color:var(--green-d); }
.card-ic.float{ animation:fdhk-float 5s ease-in-out infinite; }
.card h3{ font-size:20px; font-weight:700; color:var(--ink); margin:0 0 12px; }
.card p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0; }
.card-cta{ height:100%; background:linear-gradient(150deg,var(--teal),#0f7d86); border-radius:16px; padding:34px 30px; box-shadow:0 16px 38px rgba(22,160,171,.32); color:#fff; display:flex; flex-direction:column; justify-content:center; transition:transform .3s ease; }
.card-cta:hover{ transform:translateY(-8px); }
.card-cta h3{ font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 12px; line-height:1.2; }
.card-cta p{ font-size:14.5px; line-height:1.6; color:#d6f2f4; margin:0 0 22px; }

/* ---------- Project story ---------- */
.story-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.story figure{ margin:0; }
.story .ph{ border-radius:14px; overflow:hidden; box-shadow:0 14px 34px rgba(16,38,43,.12); }
.story .ph img{ width:100%; height:250px; object-fit:cover; }
.story figcaption{ margin-top:14px; }
.tag{ display:inline-block; font-weight:700; font-size:12px; padding:4px 12px; border-radius:20px; margin-bottom:8px; }
.tag.before{ background:var(--cream-2); color:#8a6a2a; }
.tag.building{ background:rgba(22,160,171,.12); color:#0f7d86; }
.tag.today{ background:rgba(47,158,106,.16); color:var(--green-d); }
.story figcaption p{ font-size:14.5px; color:var(--muted); line-height:1.55; margin:0; }

/* ---------- Feature cards ---------- */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature{ background:var(--cream); border-radius:16px; padding:30px 26px; }
.feature.on-white{ background:#fff; }
.feature.b-teal{ border-top:3px solid var(--teal); }
.feature.b-green{ border-top:3px solid var(--green); }
.feature-ic{ width:48px; height:48px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 6px 16px rgba(16,38,43,.07); }
.feature-ic svg{ width:24px; height:24px; }
.feature.b-teal .feature-ic{ color:var(--teal-d); } .feature.b-green .feature-ic{ color:var(--green-d); }
.feature h4{ font-weight:700; font-size:17px; color:var(--ink); margin:0 0 8px; }
.feature p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- Values ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:28px 26px; display:flex; align-items:center; gap:18px; }
.value svg{ width:26px; height:26px; flex-shrink:0; }
.value.teal svg{ color:#8fe0e8; } .value.green svg{ color:var(--green); }
.value div{ font-weight:700; color:#fff; font-size:16.5px; }
.values.on-cream .value{ background:var(--cream); border:none; }
.values.on-cream .value div{ color:var(--ink); }
.values.on-cream .value.teal svg{ color:var(--teal-d); }

/* ---------- Get involved ---------- */
.gi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:44px; text-align:left; }
.gi-item{ background:#fff; border-radius:12px; padding:20px 22px; display:flex; gap:13px; align-items:center; font-size:15px; color:#33474b; font-weight:600; box-shadow:0 8px 22px rgba(16,38,43,.05); }
.gi-item svg{ width:22px; height:22px; color:var(--green); flex-shrink:0; }

/* ---------- Contact ---------- */
.contact-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.contact-card{ background:var(--cream); border-radius:16px; padding:34px 26px; text-align:center; }
.contact-ic{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.contact-ic svg{ width:24px; height:24px; }
.contact-ic.teal{ background:rgba(22,160,171,.14); color:var(--teal-d); }
.contact-ic.green{ background:rgba(47,158,106,.16); color:var(--green-d); }
.contact-card .lbl{ font-weight:700; color:var(--ink); margin-bottom:6px; }
.contact-card a{ text-decoration:none; color:var(--teal); font-weight:600; font-size:15px; }
.contact-card .txt{ color:var(--muted); font-size:14.5px; line-height:1.55; }

/* ---------- Page banner (inside pages) ---------- */
.page-banner{ position:relative; background:var(--ink); padding:82px 0 74px; overflow:hidden; }
.page-banner .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px); background-size:22px 22px; }
.page-banner .accent{ position:absolute; top:0; left:0; width:5px; height:100%; background:var(--green); }
.page-banner .container{ position:relative; }
.breadcrumb{ font-size:13.5px; color:#8fe0e8; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.breadcrumb a{ text-decoration:none; color:#8fe0e8; }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .cur{ color:#cdeef1; }
.page-banner h1{ font-family:var(--serif); font-weight:400; font-size:48px; color:#fff; margin:0; }

/* ---------- About page specifics ---------- */
.about-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.img-compose{ position:relative; padding:0 26px 40px 0; }
.img-compose .backer{ position:absolute; top:40px; right:0; bottom:0; width:64%; background:var(--cream-2); border-radius:20px; }
.img-compose .dots-deco{ position:absolute; top:-16px; left:-14px; width:130px; height:130px; z-index:0; background-image:radial-gradient(rgba(22,160,171,.28) 2px, transparent 2px); background-size:16px 16px; }
.img-compose .main-img{ position:relative; z-index:1; border-radius:200px 200px 18px 18px; overflow:hidden; border:8px solid #fff; box-shadow:0 30px 60px rgba(16,38,43,.2); }
.img-compose .main-img img{ width:100%; height:500px; object-fit:cover; }
.img-compose .inset{ position:absolute; right:-6px; bottom:-4px; z-index:2; width:210px; border-radius:14px; overflow:hidden; border:6px solid #fff; box-shadow:0 22px 44px rgba(16,38,43,.28); }
.img-compose .inset img{ width:100%; height:145px; object-fit:cover; }
.img-compose .badge{ position:absolute; top:24px; left:-20px; z-index:3; background:var(--green); color:#fff; padding:16px 22px; border-radius:12px; box-shadow:0 16px 34px rgba(47,158,106,.42); text-align:center; }
.img-compose .badge .n{ font-family:var(--serif); font-size:30px; line-height:1; }
.img-compose .badge .t{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; opacity:.95; }
.chips{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.chip-stat{ background:var(--cream); border-radius:10px; padding:14px 20px; }
.chip-stat b{ font-family:var(--serif); font-weight:400; font-size:24px; color:var(--teal-d); display:block; line-height:1; }
.chip-stat span{ font-size:12.5px; color:var(--muted); font-weight:600; }
/* quote band */
.approach{ position:relative; overflow:hidden; }
.approach .a-bg{ position:absolute; inset:0; }
.approach .a-bg img{ width:100%; height:100%; object-fit:cover; }
.approach .a-ov{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,25,28,.95) 0%, rgba(11,25,28,.82) 55%, rgba(11,25,28,.45) 100%); }
.approach .container{ position:relative; padding:78px 0; }
.approach blockquote{ margin:0; max-width:680px; font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.4; color:#fff; }
.approach .who{ margin-top:22px; color:#8fe0e8; font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-2); color:#9fb3b6; padding:64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.1fr; gap:48px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08); }
.site-footer .f-logo{ height:50px; margin-bottom:20px; filter:brightness(0) invert(1); opacity:.92; }
.site-footer p{ font-size:14.5px; line-height:1.7; margin:0 0 18px; max-width:340px; }
.site-footer .arabic{ color:#7fd3db; letter-spacing:.03em; font-size:15px; }
.f-col h4{ color:#fff; font-weight:700; font-size:15px; margin:0 0 18px; }
.f-links{ display:flex; flex-direction:column; gap:12px; font-size:14.5px; align-items:flex-start; }
.f-links a{ text-decoration:none; color:#9fb3b6; }
.f-links a:hover{ color:#cfe4e6; }
.f-donate{ background:transparent; border:none; padding:0; cursor:pointer; text-align:left; color:var(--green); font-weight:700; font-size:14.5px; margin-top:6px; }
.f-bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13.5px; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Modals ---------- */
.modal{ position:fixed; inset:0; z-index:200; background:rgba(6,15,17,.9); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal.open{ display:flex; animation:fdhk-overlay .25s ease; }
.modal-video{ position:relative; width:100%; max-width:960px; }
.modal-video .close{ position:absolute; top:-46px; right:0; cursor:pointer; background:transparent; border:none; color:#fff; font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.modal-video .close span{ width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); display:inline-flex; align-items:center; justify-content:center; }
.video-frame{ position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.modal-donate{ position:relative; width:100%; max-width:520px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.5); animation:fdhk-fade .3s ease; }
.md-head{ background:linear-gradient(150deg,var(--teal),var(--teal-d)); padding:34px 40px 30px; color:#fff; position:relative; }
.md-head .close{ position:absolute; top:20px; right:20px; cursor:pointer; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); border:none; color:#fff; font-size:15px; }
.md-head .k{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#bff0f3; font-weight:700; margin-bottom:10px; }
.md-head h3{ font-family:var(--serif); font-weight:400; font-size:28px; margin:0; line-height:1.2; }
.md-body{ padding:30px 40px 38px; }
.md-body p{ font-size:15px; line-height:1.7; color:#4a5c60; margin:0 0 12px; }
.md-row{ display:flex; align-items:center; gap:14px; background:var(--cream); border-radius:12px; padding:16px 18px; text-decoration:none; margin-top:12px; }
.md-row .ic{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.md-row .ic svg{ width:20px; height:20px; }
.md-row .ic.teal{ background:rgba(22,160,171,.14); color:var(--teal-d); }
.md-row .ic.green{ background:rgba(47,158,106,.16); color:var(--green-d); }
.md-row .k2{ font-size:12px; color:#7d8c8f; font-weight:600; }
.md-row .v{ font-size:14.5px; color:var(--ink); font-weight:600; }
.md-row .v.link{ color:var(--teal); font-weight:700; }

/* ---------- Back to top ---------- */
.back-to-top{ position:fixed; right:26px; bottom:26px; z-index:150; width:50px; height:50px; border-radius:50%; background:var(--green); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(47,158,106,.4); opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease, background .2s ease; }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--green-d); }
.back-to-top svg{ width:22px; height:22px; }

/* ---------- Keyframes ---------- */
@keyframes fdhk-pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,158,106,.55); } 70%{ box-shadow:0 0 0 26px rgba(47,158,106,0); } 100%{ box-shadow:0 0 0 0 rgba(47,158,106,0); } }
@keyframes fdhk-fade{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }
@keyframes fdhk-overlay{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fdhk-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .about-grid, .about-hero-grid{ grid-template-columns:1fr; gap:44px; }
  .cards-3, .values, .gi-grid, .contact-3{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .features{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:44px; }
}
@media (max-width:760px){
  .nav{ position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; gap:0; padding:8px 0; border-bottom:1px solid #eef1ef; box-shadow:0 12px 24px rgba(16,38,43,.08); display:none; }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 28px; width:100%; }
  .nav a::after{ display:none; }
  .nav-toggle{ display:block; }
  .topbar .tb-right{ display:none; }
  .story-3, .cards-3, .values, .gi-grid, .contact-3, .stats, .features{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:36px; }
  .hero-inner{ padding:80px 0 90px; }
  .h-section, .page-banner h1{ font-size:32px; }
  .approach blockquote{ font-size:23px; }
  .container{ padding:0 20px; }
}