@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800&family=IBM+Plex+Sans+Arabic:wght@500;600;700&display=swap");
/* ========================================================================== 
   Abdelhamid Radwan Girls Secondary School — Reference Master 2026
   Visual master: navy / gold / red educational portal screenshot supplied by user.
   Loaded last so the complete public project follows one coherent visual system.
   ========================================================================== */
:root{
  --ref-navy:#0b2f52;
  --ref-navy-2:#123f6a;
  --ref-navy-3:#071f36;
  --ref-gold:#d4aa53;
  --ref-gold-2:#f0cf80;
  --ref-gold-soft:#fff7e7;
  --ref-red:#b60d2c;
  --ref-red-2:#d31c3d;
  --ref-ink:#102b4c;
  --ref-muted:#7e8794;
  --ref-line:#dce4eb;
  --ref-bg:#f7f9fb;
  --ref-white:#fff;
  --ref-shadow:0 12px 30px rgba(8,41,71,.09);
  --ref-shadow-deep:0 22px 55px rgba(8,41,71,.14);
  --ref-radius:18px;
}
html{scroll-behavior:smooth;background:var(--ref-bg)}
body.reference-master-public{margin:0!important;background:linear-gradient(#fff,#f7f9fb 72%,#f1f5f9)!important;color:var(--ref-ink)!important;font-family:"Cairo","Tajawal","Segoe UI",Tahoma,Arial,sans-serif!important;font-size:14px!important;line-height:1.65!important}
body.reference-master-public *,body.reference-master-public *::before,body.reference-master-public *::after{box-sizing:border-box}
body.reference-master-public a{text-decoration:none;color:inherit}
.ref-container{width:min(1360px,calc(100% - 56px));margin-inline:auto}

/* ===== HEADER ===== */
.ref-site-header{position:sticky;top:0;z-index:900;background:linear-gradient(105deg,#0a2948,#123c65 52%,#0a2948);color:#fff;box-shadow:0 5px 20px rgba(8,35,60,.2)}
.ref-header-inner{width:min(1360px,calc(100% - 54px));margin-inline:auto;min-height:78px;display:grid;grid-template-columns:minmax(390px,1.2fr) minmax(520px,1.5fr) auto;align-items:center;gap:24px}
.ref-header-brand{display:flex;align-items:center;gap:14px;min-width:0;color:#fff!important}
.ref-header-brand img{width:62px;height:62px;object-fit:contain;border-radius:50%;background:#fff8e6;padding:3px;border:3px solid var(--ref-gold);box-shadow:0 0 0 3px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.16)}
.ref-header-brand span{display:grid;gap:2px;min-width:0}
.ref-header-brand strong{font-size:18px;line-height:1.4;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-header-brand small{font-size:10px;color:#dce7f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-header-nav{display:flex;align-items:center;justify-content:center;gap:25px;height:100%}
.ref-header-nav a{position:relative;height:78px;display:flex;align-items:center;color:#f6f8fb!important;font-size:13px;font-weight:800;white-space:nowrap;opacity:.94;transition:.18s ease}
.ref-header-nav a:hover,.ref-header-nav a.is-active{color:#fff!important;opacity:1}
.ref-header-nav a.is-active::after,.ref-header-nav a:hover::after{content:"";position:absolute;right:8px;left:8px;bottom:13px;height:2px;background:var(--ref-gold);border-radius:999px;box-shadow:0 0 14px rgba(214,174,90,.4)}
.ref-header-login{justify-self:start;position:relative}
.ref-login-button{min-width:145px;height:46px;border:0;border-radius:18px;background:linear-gradient(180deg,#f4d67b,#d4aa53);color:#0d3154;display:flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:13px;font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 9px 20px rgba(0,0,0,.18);cursor:pointer;transition:.18s ease}
.ref-login-button:hover{transform:translateY(-1px);filter:brightness(1.03)}
.ref-login-button span{font-size:17px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.14))}
.ref-mobile-nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:21px}
.ref-login-panel.admin-floating-login-card-panel{width:min(420px,calc(100vw - 28px))!important;top:calc(100% + 14px)!important;left:0!important;right:auto!important;border:1px solid #e1e7ec!important;border-radius:18px!important;background:#fff!important;color:var(--ref-ink)!important;box-shadow:0 30px 80px rgba(7,31,54,.28)!important}
.ref-login-panel .admin-login-card-head{background:linear-gradient(135deg,#fffaf0,#fff)!important;border-radius:18px 18px 0 0!important;border-bottom:1px solid #eceff2!important}.ref-login-panel .dropdown-panel-title{color:var(--ref-navy)!important}.ref-login-panel .btn-dropdown-submit-action{background:var(--ref-navy)!important;border-radius:12px!important}

/* ===== HOME PAGE FRAME ===== */
.ref-public-main.public-main{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important}
.public-page-admission .ref-public-main.public-main{padding:0!important}
.ref-public-home{width:100%;overflow:hidden;background:#fff}

/* ===== HERO ===== */
.ref-home-hero{position:relative;width:min(1400px,100%);margin:8px auto 0;min-height:184px;display:grid;grid-template-columns:34% 1fr 17%;align-items:stretch;background:linear-gradient(90deg,#fff 0,#fff 58%,#fbfbfa 100%);border:1px solid #e1e6eb;border-radius:0 0 22px 22px;overflow:hidden;box-shadow:0 9px 26px rgba(13,49,84,.08)}
.ref-hero-photo{position:relative;overflow:hidden;min-height:184px;background:#e7edf2}
.ref-hero-photo>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ref-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15) 72%,#fff 100%)}
.ref-hero-flag{position:absolute;top:0;right:10px;z-index:2;width:48px;height:64px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.12))}.ref-hero-flag img{width:100%;height:100%;object-fit:contain}
.ref-hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 28px}
.ref-hero-kicker{position:absolute;top:14px;right:16px;padding:5px 28px;background:linear-gradient(90deg,transparent,#fff5dc,transparent);color:#9b6b18;font-size:10px;font-weight:900}
.ref-hero-welcome{margin:0 0 2px;color:var(--ref-navy);font-size:18px;font-weight:900}
.ref-hero-copy h1{margin:0;color:#986019!important;font-size:clamp(25px,2.4vw,35px)!important;line-height:1.35!important;font-weight:950!important;text-shadow:0 1px 0 #fff}
.ref-hero-subtitle{margin:3px 0 13px!important;color:#173a5f!important;font-size:13px!important;font-weight:800!important}
.ref-hero-trust{display:flex;align-items:center;justify-content:center;gap:36px;color:#253e59;font-size:11px;font-weight:800}.ref-hero-trust span{display:flex;align-items:center;gap:7px}.ref-mini-3d{font-style:normal;font-size:18px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18))}
.ref-hero-motto{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#a27329;background:radial-gradient(circle at 50% 50%,rgba(213,179,109,.08),transparent 60%)}
.ref-hero-motto::before,.ref-hero-motto::after{content:"";position:absolute;border:1px solid rgba(210,177,106,.18);border-radius:50%;pointer-events:none}.ref-hero-motto::before{width:160px;height:160px}.ref-hero-motto::after{width:118px;height:118px}
.ref-hero-motto strong{position:relative;z-index:2;font-size:22px;line-height:1.55;font-weight:700}.ref-hero-motto i{position:relative;z-index:2;width:40px;height:2px;background:var(--ref-gold);margin-top:12px}

/* ===== SECTIONS ===== */
.ref-section{width:min(1320px,calc(100% - 72px));margin:24px auto 0}
.ref-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px}
.ref-section-head>div{margin-inline-start:auto;text-align:right}.ref-section-head h2{margin:0;color:var(--ref-navy)!important;font-size:28px!important;line-height:1.3!important;font-weight:950!important}.ref-section-head p{margin:2px 0 0!important;color:#8a929c!important;font-size:10px!important;font-weight:600!important}
.ref-outline-button{height:34px;padding:0 14px;border:1px solid #cbd7e1;border-radius:999px;background:#fff;color:var(--ref-navy)!important;font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 10px rgba(13,49,84,.04)}

/* ===== 3D SERVICE CARDS ===== */
.ref-portal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px}
.ref-portal-card{position:relative;min-height:220px;padding:13px 12px 12px;border:1px solid #dce4eb;border-radius:15px;background:linear-gradient(180deg,#fff,#fbfcfd);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 7px 16px rgba(13,49,84,.07);transition:.2s ease;overflow:hidden}
.ref-portal-card::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.85),transparent 32%);pointer-events:none}
.ref-portal-card:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(13,49,84,.13);border-color:#cbd8e2}
.ref-portal-icon{position:relative;z-index:1;width:90px;height:90px;display:grid;place-items:center;margin:2px auto 2px;filter:drop-shadow(0 9px 8px rgba(16,48,78,.15))}
.ref-portal-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}
.ref-portal-card h3{position:relative;z-index:1;margin:1px 0 2px!important;color:#0d3154!important;font-size:15px!important;line-height:1.4!important;font-weight:950!important}.ref-portal-card p{position:relative;z-index:1;margin:0 0 8px!important;color:#8b929b!important;font-size:9px!important;line-height:1.55!important;min-height:28px}
.ref-card-button{position:relative;z-index:1;margin-top:auto;width:100%;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff!important;font-size:10px;font-weight:900;box-shadow:0 7px 14px rgba(13,49,84,.16)}
.ref-card-button--navy{background:linear-gradient(180deg,#143e67,#0c2f51)}.ref-card-button--red{background:linear-gradient(180deg,#cc1736,#a80926);box-shadow:0 7px 14px rgba(182,13,44,.18)}

/* ===== All services hidden panel ===== */
.ref-all-services[hidden]{display:none!important}.ref-all-services{margin-top:14px;padding:14px;border:1px solid #dde5eb;border-radius:16px;background:#f8fafc;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ref-all-services>a{min-height:80px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e2e8ed;border-radius:13px;box-shadow:0 5px 13px rgba(13,49,84,.05)}.ref-all-services>a b{font-size:11px;color:var(--ref-navy)}.ref-all-services>a small{display:block;color:#87919b;font-size:8px}.ref-poly-icon{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:linear-gradient(145deg,#fff,#e8eef4 52%,#d2dce6);color:var(--ref-navy);font-size:19px;font-weight:900;filter:drop-shadow(0 6px 5px rgba(13,49,84,.16));box-shadow:inset 0 1px 0 #fff}.ref-all-services>a:nth-child(3n+2) .ref-poly-icon{background:linear-gradient(145deg,#ffe8ec,#f6c2ce 55%,#df90a1);color:#a20c29}.ref-all-services>a:nth-child(3n) .ref-poly-icon{background:linear-gradient(145deg,#fff7df,#efd89b 55%,#d3ad55);color:#7d5a12}

/* ===== SEARCH BAND ===== */
.ref-search-band{position:relative;width:min(1320px,calc(100% - 72px));min-height:138px;margin:22px auto 0;padding:18px 150px;border:1px solid #dce4eb;border-radius:18px;background:linear-gradient(90deg,#fff,#fbfcfe);box-shadow:0 8px 22px rgba(13,49,84,.06);display:grid;grid-template-columns:minmax(250px,.8fr) minmax(520px,1.8fr);align-items:center;gap:28px;overflow:hidden}
.ref-search-band::before,.ref-search-band::after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(212,170,83,.17);transform:rotate(45deg);pointer-events:none}.ref-search-band::before{left:-70px;top:-40px}.ref-search-band::after{right:-70px;bottom:-65px}
.ref-search-copy{text-align:right}.ref-search-copy h2{margin:0;color:var(--ref-navy)!important;font-size:23px!important;font-weight:950!important;line-height:1.35!important}.ref-search-copy h2 strong{display:inline-block;color:#8f3454;font-size:26px}.ref-search-copy p{margin:3px 0 0;color:#8a929d;font-size:9px}
.ref-search-form{display:grid;grid-template-columns:1fr 235px;gap:10px;align-items:center}.ref-search-form label{height:47px;border:1px solid #b8c7d4;border-radius:10px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 13px;box-shadow:inset 0 1px 2px rgba(13,49,84,.03)}.ref-search-form label span{color:var(--ref-red);font-size:18px}.ref-search-form input{width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:11px;color:var(--ref-ink)}.ref-search-form input::placeholder{color:#a2a9b1}.ref-search-form button{height:47px;border:0;border-radius:9px;background:linear-gradient(180deg,#c71131,#a60a25);color:#fff;font:inherit;font-size:12px;font-weight:950;box-shadow:0 8px 17px rgba(182,13,44,.2);cursor:pointer}.ref-search-assurance{grid-column:1/-1;display:flex;justify-content:center;gap:22px;font-size:8px;color:#85909a}.ref-search-assurance span{padding:2px 8px;border-radius:999px;background:#f2f6f9}.ref-search-decoration{position:absolute;z-index:2;width:120px;height:120px;display:grid;place-items:center;pointer-events:none}.ref-search-decoration img{max-width:100%;max-height:100%;object-fit:contain}.ref-search-decoration--left{left:22px;bottom:0}.ref-search-decoration--right{right:22px;bottom:0}.ref-search-alert{grid-column:1/-1;margin:0!important}

/* ===== Electronic services ===== */
.ref-electronic-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.ref-electronic-grid>a{position:relative;min-height:66px;padding:8px 12px 8px 52px;border:1px solid #dee6ed;border-radius:11px;background:linear-gradient(180deg,#fff,#f9fafb);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;box-shadow:0 5px 13px rgba(13,49,84,.05)}.ref-electronic-grid>a .ref-poly-icon{width:38px;height:38px;font-size:15px}.ref-electronic-grid>a b{font-size:10px;color:var(--ref-navy);line-height:1.4}.ref-electronic-grid>a small{display:block;color:#8d949d;font-size:7px;line-height:1.4}.ref-electronic-grid>a i{position:absolute;left:12px;width:27px;height:27px;border:1px solid #cad6e0;border-radius:50%;display:grid;place-items:center;color:var(--ref-navy);font-style:normal;font-size:12px}.ref-electronic-grid>a:hover{border-color:#bccbd7;transform:translateY(-1px)}

/* ===== Lower cards ===== */
.ref-lower-grid{width:min(1320px,calc(100% - 72px));margin:16px auto 22px;display:grid;grid-template-columns:1.1fr .82fr .82fr;gap:12px}.ref-news-card,.ref-books-card,.ref-vision-card{min-height:160px;border:1px solid #dde5eb;border-radius:15px;background:#fff;box-shadow:0 7px 18px rgba(13,49,84,.06);overflow:hidden}
.ref-news-card{padding:14px}.ref-news-card header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f4;padding-bottom:7px;margin-bottom:4px}.ref-news-card h2{margin:0;color:var(--ref-navy)!important;font-size:14px!important;font-weight:950!important}.ref-news-card header a{font-size:8px;color:#546d85!important}.ref-news-list{display:grid}.ref-news-list>a{display:grid;grid-template-columns:54px 1fr 8px;align-items:center;gap:10px;min-height:37px;border-bottom:1px solid #f0f2f4}.ref-news-list>a:last-child{border-bottom:0}.ref-news-list time{text-align:center;border-left:1px solid #edf1f4}.ref-news-list time b{display:block;color:var(--ref-navy);font-size:10px}.ref-news-list time small{font-size:7px;color:#89939e}.ref-news-list span strong{display:block;color:#0c355c;font-size:9px}.ref-news-list span small{display:block;color:#8b929b;font-size:7px}.ref-news-list i{width:6px;height:6px;border-radius:50%;background:var(--ref-red)}
.ref-books-card{position:relative;display:flex;align-items:flex-end;background:linear-gradient(130deg,#f8fafb,#fff 58%,#f5f0e8)}.ref-books-card>img{width:58%;height:100%;object-fit:cover;object-position:left bottom}.ref-books-card>div{position:absolute;right:52%;top:30%;text-align:right}.ref-books-card small{display:block;color:#a77b38;font-size:13px}.ref-books-card strong{display:block;color:#aa6e24;font-size:18px;line-height:1.6}.ref-books-card i{display:block;width:44px;height:2px;background:var(--ref-gold);margin-top:9px}
.ref-vision-card{position:relative;padding:22px 26px;text-align:right;background:linear-gradient(145deg,#fff,#fbfcfd)}.ref-vision-icon{position:absolute;left:22px;top:18px;color:#c89735;font-size:27px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.1))}.ref-vision-card h2{margin:0 0 10px;color:var(--ref-navy)!important;font-size:14px!important}.ref-vision-card p{margin:0 0 16px!important;color:#697887!important;font-size:9px!important;line-height:1.8!important}.ref-vision-card a{display:inline-flex;align-items:center;justify-content:center;min-width:125px;height:34px;border-radius:8px;background:var(--ref-red);color:#fff!important;font-size:9px;font-weight:900;box-shadow:0 7px 15px rgba(182,13,44,.18)}

/* ===== Other public pages: same design language ===== */
.ref-public-backbar{background:#f7f9fb;border-bottom:1px solid #dde5eb}.ref-public-backbar__inner{min-height:50px;display:flex;align-items:center;gap:8px}.ref-public-backbar a,.ref-public-backbar button{height:34px;border:1px solid #cbd6e0;border-radius:9px;background:#fff;color:var(--ref-navy);padding:0 12px;font:inherit;font-size:9px;font-weight:900;display:flex;align-items:center;cursor:pointer}.ref-public-backbar span{margin-inline-start:auto;color:#798694;font-size:10px;font-weight:800}
.reference-master-public:not(.public-page-admission) .ref-public-main.public-main{width:min(1320px,calc(100% - 52px))!important;margin:24px auto!important;padding:0!important;background:transparent!important}
.reference-master-public:not(.public-page-admission) .card,.reference-master-public:not(.public-page-admission) .public-card,.reference-master-public:not(.public-page-admission) .page-head,.reference-master-public:not(.public-page-admission) .public-page-head,.reference-master-public:not(.public-page-admission) .wizard-step-panel{border:1px solid #dce5ec!important;border-radius:16px!important;background:#fff!important;box-shadow:0 9px 23px rgba(13,49,84,.07)!important}
.reference-master-public .card-header,.reference-master-public .page-head,.reference-master-public .public-page-head{background:linear-gradient(180deg,#fff,#f9fbfc)!important;border-bottom:1px solid #e5ebef!important;color:var(--ref-navy)!important}.reference-master-public .btn-primary,.reference-master-public .btn-gov-submit-main-fixed,.reference-master-public .btn-premium-search{background:var(--ref-navy)!important;border-color:var(--ref-navy)!important;color:#fff!important;border-radius:9px!important}.reference-master-public .btn-danger{background:var(--ref-red)!important;border-color:var(--ref-red)!important}.reference-master-public .form-control,.reference-master-public .form-select,.reference-master-public textarea,.reference-master-public select{border:1px solid #cbd7e1!important;border-radius:9px!important;background:#fff!important;min-height:43px!important;box-shadow:none!important}.reference-master-public .form-control:focus,.reference-master-public .form-select:focus{border-color:#7693ad!important;box-shadow:0 0 0 3px rgba(13,49,84,.08)!important}.reference-master-public .table{background:#fff!important}.reference-master-public .table thead th{background:#eff4f8!important;color:var(--ref-navy)!important;border-bottom:1px solid #cfdae3!important}.reference-master-public .table tbody tr:hover{background:#fbfcfd!important}

/* ===== Footer ===== */
.ref-footer{margin-top:0;background:linear-gradient(105deg,#08253f,#0e3559 55%,#0a2948);color:#dce6ee;border-top:1px solid rgba(255,255,255,.12)}
.ref-footer-top{width:min(1320px,calc(100% - 72px));margin:auto;display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:42px;padding:34px 0 26px}.ref-footer-brand{display:flex;align-items:center;gap:15px}.ref-footer-brand img{width:68px;height:68px;object-fit:contain;border-radius:16px;background:#fff;padding:4px;border:1px solid rgba(255,255,255,.28)}.ref-footer h2,.ref-footer h3{margin:0;color:#fff}.ref-footer h2{font-size:14px}.ref-footer h3{font-size:11px;margin-bottom:10px}.ref-footer p{margin:3px 0;color:#b7c8d6;font-size:8px}.ref-footer a{color:#dce6ee!important;font-size:8px}.ref-footer-links{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:7px 14px}.ref-footer-links h3{grid-column:1/-1}.ref-footer-contact{display:grid;align-content:start;gap:5px}.ref-footer-bottom{min-height:48px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 max(36px,calc((100% - 1320px)/2));color:#93a8b9;font-size:8px}

/* ===== Responsive ===== */
@media(max-width:1180px){
  .ref-header-inner{grid-template-columns:minmax(330px,1fr) minmax(390px,1.15fr) auto}.ref-header-nav{gap:14px}.ref-header-nav a{font-size:11px}.ref-portal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ref-search-band{padding-inline:120px;grid-template-columns:1fr 1.6fr}.ref-electronic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ref-lower-grid{grid-template-columns:1fr 1fr}.ref-news-card{grid-column:1/-1}.ref-home-hero{grid-template-columns:38% 1fr 16%}
}
@media(max-width:900px){
  .ref-header-inner{min-height:70px;grid-template-columns:1fr auto auto;gap:10px}.ref-header-brand img{width:52px;height:52px}.ref-header-brand strong{font-size:14px}.ref-header-brand small{font-size:8px}.ref-mobile-nav-toggle{display:block}.ref-header-nav{position:absolute;top:70px;right:12px;left:12px;height:auto;display:none;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:#fff;border:1px solid #dce4eb;border-radius:14px;box-shadow:0 20px 50px rgba(7,31,54,.25)}.ref-header-nav.is-open{display:grid}.ref-header-nav a{height:42px;padding:0 12px;color:var(--ref-navy)!important;border-radius:9px;background:#f8fafb}.ref-header-nav a.is-active::after,.ref-header-nav a:hover::after{display:none}.ref-login-button{min-width:46px;width:46px;border-radius:13px}.ref-login-button b{display:none}.ref-login-panel.admin-floating-login-card-panel{position:fixed!important;top:82px!important;left:12px!important;right:12px!important;width:auto!important}.ref-home-hero{grid-template-columns:1fr;min-height:auto;border-radius:0}.ref-hero-photo{min-height:240px}.ref-hero-copy{padding:28px 20px}.ref-hero-kicker{position:static;margin-bottom:6px}.ref-hero-motto{display:none}.ref-portal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ref-search-band{padding:22px;grid-template-columns:1fr}.ref-search-decoration{display:none}.ref-search-form{grid-template-columns:1fr 180px}.ref-electronic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ref-footer-top{grid-template-columns:1fr 1fr}.ref-footer-brand{grid-column:1/-1}.ref-all-services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .ref-header-inner{width:calc(100% - 18px)}.ref-header-brand{gap:7px}.ref-header-brand img{width:44px;height:44px}.ref-header-brand strong{font-size:10.5px}.ref-header-brand small{display:none}.ref-home-hero{margin-top:0}.ref-hero-photo{min-height:190px}.ref-hero-copy h1{font-size:25px!important}.ref-hero-welcome{font-size:15px}.ref-hero-subtitle{font-size:10px!important}.ref-hero-trust{gap:12px;font-size:8px;flex-wrap:wrap}.ref-section,.ref-search-band,.ref-lower-grid,.ref-footer-top{width:calc(100% - 20px)}.ref-section-head{align-items:center}.ref-section-head h2{font-size:21px!important}.ref-section-head p{font-size:8px!important}.ref-outline-button{font-size:8px;height:31px}.ref-portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ref-portal-card{min-height:190px}.ref-portal-icon{width:76px;height:76px}.ref-portal-card h3{font-size:12px!important}.ref-search-form{grid-template-columns:1fr}.ref-search-copy h2{font-size:18px!important}.ref-search-copy h2 strong{font-size:21px}.ref-search-assurance{gap:5px;flex-wrap:wrap}.ref-electronic-grid{grid-template-columns:1fr}.ref-lower-grid{grid-template-columns:1fr}.ref-news-card{grid-column:auto}.ref-books-card{min-height:140px}.ref-footer-top{grid-template-columns:1fr;gap:22px}.ref-footer-brand{grid-column:auto}.ref-footer-bottom{padding:12px 14px;flex-direction:column;text-align:center}.ref-all-services{grid-template-columns:1fr}
}
@media(max-width:390px){.ref-portal-grid{grid-template-columns:1fr}.ref-portal-card{min-height:175px}.ref-header-brand strong{max-width:180px}.ref-section-head{gap:8px}.ref-outline-button{padding-inline:9px}.ref-news-list>a{grid-template-columns:48px 1fr 7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ref-portal-card,.ref-login-button,.ref-electronic-grid>a{transition:none!important}}
@media print{.ref-site-header,.ref-footer,.ref-public-backbar{display:none!important}.ref-public-main.public-main{width:100%!important;margin:0!important}.reference-master-public{background:#fff!important}}
/* Shared 3D polygon icons for all public sub-pages */
.reference-master-public .service-icon,.reference-master-public .feature-icon,.reference-master-public .portal-icon,.reference-master-public .stat-icon,.reference-master-public .metric-icon,.reference-master-public .quick-icon{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)!important;background:linear-gradient(145deg,#fff,#e5edf3 50%,#a8bac9)!important;color:var(--ref-navy)!important;font-style:normal!important;filter:drop-shadow(0 7px 5px rgba(7,31,54,.15))!important}
.ref-electronic-grid .ref-service-copy{min-width:0;display:block}.ref-electronic-grid .ref-service-copy b{display:block}.ref-electronic-grid .ref-service-copy small{display:block}
.ref-hero-photo .ref-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .65s ease;background:#e8edf1}.ref-hero-photo .ref-hero-slide.is-active{opacity:1}.ref-hero-photo .ref-hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.ref-hero-dots{position:absolute;left:16px;bottom:10px;z-index:4;display:flex;gap:5px}.ref-hero-dots button{width:7px;height:7px;border:0;border-radius:99px;background:rgba(255,255,255,.62);padding:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}.ref-hero-dots button.is-active{width:20px;background:#fff}

/* ========================================================================== 
   UI refinement — 2026-09-09
   Requested live-project changes:
   - dark-gold framed top header with Egyptian-flag details
   - Egyptian-flag accent on primary public buttons
   - Thuluth-style school name treatment
   - larger / taller hero album positioned on the left on desktop
   ========================================================================== */
:root{
  --ref-frame-gold:#b78322;
  --ref-frame-gold-deep:#8f6515;
  --ref-egypt-red:#ce1126;
  --ref-egypt-white:#ffffff;
  --ref-egypt-black:#111111;
}

/* Top header: framed institutional bar */
body.reference-master-public .ref-site-header{
  top:7px!important;
  margin:7px 8px 0!important;
  width:calc(100% - 16px)!important;
  border:3px solid var(--ref-frame-gold)!important;
  border-radius:16px!important;
  overflow:visible!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,143,.35),
    0 7px 22px rgba(7,31,54,.22)!important;
}
body.reference-master-public .ref-site-header::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:auto 18px -4px 18px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--ref-egypt-red) 0 33.333%,
    var(--ref-egypt-white) 33.333% 66.666%,
    var(--ref-egypt-black) 66.666% 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.2);
  pointer-events:none;
}

/* Brand: Thuluth-inspired treatment without changing the stored school name */
body.reference-master-public .ref-header-brand strong{
  font-family:"Aldhabi","Diwani Letter","Traditional Arabic","Arabic Typesetting",serif!important;
  font-size:29px!important;
  line-height:1.05!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  text-shadow:0 2px 1px rgba(0,0,0,.18)!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Egyptian-flag ornament shared by the public action buttons */
body.reference-master-public :is(.ref-login-button,.ref-card-button,.ref-outline-button,.ref-search-form button,.ref-electronic-grid>a,.ref-public-backbar a,.ref-public-backbar button){
  position:relative!important;
  overflow:hidden!important;
}
body.reference-master-public :is(.ref-login-button,.ref-card-button,.ref-outline-button,.ref-search-form button,.ref-electronic-grid>a,.ref-public-backbar a,.ref-public-backbar button)::after{
  content:"";
  position:absolute;
  left:-2px;
  bottom:-2px;
  width:38px;
  height:17px;
  border-radius:0 12px 0 0;
  background:linear-gradient(135deg,
    var(--ref-egypt-red) 0 33%,
    var(--ref-egypt-white) 33% 66%,
    var(--ref-egypt-black) 66% 100%);
  transform:skewX(-22deg);
  transform-origin:left bottom;
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
  opacity:.98;
  pointer-events:none;
}
body.reference-master-public .ref-login-button{
  border:1px solid #f2d27c!important;
  box-shadow:inset 0 0 0 1px rgba(125,84,10,.18),0 9px 20px rgba(0,0,0,.18)!important;
}
body.reference-master-public .ref-outline-button{
  border-color:var(--ref-frame-gold)!important;
  box-shadow:inset 0 0 0 1px rgba(183,131,34,.08),0 4px 10px rgba(13,49,84,.04)!important;
}
body.reference-master-public .ref-card-button{
  border:1px solid rgba(183,131,34,.42)!important;
}

/* Desktop hero: keep the album on the RIGHT, slightly wider and taller */
@media(min-width:901px){
  body.reference-master-public .ref-home-hero{
    direction:rtl!important;
    min-height:248px!important;
    grid-template-columns:40% 44% 16%!important;
    border-radius:0 0 24px 24px!important;
  }
  body.reference-master-public .ref-hero-photo,
  body.reference-master-public .ref-hero-copy,
  body.reference-master-public .ref-hero-motto{direction:rtl!important}
  body.reference-master-public .ref-hero-photo{min-height:248px!important}
  body.reference-master-public .ref-hero-copy{padding:28px 32px!important}
  body.reference-master-public .ref-hero-copy h1{
    font-family:"Aldhabi","Diwani Letter","Traditional Arabic","Arabic Typesetting",serif!important;
    font-size:clamp(38px,3.35vw,55px)!important;
    line-height:1.02!important;
    font-weight:700!important;
    color:#986019!important;
  }
  body.reference-master-public .ref-hero-welcome{font-size:20px!important}
  body.reference-master-public .ref-hero-subtitle{font-size:13px!important;margin-top:8px!important}
  body.reference-master-public .ref-hero-photo::after{
    background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.08) 74%,#fff 100%)!important;
  }
}

/* Keep the refined treatment compact and stable on tablets / phones */
@media(max-width:900px){
  body.reference-master-public .ref-site-header{
    top:3px!important;
    margin:3px 4px 0!important;
    width:calc(100% - 8px)!important;
    border-width:2px!important;
    border-radius:12px!important;
  }
  body.reference-master-public .ref-site-header::before{inset:auto 10px -3px 10px;height:3px}
  body.reference-master-public .ref-header-brand strong{
    font-family:"Aldhabi","Diwani Letter","Traditional Arabic","Arabic Typesetting",serif!important;
    font-size:22px!important;
    line-height:1!important;
  }
}
@media(max-width:620px){
  body.reference-master-public .ref-header-brand strong{font-size:17px!important;max-width:230px!important}
  body.reference-master-public :is(.ref-outline-button,.ref-public-backbar a,.ref-public-backbar button)::after{width:26px;height:12px}
}

/* ==========================================================================
   V15.5 — TOP BUTTON FRAMES + ARABIC-FEATHER-HERO + EGYPT-FLAG-TEXT
   2026-09-09
   Applied to the live project UI (not an image mockup).
   ========================================================================== */
:root{
  --v155-gold:#b8872b;
  --v155-gold-light:#e3c06e;
  --v155-navy:#0b2d4f;
  --v155-navy-2:#123d67;
  --v155-red:#ce1126;
  --v155-white:#ffffff;
  --v155-black:#111111;
}

/* Header background made richer so the framed buttons remain clear. */
body.reference-master-public .ref-site-header{
  background:
    radial-gradient(circle at 14% 0%,rgba(227,192,110,.16),transparent 27%),
    linear-gradient(105deg,#082845 0%,#123e69 48%,#0a2b4c 100%)!important;
}

/* TOP NAVIGATION BUTTONS — every top item gets its own dark-gold frame. */
@media(min-width:901px){
  body.reference-master-public .ref-header-inner{
    min-height:92px!important;
    grid-template-columns:minmax(390px,1.12fr) minmax(610px,1.65fr) auto!important;
    gap:18px!important;
  }
  body.reference-master-public .ref-header-nav{
    height:auto!important;
    gap:9px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.reference-master-public .ref-header-nav a{
    height:48px!important;
    min-height:48px!important;
    padding:0 15px!important;
    border:2px solid var(--v155-gold)!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(4,27,50,.52))!important;
    color:#fff!important;
    font-size:16px!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    opacity:1!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,231,167,.10),
      0 5px 14px rgba(0,0,0,.14)!important;
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
  }
  body.reference-master-public .ref-header-nav a::before{
    content:"";
    position:absolute;
    right:10px;
    left:10px;
    bottom:4px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--v155-red) 0 33.333%,var(--v155-white) 33.333% 66.666%,var(--v155-black) 66.666% 100%);
    opacity:.92;
    pointer-events:none;
  }
  body.reference-master-public .ref-header-nav a::after{display:none!important}
  body.reference-master-public .ref-header-nav a:hover,
  body.reference-master-public .ref-header-nav a.is-active{
    transform:translateY(-1px)!important;
    border-color:var(--v155-gold-light)!important;
    background:linear-gradient(180deg,rgba(184,135,43,.30),rgba(7,35,61,.74))!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,236,185,.15),
      0 8px 18px rgba(0,0,0,.20),
      0 0 0 1px rgba(227,192,110,.18)!important;
  }
  body.reference-master-public .ref-login-button{
    min-width:158px!important;
    height:50px!important;
    border:2px solid var(--v155-gold)!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,#d5ae59,#b78125)!important;
    color:#102b47!important;
    font-size:15.5px!important;
    font-weight:950!important;
    box-shadow:inset 0 0 0 1px rgba(255,244,207,.52),0 7px 18px rgba(0,0,0,.20)!important;
  }
}

/* Exact shorthand requested: ARABIC-FEATHER-HERO + EGYPT-FLAG-TEXT */
body.reference-master-public .arabic-feather-hero{
  font-family:"Aldhabi","Diwani Letter","Arabic Typesetting","Traditional Arabic","Amiri","Scheherazade New",serif!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
body.reference-master-public .egypt-flag-text{
  color:transparent!important;
  background-image:linear-gradient(to bottom,
    var(--v155-red) 0%,var(--v155-red) 31%,
    #fff 31%,#fff 66%,
    var(--v155-black) 66%,var(--v155-black) 100%)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.22)) drop-shadow(0 0 1px rgba(227,192,110,.48));
}

/* School name in the top header — larger feather/calligraphy treatment. */
body.reference-master-public .ref-header-brand strong.arabic-feather-hero.egypt-flag-text{
  display:inline-block!important;
  width:max-content!important;
  max-width:100%!important;
  font-size:clamp(30px,2.35vw,40px)!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  padding:3px 0 5px!important;
}
body.reference-master-public .ref-header-brand small{
  margin-top:3px!important;
  font-size:11px!important;
  font-weight:700!important;
  color:#e4edf5!important;
}

/* School name inside the hero — same shorthand, larger and more ceremonial. */
body.reference-master-public .ref-hero-copy h1.arabic-feather-hero.egypt-flag-text{
  display:inline-block!important;
  max-width:100%!important;
  margin:2px auto 10px!important;
  padding:4px 8px 8px!important;
  font-size:clamp(43px,4.15vw,68px)!important;
  line-height:1.03!important;
  text-align:center!important;
  text-shadow:none!important;
}

/* Preserve the wider RIGHT-SIDE hero album from V15.4. */
@media(min-width:901px){
  body.reference-master-public .ref-home-hero{
    direction:rtl!important;
    min-height:260px!important;
    grid-template-columns:40% 44% 16%!important;
  }
  body.reference-master-public .ref-hero-photo{min-height:260px!important}
  body.reference-master-public .ref-hero-copy{padding:28px 28px!important}
}

/* Tablet/mobile: framed navigation remains readable without crowding. */
@media(max-width:900px){
  body.reference-master-public .ref-header-nav{
    gap:6px!important;
    padding:10px!important;
    background:linear-gradient(180deg,#fff,#f7f9fb)!important;
    border:2px solid var(--v155-gold)!important;
  }
  body.reference-master-public .ref-header-nav a{
    min-height:46px!important;
    height:46px!important;
    padding:0 12px!important;
    border:1.5px solid var(--v155-gold)!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#10385e!important;
    font-size:13.5px!important;
    font-weight:900!important;
    box-shadow:0 3px 10px rgba(13,49,84,.06)!important;
  }
  body.reference-master-public .ref-header-nav a::after{display:none!important}
  body.reference-master-public .ref-header-nav a::before{
    content:"";position:absolute;right:9px;left:9px;bottom:4px;height:3px;border-radius:999px;
    background:linear-gradient(90deg,var(--v155-red) 0 33.333%,var(--v155-white) 33.333% 66.666%,var(--v155-black) 66.666% 100%);
  }
  body.reference-master-public .ref-header-nav a.is-active{background:#f7edd7!important;color:#0c3154!important}
  body.reference-master-public .ref-header-brand strong.arabic-feather-hero.egypt-flag-text{
    font-size:clamp(21px,5.2vw,29px)!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-feather-hero.egypt-flag-text{
    font-size:clamp(36px,8vw,52px)!important;
  }
}
@media(max-width:620px){
  body.reference-master-public .ref-header-brand strong.arabic-feather-hero.egypt-flag-text{
    font-size:20px!important;
    max-width:235px!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-feather-hero.egypt-flag-text{
    font-size:38px!important;
    line-height:1.08!important;
  }
}

/* ========================================================================== 
   V15.6 — LUXURY BROAD-PEN ARABIC TITLE / CLEAN TOP BUTTONS
   2026-09-09
   User-requested corrections:
   - replace the previous thin Diwani-like title with a broad luxurious pen style
   - remove separate Egyptian-flag ornaments from header/buttons
   - keep the exact red/white/black gradient clipped INSIDE the school-name text
   ========================================================================== */

/* Remove the OLD separate flag decoration. Gold frames/backgrounds remain. */
body.reference-master-public .ref-site-header::before{
  content:none!important;
  display:none!important;
}
body.reference-master-public :is(
  .ref-login-button,
  .ref-card-button,
  .ref-outline-button,
  .ref-search-form button,
  .ref-electronic-grid>a,
  .ref-public-backbar a,
  .ref-public-backbar button
)::after{
  content:none!important;
  display:none!important;
}
body.reference-master-public .ref-header-nav a::before,
body.reference-master-public .ref-header-nav a::after{
  content:none!important;
  display:none!important;
}

/* Broad, luxurious Arabic pen/calligraphy stack. */
body.reference-master-public .arabic-feather-hero{
  font-family:"Aref Ruqaa Ink","Rakkas","Aref Ruqaa","Aldhabi","Traditional Arabic","Arabic Typesetting",serif!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:0!important;
  font-kerning:normal!important;
  text-rendering:geometricPrecision!important;
}

/* EXACT Egypt-flag text treatment requested by the user. */
body.reference-master-public .egypt-flag-text{
  font-weight:900!important;
  background:linear-gradient(to bottom,#CE1126 0 33%,#FFFFFF 33% 66%,#000000 66% 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  filter:none!important;
  text-shadow:none!important;
}

/* Main school name in the HERO — exact requested sizing. */
body.reference-master-public .ref-hero-copy h1.arabic-feather-hero.egypt-flag-text{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 12px!important;
  padding:4px 2px 10px!important;
  font-size:clamp(48px,7vw,110px)!important;
  font-weight:900!important;
  line-height:1.08!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Same pen identity in the compact top brand, scaled to fit the navigation. */
body.reference-master-public .ref-header-brand strong.arabic-feather-hero.egypt-flag-text{
  display:inline-block!important;
  width:max-content!important;
  max-width:100%!important;
  font-family:"Aref Ruqaa Ink","Rakkas","Aref Ruqaa","Aldhabi","Traditional Arabic","Arabic Typesetting",serif!important;
  font-size:clamp(30px,2.45vw,44px)!important;
  font-weight:900!important;
  line-height:1.06!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  padding:2px 0 6px!important;
}

/* Keep the top controls as elegant framed buttons WITHOUT flag strips. */
@media(min-width:901px){
  body.reference-master-public .ref-header-nav a{
    border:2px solid #b8872b!important;
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(4,27,50,.58))!important;
    color:#fff!important;
    font-size:17px!important;
    font-weight:900!important;
    box-shadow:inset 0 0 0 1px rgba(255,231,167,.10),0 5px 14px rgba(0,0,0,.14)!important;
  }
  body.reference-master-public .ref-header-nav a:hover,
  body.reference-master-public .ref-header-nav a.is-active{
    border-color:#e3c06e!important;
    background:linear-gradient(180deg,rgba(184,135,43,.31),rgba(7,35,61,.76))!important;
  }
  body.reference-master-public .ref-login-button{
    border:2px solid #b8872b!important;
    background:linear-gradient(180deg,#d8b45f,#b78125)!important;
    font-size:16px!important;
    font-weight:950!important;
  }

  /* Give the large 48–110px title enough vertical room without moving the album. */
  body.reference-master-public .ref-home-hero{
    direction:rtl!important;
    min-height:360px!important;
    grid-template-columns:40% 44% 16%!important;
  }
  body.reference-master-public .ref-hero-photo{min-height:360px!important}
  body.reference-master-public .ref-hero-copy{padding:28px 24px!important}
}

@media(max-width:900px){
  body.reference-master-public .ref-header-nav a::before,
  body.reference-master-public .ref-header-nav a::after{content:none!important;display:none!important}
  body.reference-master-public .ref-header-brand strong.arabic-feather-hero.egypt-flag-text{
    font-size:clamp(23px,5.4vw,31px)!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-feather-hero.egypt-flag-text{
    font-size:clamp(48px,11vw,76px)!important;
    line-height:1.1!important;
  }
}
@media(max-width:620px){
  body.reference-master-public .ref-header-brand strong.arabic-feather-hero.egypt-flag-text{
    font-size:22px!important;
    max-width:245px!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-feather-hero.egypt-flag-text{
    font-size:clamp(48px,13vw,62px)!important;
    line-height:1.12!important;
  }
}



/* ========================================================================== 
   V15.7 — ELEGANT HANDWRITTEN ARABIC SCHOOL NAME / NO FLAG TEXT EFFECT
   2026-09-09
   - clean single-colour handwritten/calligraphic title
   - removes the red/white/black text clipping from the school name
   - preserves the framed top navigation and the wider right-side hero album
   ========================================================================== */

/* Safety reset: no Egyptian-flag clipping on text. */
body.reference-master-public .egypt-flag-text{
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  color:inherit!important;
  filter:none!important;
  text-shadow:none!important;
}

/* New handwritten identity used by both the top brand and the hero title. */
body.reference-master-public .arabic-handwriting-hero{
  font-family:"Aref Ruqaa Ink","Aref Ruqaa","Amiri","Traditional Arabic","Arabic Typesetting",serif!important;
  font-style:normal!important;
  font-weight:700!important;
  letter-spacing:0!important;
  font-kerning:normal!important;
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
}

/* Main school name: elegant handwritten ink, one luxurious colour. */
body.reference-master-public .ref-hero-copy h1.arabic-handwriting-hero{
  display:block!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto 16px!important;
  padding:2px 10px 8px!important;
  font-size:clamp(52px,5.4vw,84px)!important;
  font-weight:700!important;
  line-height:1.28!important;
  text-align:center!important;
  text-wrap:balance!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:#9b6412!important;
  background:none!important;
  -webkit-text-fill-color:#9b6412!important;
  text-shadow:0 2px 0 rgba(255,255,255,.95),0 6px 18px rgba(104,64,7,.13)!important;
  filter:none!important;
}

/* Compact school name in the dark top bar. */
body.reference-master-public .ref-header-brand strong.arabic-handwriting-hero{
  display:block!important;
  width:auto!important;
  max-width:470px!important;
  margin:0!important;
  padding:0!important;
  font-size:clamp(27px,2.05vw,35px)!important;
  font-weight:700!important;
  line-height:1.23!important;
  text-align:right!important;
  text-wrap:balance!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:#fff4d5!important;
  background:none!important;
  -webkit-text-fill-color:#fff4d5!important;
  text-shadow:0 2px 0 rgba(0,0,0,.18),0 0 12px rgba(222,179,84,.10)!important;
  filter:none!important;
}

@media(min-width:901px){
  body.reference-master-public .ref-header-inner{
    min-height:104px!important;
    grid-template-columns:minmax(410px,1.15fr) minmax(610px,1.65fr) auto!important;
  }
  body.reference-master-public .ref-header-brand small{
    margin-top:1px!important;
  }
  body.reference-master-public .ref-home-hero{
    direction:rtl!important;
    min-height:360px!important;
    grid-template-columns:40% 44% 16%!important;
  }
  body.reference-master-public .ref-hero-photo{min-height:360px!important}
  body.reference-master-public .ref-hero-copy{padding:24px 22px!important}
}

@media(max-width:1100px) and (min-width:901px){
  body.reference-master-public .ref-header-brand strong.arabic-handwriting-hero{
    font-size:27px!important;
    max-width:390px!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-handwriting-hero{
    font-size:clamp(48px,5.2vw,68px)!important;
  }
}

@media(max-width:900px){
  body.reference-master-public .ref-header-brand strong.arabic-handwriting-hero{
    font-size:clamp(24px,5vw,31px)!important;
    max-width:300px!important;
    line-height:1.3!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-handwriting-hero{
    font-size:clamp(46px,10vw,68px)!important;
    line-height:1.3!important;
    max-width:680px!important;
  }
}

@media(max-width:620px){
  body.reference-master-public .ref-header-brand strong.arabic-handwriting-hero{
    font-size:23px!important;
    max-width:245px!important;
  }
  body.reference-master-public .ref-hero-copy h1.arabic-handwriting-hero{
    font-size:clamp(42px,12vw,58px)!important;
    line-height:1.34!important;
    padding-inline:4px!important;
  }
}/* ========================================================================== 
   V15.9 — SCIENTIFIC INSTITUTION WORDMARK
   2026-09-09
   - completely removes the Kufi / handwritten look from the school name
   - IBM Plex Sans Arabic: modern, formal, scientific and institutional
   - no Egyptian-flag colouring, gradients, shadows or decorative calligraphy
   ========================================================================== */
body.reference-master-public .scientific-institution-title{
  font-family:"IBM Plex Sans Arabic","Cairo","Tahoma","Arial",sans-serif!important;
  font-style:normal!important;
  font-weight:700!important;
  font-variation-settings:normal!important;
  letter-spacing:0!important;
  word-spacing:.02em!important;
  font-kerning:normal!important;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1!important;
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
  filter:none!important;
}

/* Main wordmark: two deliberately balanced lines, like an academic institution identity. */
body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
  position:relative!important;
  display:block!important;
  width:min(100%,900px)!important;
  max-width:900px!important;
  margin:0 auto 24px!important;
  padding:8px 18px 22px!important;
  font-size:clamp(42px,4.55vw,72px)!important;
  font-weight:700!important;
  line-height:1.24!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:#0b3155!important;
  -webkit-text-fill-color:#0b3155!important;
}
body.reference-master-public .ref-hero-copy h1.scientific-institution-title .school-title-line{
  display:block!important;
  width:100%!important;
}
body.reference-master-public .ref-hero-copy h1.scientific-institution-title .school-title-line:last-child{
  margin-top:5px!important;
  font-size:.78em!important;
  font-weight:600!important;
  color:#1c527e!important;
  -webkit-text-fill-color:#1c527e!important;
}
body.reference-master-public .ref-hero-copy h1.scientific-institution-title::after{
  content:""!important;
  position:absolute!important;
  right:50%!important;
  bottom:4px!important;
  width:96px!important;
  height:3px!important;
  border-radius:999px!important;
  background:#c7952f!important;
  transform:translateX(50%)!important;
}

/* Header identity: crisp institutional typography, no script/calligraphy. */
body.reference-master-public .ref-header-brand strong.scientific-institution-title{
  display:block!important;
  width:auto!important;
  max-width:560px!important;
  margin:0!important;
  padding:0!important;
  font-size:clamp(19px,1.6vw,28px)!important;
  font-weight:700!important;
  line-height:1.42!important;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

@media(max-width:1100px) and (min-width:901px){
  body.reference-master-public .ref-header-brand strong.scientific-institution-title{
    font-size:20px!important;
    max-width:430px!important;
  }
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:clamp(40px,4.4vw,58px)!important;
  }
}

@media(max-width:900px){
  body.reference-master-public .ref-header-brand strong.scientific-institution-title{
    font-size:clamp(18px,4vw,23px)!important;
    max-width:310px!important;
    line-height:1.4!important;
  }
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:clamp(36px,7.6vw,52px)!important;
    line-height:1.28!important;
    padding-inline:10px!important;
  }
}

@media(max-width:620px){
  body.reference-master-public .ref-header-brand strong.scientific-institution-title{
    font-size:18px!important;
    max-width:250px!important;
  }
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:clamp(32px,8.2vw,44px)!important;
    line-height:1.3!important;
    margin-bottom:18px!important;
  }
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title::after{
    width:72px!important;
  }
}


/* ========================================================================== 
   V15.10 — FINAL ACADEMIC TWO-LINE SCHOOL WORDMARK + MATCHED HEADER FONT
   2026-09-09
   Requested layout:
   1) "مدرسة عبدالحميد رضوان" MUST stay on one line.
   2) "الثانوية بنات" MUST stay on the second line.
   3) The top-right school name uses the exact same IBM Plex Sans Arabic identity.
   ========================================================================== */

/* Main hero school wordmark: exactly two lines on desktop/tablet. */
body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
  width:100%!important;
  max-width:none!important;
  margin:0 auto 24px!important;
  padding:8px 6px 22px!important;
  font-family:"IBM Plex Sans Arabic","Cairo","Tahoma","Arial",sans-serif!important;
  font-size:clamp(38px,3.4vw,54px)!important;
  font-style:normal!important;
  font-weight:700!important;
  line-height:1.28!important;
  letter-spacing:0!important;
  word-spacing:.01em!important;
  text-align:center!important;
  color:#0b3155!important;
  -webkit-text-fill-color:#0b3155!important;
  background:none!important;
  text-shadow:none!important;
  filter:none!important;
}
body.reference-master-public .ref-hero-copy h1.scientific-institution-title .school-title-line{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body.reference-master-public .ref-hero-copy h1.scientific-institution-title .school-title-line:first-child{
  font-size:1em!important;
  font-weight:700!important;
  color:#0b3155!important;
  -webkit-text-fill-color:#0b3155!important;
}
body.reference-master-public .ref-hero-copy h1.scientific-institution-title .school-title-line:last-child{
  margin-top:5px!important;
  font-size:.82em!important;
  font-weight:600!important;
  color:#1c527e!important;
  -webkit-text-fill-color:#1c527e!important;
}

/* Top-right identity: exact same typeface and typographic character as the hero. */
body.reference-master-public header.ref-site-header .ref-header-brand strong.scientific-institution-title{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-family:"IBM Plex Sans Arabic","Cairo","Tahoma","Arial",sans-serif!important;
  font-size:clamp(18px,1.42vw,24px)!important;
  font-style:normal!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  word-spacing:.01em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:right!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  background:none!important;
  background-image:none!important;
  text-shadow:none!important;
  filter:none!important;
}

@media(max-width:1100px) and (min-width:901px){
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:clamp(36px,3.45vw,45px)!important;
  }
  body.reference-master-public header.ref-site-header .ref-header-brand strong.scientific-institution-title{
    font-size:18px!important;
  }
}

@media(max-width:900px){
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:clamp(32px,6.2vw,48px)!important;
    padding-inline:4px!important;
  }
  body.reference-master-public header.ref-site-header .ref-header-brand strong.scientific-institution-title{
    width:auto!important;
    max-width:300px!important;
    font-size:clamp(16px,3.3vw,21px)!important;
    white-space:normal!important;
  }
}

@media(max-width:620px){
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:clamp(27px,7vw,38px)!important;
    line-height:1.3!important;
  }
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title .school-title-line{
    white-space:nowrap!important;
  }
  body.reference-master-public header.ref-site-header .ref-header-brand strong.scientific-institution-title{
    max-width:220px!important;
    font-size:16px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
}

@media(max-width:390px){
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    font-size:25px!important;
  }
}


/* ========================================================================== 
   V15.11 — SERVICE MESSAGE + 3D TRUST FEATURES + CIRCULAR HERO ALBUM
   2026-09-09
   ========================================================================== */
body.reference-master-public .ref-hero-copy{
  gap:0!important;
}
body.reference-master-public .ref-hero-service-message{
  position:relative!important;
  width:min(94%,720px)!important;
  margin:2px auto 14px!important;
  padding:13px 22px 12px!important;
  border:1px solid rgba(199,149,47,.55)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.94),transparent 28%),
    linear-gradient(135deg,#fffaf0 0%,#f7ecd2 48%,#fff 100%)!important;
  box-shadow:0 10px 24px rgba(11,49,85,.10),inset 0 1px 0 #fff!important;
  overflow:visible!important;
}
body.reference-master-public .ref-hero-service-message::before{
  content:""!important;
  position:absolute!important;
  inset:5px!important;
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:11px!important;
  pointer-events:none!important;
}
body.reference-master-public .ref-hero-service-badge{
  position:absolute!important;
  top:-11px!important;
  right:22px!important;
  z-index:2!important;
  padding:3px 11px!important;
  border-radius:999px!important;
  background:#0b3155!important;
  color:#fff!important;
  font-family:"IBM Plex Sans Arabic","Cairo",sans-serif!important;
  font-size:10px!important;
  font-weight:700!important;
  box-shadow:0 4px 12px rgba(11,49,85,.18)!important;
}
body.reference-master-public .ref-hero-service-message .ref-hero-subtitle{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  color:#173a5f!important;
  font-family:"IBM Plex Sans Arabic","Cairo",sans-serif!important;
  font-size:clamp(13px,1.15vw,18px)!important;
  line-height:1.75!important;
  font-weight:700!important;
  letter-spacing:0!important;
}
body.reference-master-public .ref-hero-trust{
  width:min(96%,760px)!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin:2px auto 0!important;
  color:#173a5f!important;
}
body.reference-master-public .ref-hero-trust .ref-trust-feature{
  min-height:78px!important;
  padding:8px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid #dce5ec!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff,#f7fafc)!important;
  box-shadow:0 7px 16px rgba(11,49,85,.08),inset 0 1px 0 #fff!important;
}
body.reference-master-public .ref-hero-trust .ref-trust-feature b{
  font-family:"IBM Plex Sans Arabic","Cairo",sans-serif!important;
  font-size:clamp(12px,1.05vw,17px)!important;
  line-height:1.4!important;
  font-weight:700!important;
  white-space:nowrap!important;
  color:#0b3155!important;
}
body.reference-master-public .ref-hero-trust .ref-mini-3d{
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  background:radial-gradient(circle at 35% 28%,#fff 0 18%,#f4f7fa 65%,#e5edf3 100%)!important;
  box-shadow:0 7px 13px rgba(15,45,72,.15),inset 0 1px 0 #fff!important;
  filter:none!important;
  overflow:hidden!important;
}
body.reference-master-public .ref-hero-trust .ref-mini-3d img{
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.14))!important;
}

/* The former motto area is now a large, editable circular photo album. */
body.reference-master-public .ref-hero-motto.ref-hero-circle-zone{
  min-width:0!important;
  padding:14px!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(212,170,83,.12),transparent 58%),
    linear-gradient(180deg,#fffdf8,#fff)!important;
  overflow:hidden!important;
}
body.reference-master-public .ref-hero-motto.ref-hero-circle-zone::before,
body.reference-master-public .ref-hero-motto.ref-hero-circle-zone::after{
  display:none!important;
}
body.reference-master-public .ref-circle-album{
  position:relative!important;
  width:clamp(150px,14.5vw,218px)!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  padding:7px!important;
  background:linear-gradient(145deg,#f5d98b,#b47713 54%,#f9e4a5)!important;
  box-shadow:0 16px 30px rgba(11,49,85,.18),0 0 0 7px rgba(212,170,83,.10)!important;
}
body.reference-master-public .ref-circle-album::before{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  border-radius:50%!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.92),inset 0 0 22px rgba(11,49,85,.18)!important;
  z-index:3!important;
  pointer-events:none!important;
}
body.reference-master-public .ref-circle-slide{
  position:absolute!important;
  inset:7px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  opacity:0!important;
  transform:scale(.965)!important;
  transition:opacity .72s ease,transform .72s ease!important;
  z-index:1!important;
  background:#eef3f6!important;
}
body.reference-master-public .ref-circle-slide.is-active{
  opacity:1!important;
  transform:scale(1)!important;
  z-index:2!important;
}
body.reference-master-public .ref-circle-slide img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}
body.reference-master-public .ref-circle-ring{
  position:absolute!important;
  inset:-9px!important;
  border:1px dashed rgba(180,119,19,.48)!important;
  border-radius:50%!important;
  animation:refCircleRingSpin 18s linear infinite!important;
  pointer-events:none!important;
}
@keyframes refCircleRingSpin{to{transform:rotate(360deg)}}

@media(max-width:1100px){
  body.reference-master-public .ref-home-hero{grid-template-columns:38% 1fr 18%!important}
  body.reference-master-public .ref-circle-album{width:clamp(132px,15.2vw,180px)!important}
  body.reference-master-public .ref-hero-trust .ref-mini-3d{flex-basis:48px!important;width:48px!important;height:48px!important}
  body.reference-master-public .ref-hero-trust .ref-mini-3d img{width:45px!important;height:45px!important}
}
@media(max-width:900px){
  body.reference-master-public .ref-hero-service-message{width:min(96%,650px)!important;padding:12px 16px 11px!important}
  body.reference-master-public .ref-hero-trust{gap:8px!important}
  body.reference-master-public .ref-hero-trust .ref-trust-feature{min-height:68px!important;padding:7px!important}
  body.reference-master-public .ref-hero-trust .ref-trust-feature b{font-size:12px!important}
  body.reference-master-public .ref-circle-album{width:145px!important}
}
@media(max-width:760px){
  body.reference-master-public .ref-home-hero{grid-template-columns:1fr!important}
  body.reference-master-public .ref-hero-motto.ref-hero-circle-zone{order:3!important;padding:17px 14px 22px!important}
  body.reference-master-public .ref-circle-album{width:170px!important}
  body.reference-master-public .ref-hero-trust{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:620px){
  body.reference-master-public .ref-hero-service-message{margin-top:5px!important;margin-bottom:11px!important;border-radius:13px!important}
  body.reference-master-public .ref-hero-service-message .ref-hero-subtitle{font-size:11.5px!important}
  body.reference-master-public .ref-hero-service-badge{font-size:8px!important;right:14px!important}
  body.reference-master-public .ref-hero-trust{grid-template-columns:1fr!important;gap:6px!important;width:min(92%,390px)!important}
  body.reference-master-public .ref-hero-trust .ref-trust-feature{min-height:58px!important;justify-content:flex-start!important;padding-inline:18px!important}
  body.reference-master-public .ref-hero-trust .ref-mini-3d{flex-basis:44px!important;width:44px!important;height:44px!important}
  body.reference-master-public .ref-hero-trust .ref-mini-3d img{width:42px!important;height:42px!important}
  body.reference-master-public .ref-hero-trust .ref-trust-feature b{font-size:13px!important}
  body.reference-master-public .ref-circle-album{width:156px!important}
}
@media(prefers-reduced-motion:reduce){
  body.reference-master-public .ref-circle-slide{transition:none!important}
  body.reference-master-public .ref-circle-ring{animation:none!important}
}


/* ==========================================================================
   V15.13.2 — HOMEPAGE ALBUM RUNTIME FIX + FEATHERED WIDE HERO PHOTO
   2026-09-09
   - keeps the public album rotating continuously (no whole-hero hover freeze)
   - makes uploaded images feel larger while protecting the school-name copy
   - fades the photo edge into the white interface instead of showing a hard cut
   ========================================================================== */
body.reference-master-public .ref-hero-photo{
  background:#fff!important;
  isolation:isolate!important;
}
body.reference-master-public .ref-hero-photo .ref-hero-slide{
  background:#fff!important;
  overflow:hidden!important;
}
body.reference-master-public .ref-hero-photo .ref-hero-slide.is-broken{
  visibility:hidden!important;
  pointer-events:none!important;
}
body.reference-master-public .ref-hero-photo .ref-hero-slide img{
  will-change:transform,opacity!important;
  transform:scale(1.055)!important;
  transform-origin:center center!important;
  transition:transform 5.5s ease,opacity .65s ease!important;
}
body.reference-master-public .ref-hero-photo .ref-hero-slide.is-active img{
  transform:scale(1.085)!important;
}
body.reference-master-public .ref-hero-photo::after{
  z-index:5!important;
  pointer-events:none!important;
}

@media(min-width:901px){
  body.reference-master-public .ref-home-hero{
    grid-template-columns:43% 41% 16%!important;
    min-height:390px!important;
  }
  body.reference-master-public .ref-hero-photo{
    min-height:390px!important;
  }
  body.reference-master-public .ref-hero-photo .ref-hero-slide{
    inset:-8px -12px -8px -18px!important;
  }
  body.reference-master-public .ref-hero-photo .ref-hero-slide img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.36) 7%,rgba(0,0,0,.82) 15%,#000 27%,#000 100%)!important;
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.36) 7%,rgba(0,0,0,.82) 15%,#000 27%,#000 100%)!important;
  }
  body.reference-master-public .ref-hero-photo::after{
    background:
      linear-gradient(to right,#fff 0%,rgba(255,255,255,.90) 7%,rgba(255,255,255,.48) 16%,rgba(255,255,255,.10) 27%,transparent 39%)!important;
  }
  body.reference-master-public .ref-hero-copy{
    z-index:6!important;
    padding-inline:30px!important;
  }
  body.reference-master-public .ref-hero-copy h1.scientific-institution-title{
    position:relative!important;
    z-index:2!important;
  }
}

@media(min-width:901px) and (max-width:1120px){
  body.reference-master-public .ref-home-hero{
    grid-template-columns:42% 41% 17%!important;
  }
}

@media(max-width:900px){
  body.reference-master-public .ref-hero-photo .ref-hero-slide{
    inset:-5px!important;
  }
  body.reference-master-public .ref-hero-photo .ref-hero-slide img{
    -webkit-mask-image:none!important;
    mask-image:none!important;
    transform:scale(1.035)!important;
  }
  body.reference-master-public .ref-hero-photo .ref-hero-slide.is-active img{
    transform:scale(1.055)!important;
  }
  body.reference-master-public .ref-hero-photo::after{
    background:linear-gradient(to bottom,transparent 64%,rgba(255,255,255,.20) 80%,#fff 100%)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.reference-master-public .ref-hero-photo .ref-hero-slide img,
  body.reference-master-public .ref-hero-photo .ref-hero-slide.is-active img{
    transition:none!important;
    transform:scale(1.045)!important;
  }
}