/* =========================================================
   MOFU ROTHENBURG ORGANIZATION - PREMIUM PHP UI
   Works with: topbar/header, footer, blog, gallery, admin, pages
   ========================================================= */

:root{
  --green:#15803d;
  --green2:#16a34a;
  --greenDark:#14532d;
  --blue:#2563eb;
  --gold:#f59e0b;
  --dark:#0f172a;
  --dark2:#1e293b;
  --muted:#64748b;
  --soft:#f8fafc;
  --soft2:#eef2f7;
  --white:#fff;
  --border:rgba(15,23,42,.09);
  --border2:rgba(15,23,42,.16);
  --shadow:0 18px 50px rgba(15,23,42,.10);
  --shadow2:0 30px 90px rgba(15,23,42,.16);
  --radius:28px;
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  color:var(--dark);
  background:
    radial-gradient(circle at top left,rgba(22,163,74,.08),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(37,99,235,.08),transparent 30%),
    #fff;
  line-height:1.65;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{line-height:1.1;color:var(--dark)}
p{color:var(--muted)}
main{overflow:hidden}
.site-shell{width:100%;min-height:100vh;overflow-x:hidden}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:9999;
  width:min(var(--container),calc(100% - 32px));
  min-height:78px;
  margin:18px auto 0;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:26px;
  background:rgba(255,255,255,.90);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--dark)}
.brand-mark{
  width:52px;height:52px;flex:0 0 52px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:18px;
  background:radial-gradient(circle at top left,rgba(255,255,255,.28),transparent 40%),linear-gradient(135deg,var(--green),var(--blue));
  color:#fff;font-size:1.45rem;font-weight:950;
  box-shadow:0 14px 34px rgba(22,163,74,.26);
}
.brand-copy,.brand span:not(.brand-mark){display:grid;gap:2px;min-width:0}
.brand strong{display:block;color:var(--dark);font-size:1rem;font-weight:950;line-height:1.05;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:.76rem;font-weight:700;line-height:1.1;white-space:nowrap}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.nav a{min-height:42px;padding:10px 13px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:var(--dark2);font-size:.9rem;font-weight:850;transition:.25s ease;white-space:nowrap}
.nav a:hover,.nav a.active{background:rgba(22,163,74,.11);color:var(--green)}
.nav .nav-cta{margin-left:6px;padding-inline:18px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff!important;box-shadow:0 14px 35px rgba(22,163,74,.25)}
.nav .nav-cta:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(22,163,74,.32)}
.menu-toggle{width:46px;height:46px;flex:0 0 46px;border:1px solid var(--border2);border-radius:15px;background:#fff;display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;box-shadow:0 12px 30px rgba(15,23,42,.08)}
.menu-toggle span{width:20px;height:2px;border-radius:999px;background:var(--dark);transition:.25s ease}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* General */
.section{width:min(var(--container),calc(100% - 32px));margin:90px auto}
.tinted{width:min(1240px,calc(100% - 32px));background:radial-gradient(circle at top left,rgba(22,163,74,.08),transparent 34%),radial-gradient(circle at bottom right,rgba(37,99,235,.08),transparent 38%),#f8fafc;border:1px solid var(--border);border-radius:38px;padding:56px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.eyebrow:before{content:"";width:24px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--blue))}
.section-head{margin-bottom:34px}.section-head h2{margin-top:10px;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em}.section-head p{margin-top:12px;max-width:740px;color:var(--muted);line-height:1.75}
.section-head.with-action{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.center-head{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}.center-head .eyebrow{justify-content:center}.section-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 21px;border-radius:999px;font-weight:900;border:1px solid transparent;cursor:pointer;transition:.25s ease;white-space:nowrap;font-family:inherit}
.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 18px 42px rgba(22,163,74,.28)}.btn-dark{background:var(--dark);color:#fff;box-shadow:0 14px 35px rgba(15,23,42,.18)}.btn-ghost{background:rgba(255,255,255,.78);color:var(--dark);border-color:rgba(15,23,42,.12);box-shadow:0 12px 35px rgba(15,23,42,.06)}.btn-outline{background:transparent;color:var(--dark);border:1px solid rgba(15,23,42,.18)}.btn-outline:hover{background:var(--dark);color:#fff}.btn-light{background:#fff;color:var(--dark);border:1px solid rgba(255,255,255,.35);box-shadow:0 16px 42px rgba(0,0,0,.18)}.btn-light:hover{background:#bbf7d0}.read-more{color:var(--green);font-weight:900;transition:.25s ease}.read-more:hover{color:var(--blue)}

/* Home Hero */
.home-hero{width:min(1240px,calc(100% - 32px));margin:28px auto 0;padding:54px;border-radius:42px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;min-height:calc(100vh - 150px);background:radial-gradient(circle at top left,rgba(22,163,74,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(37,99,235,.15),transparent 36%),linear-gradient(135deg,#f8fafc,#fff);border:1px solid var(--border);box-shadow:var(--shadow2)}
.home-hero-bg{position:absolute;inset:0;pointer-events:none}.home-hero-bg:before{content:"";position:absolute;width:440px;height:440px;right:-150px;top:-180px;background:radial-gradient(circle,rgba(22,163,74,.23),transparent 70%)}.home-hero-bg:after{content:"";position:absolute;width:460px;height:460px;left:-180px;bottom:-210px;background:radial-gradient(circle,rgba(37,99,235,.20),transparent 70%)}
.home-hero-text,.home-hero-image{position:relative;z-index:2}.home-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--border);box-shadow:0 12px 35px rgba(15,23,42,.07);color:var(--green);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.home-hero h1{margin:22px 0 0;font-size:clamp(2.7rem,6vw,5.6rem);line-height:.95;letter-spacing:-.07em;color:var(--dark)}.home-hero h1 span{display:block;color:transparent;background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;background-clip:text}.home-hero p{max-width:690px;margin-top:24px;color:#475569;font-size:1.05rem;line-height:1.85}.home-hero-buttons{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px}.home-hero-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px;max-width:620px}.home-hero-mini div{padding:16px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid var(--border);box-shadow:0 12px 35px rgba(15,23,42,.06)}.home-hero-mini strong{display:block;color:var(--dark);font-size:.98rem;margin-bottom:4px}.home-hero-mini span{display:block;color:var(--muted);font-size:.86rem}.home-hero-image img{width:100%;height:560px;object-fit:cover;border-radius:34px;border:10px solid rgba(255,255,255,.85);box-shadow:0 28px 80px rgba(15,23,42,.18)}.home-floating-card{position:absolute;right:24px;bottom:30px;max-width:320px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.90);border:1px solid var(--border);box-shadow:0 20px 55px rgba(15,23,42,.14);backdrop-filter:blur(14px)}.home-floating-card strong{display:block;color:var(--dark);margin-bottom:5px}.home-floating-card span{display:block;color:var(--muted);font-size:.86rem}

/* legacy hero support */
.hero{width:min(1240px,calc(100% - 32px));margin:28px auto 0;padding:54px;border-radius:42px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid var(--border);box-shadow:var(--shadow)}.hero h1{font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.06em}.hero p{margin-top:18px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.hero-media{position:relative}.hero-media img{width:100%;height:520px;object-fit:cover;border-radius:30px}.floating-card{position:absolute;right:18px;bottom:18px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:var(--shadow)}

/* Content grids */
.stats{width:min(var(--container),calc(100% - 32px));margin:28px auto 86px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats>div,.stat-card{position:relative;overflow:hidden;padding:26px;border-radius:28px;background:rgba(255,255,255,.95);border:1px solid var(--border);box-shadow:var(--shadow)}.stats strong{display:block;font-size:clamp(1.6rem,3vw,2.5rem);color:var(--dark);letter-spacing:-.04em}.stats span{display:block;margin-top:5px;color:var(--muted);font-weight:700}
.split-section{width:min(var(--container),calc(100% - 32px));margin:90px auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}.split-section h2{margin-top:10px;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.05em}.split-section p{font-size:1.06rem;line-height:1.85}.intro-text{display:grid;gap:16px}
.mission-grid{width:min(var(--container),calc(100% - 32px));margin:90px auto;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.premium-card{position:relative;overflow:hidden;min-height:260px;padding:34px;border-radius:30px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.06);transition:.25s ease}.premium-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(22,163,74,.15),transparent 36%),radial-gradient(circle at bottom left,rgba(37,99,235,.10),transparent 40%);opacity:.75;pointer-events:none}.premium-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.premium-card>*{position:relative;z-index:2}.icon-badge{width:54px;height:54px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;font-size:1.3rem;box-shadow:0 16px 36px rgba(22,163,74,.25);margin-bottom:20px}.premium-card h3{font-size:1.5rem;margin-bottom:12px}.premium-card p{line-height:1.78}
.value-grid,.project-grid,.blog-grid,.home-blog-grid,.updates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.value-card,.project-card,.blog-card,.update-card{overflow:hidden;border-radius:28px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.06);transition:.25s ease}.value-card{padding:28px}.value-card:hover,.project-card:hover,.blog-card:hover,.update-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.value-dot{display:block;width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--green2),var(--blue));box-shadow:0 12px 30px rgba(22,163,74,.25);margin-bottom:18px}.value-card h3{font-size:1.15rem;margin-bottom:10px}.project-card img,.blog-card img,.update-card img{width:100%;height:238px;object-fit:cover;transition:.35s ease}.update-card img{height:220px}.project-card:hover img,.blog-card:hover img,.update-card:hover img{transform:scale(1.05)}.project-card div,.blog-card>div,.update-card div{padding:24px}.project-label,.blog-meta{display:inline-block;margin-bottom:8px;color:var(--green);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.project-card h3,.blog-card h3,.update-card h3{font-size:1.22rem;margin-bottom:10px}.project-card p,.blog-card p,.update-card p{line-height:1.72;margin-bottom:14px}.blog-image-link{display:block;overflow:hidden}
.objective-list{display:grid;gap:14px}.objective-list>div,.objective-item{display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:center;padding:20px;border-radius:24px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.06);transition:.25s ease}.objective-list>div:hover,.objective-item:hover{transform:translateX(6px);border-color:rgba(22,163,74,.28);box-shadow:var(--shadow)}.objective-list span,.objective-item span{width:58px;height:58px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(22,163,74,.13),rgba(37,99,235,.12));color:var(--green);font-weight:950}.objective-list p,.objective-item p{color:var(--dark2);font-weight:650}
.empty-state{padding:42px 28px;border-radius:30px;text-align:center;background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(37,99,235,.08)),#fff;border:1px dashed rgba(15,23,42,.18);box-shadow:0 10px 30px rgba(15,23,42,.06)}.empty-state h3{margin-top:12px;font-size:1.45rem}.empty-state p{max-width:560px;margin:10px auto 20px}
.video-card{margin-top:34px;padding:20px;border-radius:30px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}.video-info{margin-bottom:16px}.video-info h3{margin-top:6px;font-size:1.35rem}.video-card video{width:100%;border-radius:24px;background:#000}

/* Inner pages */
.page-hero{width:min(1240px,calc(100% - 32px));margin:34px auto 60px;padding:70px 46px;border-radius:42px;background:radial-gradient(circle at top left,rgba(22,163,74,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(37,99,235,.16),transparent 38%),linear-gradient(135deg,#f8fafc,#fff);border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.06);text-align:center}.compact-hero{padding:54px 36px}.page-hero h1{font-size:clamp(2.3rem,5vw,4.8rem);letter-spacing:-.06em;margin-top:10px}.page-hero p{max-width:760px;margin:16px auto 0;font-size:1.05rem;line-height:1.8}
.gallery-tools{width:min(var(--container),calc(100% - 32px));margin:0 auto 24px}.gallery-tools input{max-width:420px}.gallery-grid{width:min(var(--container),calc(100% - 32px));margin:60px auto 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-item{position:relative;overflow:hidden;border-radius:26px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.06)}.gallery-item img{width:100%;height:280px;object-fit:cover;transition:.35s}.gallery-item:hover img{transform:scale(1.06)}.gallery-item span{position:absolute;left:14px;bottom:14px;right:14px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);color:var(--dark);font-weight:900}
.blog-single,.blog-view{width:min(900px,calc(100% - 32px));margin:60px auto 90px}.blog-single-card{background:#fff;border:1px solid var(--border);border-radius:34px;box-shadow:var(--shadow);overflow:hidden}.blog-single-card img{width:100%;height:430px;object-fit:cover}.blog-single-content{padding:38px}.blog-single-content h1{font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.05em;margin-bottom:14px}.blog-content{margin-top:24px;color:var(--dark2);line-height:1.9}.blog-content p{color:var(--dark2);margin-bottom:18px}

/* Forms/admin/contact */
.form-section,.admin-section,.contact-section{width:min(980px,calc(100% - 32px));margin:60px auto 90px}.admin-form,.form-card,.contact-card,.login-card,.compact-form{background:radial-gradient(circle at top right,rgba(22,163,74,.08),transparent 32%),#fff;border:1px solid var(--border);border-radius:34px;box-shadow:var(--shadow);padding:34px}.compact-form{max-width:520px;margin:0 auto}.admin-form h2{margin-bottom:8px}.admin-form p{margin-bottom:20px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}label{display:grid;gap:8px;margin-bottom:18px;font-weight:900;color:var(--dark)}input,textarea,select{width:100%;min-height:50px;border:1px solid rgba(15,23,42,.14);border-radius:16px;padding:13px 15px;font:inherit;outline:none;background:#fff;color:var(--dark);transition:.25s ease}textarea{min-height:150px;resize:vertical}input:focus,textarea:focus,select:focus{border-color:rgba(22,163,74,.55);box-shadow:0 0 0 4px rgba(22,163,74,.12)}.notice,.alert,.success,.error{padding:14px 16px;border-radius:18px;margin-bottom:18px;font-weight:800}.success,.alert-success{background:rgba(22,163,74,.10);color:#166534;border:1px solid rgba(22,163,74,.20)}.error,.alert-error{background:rgba(239,68,68,.10);color:#991b1b;border:1px solid rgba(239,68,68,.20)}.post-manager-head{margin-top:48px}.admin-post-list{display:grid;gap:12px}.admin-post-list article{display:flex;justify-content:space-between;gap:18px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--border);box-shadow:0 8px 24px rgba(15,23,42,.05)}.admin-post-list strong{display:block}.admin-post-list span{display:block;color:var(--muted);font-size:.88rem}.admin-post-actions{display:flex;align-items:center;gap:10px}.admin-post-actions a,.admin-post-actions button{border:0;border-radius:999px;padding:9px 13px;background:var(--dark);color:#fff;font-weight:800;cursor:pointer}.admin-post-actions button{background:#dc2626}
.table-wrap{overflow-x:auto;border-radius:24px;border:1px solid var(--border);background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.06)}table{width:100%;border-collapse:collapse}th,td{padding:15px 16px;text-align:left;border-bottom:1px solid rgba(15,23,42,.08)}th{background:#f8fafc;color:var(--dark);font-weight:950}td{color:var(--dark2)}

/* Footer */
.cta-band{width:min(var(--container),calc(100% - 32px));margin:80px auto 0;padding:42px;border-radius:34px;display:grid;grid-template-columns:1.5fr auto;gap:24px;align-items:center;background:radial-gradient(circle at top left,rgba(34,197,94,.35),transparent 36%),radial-gradient(circle at bottom right,rgba(37,99,235,.30),transparent 36%),linear-gradient(135deg,var(--dark),var(--greenDark));color:#fff;box-shadow:0 34px 90px rgba(15,23,42,.22);overflow:hidden;position:relative}.cta-band:before{content:"";position:absolute;width:360px;height:360px;right:-120px;top:-160px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}.cta-band>*{position:relative;z-index:2}.cta-band .eyebrow{color:#bbf7d0}.cta-band .eyebrow:before{background:#bbf7d0}.cta-band h2{margin:10px 0 12px;color:#fff;font-size:clamp(2rem,4vw,3.35rem);line-height:1.08;letter-spacing:-.05em}.cta-band p{max-width:740px;color:rgba(255,255,255,.78);line-height:1.75}.footer{width:min(var(--container),calc(100% - 32px));margin:26px auto 24px;padding:0;border-radius:34px;background:radial-gradient(circle at top left,rgba(34,197,94,.14),transparent 34%),radial-gradient(circle at bottom right,rgba(37,99,235,.12),transparent 36%),linear-gradient(135deg,var(--dark),#111827);color:#fff;box-shadow:0 28px 80px rgba(15,23,42,.20);overflow:hidden}.footer-grid{padding:46px;display:grid;grid-template-columns:1.35fr .75fr .9fr 1fr;gap:34px;align-items:start}.footer .brand,.footer-brand{margin-bottom:18px}.footer .brand strong,.footer-brand strong{color:#fff}.footer .brand small,.footer-brand small{color:rgba(255,255,255,.68)}.footer h3{margin:0 0 16px;color:#fff;font-size:1rem;font-weight:950}.footer p{margin:0;color:rgba(255,255,255,.72);line-height:1.75}.footer a{display:table;margin-bottom:9px;color:rgba(255,255,255,.72);font-weight:700;transition:.25s ease}.footer a:hover{color:#bbf7d0;transform:translateX(3px)}.footer .footer-brand:hover{transform:none}.footer-bottom{padding:18px 46px;display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.65);font-size:.9rem}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:1100px){.home-hero,.hero{grid-template-columns:1fr;min-height:auto}.home-hero-image,.hero-media{max-width:760px}.stats{grid-template-columns:repeat(2,1fr)}.value-grid,.project-grid,.blog-grid,.home-blog-grid,.updates-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.topbar{width:min(100% - 24px,var(--container));min-height:72px;margin-top:12px;border-radius:22px}.menu-toggle{display:inline-flex}.nav{position:fixed;top:96px;left:12px;right:12px;z-index:9998;display:grid;gap:8px;padding:16px;border-radius:24px;background:rgba(255,255,255,.97);border:1px solid rgba(15,23,42,.10);box-shadow:0 28px 80px rgba(15,23,42,.22);backdrop-filter:blur(18px);transform:translateY(-14px);opacity:0;pointer-events:none;transition:.25s ease}.nav.open,.nav.show,.nav.active{transform:translateY(0);opacity:1;pointer-events:auto}.nav a{width:100%;justify-content:flex-start;border-radius:16px;min-height:46px}.nav .nav-cta{margin-left:0;justify-content:center}.section-head.with-action{align-items:flex-start;flex-direction:column}.home-hero{padding:36px 24px}.home-hero-image img,.hero-media img{height:430px}.split-section,.mission-grid{grid-template-columns:1fr}.tinted{padding:32px 22px}.cta-band{grid-template-columns:1fr;padding:34px 26px}.cta-band .btn{width:fit-content}.footer-grid{padding:38px 30px}.footer-bottom{padding:18px 30px;flex-direction:column}.form-grid{grid-template-columns:1fr}}
@media(max-width:640px){.section{margin:64px auto}.topbar{padding:10px}.brand-mark{width:44px;height:44px;flex-basis:44px;border-radius:15px;font-size:1.2rem}.brand strong{font-size:.86rem}.brand small{font-size:.68rem}.menu-toggle{width:42px;height:42px;flex-basis:42px}.home-hero,.hero{width:min(100% - 20px,1240px);margin-top:18px;padding:26px 16px;border-radius:28px}.home-badge{font-size:.68rem;padding:8px 12px}.home-hero h1,.hero h1{font-size:clamp(2.35rem,13vw,3.8rem);letter-spacing:-.05em}.home-hero p,.hero p{font-size:.96rem;line-height:1.75}.home-hero-buttons,.hero-actions,.section-actions{flex-direction:column;width:100%}.home-hero-buttons .btn,.hero-actions .btn,.section-actions .btn{width:100%}.home-hero-mini{grid-template-columns:1fr}.home-hero-image img,.hero-media img{height:310px;border-radius:24px;border-width:6px}.home-floating-card{left:14px;right:14px;bottom:16px;max-width:none;padding:13px 14px;border-radius:18px}.stats,.value-grid,.project-grid,.blog-grid,.home-blog-grid,.updates-grid,.gallery-grid,.footer-grid{grid-template-columns:1fr}.split-section{gap:22px;margin:64px auto}.objective-list>div,.objective-item{grid-template-columns:1fr;gap:12px}.objective-list>div:hover,.objective-item:hover{transform:none}.page-hero{padding:48px 20px;border-radius:30px}.blog-single-card img{height:280px}.blog-single-content{padding:24px}.admin-form,.form-card,.contact-card,.login-card,.compact-form{padding:24px;border-radius:28px}.admin-post-list article{flex-direction:column}.cta-band{width:min(100% - 20px,var(--container));margin-top:60px;padding:28px 20px;border-radius:26px}.cta-band .btn{width:100%}.footer{width:min(100% - 20px,var(--container));border-radius:26px}.footer-grid{padding:34px 24px;gap:26px}.footer-bottom{padding:18px 24px;font-size:.82rem}.project-card img,.blog-card img,.update-card img,.gallery-item img{height:215px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}
/* =====================================================
   PROJECTS PAGE PREMIUM UI
   File: projects.php
===================================================== */

.projects-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 36px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, .20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, .18), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, .12);
}

.projects-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.projects-hero-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -160px;
    top: -170px;
    background: radial-gradient(circle, rgba(22, 163, 74, .22), transparent 70%);
}

.projects-hero-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
}

.projects-hero-content,
.projects-hero-card {
    position: relative;
    z-index: 2;
}

.projects-hero h1 {
    margin-top: 18px;
    max-width: 850px;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: .98;
    letter-spacing: -.065em;
    color: #0f172a;
}

.projects-hero p {
    max-width: 720px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.projects-hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.projects-hero-card {
    padding: 34px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(22, 163, 74, .12), transparent 42%),
        rgba(255, 255, 255, .82);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    backdrop-filter: blur(16px);
}

.projects-hero-card span {
    display: inline-flex;
    color: #15803d;
    font-weight: 950;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
}

.projects-hero-card strong {
    display: block;
    color: #0f172a;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -.04em;
}

.projects-hero-card p {
    margin-top: 18px;
    font-size: .98rem;
    line-height: 1.75;
}

.project-mini-stats {
    width: min(1180px, calc(100% - 32px));
    margin: -34px auto 86px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.project-mini-stats article {
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .10);
    overflow: hidden;
    position: relative;
}

.project-mini-stats article::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -44px;
    width: 94px;
    height: 94px;
    background: radial-gradient(circle, rgba(22, 163, 74, .20), transparent 70%);
}

.project-mini-stats strong {
    display: block;
    color: #0f172a;
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.project-mini-stats span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-weight: 800;
}

.premium-course-grid,
.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.premium-course-card,
.course-card {
    overflow: hidden;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.premium-course-card:hover,
.course-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .14);
}

.course-image {
    display: block;
    overflow: hidden;
}

.premium-course-card img,
.course-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform .35s ease;
}

.premium-course-card:hover img,
.course-card:hover img {
    transform: scale(1.06);
}

.course-body,
.course-card > div {
    padding: 25px;
}

.course-tag {
    display: inline-flex;
    margin-bottom: 10px;
    color: #15803d;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.course-card h3,
.premium-course-card h3 {
    color: #0f172a;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.course-card p,
.premium-course-card p {
    color: #64748b;
    line-height: 1.75;
    margin-bottom: 15px;
}

.premium-project-area {
    position: relative;
    overflow: hidden;
}

.premium-project-list,
.project-list {
    display: grid;
    gap: 18px;
}

.premium-project-row,
.project-row {
    position: relative;
    display: grid;
    grid-template-columns: 72px 300px 1fr;
    gap: 24px;
    align-items: center;
    padding: 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 14px 42px rgba(15, 23, 42, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.premium-project-row:hover,
.project-row:hover {
    transform: translateY(-5px);
    border-color: rgba(22, 163, 74, .25);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.project-row-number {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(22, 163, 74, .14), rgba(37, 99, 235, .13));
    color: #15803d;
    font-weight: 950;
}

.project-row-image {
    overflow: hidden;
    border-radius: 22px;
}

.premium-project-row img,
.project-row img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform .35s ease;
}

.premium-project-row:hover img,
.project-row:hover img {
    transform: scale(1.06);
}

.project-row-content {
    padding-right: 12px;
}

.project-label {
    display: inline-flex;
    margin-bottom: 8px;
    color: #15803d;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.project-row h3,
.premium-project-row h3 {
    color: #0f172a;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    margin-bottom: 10px;
    letter-spacing: -.02em;
}

.project-row p,
.premium-project-row p {
    color: #64748b;
    line-height: 1.78;
}

.projects-impact-cta {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
    padding: 42px;
    border-radius: 34px;
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    gap: 24px;
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, .35), transparent 36%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, .30), transparent 36%),
        linear-gradient(135deg, #0f172a, #14532d);
    color: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .22);
}

.projects-impact-cta .eyebrow {
    color: #bbf7d0;
}

.projects-impact-cta .eyebrow::before {
    background: #bbf7d0;
}

.projects-impact-cta h2 {
    color: #ffffff;
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.05em;
}

.projects-impact-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.75;
}

.projects-impact-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.projects-impact-cta .btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .28);
}

.projects-impact-cta .btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
}

/* PROJECTS PAGE MOBILE */
@media (max-width: 1050px) {
    .projects-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
        min-height: auto;
    }

    .project-mini-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 26px;
    }

    .premium-course-grid,
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-project-row,
    .project-row {
        grid-template-columns: 60px 240px 1fr;
    }
}

@media (max-width: 820px) {
    .premium-project-row,
    .project-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .project-row-number {
        position: absolute;
        top: 28px;
        left: 28px;
        z-index: 3;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 12px 35px rgba(15, 23, 42, .16);
    }

    .premium-project-row img,
    .project-row img {
        height: 260px;
    }

    .projects-impact-cta {
        grid-template-columns: 1fr;
    }

    .projects-impact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .projects-hero {
        width: min(100% - 20px, 1240px);
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .projects-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }

    .projects-hero p {
        font-size: .96rem;
        line-height: 1.75;
    }

    .projects-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .projects-hero-actions .btn {
        width: 100%;
    }

    .projects-hero-card {
        padding: 24px;
        border-radius: 24px;
    }

    .project-mini-stats,
    .premium-course-grid,
    .course-grid {
        grid-template-columns: 1fr;
    }

    .project-mini-stats {
        margin-bottom: 60px;
    }

    .premium-course-card img,
    .course-card img {
        height: 220px;
    }

    .premium-project-row,
    .project-row {
        padding: 14px;
        border-radius: 24px;
    }

    .premium-project-row img,
    .project-row img {
        height: 220px;
        border-radius: 18px;
    }

    .project-row-content {
        padding: 8px 4px 10px;
    }

    .projects-impact-cta {
        width: min(100% - 20px, 1180px);
        margin: 60px auto;
        padding: 28px 20px;
        border-radius: 26px;
    }

    .projects-impact-actions {
        flex-direction: column;
        width: 100%;
    }

    .projects-impact-actions .btn {
        width: 100%;
    }
}
/* =====================================================
   CONTACT SECTION PREMIUM FIX
   Fix text/words below or beside contact form
===================================================== */

.contact-section {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
    padding: 46px;
    border-radius: 36px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.09), transparent 36%),
        #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.contact-info,
.contact-details,
.contact-content {
    display: grid;
    gap: 18px;
}

.contact-info h2,
.contact-details h2,
.contact-content h2 {
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    margin: 0;
}

.contact-info p,
.contact-details p,
.contact-content p {
    color: #64748b;
    line-height: 1.75;
    margin: 0;
}

.contact-list,
.contact-items {
    display: grid;
    gap: 14px;
    margin-top: 10px;
}

.contact-list a,
.contact-list p,
.contact-items a,
.contact-items p {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #1e293b;
    font-weight: 750;
    text-decoration: none;
    line-height: 1.5;
}

.contact-list a:hover,
.contact-items a:hover {
    background: rgba(22, 163, 74, 0.10);
    color: #15803d;
}

.contact-form,
.contact-form-card,
.form-card {
    padding: 28px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.contact-form label,
.contact-form-card label,
.form-card label {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-weight: 900;
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select,
.form-card input,
.form-card textarea,
.form-card select {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #ffffff;
    color: #0f172a;
    outline: none;
    font: inherit;
    margin-bottom: 16px;
}

.contact-form textarea,
.contact-form-card textarea,
.form-card textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.contact-form-card input:focus,
.contact-form-card textarea:focus,
.contact-form-card select:focus,
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

/* Kama kuna maneno chini ya form bila container */
.contact-section > p,
.contact-section > a,
.contact-section > span {
    display: block;
    max-width: 760px;
    margin: 12px auto 0;
    text-align: center;
    color: #64748b;
    line-height: 1.75;
}

/* Mobile */
@media (max-width: 850px) {
    .contact-section {
        padding: 32px 22px;
        border-radius: 28px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 520px) {
    .contact-section {
        width: min(100% - 20px, 1180px);
        margin: 60px auto;
        padding: 24px 16px;
    }

    .contact-form,
    .contact-form-card,
    .form-card {
        padding: 20px;
        border-radius: 22px;
    }

    .contact-list a,
    .contact-list p,
    .contact-items a,
    .contact-items p {
        font-size: 0.92rem;
    }
}
/* =====================================================
   CONTACT SECTION FINAL PREMIUM FIX
   For includes/contact_section.php
===================================================== */

.contact-premium-section {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
    padding: 46px;
    border-radius: 36px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.10), transparent 36%),
        #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    position: relative;
}

.contact-premium-section::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -160px;
    top: -160px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.14), transparent 70%);
    pointer-events: none;
}

.contact-premium-section > * {
    position: relative;
    z-index: 2;
}

.contact-premium-head {
    max-width: 760px;
    margin-bottom: 30px;
}

.contact-premium-head h2 {
    margin-top: 10px;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.contact-premium-head p {
    margin-top: 12px;
    color: #64748b;
    line-height: 1.75;
}

.contact-premium-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: stretch;
}

.contact-premium-form {
    margin: 0;
    padding: 30px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.09);
}

.contact-premium-form label {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    color: #0f172a;
    font-weight: 900;
}

.contact-premium-form label span {
    display: block;
    font-size: 0.92rem;
}

.contact-premium-form input,
.contact-premium-form textarea {
    width: 100%;
    min-height: 52px;
    border-radius: 17px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #ffffff;
    color: #0f172a;
    padding: 14px 15px;
    font: inherit;
    outline: none;
    transition: 0.25s ease;
}

.contact-premium-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-premium-form input:focus,
.contact-premium-form textarea:focus {
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.contact-premium-form .btn {
    width: 100%;
    margin-top: 4px;
}

.contact-premium-info {
    display: grid;
    gap: 16px;
    align-content: stretch;
}

.contact-premium-info .info-card {
    min-height: 118px;
    padding: 24px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(22, 163, 74, 0.09), transparent 40%),
        #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 42px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-premium-info .info-card span {
    display: block;
    margin-bottom: 8px;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-premium-info .info-card strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.5;
    word-break: break-word;
}

.contact-premium-info .info-card strong + strong {
    margin-top: 4px;
}

.contact-premium-info .info-card-highlight {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.22), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border-color: rgba(255, 255, 255, 0.10);
}

.contact-premium-info .info-card-highlight span {
    color: #bbf7d0;
}

.contact-premium-info .info-card-highlight strong {
    color: #ffffff;
}

.notice {
    padding: 14px 16px;
    border-radius: 18px;
    margin-bottom: 18px;
    font-weight: 850;
    line-height: 1.5;
}

.notice.success {
    background: rgba(22, 163, 74, 0.10);
    color: #166534;
    border: 1px solid rgba(22, 163, 74, 0.20);
}

.notice.error {
    background: rgba(239, 68, 68, 0.10);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.20);
}

/* Mobile */
@media (max-width: 900px) {
    .contact-premium-section {
        padding: 32px 22px;
        border-radius: 28px;
    }

    .contact-premium-grid {
        grid-template-columns: 1fr;
    }

    .contact-premium-info {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .contact-premium-section {
        width: min(100% - 20px, 1180px);
        margin: 60px auto;
        padding: 24px 16px;
    }

    .contact-premium-form {
        padding: 22px;
        border-radius: 24px;
    }

    .contact-premium-info {
        grid-template-columns: 1fr;
    }

    .contact-premium-info .info-card {
        min-height: auto;
        padding: 20px;
    }
}
/* =====================================================
   DONATE PAGE PREMIUM UI
   File: donate.php
===================================================== */

.donate-premium-hero,
.donate-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 560px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.donate-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.donate-hero-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -160px;
    top: -170px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.23), transparent 70%);
}

.donate-hero-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.donate-hero-content,
.bank-premium-card {
    position: relative;
    z-index: 2;
}

.donate-premium-hero h1,
.donate-hero h1 {
    margin-top: 18px;
    max-width: 820px;
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    color: #0f172a;
}

.donate-premium-hero p,
.donate-hero p {
    max-width: 720px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.donate-actions {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.donate-trust-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 660px;
}

.donate-trust-grid div {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

.donate-trust-grid strong {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
    margin-bottom: 4px;
}

.donate-trust-grid span {
    display: block;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Bank Card */
.bank-premium-card,
.bank-card {
    padding: 34px;
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.25), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    position: relative;
}

.bank-premium-card::before,
.bank-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -110px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.bank-premium-card > *,
.bank-card > * {
    position: relative;
    z-index: 2;
}

.bank-premium-card > span,
.bank-card > span {
    display: inline-flex;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.bank-premium-card h2,
.bank-card h2 {
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.bank-detail {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 14px;
}

.bank-detail p,
.bank-premium-card p,
.bank-card p {
    margin: 0 0 7px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bank-detail strong,
.bank-premium-card strong,
.bank-card strong {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.4;
    word-break: break-word;
}

.account-number {
    font-size: clamp(1.45rem, 3vw, 2.2rem) !important;
    letter-spacing: 0.08em;
}

.bank-note {
    margin-top: 18px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(187, 247, 208, 0.10);
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.65;
    font-size: 0.92rem;
}

/* Donation Steps */
.donation-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.donation-step-card {
    padding: 28px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
    transition: 0.25s ease;
}

.donation-step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.13);
}

.donation-step-card span {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.14), rgba(37, 99, 235, 0.14));
    color: #15803d;
    font-weight: 950;
    margin-bottom: 18px;
}

.donation-step-card h3 {
    color: #0f172a;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.donation-step-card p {
    color: #64748b;
    line-height: 1.72;
}

/* Impact */
.donate-impact-section {
    position: relative;
    overflow: hidden;
}

.donate-impact-grid {
    grid-template-columns: repeat(4, 1fr);
}

.donate-impact-card {
    min-height: 230px;
}

.donate-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 1.45rem;
    margin-bottom: 18px;
}

.donate-impact-card h3 {
    margin-bottom: 10px;
}

/* Bottom CTA */
.donate-bottom-cta {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
    padding: 42px;
    border-radius: 34px;
    display: grid;
    grid-template-columns: 1.45fr auto;
    gap: 24px;
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.35), transparent 36%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.30), transparent 36%),
        linear-gradient(135deg, #0f172a, #14532d);
    color: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);
}

.donate-bottom-cta .eyebrow {
    color: #bbf7d0;
}

.donate-bottom-cta .eyebrow::before {
    background: #bbf7d0;
}

.donate-bottom-cta h2 {
    color: #ffffff;
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.donate-bottom-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

/* Mobile */
@media (max-width: 1050px) {
    .donate-premium-hero,
    .donate-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
        min-height: auto;
    }

    .donation-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .donate-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .donate-bottom-cta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .donate-premium-hero,
    .donate-hero {
        width: min(100% - 20px, 1240px);
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .donate-premium-hero h1,
    .donate-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }

    .donate-premium-hero p,
    .donate-hero p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .donate-actions {
        flex-direction: column;
        width: 100%;
    }

    .donate-actions .btn {
        width: 100%;
    }

    .donate-trust-grid,
    .donation-steps-grid,
    .donate-impact-grid {
        grid-template-columns: 1fr;
    }

    .bank-premium-card,
    .bank-card {
        padding: 24px;
        border-radius: 26px;
    }

    .donate-bottom-cta {
        width: min(100% - 20px, 1180px);
        margin: 60px auto;
        padding: 28px 20px;
        border-radius: 26px;
    }

    .donate-bottom-cta .btn {
        width: 100%;
    }
}
/* =====================================================
   ADMINISTRATION PAGE PREMIUM UI
   File: administration.php
===================================================== */

.admin-premium-hero,
.admin-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.admin-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.admin-hero-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -160px;
    top: -170px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.23), transparent 70%);
}

.admin-hero-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.admin-hero-content,
.admin-hero-card {
    position: relative;
    z-index: 2;
}

.admin-premium-hero h1,
.admin-hero h1 {
    margin-top: 18px;
    max-width: 820px;
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    color: #0f172a;
}

.admin-premium-hero p,
.admin-hero p {
    max-width: 720px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.admin-hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.admin-hero-card {
    padding: 34px;
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.25), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.admin-hero-card span {
    display: inline-flex;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.admin-hero-card strong {
    display: block;
    color: #ffffff;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.admin-hero-card p {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* Admin Stats */
.admin-mini-stats {
    width: min(1180px, calc(100% - 32px));
    margin: -34px auto 86px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.admin-mini-stats article {
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    position: relative;
}

.admin-mini-stats article::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -44px;
    width: 94px;
    height: 94px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.20), transparent 70%);
}

.admin-mini-stats strong {
    display: block;
    color: #0f172a;
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.admin-mini-stats span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-weight: 800;
}

/* Leadership */
.leader-premium-section,
.leader-section {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
}

.leader-premium-grid,
.leader-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.leader-premium-card,
.leader-card {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(22, 163, 74, 0.09), transparent 40%),
        #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.leader-premium-card::before,
.leader-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -72px;
    top: -74px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);
    pointer-events: none;
}

.leader-premium-card:hover,
.leader-card:hover {
    transform: translateY(-7px);
    border-color: rgba(22, 163, 74, 0.25);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
}

.leader-avatar,
.avatar {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.30), transparent 40%),
        linear-gradient(135deg, #15803d, #2563eb);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 950;
    box-shadow: 0 16px 42px rgba(22, 163, 74, 0.28);
    margin-bottom: 22px;
}

.leader-card-body h3,
.leader-card h3 {
    color: #0f172a;
    font-size: 1.18rem;
    line-height: 1.25;
    margin-bottom: 8px;
}

.leader-card-body p,
.leader-card p {
    color: #15803d;
    font-weight: 850;
    line-height: 1.55;
}

/* CTA */
.admin-governance-cta {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
    padding: 42px;
    border-radius: 34px;
    display: grid;
    grid-template-columns: 1.45fr 0.75fr;
    gap: 24px;
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.35), transparent 36%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.30), transparent 36%),
        linear-gradient(135deg, #0f172a, #14532d);
    color: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);
}

.admin-governance-cta .eyebrow {
    color: #bbf7d0;
}

.admin-governance-cta .eyebrow::before {
    background: #bbf7d0;
}

.admin-governance-cta h2 {
    color: #ffffff;
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.admin-governance-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

.admin-governance-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-governance-cta .btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
}

.admin-governance-cta .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Mobile */
@media (max-width: 1100px) {
    .leader-premium-grid,
    .leader-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 980px) {
    .admin-premium-hero,
    .admin-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
        min-height: auto;
    }

    .admin-mini-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 26px;
    }

    .leader-premium-grid,
    .leader-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-governance-cta {
        grid-template-columns: 1fr;
    }

    .admin-governance-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .admin-premium-hero,
    .admin-hero {
        width: min(100% - 20px, 1240px);
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .admin-premium-hero h1,
    .admin-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }

    .admin-premium-hero p,
    .admin-hero p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .admin-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .admin-hero-actions .btn {
        width: 100%;
    }

    .admin-hero-card {
        padding: 24px;
        border-radius: 26px;
    }

    .admin-mini-stats,
    .leader-premium-grid,
    .leader-grid {
        grid-template-columns: 1fr;
    }

    .admin-mini-stats {
        margin-bottom: 60px;
    }

    .leader-premium-card,
    .leader-card {
        min-height: auto;
        padding: 24px;
    }

    .admin-governance-cta {
        width: min(100% - 20px, 1180px);
        margin: 60px auto;
        padding: 28px 20px;
        border-radius: 26px;
    }

    .admin-governance-actions {
        flex-direction: column;
        width: 100%;
    }

    .admin-governance-actions .btn {
        width: 100%;
    }
}
/* =====================================================
   AUTO TYPING HERO TEXT
===================================================== */

.typing-text {
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(135deg, #15803d, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
    min-height: 1.05em;
}

.typing-text::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: .88em;
    margin-left: 6px;
    background: #15803d;
    border-radius: 99px;
    vertical-align: -0.08em;
    animation: typingCursorBlink .8s infinite;
}

@keyframes typingCursorBlink {
    0%, 45% {
        opacity: 1;
    }

    46%, 100% {
        opacity: 0;
    }
}
/* =====================================================
   GALLERY PAGE PREMIUM UI
   File: gallery.php
===================================================== */

.gallery-premium-hero,
.gallery-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.gallery-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gallery-hero-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -160px;
    top: -170px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.23), transparent 70%);
}

.gallery-hero-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.gallery-hero-content,
.gallery-hero-card {
    position: relative;
    z-index: 2;
}

.gallery-premium-hero h1,
.gallery-hero h1 {
    margin-top: 18px;
    max-width: 820px;
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    color: #0f172a;
}

.gallery-premium-hero h1 span,
.gallery-hero h1 span {
    display: block;
}

.gallery-premium-hero p,
.gallery-hero p {
    max-width: 720px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.gallery-hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.gallery-hero-card {
    padding: 34px;
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.25), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.gallery-hero-card span {
    display: inline-flex;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.gallery-hero-card strong {
    display: block;
    color: #ffffff;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.gallery-hero-card p {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* Gallery tools */
.gallery-premium-tools,
.gallery-tools {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto 26px;
    padding: 26px;
    border-radius: 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
}

.gallery-premium-tools h2,
.gallery-tools h2 {
    margin-top: 8px;
    color: #0f172a;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    letter-spacing: -0.04em;
}

.gallery-search-box {
    min-width: 340px;
    display: grid;
    gap: 8px;
}

.gallery-search-box input,
.gallery-tools input {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    font: inherit;
}

.gallery-search-box input:focus,
.gallery-tools input:focus {
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
    background: #ffffff;
}

.gallery-search-box span,
.gallery-tools > span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
}

/* Gallery grid */
.gallery-premium-grid,
.gallery-grid {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 90px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.gallery-premium-item,
.gallery-item {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-premium-item:hover,
.gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
}

.gallery-premium-item img,
.gallery-item img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    transition: transform 0.38s ease, filter 0.38s ease;
}

.gallery-premium-item:hover img,
.gallery-item:hover img {
    transform: scale(1.08);
    filter: brightness(0.86);
}

.gallery-caption,
.gallery-item > span {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 13px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(14px);
}

.gallery-caption span {
    display: block;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.gallery-caption strong,
.gallery-item > span {
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1.3;
    word-break: break-word;
}

.gallery-item.hidden {
    display: none !important;
}

.gallery-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 28px;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(37, 99, 235, 0.08)),
        #ffffff;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
}

.gallery-empty-state h3 {
    margin: 14px 0 8px;
    color: #0f172a;
    font-size: 1.5rem;
}

.gallery-empty-state p {
    color: #64748b;
}

/* Mobile */
@media (max-width: 1100px) {
    .gallery-premium-hero,
    .gallery-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
        min-height: auto;
    }

    .gallery-premium-grid,
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .gallery-premium-tools,
    .gallery-tools {
        grid-template-columns: 1fr;
    }

    .gallery-search-box {
        min-width: 0;
    }

    .gallery-premium-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .gallery-premium-hero,
    .gallery-hero {
        width: min(100% - 20px, 1240px);
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .gallery-premium-hero h1,
    .gallery-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }

    .gallery-premium-hero p,
    .gallery-hero p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .gallery-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .gallery-hero-actions .btn {
        width: 100%;
    }

    .gallery-hero-card {
        padding: 24px;
        border-radius: 26px;
    }

    .gallery-premium-tools,
    .gallery-tools {
        width: min(100% - 20px, 1180px);
        margin-top: 60px;
        padding: 20px;
        border-radius: 24px;
    }

    .gallery-premium-grid,
    .gallery-grid {
        width: min(100% - 20px, 1180px);
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-premium-item,
    .gallery-item,
    .gallery-premium-item img,
    .gallery-item img {
        min-height: 260px;
    }
}
/* =====================================================
   GALLERY ADMIN PREMIUM UI
   File: gallery_admin.php
===================================================== */

.gallery-admin-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 460px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.gallery-admin-hero h1 {
    margin-top: 18px;
    max-width: 820px;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    color: #0f172a;
}

.gallery-admin-hero p {
    max-width: 720px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.gallery-admin-actions {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.gallery-admin-summary {
    padding: 34px;
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.25), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.gallery-admin-summary span {
    display: inline-flex;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.gallery-admin-summary strong {
    display: block;
    color: #ffffff;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.gallery-admin-summary p {
    color: rgba(255, 255, 255, 0.78);
}

.gallery-admin-section {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
}

.gallery-admin-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    align-items: stretch;
}

.gallery-upload-card,
.gallery-admin-help {
    padding: 32px;
    border-radius: 32px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
}

.gallery-upload-card h2 {
    margin-top: 10px;
    color: #0f172a;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    letter-spacing: -0.04em;
}

.gallery-upload-card p,
.gallery-admin-help p,
.gallery-admin-help li {
    color: #64748b;
    line-height: 1.75;
}

.gallery-upload-card label {
    display: grid;
    gap: 8px;
    margin: 22px 0 18px;
    color: #0f172a;
    font-weight: 900;
}

.gallery-upload-card input[type="file"] {
    width: 100%;
    padding: 15px;
    border-radius: 18px;
    border: 1px dashed rgba(15, 23, 42, 0.22);
    background: #f8fafc;
}

.gallery-admin-help h3 {
    color: #0f172a;
    font-size: 1.35rem;
    margin-bottom: 12px;
}

.gallery-admin-help ul {
    margin: 18px 0 0;
    padding-left: 20px;
}

.gallery-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.gallery-admin-card {
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-admin-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
}

.gallery-admin-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.gallery-admin-card-body {
    padding: 18px;
}

.gallery-admin-card-body h3 {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 6px;
    word-break: break-word;
}

.gallery-admin-card-body p {
    color: #64748b;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.gallery-admin-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gallery-admin-card-actions form {
    margin: 0;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 14px 35px rgba(220, 38, 38, 0.22);
}

.btn-danger:hover {
    background: #b91c1c;
    color: #ffffff;
}

/* Mobile */
@media (max-width: 1100px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .gallery-admin-hero,
    .gallery-admin-layout {
        grid-template-columns: 1fr;
    }

    .gallery-admin-hero {
        padding: 42px 28px;
        min-height: auto;
    }

    .gallery-admin-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .gallery-admin-hero,
    .gallery-admin-section {
        width: min(100% - 20px, 1180px);
    }

    .gallery-admin-hero {
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .gallery-admin-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }

    .gallery-admin-actions {
        flex-direction: column;
        width: 100%;
    }

    .gallery-admin-actions .btn {
        width: 100%;
    }

    .gallery-admin-summary,
    .gallery-upload-card,
    .gallery-admin-help {
        padding: 24px;
        border-radius: 26px;
    }

    .gallery-admin-grid {
        grid-template-columns: 1fr;
    }

    .gallery-admin-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-admin-card-actions .btn,
    .gallery-admin-card-actions form,
    .gallery-admin-card-actions button {
        width: 100%;
    }
}
/* =====================================================
   GALLERY ADMIN SEARCH FIX
===================================================== */

.gallery-admin-search {
    min-width: 320px;
    display: grid;
    gap: 8px;
}

.gallery-admin-search input {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    font: inherit;
}

.gallery-admin-search input:focus {
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
    background: #ffffff;
}

.gallery-admin-search span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
}

@media (max-width: 700px) {
    .gallery-admin-search {
        width: 100%;
        min-width: 0;
    }
}
/* =====================================================
   GALLERY MOBILE IMAGE VISIBILITY FIX
===================================================== */

.gallery-grid.gallery-no-title,
.gallery-premium-grid.gallery-no-title {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto 90px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    overflow: visible !important;
}

.gallery-grid.gallery-no-title .gallery-item,
.gallery-premium-grid.gallery-no-title .gallery-item {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 260px !important;
    height: 260px !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    background: #e5e7eb !important;
}

.gallery-grid.gallery-no-title .gallery-item img,
.gallery-premium-grid.gallery-no-title .gallery-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-no-title .gallery-caption,
.gallery-no-title .gallery-item > span {
    display: none !important;
}

.gallery-item.hidden {
    display: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .gallery-grid.gallery-no-title,
    .gallery-premium-grid.gallery-no-title {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    .gallery-grid.gallery-no-title,
    .gallery-premium-grid.gallery-no-title {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100% - 24px, 1180px) !important;
        gap: 14px !important;
    }

    .gallery-grid.gallery-no-title .gallery-item,
    .gallery-premium-grid.gallery-no-title .gallery-item {
        height: 240px !important;
        min-height: 240px !important;
    }

    .gallery-grid.gallery-no-title .gallery-item img,
    .gallery-premium-grid.gallery-no-title .gallery-item img {
        min-height: 240px !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .gallery-grid.gallery-no-title,
    .gallery-premium-grid.gallery-no-title {
        grid-template-columns: 1fr !important;
        width: min(100% - 20px, 1180px) !important;
        margin: 0 auto 60px !important;
        gap: 16px !important;
    }

    .gallery-grid.gallery-no-title .gallery-item,
    .gallery-premium-grid.gallery-no-title .gallery-item {
        display: block !important;
        height: 260px !important;
        min-height: 260px !important;
        border-radius: 22px !important;
    }

    .gallery-grid.gallery-no-title .gallery-item img,
    .gallery-premium-grid.gallery-no-title .gallery-item img {
        display: block !important;
        width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;
        object-fit: cover !important;
    }
}
@media (max-width: 640px) {
    .gallery-grid.reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* =====================================================
   HOME HERO TRANSPARENT BACKGROUND IMAGE
===================================================== */

.home-hero-transparent {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 720px !important;
    padding: 70px 58px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
        linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.78)) !important;
}

.home-hero-transparent .home-hero-bg-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    overflow: hidden !important;
}

.home-hero-transparent .home-hero-bg-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.55 !important;
    filter: saturate(1.15) contrast(1.08) brightness(0.96) !important;
}

.home-hero-transparent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.28), transparent 35%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.22), transparent 38%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 45%, rgba(255, 255, 255, 0.58) 100%);
}

.home-hero-transparent .home-hero-text {
    width: min(780px, 100%) !important;
    position: relative !important;
    z-index: 3 !important;
}

.home-hero-transparent .home-hero-text h1 {
    max-width: 900px !important;
}

.home-hero-transparent .home-hero-text p {
    max-width: 760px !important;
    color: #334155 !important;
}

.home-floating-card-transparent {
    position: absolute !important;
    right: 42px !important;
    bottom: 42px !important;
    z-index: 4 !important;
    max-width: 340px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) !important;
}

/* ficha hero image ya zamani kama CSS nyingine bado inailazimisha */
.home-hero-transparent .home-hero-image {
    display: none !important;
}

/* Mobile */
@media (max-width: 900px) {
    .home-hero-transparent {
        min-height: auto !important;
        padding: 52px 28px 150px !important;
        align-items: flex-start !important;
    }

    .home-hero-transparent::before {
        background:
            radial-gradient(circle at top left, rgba(22, 163, 74, 0.25), transparent 35%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 58%, rgba(255, 255, 255, 0.56) 100%);
    }

    .home-hero-transparent .home-hero-bg-image img {
        opacity: 0.24 !important;
        object-position: center bottom !important;
    }

    .home-floating-card-transparent {
        left: 28px !important;
        right: 28px !important;
        bottom: 28px !important;
        max-width: none !important;
    }
}

@media (max-width: 640px) {
    .home-hero-transparent {
        width: min(100% - 20px, 1240px) !important;
        margin-top: 18px !important;
        padding: 36px 18px 150px !important;
        border-radius: 28px !important;
    }

    .home-hero-transparent .home-hero-bg-image img {
        opacity: 0.22 !important;
    }

    .home-hero-transparent .home-hero-text h1 {
        font-size: clamp(2.35rem, 12vw, 3.8rem) !important;
    }

    .home-floating-card-transparent {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
    }
}
/* =====================================================
   HOME GALLERY SLIDER INSTEAD OF FIELD VIDEO
===================================================== */

.home-gallery-slider {
    margin-top: 34px;
    padding: 22px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.10), transparent 36%),
        #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.09);
    overflow: hidden;
}

.home-gallery-slider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.home-gallery-slider-head h3 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    letter-spacing: -0.04em;
}

.home-gallery-slider-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-slide-btn {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    transition: 0.25s ease;
}

.home-slide-btn:hover {
    background: #15803d;
    color: #ffffff;
    transform: translateY(-2px);
}

.home-gallery-track-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 26px;
}

.home-gallery-track {
    display: flex;
    gap: 16px;
    transition: transform 0.45s ease;
    will-change: transform;
}

.home-gallery-slide {
    flex: 0 0 calc((100% - 32px) / 3);
    height: 300px;
    overflow: hidden;
    border-radius: 24px;
    background: #e5e7eb;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.home-gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.home-gallery-slide:hover img {
    transform: scale(1.06);
    filter: brightness(0.92);
}

@media (max-width: 900px) {
    .home-gallery-slide {
        flex-basis: calc((100% - 16px) / 2);
        height: 260px;
    }
}

@media (max-width: 640px) {
    .home-gallery-slider {
        padding: 16px;
        border-radius: 26px;
    }

    .home-gallery-slider-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-gallery-slider-controls {
        width: 100%;
    }

    .home-slide-btn {
        flex: 1;
    }

    .home-gallery-slide {
        flex-basis: 100%;
        height: 250px;
    }
}
/* =====================================================
   MRO HOME GALLERY SLIDER - FINAL
===================================================== */

.mro-slider-section {
    width: 100%;
    margin-top: 36px;
    padding: 24px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.10), transparent 36%),
        #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

.mro-slider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.mro-slider-head h3 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.mro-slider-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mro-slider-btn {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    transition: 0.25s ease;
}

.mro-slider-btn:hover {
    background: #15803d;
    color: #ffffff;
    transform: translateY(-2px);
}

.mro-slider-window {
    width: 100%;
    overflow: hidden;
    border-radius: 26px;
}

.mro-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    transition: transform 0.45s ease;
    will-change: transform;
}

.mro-slider-item {
    flex: 0 0 calc((100% - 32px) / 3) !important;
    width: calc((100% - 32px) / 3) !important;
    height: 300px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 24px;
    background: #e5e7eb;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.mro-slider-item img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.mro-slider-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.92);
    transition: 0.35s ease;
}

@media (max-width: 900px) {
    .mro-slider-item {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        width: calc((100% - 16px) / 2) !important;
        height: 260px !important;
    }
}

@media (max-width: 640px) {
    .mro-slider-section {
        padding: 16px;
        border-radius: 26px;
    }

    .mro-slider-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .mro-slider-controls {
        width: 100%;
    }

    .mro-slider-btn {
        flex: 1;
    }

    .mro-slider-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 250px !important;
    }
}
/* =====================================================
   ADMIN LOGIN PREMIUM UI
===================================================== */

.admin-login-premium {
    width: min(1180px, calc(100% - 32px));
    min-height: 620px;
    margin: 50px auto 80px;
    padding: 48px;
    border-radius: 38px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.admin-login-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.admin-login-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -170px;
    top: -190px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.24), transparent 70%);
}

.admin-login-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.admin-login-premium-card {
    position: relative;
    z-index: 2;
    width: min(520px, 100%);
    padding: 36px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(16px);
}

.admin-login-premium-card h1 {
    margin-top: 12px;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.admin-login-premium-card p {
    margin-top: 12px;
    color: #64748b;
    line-height: 1.75;
}

.admin-login-form {
    margin-top: 24px;
    display: grid;
    gap: 18px;
}

.admin-login-form label {
    display: grid;
    gap: 8px;
    color: #0f172a;
    font-weight: 900;
}

.admin-login-form label span {
    font-size: 0.92rem;
}

.admin-login-form input {
    width: 100%;
    min-height: 52px;
    padding: 14px 15px;
    border-radius: 17px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    outline: none;
    transition: 0.25s ease;
}

.admin-login-form input:focus {
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.admin-login-form .btn {
    width: 100%;
}

.admin-login-links {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-login-links a {
    padding: 9px 12px;
    border-radius: 999px;
    background: #f8fafc;
    color: #15803d;
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
    transition: 0.25s ease;
}

.admin-login-links a:hover {
    background: rgba(22, 163, 74, 0.11);
    color: #0f172a;
}

@media (max-width: 640px) {
    .admin-login-premium {
        width: min(100% - 20px, 1180px);
        margin: 28px auto 60px;
        padding: 24px 16px;
        min-height: 520px;
        border-radius: 28px;
    }

    .admin-login-premium-card {
        padding: 24px;
        border-radius: 24px;
    }

    .admin-login-links {
        flex-direction: column;
    }

    .admin-login-links a {
        text-align: center;
    }
}
/* =====================================================
   CONTACT PAGE PREMIUM UI
   File: contact.php
===================================================== */

.contact-page-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.contact-page-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.contact-page-hero-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -160px;
    top: -170px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.23), transparent 70%);
}

.contact-page-hero-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.contact-page-hero-content,
.contact-page-card {
    position: relative;
    z-index: 2;
}

.contact-page-hero h1 {
    margin-top: 18px;
    max-width: 840px;
    font-size: clamp(2.5rem, 5vw, 5.1rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    color: #0f172a;
}

.contact-page-hero h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(135deg, #15803d, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
}

.contact-page-hero p {
    max-width: 720px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.contact-page-actions {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.contact-page-card {
    padding: 34px;
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.25), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.contact-page-card span {
    display: inline-flex;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.contact-page-card strong {
    display: block;
    color: #ffffff;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.contact-page-card p {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* Quick Info */
.contact-quick-grid {
    width: min(1180px, calc(100% - 32px));
    margin: -34px auto 70px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.contact-quick-grid article {
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
}

.contact-quick-grid article span {
    display: block;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.contact-quick-grid article strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.45;
    word-break: break-word;
}

.contact-quick-grid article strong + strong {
    margin-top: 4px;
}

/* Mobile */
@media (max-width: 980px) {
    .contact-page-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
        min-height: auto;
    }

    .contact-quick-grid {
        grid-template-columns: 1fr;
        margin-top: 26px;
    }
}

@media (max-width: 640px) {
    .contact-page-hero {
        width: min(100% - 20px, 1240px);
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .contact-page-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }

    .contact-page-hero p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .contact-page-actions {
        flex-direction: column;
        width: 100%;
    }

    .contact-page-actions .btn {
        width: 100%;
    }

    .contact-page-card {
        padding: 24px;
        border-radius: 26px;
    }

    .contact-quick-grid {
        width: min(100% - 20px, 1180px);
        margin-bottom: 50px;
    }
}
/* =====================================================
   CONTACT MESSAGES ADMIN PAGE
===================================================== */

.admin-messages-hero {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 430px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.admin-messages-hero h1 {
    margin-top: 18px;
    color: #0f172a;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.admin-messages-hero p {
    max-width: 720px;
    margin-top: 18px;
    color: #475569;
    line-height: 1.85;
}

.admin-messages-section {
    width: min(1180px, calc(100% - 32px));
    margin: 80px auto;
}

.admin-messages-grid {
    display: grid;
    gap: 18px;
}

.admin-message-card {
    padding: 26px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
}

.admin-message-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.admin-message-card h3 {
    margin: 0 0 4px;
    color: #0f172a;
}

.admin-message-card a {
    color: #15803d;
    font-weight: 800;
}

.admin-message-top span {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 800;
}

.admin-message-card p {
    color: #334155;
    line-height: 1.75;
    margin-bottom: 14px;
}

.admin-message-card small {
    color: #64748b;
    font-weight: 800;
}

@media (max-width: 800px) {
    .admin-messages-hero {
        grid-template-columns: 1fr;
        padding: 36px 22px;
    }

    .admin-message-top {
        flex-direction: column;
    }
}
/* =====================================================
   PREMIUM FOOTER + CTA BAND
===================================================== */

.cta-band {
    width: min(1180px, calc(100% - 32px));
    margin: 90px auto 0;
    padding: 44px;
    border-radius: 36px;
    display: grid;
    grid-template-columns: 1.5fr auto;
    gap: 28px;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 36%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.30), transparent 36%),
        linear-gradient(135deg, #0f172a, #14532d);
    color: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);
}

.cta-band::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -140px;
    top: -170px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
    pointer-events: none;
}

.cta-band > * {
    position: relative;
    z-index: 2;
}

.cta-band .eyebrow {
    color: #bbf7d0;
}

.cta-band .eyebrow::before {
    background: #bbf7d0;
}

.cta-band h2 {
    margin: 10px 0 12px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.cta-band p {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

.btn-light {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.btn-light:hover {
    background: #bbf7d0;
    transform: translateY(-2px);
}

/* Footer */
.premium-footer,
.footer {
    width: min(1180px, calc(100% - 32px));
    margin: 26px auto 24px;
    padding: 0;
    border-radius: 36px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.15), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.13), transparent 36%),
        linear-gradient(135deg, #0f172a, #111827);
    color: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.premium-footer::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -180px;
    top: -200px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 70%);
    pointer-events: none;
}

.premium-footer::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -190px;
    bottom: -210px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 70%);
    pointer-events: none;
}

.premium-footer-grid,
.footer-grid {
    position: relative;
    z-index: 2;
    padding: 48px;
    display: grid;
    grid-template-columns: 1.35fr 0.75fr 0.9fr 1fr;
    gap: 34px;
    align-items: start;
}

.footer-about p {
    max-width: 330px;
}

.footer .brand,
.footer-brand {
    margin-bottom: 18px;
}

.footer .brand-mark {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 40%),
        linear-gradient(135deg, #16a34a, #2563eb);
}

.footer .brand strong,
.footer-brand strong {
    color: #ffffff;
}

.footer .brand small,
.footer-brand small {
    color: rgba(255, 255, 255, 0.68);
}

.footer h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
}

.footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
}

.footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-weight: 750;
    transition: 0.25s ease;
}

.footer a:hover {
    color: #bbf7d0;
}

.footer-links {
    display: grid;
    gap: 10px;
}

.footer-links a {
    display: table;
}

.footer-links a:hover {
    transform: translateX(4px);
}

.footer-badges {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-badges span {
    padding: 8px 11px;
    border-radius: 999px;
    color: #bbf7d0;
    font-size: 0.76rem;
    font-weight: 900;
    background: rgba(187, 247, 208, 0.10);
    border: 1px solid rgba(187, 247, 208, 0.16);
}

.footer-support-btn {
    display: inline-flex;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-support-btn:hover {
    background: rgba(187, 247, 208, 0.14);
    transform: translateY(-2px);
}

.premium-footer-bottom,
.footer-bottom {
    position: relative;
    z-index: 2;
    padding: 18px 48px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}

.footer-bottom a {
    color: #bbf7d0;
    font-weight: 950;
}

.footer-bottom a:hover {
    color: #ffffff;
}

/* Mobile */
@media (max-width: 980px) {
    .cta-band {
        grid-template-columns: 1fr;
        padding: 34px 26px;
    }

    .cta-band .btn {
        width: fit-content;
    }

    .premium-footer-grid,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 38px 30px;
    }

    .premium-footer-bottom,
    .footer-bottom {
        padding: 18px 30px;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .cta-band {
        width: min(100% - 20px, 1180px);
        margin-top: 60px;
        padding: 28px 20px;
        border-radius: 26px;
    }

    .cta-band .btn {
        width: 100%;
    }

    .premium-footer,
    .footer {
        width: min(100% - 20px, 1180px);
        border-radius: 26px;
    }

    .premium-footer-grid,
    .footer-grid {
        grid-template-columns: 1fr;
        padding: 34px 24px;
        gap: 28px;
    }

    .premium-footer-bottom,
    .footer-bottom {
        padding: 18px 24px;
        font-size: 0.82rem;
    }
}
/* =====================================================
   BLOG VIEW PREMIUM UI
===================================================== */

.blog-view-hero,
.blog-view-not-found {
    width: min(1240px, calc(100% - 32px));
    margin: 34px auto 0;
    padding: 58px;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 42px;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.blog-view-not-found {
    display: block;
    text-align: center;
    min-height: auto;
}

.blog-view-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.blog-view-hero-bg::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -160px;
    top: -170px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.23), transparent 70%);
}

.blog-view-hero-bg::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    left: -190px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
}

.blog-view-hero-content,
.blog-view-hero-card {
    position: relative;
    z-index: 2;
}

.blog-view-hero h1,
.blog-view-not-found h1 {
    margin-top: 18px;
    max-width: 900px;
    color: #0f172a;
    font-size: clamp(2.3rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.blog-view-hero p,
.blog-view-not-found p {
    max-width: 760px;
    margin-top: 22px;
    color: #475569;
    font-size: 1.06rem;
    line-height: 1.85;
}

.blog-view-meta {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-view-meta span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 0.88rem;
    font-weight: 850;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.blog-view-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-view-hero-card {
    padding: 34px;
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.25), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.blog-view-hero-card span {
    display: inline-flex;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.blog-view-hero-card strong {
    display: block;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.blog-view-hero-card p {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* Featured image */
.blog-featured-image {
    width: min(1080px, calc(100% - 32px));
    margin: -60px auto 70px;
    position: relative;
    z-index: 6;
    border-radius: 34px;
    overflow: hidden;
    border: 10px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.20);
    background: #e5e7eb;
}

.blog-featured-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

/* Article layout */
.blog-view-layout {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.blog-view-article {
    padding: 42px;
    border-radius: 34px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

.blog-view-content p {
    margin: 0 0 20px;
    color: #334155;
    font-size: 1.06rem;
    line-height: 1.95;
}

.blog-view-content p:first-child::first-letter {
    float: left;
    margin: 8px 10px 0 0;
    color: #15803d;
    font-size: 4rem;
    line-height: 0.85;
    font-weight: 950;
}

/* Sidebar */
.blog-view-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 110px;
}

.blog-sidebar-card {
    padding: 26px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07);
}

.blog-detail-list {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.blog-detail-list div {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.07);
}

.blog-detail-list strong {
    display: block;
    color: #0f172a;
    font-size: 0.86rem;
    margin-bottom: 3px;
}

.blog-detail-list span {
    display: block;
    color: #64748b;
    font-weight: 750;
}

.blog-sidebar-card.dark-card {
    color: #ffffff;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.36), transparent 42%),
        linear-gradient(135deg, #0f172a, #14532d);
}

.blog-sidebar-card.dark-card span {
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blog-sidebar-card.dark-card h3 {
    margin: 12px 0;
    color: #ffffff;
    font-size: 1.45rem;
    line-height: 1.15;
}

.blog-sidebar-card.dark-card p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Mobile */
@media (max-width: 980px) {
    .blog-view-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
        min-height: auto;
    }

    .blog-featured-image {
        margin-top: 32px;
    }

    .blog-view-layout {
        grid-template-columns: 1fr;
    }

    .blog-view-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .blog-view-hero,
    .blog-view-not-found {
        width: min(100% - 20px, 1240px);
        margin-top: 18px;
        padding: 30px 18px;
        border-radius: 28px;
    }

    .blog-view-hero h1,
    .blog-view-not-found h1 {
        font-size: clamp(2.1rem, 11vw, 3.5rem);
    }

    .blog-view-hero p,
    .blog-view-not-found p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .blog-view-actions {
        flex-direction: column;
        width: 100%;
    }

    .blog-view-actions .btn {
        width: 100%;
    }

    .blog-view-hero-card {
        padding: 24px;
        border-radius: 26px;
    }

    .blog-featured-image {
        width: min(100% - 20px, 1080px);
        border-width: 6px;
        border-radius: 24px;
        margin-bottom: 45px;
    }

    .blog-featured-image img {
        height: 280px;
    }

    .blog-view-layout {
        width: min(100% - 20px, 1180px);
        margin-bottom: 60px;
    }

    .blog-view-article {
        padding: 24px;
        border-radius: 26px;
    }

    .blog-view-content p {
        font-size: 1rem;
        line-height: 1.85;
    }

    .blog-view-content p:first-child::first-letter {
        font-size: 3rem;
    }
}
/* =====================================================
   GALLERY ADMIN FINAL DISPLAY + DELETE FIX
===================================================== */

.gallery-admin-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.gallery-admin-card {
    display: block !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07) !important;
}

.gallery-admin-image-wrap {
    width: 100% !important;
    height: 210px !important;
    background: #e5e7eb !important;
    overflow: hidden !important;
}

.gallery-admin-image-wrap img,
.gallery-admin-card img {
    display: block !important;
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-admin-card-body {
    padding: 18px !important;
}

.gallery-admin-card-body h3 {
    margin: 0 0 6px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.gallery-admin-card-body p {
    margin: 0 0 6px !important;
    color: #64748b !important;
    font-size: 0.88rem !important;
}

.gallery-admin-card-body small {
    display: block !important;
    margin-bottom: 14px !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    word-break: break-word !important;
}

.gallery-admin-card-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.gallery-admin-card-actions form {
    margin: 0 !important;
}

.gallery-admin-card-actions .btn,
.gallery-admin-card-actions button {
    min-height: 42px !important;
    padding: 10px 14px !important;
}

.gallery-admin-card.hidden {
    display: none !important;
}

.gallery-admin-search {
    min-width: 320px;
    display: grid;
    gap: 8px;
}

.gallery-admin-search input {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    font: inherit;
}

.gallery-admin-search span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gallery-admin-search {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .gallery-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-admin-image-wrap,
    .gallery-admin-image-wrap img,
    .gallery-admin-card img {
        height: 240px !important;
    }

    .gallery-admin-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .gallery-admin-card-actions .btn,
    .gallery-admin-card-actions form,
    .gallery-admin-card-actions button {
        width: 100% !important;
    }
}
.gallery-admin-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.gallery-admin-card {
    display: block !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07) !important;
}

.gallery-admin-image-wrap {
    width: 100% !important;
    height: 230px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.gallery-admin-image-wrap img {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-admin-card-body {
    padding: 18px !important;
}

.gallery-admin-card.hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .gallery-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-admin-image-wrap,
    .gallery-admin-image-wrap img {
        height: 240px !important;
    }
}
/* =====================================================
   GALLERY ADMIN FINAL BACKGROUND IMAGE DISPLAY FIX
===================================================== */

.gallery-admin-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.gallery-admin-card {
    display: block !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07) !important;
}

.gallery-admin-bg-image {
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #e5e7eb !important;
    border-radius: 24px 24px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-admin-card-body {
    padding: 18px !important;
}

.gallery-admin-card-body h3 {
    margin: 0 0 6px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.gallery-admin-card-body p {
    margin: 0 0 6px !important;
    color: #64748b !important;
    font-size: 0.88rem !important;
}

.gallery-admin-card-body small {
    display: block !important;
    margin-bottom: 14px !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    word-break: break-word !important;
}

.gallery-admin-card-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.gallery-admin-card-actions form {
    margin: 0 !important;
}

.gallery-admin-card-actions .btn,
.gallery-admin-card-actions button {
    min-height: 42px !important;
    padding: 10px 14px !important;
}

.gallery-admin-card.hidden {
    display: none !important;
}

.gallery-admin-search {
    min-width: 320px;
    display: grid;
    gap: 8px;
}

.gallery-admin-search input {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    font: inherit;
}

.gallery-admin-search span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1100px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gallery-admin-search {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .gallery-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-admin-bg-image {
        height: 240px !important;
        min-height: 240px !important;
    }

    .gallery-admin-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .gallery-admin-card-actions .btn,
    .gallery-admin-card-actions form,
    .gallery-admin-card-actions button {
        width: 100% !important;
    }
}
.gallery-admin-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.gallery-admin-card {
    display: block !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07) !important;
}

.gallery-admin-image-link {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.gallery-admin-image-link img {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-admin-card-body {
    padding: 18px !important;
}

.gallery-admin-card-body h3 {
    margin: 0 0 6px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.gallery-admin-card-body p {
    margin: 0 0 6px !important;
    color: #64748b !important;
    font-size: 0.88rem !important;
}

.gallery-admin-card-body small {
    display: block !important;
    margin-bottom: 14px !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    word-break: break-word !important;
}

.gallery-admin-card-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.gallery-admin-card-actions form {
    margin: 0 !important;
}

.gallery-admin-card.hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .gallery-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-admin-image-link,
    .gallery-admin-image-link img {
        height: 240px !important;
    }

    .gallery-admin-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .gallery-admin-card-actions .btn,
    .gallery-admin-card-actions form,
    .gallery-admin-card-actions button {
        width: 100% !important;
    }
}
/* =====================================================
   FINAL CLEAN FIX - GALLERY ADMIN DISPLAY
   Put this at the VERY END of style.css
===================================================== */

.gallery-admin-section {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 80px auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.gallery-admin-section.reveal,
.gallery-admin-grid.reveal,
.gallery-admin-card.reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.gallery-admin-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
}

.gallery-admin-card {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.07) !important;
    min-height: 360px !important;
}

/* Support image link version */
.gallery-admin-image-link {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Support image wrap version */
.gallery-admin-image-wrap {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Support normal img */
.gallery-admin-image-link img,
.gallery-admin-image-wrap img,
.gallery-admin-card img {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Support background-image version */
.gallery-admin-bg-image {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #e5e7eb !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-admin-card-body {
    display: block !important;
    padding: 18px !important;
    background: #ffffff !important;
}

.gallery-admin-card-body h3 {
    margin: 0 0 6px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.gallery-admin-card-body p {
    margin: 0 0 6px !important;
    color: #64748b !important;
    font-size: 0.88rem !important;
}

.gallery-admin-card-body small {
    display: block !important;
    margin-bottom: 14px !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    word-break: break-word !important;
}

.gallery-admin-card-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.gallery-admin-card-actions form {
    margin: 0 !important;
}

.gallery-admin-card-actions .btn,
.gallery-admin-card-actions button {
    min-height: 42px !important;
    padding: 10px 14px !important;
}

.gallery-admin-card.hidden {
    display: none !important;
}

.gallery-admin-search {
    min-width: 320px !important;
    display: grid !important;
    gap: 8px !important;
}

.gallery-admin-search input {
    width: 100% !important;
    min-height: 50px !important;
    padding: 13px 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    outline: none !important;
    font: inherit !important;
}

.gallery-admin-search span {
    color: #64748b !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
}

@media (max-width: 1100px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gallery-admin-search {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 600px) {
    .gallery-admin-section {
        width: min(100% - 20px, 1180px) !important;
        margin: 60px auto !important;
    }

    .gallery-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-admin-image-link,
    .gallery-admin-image-wrap,
    .gallery-admin-bg-image,
    .gallery-admin-image-link img,
    .gallery-admin-image-wrap img,
    .gallery-admin-card img {
        height: 240px !important;
        min-height: 240px !important;
    }

    .gallery-admin-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .gallery-admin-card-actions .btn,
    .gallery-admin-card-actions form,
    .gallery-admin-card-actions button {
        width: 100% !important;
    }
}
/* =====================================================
   MRO LOGO IN HEADER / FOOTER
===================================================== */

.brand-logo {
    width: 58px !important;
    height: 58px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    padding: 4px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16) !important;
    flex: 0 0 58px !important;
}

.footer-logo {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
}

.brand-text {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.brand-text strong {
    display: block !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
}

.brand-text small {
    display: block !important;
    line-height: 1.2 !important;
}

.footer .brand-text strong,
.footer-brand .brand-text strong {
    color: #ffffff !important;
}

.footer .brand-text small,
.footer-brand .brand-text small {
    color: rgba(255, 255, 255, 0.72) !important;
}

.footer-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
}

@media (max-width: 640px) {
    .brand-logo {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .footer-logo {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }
}
/* =====================================================
   MRO OFFICIAL LOGO FIX
===================================================== */

.brand-mark {
    display: none !important;
}

.brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.brand-logo {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    padding: 4px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16) !important;
}

.header-logo {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
}

.brand-text,
.brand-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.brand-text strong,
.brand-copy strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

.brand-text small,
.brand-copy small {
    display: block !important;
    color: #64748b !important;
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    max-width: 220px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Footer logo support */
.footer .brand-logo,
.footer-brand .brand-logo {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
}

.footer .brand-text strong,
.footer .brand-copy strong,
.footer-brand .brand-text strong,
.footer-brand .brand-copy strong {
    color: #ffffff !important;
}

.footer .brand-text small,
.footer .brand-copy small,
.footer-brand .brand-text small,
.footer-brand .brand-copy small {
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 640px) {
    .brand-logo,
    .header-logo {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .brand-text strong,
    .brand-copy strong {
        font-size: 0.9rem !important;
    }

    .brand-text small,
    .brand-copy small {
        max-width: 150px !important;
        font-size: 0.68rem !important;
    }

    .footer .brand-logo,
    .footer-brand .brand-logo {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }
}
/* =====================================================
   BLOG ADMIN DATE & TIME EDIT
===================================================== */

.admin-post-time-form {
    margin-top: 16px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    display: grid !important;
    gap: 10px !important;
}

.admin-post-time-form label {
    margin: 0 !important;
}

.admin-post-time-form label span {
    display: block !important;
    margin-bottom: 7px !important;
    color: #0f172a !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
}

.admin-post-time-form input {
    min-height: 46px !important;
}

.admin-post-time-form .btn {
    width: fit-content !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
}

@media (max-width: 720px) {
    .admin-post-time-form .btn {
        width: 100% !important;
    }
}