/* ============================================
   PHYSIO SPEAKER — DESIGN SYSTEM v2
   Font: Cairo | Direction: RTL
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#F8F9FC;
  --bg-alt:#EEF2FF;

  --ink:#0F172A;
  --ink-soft:#475569;

  /* اللون الأساسي الجديد */
  --teal:#16337A;        /* الأزرق الغامق */
  --teal-deep:#0D235A;   /* أغمق للهيدر والهوفر */
  --teal-light:#E8EEFF;  /* خلفيات فاتحة */

  /* Accent اختياري */
  --amber:#1E40C2;       /* أزرق متوسط */
  --amber-dark:#16337A;

  --line:#D9E1F2;
  --white:#FFFFFF;

  --danger:#DC3545;
  --purple:#4056A1;

  --radius:14px;
  --radius-lg:24px;

  --shadow-sm:0 2px 8px rgba(22,51,122,.06);
  --shadow:0 12px 40px rgba(22,51,122,.08);
  --shadow-lg:0 24px 60px rgba(22,51,122,.12);

  --font:'Cairo', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font) !important;
  background:var(--bg) !important;
  color:var(--ink) !important;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(15,76,74,.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(232,162,74,.04) 0%, transparent 40%);
  pointer-events:none;z-index:-1;
}
a{text-decoration:none;color:inherit;transition:color .2s}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font);font-weight:700;color:var(--ink);
  line-height:1.25;letter-spacing:-.01em;
}

.container{max-width:1280px !important;margin:0 auto;padding:0 32px !important}

.announce{
  background:var(--teal-deep);color:#E7F2EF;
  padding:10px 0;font-size:13px;text-align:center;letter-spacing:.02em;
}
.announce strong{color:var(--amber);font-weight:700}

.site-nav{
  position:sticky;
  top:0;
  background:#ffffff !important;
  border-bottom:1px solid var(--line);
  z-index:100;
  padding:8px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;color:var(--teal) !important;line-height:1}
.brand-mark{
  width:40px;height:40px;background:var(--teal);
  border-radius:10px;display:grid;place-items:center;
  color:var(--amber);font-size:20px;font-weight:800;
  transform:rotate(-6deg);
}
.main-nav{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.main-nav li a i { display: none; } /* Hide icons on desktop */
.main-nav a{font-size:15px;font-weight:600;color:var(--ink-soft);position:relative;padding:4px 0}
.main-nav a:hover{color:var(--teal)}
.main-nav a.active{color:var(--teal)}
.main-nav a.active::after{
  content:'';position:absolute;bottom:-4px;right:0;left:0;
  height:2px;background:var(--amber);border-radius:2px;
}
.nav-cta{display:flex;gap:10px;align-items:center}

.btn{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:8px !important;padding:12px 24px !important;border-radius:var(--radius) !important;
  font-weight:700 !important;font-size:15px !important;font-family:var(--font) !important;
  transition:all .25s cubic-bezier(.4,0,.2,1) !important;border:none !important;white-space:nowrap;
}
.btn-primary, .btn.btn-primary{background:var(--teal) !important;color:var(--white) !important}
.btn-primary:hover, .btn.btn-primary:hover{background:var(--teal-deep) !important;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-amber{background:var(--amber) !important;color:var(--teal-deep) !important}
.btn-amber:hover{background:var(--amber-dark) !important;color:var(--white) !important;transform:translateY(-2px)}
.btn-ghost{background:transparent !important;color:var(--teal) !important;border:1.5px solid var(--line) !important}
.btn-ghost:hover{border-color:var(--teal) !important;background:var(--white) !important}
.btn-outline-primary, .btn.btn-outline-primary{background:transparent !important;color:var(--teal) !important;border:1.5px solid var(--teal) !important}
.btn-outline-primary:hover{background:var(--teal) !important;color:var(--white) !important}
.btn-danger{background:var(--danger) !important;color:white !important}
.btn-success{background:var(--teal) !important;color:white !important}
.btn-lg{padding:16px 32px !important;font-size:16px !important}

/* HERO */
.hero{padding:80px 0 60px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;background:var(--teal-light);
  border-radius:100px;font-size:13px;font-weight:700;
  color:var(--teal-deep);margin-bottom:28px;
}
.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(15,76,74,.6);animation:pulse 2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(15,76,74,0)}100%{box-shadow:0 0 0 0 rgba(15,76,74,0)}}
.hero h1{font-size:clamp(36px,5vw,60px);font-weight:800;line-height:1.15;margin-bottom:24px}
.hero h1 .accent{color:var(--teal);position:relative;display:inline-block}
.hero h1 .accent::after{
  content:'';position:absolute;bottom:4px;right:0;left:0;height:14px;
  background:var(--amber);opacity:.35;border-radius:2px;z-index:-1;
}
.hero-sub{font-size:19px;color:var(--ink-soft);max-width:540px;margin-bottom:36px;line-height:1.75;font-weight:400}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}

.trust-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:36px;border-top:1px solid var(--line)}
.trust-item .num{font-size:34px;font-weight:800;color:var(--teal);line-height:1;margin-bottom:6px;display:flex;align-items:baseline;gap:4px}
.trust-item .num sup{font-size:20px;color:var(--amber)}
.trust-item .label{font-size:13px;color:var(--ink-soft);font-weight:600}

.hero-visual{position:relative;height:560px}
.hero-card{position:absolute;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;border:1px solid var(--line)}
.hero-card-main{
  inset:0 20px 40px 20px;padding:40px;overflow:hidden;
  background:linear-gradient(140deg,var(--teal) 0%,var(--teal-deep) 100%);
  color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-card-main::before{
  content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;
  background:radial-gradient(circle,var(--amber) 0%,transparent 70%);opacity:.4;
}
.hero-card-main h3{font-size:30px;font-weight:700;line-height:1.3;margin-bottom:12px;position:relative;color:var(--white)}
.hero-card-main p{font-size:14px;opacity:.85;position:relative}

.hero-card-float-1{top:30px;left:-20px;width:240px;display:flex;align-items:center;gap:14px;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-card-float-1 .avatar{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#E8A24A,#C8852D);flex-shrink:0;
  display:grid;place-items:center;color:var(--white);font-weight:800;font-size:18px;
}
.hero-card-float-1 .info{flex:1;min-width:0}
.hero-card-float-1 .info strong{display:block;font-size:14px;margin-bottom:2px;font-weight:700}
.hero-card-float-1 .info span{font-size:12px;color:var(--ink-soft)}
.hero-card-float-1 .check{width:24px;height:24px;border-radius:50%;background:var(--teal);color:white;display:grid;place-items:center;font-size:12px;flex-shrink:0;font-weight:700}

.hero-card-float-2{bottom:30px;right:-30px;width:280px;animation:float 6s ease-in-out infinite;animation-delay:-3s}
.hero-card-float-2 .label{font-size:11px;color:var(--ink-soft);margin-bottom:8px;font-weight:700;letter-spacing:.05em}
.hero-card-float-2 .rating{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hero-card-float-2 .stars{color:var(--amber);letter-spacing:2px;font-size:14px}
.hero-card-float-2 .score{font-weight:800;font-size:22px;color:var(--teal)}
.hero-card-float-2 .quote{font-size:13px;color:var(--ink-soft);line-height:1.5}

/* SECTIONS */
.section-head{text-align:center;max-width:700px;margin:0 auto 60px}
.section-eyebrow{font-size:13px;font-weight:800;color:var(--amber-dark);letter-spacing:.1em;margin-bottom:16px}
.section-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.2;margin-bottom:16px}
.section-head p{font-size:17px;color:var(--ink-soft);font-weight:400}

.gateways{padding:100px 0}
.gateway-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gateway{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;position:relative;overflow:hidden;
  transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;
  display:flex;flex-direction:column;min-height:320px;
}
.gateway::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:var(--teal-light);transition:all .3s}
.gateway:nth-child(1)::before{background:var(--teal)}
.gateway:nth-child(2)::before{background:var(--amber)}
.gateway:nth-child(3)::before{background:var(--purple)}
.gateway:nth-child(4)::before{background:var(--danger)}
.gateway:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.gateway:hover::before{height:8px}
.gateway-icon{width:56px;height:56px;border-radius:14px;background:var(--bg-alt);display:grid;place-items:center;margin-bottom:24px;font-size:26px}
.gateway h3{font-size:22px;font-weight:700;margin-bottom:10px}
.gateway p{font-size:14px;color:var(--ink-soft);margin-bottom:24px;flex:1;line-height:1.7}
.gateway-cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--teal)}
.arrow{display:inline-block;transition:transform .2s}
.gateway:hover .arrow{transform:translateX(-4px)}

/* HOW */
.how{padding:100px 0;background:var(--bg-alt)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative}
.how-grid::before{content:'';position:absolute;top:40px;right:15%;left:15%;height:2px;background:repeating-linear-gradient(to left,var(--line) 0 8px,transparent 8px 16px);z-index:0}
.step{position:relative;z-index:1;text-align:center}
.step-num{
  width:80px;height:80px;border-radius:50%;
  background:var(--white);border:2px solid var(--teal);color:var(--teal);
  display:grid;place-items:center;margin:0 auto 24px;
  font-size:30px;font-weight:800;position:relative;
}
.step-num::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--amber);opacity:.4}
.step h3{font-size:20px;font-weight:700;margin-bottom:10px}
.step p{font-size:15px;color:var(--ink-soft);max-width:280px;margin:0 auto}

/* DOCTORS */
.doctors-section{padding:100px 0}
.doctor-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:40px;flex-wrap:wrap}
.doctor-head .head-text{max-width:520px}
.doctor-head h2{font-size:clamp(28px,3.5vw,40px);font-weight:800;line-height:1.2;margin-bottom:14px}
.doctor-head p{color:var(--ink-soft);font-size:16px}
.doctor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.doc-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s}
.doc-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.doc-img{aspect-ratio:1/1;background:linear-gradient(140deg,var(--teal-light),var(--bg-alt));position:relative;display:grid;place-items:center}
.doc-img .initials{font-size:54px;font-weight:800;color:var(--teal)}
.doc-img .verified{position:absolute;top:14px;right:14px;background:var(--teal);color:white;padding:5px 12px;border-radius:100px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}
.doc-body{padding:20px}
.doc-body h4{font-size:17px;font-weight:700;margin-bottom:4px}
.doc-spec{font-size:13px;color:var(--teal);font-weight:600;margin-bottom:12px}
.doc-meta{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}
.doc-meta .rating{color:var(--amber-dark);font-weight:700}

/* SHOP */
.shop-section{padding:100px 0;background:var(--teal-deep);color:var(--white);position:relative;overflow:hidden}
.shop-section::before{content:'';position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,var(--teal) 0%,transparent 70%);opacity:.5}
.shop-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center;position:relative}
.shop-text .section-eyebrow{color:var(--amber)}
.shop-text h2{font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.2;color:var(--white) !important;margin-bottom:20px}
.shop-text p{font-size:17px;opacity:.85;margin-bottom:32px;max-width:480px}
.shop-features{list-style:none;margin-bottom:36px;padding:0}
.shop-features li{padding:10px 0;display:flex;align-items:center;gap:12px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08)}
.shop-features li:last-child{border:none}
.shop-features .tick{width:22px;height:22px;border-radius:50%;background:var(--amber);color:var(--teal-deep);display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.product-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.product{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:24px;transition:all .3s}
.product:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.product:nth-child(even){margin-top:30px}
.product-img{aspect-ratio:1/1;background:linear-gradient(135deg,rgba(207,227,220,.1),rgba(232,162,74,.05));border-radius:14px;display:grid;place-items:center;font-size:48px;margin-bottom:18px}
.product h4{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--white)}
.product .cat{font-size:12px;opacity:.6;margin-bottom:12px}
.product .price{font-size:22px;font-weight:800;color:var(--amber)}
.product .price small{font-size:13px;opacity:.7;color:var(--white);font-weight:500}

/* TESTIMONIALS */
.testimonials{padding:100px 0}
.testi-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.testi-main{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px;position:relative}
.testi-main::before{content:'"';position:absolute;top:20px;right:32px;font-size:140px;font-weight:800;color:var(--teal-light);line-height:1}
.testi-main .quote{font-size:24px;font-weight:600;line-height:1.6;color:var(--ink);position:relative;z-index:1;margin-bottom:36px}
.testi-author{display:flex;align-items:center;gap:16px}
.testi-author .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:var(--amber);display:grid;place-items:center;font-weight:800;font-size:20px}
.testi-author strong{display:block;font-size:16px;margin-bottom:2px;font-weight:700}
.testi-author span{font-size:13px;color:var(--ink-soft)}
.testi-side{display:flex;flex-direction:column;gap:18px}
.testi-mini{background:var(--bg-alt);border-radius:var(--radius);padding:24px;flex:1}
.testi-mini .stars{color:var(--amber);letter-spacing:2px;margin-bottom:10px;font-size:14px}
.testi-mini p{font-size:14px;margin-bottom:16px;color:var(--ink);line-height:1.7}
.testi-mini .mini-author{font-size:13px;color:var(--ink-soft);font-weight:600}

/* MEMBERSHIP */
.membership-cta{padding:40px 0 100px}
.mem-card{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%);border-radius:var(--radius-lg);padding:64px;color:var(--white);position:relative;overflow:hidden;display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center}
.mem-card::before{content:'';position:absolute;top:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--amber) 0%,transparent 70%);opacity:.2}
.mem-text .section-eyebrow{color:var(--amber)}
.mem-text h2{font-size:clamp(28px,3.5vw,38px);font-weight:800;line-height:1.2;margin-bottom:16px;color:var(--white) !important}
.mem-text p{font-size:16px;opacity:.85;margin-bottom:28px;max-width:440px}
.mem-actions{display:flex;gap:12px;flex-wrap:wrap}
.mem-types{display:flex;flex-direction:column;gap:12px;position:relative}
.mem-type{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(10px)}
.mem-type strong{font-size:15px;font-weight:700}
.mem-type .tag{font-size:12px;padding:4px 10px;background:var(--amber);color:var(--teal-deep);border-radius:100px;font-weight:800}

/* FOOTER */
.site-footer{background:var(--ink);color:#B8C1BF;padding:80px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:50px;margin-bottom:60px}
.site-footer .brand{color:var(--amber) !important;margin-bottom:18px}
.site-footer .brand-mark{background:var(--amber);color:var(--teal-deep)}
.footer-about{font-size:14px;line-height:1.75;max-width:320px;color:#B8C1BF}
.site-footer h5{color:var(--white) !important;font-size:16px;font-weight:700;margin-bottom:22px}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin:0}
.site-footer ul a{font-size:14px;color:#B8C1BF}
.site-footer ul a:hover{color:var(--amber)}
.newsletter{display:flex;gap:8px;margin-top:16px}
.newsletter input{flex:1;padding:12px 16px;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:10px;color:var(--white);font-family:inherit;font-size:14px;outline:none}
.newsletter input::placeholder{color:#6B7775}
.newsletter input:focus{border-color:var(--amber) !important}
.newsletter button{padding:12px 20px;background:var(--amber);color:var(--teal-deep);border-radius:10px;font-weight:800;font-size:14px;border:none;cursor:pointer}
.footer-bottom{padding-top:30px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-size:13px;color:#6B7775;flex-wrap:wrap;gap:16px}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.05);display:grid;place-items:center;color:#B8C1BF;font-size:13px;font-weight:700;transition:all .2s}
.socials a:hover{background:var(--amber);color:var(--teal-deep)}

/* PAGES */
.page-header{padding:80px 0 40px;text-align:center;background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.page-header h1{font-size:clamp(32px,4vw,48px);margin-bottom:12px;font-weight:800}
.page-header p{font-size:17px;color:var(--ink-soft);max-width:600px;margin:0 auto}
.page-content{padding:60px 0 100px}
.page-content .card{background:var(--white) !important;border:1px solid var(--line) !important;border-radius:var(--radius-lg) !important;box-shadow:none !important;padding:30px !important;transition:all .3s}
.page-content .card:hover{box-shadow:var(--shadow-sm) !important;transform:translateY(-3px)}

/* FORMS */
input,textarea,select{font-family:var(--font) !important;border-radius:var(--radius) !important;padding:12px 16px !important;border:1.5px solid var(--line) !important;background:var(--white) !important;font-size:15px !important;transition:border-color .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal) !important;box-shadow:0 0 0 4px rgba(15,76,74,.08) !important}
.form-control,.form-select{border:1.5px solid var(--line) !important;border-radius:var(--radius) !important;padding:12px 16px !important}
label,.form-label{font-weight:600;color:var(--ink);margin-bottom:6px;font-size:14px;display:block}

/* TABLES */
.table{border-radius:var(--radius-lg) !important;overflow:hidden;background:var(--white)}
.table thead{background:var(--bg-alt)}
.table th{font-weight:700;color:var(--ink);border:none !important;padding:14px 16px !important;text-align:right}
.table td{padding:14px 16px !important;vertical-align:middle;border-color:var(--line) !important;text-align:right}

/* BOOTSTRAP OVERRIDES */
.bg-light{background:var(--bg-alt) !important}
.bg-dark{background:var(--teal-deep) !important}
.text-primary{color:var(--teal) !important}
.text-danger{color:var(--danger) !important}
.shadow-sm{box-shadow:var(--shadow-sm) !important}
.shadow{box-shadow:var(--shadow) !important}
.rounded{border-radius:var(--radius) !important}
.navbar{background:var(--white) !important;border-bottom:1px solid var(--line)}
.navbar-brand{color:var(--teal) !important;font-weight:800}
.alert{border-radius:var(--radius);border:none;padding:16px 20px;font-weight:600}
.alert-success{background:var(--teal-light);color:var(--teal-deep)}
.alert-danger{background:#FEE7E4;color:var(--danger)}

/* ADMIN */
.admin-wrap{display:flex;min-height:100vh;background:var(--bg)}
.admin-sidebar{width:260px;background:var(--teal-deep);color:#E7F2EF;padding:30px 20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-sidebar .brand{color:var(--amber) !important;font-size:20px;margin-bottom:30px}
.admin-sidebar .brand-mark{background:var(--amber);color:var(--teal-deep)}
.admin-nav{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.admin-nav a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#C3D4D0;border-radius:10px;font-size:14px;font-weight:600;transition:all .2s}
.admin-nav a:hover{background:rgba(255,255,255,.05);color:white}
.admin-nav a.active{background:var(--teal);color:white}
.admin-nav a.logout{color:var(--danger);margin-top:30px}
.admin-content{flex:1;padding:40px;min-width:0}
.admin-header-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--line);gap:20px;flex-wrap:wrap}
.admin-header-bar h1{font-size:26px;font-weight:800;margin:0}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
.stat-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;transition:all .2s;position:relative;overflow:hidden}
.stat-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.stat-card::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,var(--teal-light) 0%,transparent 70%);opacity:.4}
.stat-card .stat-label{font-size:13px;color:var(--ink-soft);font-weight:600;margin-bottom:10px;position:relative}
.stat-card .stat-num{font-size:32px;font-weight:800;color:var(--teal);line-height:1;position:relative}
.stat-card .stat-icon{position:absolute;top:16px;left:16px;font-size:22px;opacity:.5}

.data-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px}
.data-card h3{font-size:20px;font-weight:700;margin-bottom:20px}

.badge-status{display:inline-block;padding:4px 10px;border-radius:100px;font-size:12px;font-weight:700}
.badge-new{background:var(--teal-light);color:var(--teal-deep)}
.badge-active{background:#D4EEDD;color:#0A5F2E}
.badge-pending{background:#FFE9C7;color:var(--amber-dark)}
.badge-done{background:var(--bg-alt);color:var(--ink-soft)}
.badge-blocked{background:#FEE7E4;color:var(--danger)}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:60px}
  .hero-visual{height:420px}
  .gateway-grid{grid-template-columns:repeat(2,1fr)}
  .doctor-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:1fr;gap:50px}
  .testi-grid{grid-template-columns:1fr}
  .mem-card{grid-template-columns:1fr;padding:40px}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .main-nav{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: var(--white);
    padding: 0;
    z-index: 1001;
    text-align: right;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -20px 0 60px rgba(15, 76, 74, 0.2);
    overflow-y: auto;
  }
  .main-nav li a i { display: flex; } /* Show icons in mobile menu */
  .main-nav.open{
    right: 0;
  }
  .main-nav::-webkit-scrollbar {
    width: 4px;
  }
  .main-nav::-webkit-scrollbar-thumb {
    background: var(--teal-light);
    border-radius: 10px;
  }
  .menu-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(15, 76, 74, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .menu-backdrop.show{
    display: block;
    opacity: 1;
  }
  .mobile-menu-header{
    padding: 35px 24px;
    background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 100%);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 0 30px;
  }
  .mobile-menu-header .fw-bold{
    font-size: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .close-menu{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 14px;
  }
  .main-nav li a{
    display: flex;
    align-items: center;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-soft);
    border-bottom: 1px solid rgba(15, 76, 74, 0.05);
    transition: all 0.3s;
  }
  .main-nav li a i{
    width: 30px;
    font-size: 18px;
    color: var(--teal);
    opacity: 0.7;
    transition: all 0.3s;
  }
  .main-nav li a:hover, .main-nav li a.active{
    background: var(--teal-light);
    color: var(--teal);
    padding-right: 32px;
  }
  .main-nav li a:hover i, .main-nav li a.active i{
    opacity: 1;
    transform: scale(1.1);
  }
  .mobile-cta-section{
    padding: 24px;
  }
  .menu-footer{
    padding: 0 24px;
    text-align: center;
  }
  .social-icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg-alt);
    color: var(--teal);
    display: grid;
    place-items: center;
    font-size: 16px;
    transition: all 0.3s;
  }
  .social-icon:hover{
    background: var(--teal);
    color: var(--white);
    transform: translateY(-3px);
  }
  .menu-toggle{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--teal-light);
    color: var(--teal);
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
  }
  .desktop-only{display: none !important}
  .mobile-only{display: block !important}
  .d-md-none{display: grid !important}
  .d-md-flex{display: none !important}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .container{padding:0 24px !important}
  
  /* Global Centering */
  section, .section, .hero, .gateways, .how, .doctors-section, .shop-section, .testimonials, .membership-cta, .page-header, .page-content {
    text-align: center !important;
  }
  
  .section-head, .doctor-head, .head-text, .hero-sub, .shop-text p {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .nav-inner {
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .nav-cta {
    justify-content: flex-end !important;
    width: auto !important;
  }

  .brand {
    width: auto !important;
    flex-shrink: 1 !important;
  }

  .trust-bar {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    border: none !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 30px auto 0 !important;
  }

  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-stats, .stat-item {
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .hero-stats-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Grid Adjustments */
  .hero-grid, .gateway-grid, .doctor-grid, .shop-grid, .testi-grid, .mem-card, .footer-grid, .how-grid, .product-stack, .stat-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .hero-visual{height:300px; margin-top:40px}
  .hero-card-float-1{left:10px; width:200px}
  .hero-card-float-2{right:10px; width:220px}
  
  .product:nth-child(even){margin-top:0}
  
  .gateway-cta {
    justify-content: center !important;
    width: 100% !important;
  }

  .btn{width:100% !important; margin-bottom:12px}
  .hero-actions .btn{margin-bottom:0}
  
  .footer-about{margin:0 auto 20px}
  .site-footer ul{align-items:center}
  
  /* Form Fixes */
  .page-content .card{padding:20px !important}
  .form-control, .form-select, select, input, textarea {
    text-align: center;
  }

  /* Specific Sections */
  .trust-bar{grid-template-columns:1fr !important; gap:20px; border:none}
  .how-grid::before{display:none}
  
  .announce{font-size:11px; padding:8px 15px}
  .page-header{padding:60px 20px 30px}
}

/* Ensure Admin panel remains functional */
.admin-wrap .section, .admin-wrap section {
  text-align: right !important;
}

@media(max-width:768px){
  .admin-sidebar{width:100%;height:auto;position:static}
  .admin-wrap{flex-direction:column}
  .admin-content{padding:20px}
}

/* Laptop/Desktop Reset */
@media(min-width:769px){
  .main-nav{
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .main-nav li a i { display: none !important; }
  .menu-backdrop, .mobile-menu-header, .mobile-cta-section, .menu-footer {
    display: none !important;
  }
}

/* Hero Slider */
.hero-slider {
  position: relative;
  overflow: hidden;
}

.hero-slide {
  min-height: 88vh;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, .65), rgba(0, 0, 0, .25));
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  color: #fff;
  padding: 80px 0;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  margin-bottom: 20px;
}

.hero-content h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 18px;
}

.hero-content p {
  font-size: 20px;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 28px;
  line-height: 1.8;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  width: 48px;
  height: 48px;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: .5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

@media(max-width:768px) {

  .hero-slide {
    min-height: 72vh;
  }

  .hero-content {
    text-align: center;
    max-width: 100%;
  }

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

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

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

}

/* خلي كل محتوى الـ HERO أبيض */

.hero-content,
.hero-content h1,
.hero-content p,
.hero-content span,
.hero-content a,
.hero-badge{
    color:#ffffff !important;
}

/* وصف أوضح */
.hero-content p{
    color:rgba(255,255,255,0.92) !important;
}

.btn-primary,
.btn.btn-primary{
  background:#16337A !important;
  color:#fff !important;
}

.btn-primary:hover{
  background:#0D235A !important;
}


/* ===== Membership Section بالألوان الجديدة ===== */

.membership-cta{
  padding:60px 0 100px;
  background:#F8F9FC;
}

.mem-card{
  background:linear-gradient(135deg,#16337A 0%, #0D235A 100%) !important;
  border-radius:24px;
  padding:60px;
  color:#fff;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:50px;
  align-items:center;
  box-shadow:0 24px 60px rgba(22,51,122,.18);
}

.mem-card::before{
  content:'';
  position:absolute;
  top:-120px;
  left:-120px;
  width:380px;
  height:380px;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
}

/* النصوص */
.mem-text .section-eyebrow{
  color:#DCE6FF !important;
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:14px;
}

.mem-text h2{
  color:#fff !important;
  font-size:42px;
  font-weight:800;
  line-height:1.25;
  margin-bottom:18px;
}

.mem-text p{
  color:rgba(255,255,255,.88);
  font-size:18px;
  line-height:1.9;
  margin-bottom:28px;
  max-width:520px;
}

/* الأزرار */
.mem-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.mem-actions .btn-amber{
  background:#ffffff !important;
  color:#16337A !important;
  font-weight:800;
}

.mem-actions .btn-amber:hover{
  background:#E8EEFF !important;
}

.mem-actions .btn-ghost{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25) !important;
}

.mem-actions .btn-ghost:hover{
  background:rgba(255,255,255,.08) !important;
}

/* الباقات */
.mem-types{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mem-type{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  backdrop-filter:blur(10px);
}

.mem-type strong{
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.mem-type .tag{
  background:#ffffff;
  color:#16337A;
  padding:7px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
}

/* موبايل */
@media(max-width:768px){

.mem-card{
  grid-template-columns:1fr;
  padding:35px 24px;
  gap:30px;
  text-align:center;
}

.mem-text h2{
  font-size:30px;
}

.mem-text p{
  font-size:16px;
  margin:0 auto 24px;
}

.mem-actions{
  flex-direction:column;
}

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

.mem-type{
  flex-direction:column;
  gap:10px;
}

}


/* ===== فرص المؤسسات المطور ===== */

.inst-slider{
  padding:90px 0;
  background:linear-gradient(135deg,#16337A 0%, #0D235A 100%);
  overflow:hidden;
  position:relative;
}

.inst-slider::before{
  content:'';
  position:absolute;
  top:-160px;
  left:-160px;
  width:420px;
  height:420px;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}

.inst-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:38px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

.inst-badge{
  display:inline-block;
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  margin-bottom:14px;
}

.inst-head h2{
  color:#fff;
  font-size:38px;
  font-weight:800;
  margin-bottom:10px;
}

.inst-head p{
  color:rgba(255,255,255,.82);
  max-width:520px;
  font-size:17px;
  line-height:1.8;
}

.btn-light-blue{
  background:#fff;
  color:#16337A !important;
  padding:12px 24px;
  border-radius:14px;
  font-weight:800;
}

.btn-light-blue:hover{
  background:#E8EEFF;
}

/* Slider */

.inst-wrapper{
  overflow:hidden;
}

.inst-track{
  display:flex;
  gap:22px;
  width:max-content;
  animation:scrollInst 38s linear infinite;
}

.inst-wrapper:hover .inst-track{
  animation-play-state:paused;
}

@keyframes scrollInst{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Cards */

.inst-card{
  min-width:320px;
  max-width:320px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:26px;
  backdrop-filter:blur(14px);
  transition:.3s;
}

.inst-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.12);
}

.job-type{
  display:inline-block;
  background:#fff;
  color:#16337A;
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  margin-bottom:18px;
}

.inst-card h4{
  color:#fff;
  font-size:22px;
  font-weight:800;
  margin-bottom:18px;
}

.inst-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  margin-bottom:20px;
}

.mini-link{
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.mini-link:hover{
  opacity:1;
}

/* Mobile */

@media(max-width:768px){

.inst-slider{
  padding:65px 0;
}

.inst-head{
  justify-content:center;
  text-align:center;
}

.inst-head h2{
  font-size:28px;
}

.inst-head p{
  font-size:15px;
  margin:auto;
}

.inst-card{
  min-width:280px;
  max-width:280px;
}

}

/* اجعل السلايدر يلف بلا نهاية ويتكرر بدون اختفاء */

.inst-wrapper{
  overflow:hidden;
  position:relative;
  width:100%;
}

.inst-track{
  display:flex;
  gap:22px;
  width:max-content;
  flex-wrap:nowrap;

  /* السرعة */
  animation:scrollLoop 45s linear infinite;
}

/* يقف عند المرور */
.inst-wrapper:hover .inst-track{
  animation-play-state:paused;
}

/* الحركة الصحيحة */
@keyframes scrollLoop{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(calc(-50% - 11px));
  }
}

/* اجعل gateway-icon في المنتصف على الهاتف */

@media (max-width:768px){

.gateway-icon{
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin:0 auto 15px auto !important;
    text-align:center;
}

}

/* ===== Hero Slider Mobile Fix ===== */

@media (max-width:768px){

/* ارتفاع مناسب */
.hero-slide{
    min-height:72vh !important;
    background-position:center center !important;
    background-size:cover !important;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 0;
}

/* تغميق أوضح */
.hero-overlay{
    background:linear-gradient(
        to top,
        rgba(0,0,0,.72),
        rgba(0,0,0,.35)
    ) !important;
}

/* المحتوى */
.hero-content{
    text-align:center !important;
    max-width:100% !important;
    padding:0 18px !important;
    margin:auto;
}

/* البادج */
.hero-badge{
    font-size:12px !important;
    padding:7px 14px !important;
    margin-bottom:16px !important;
}

/* العنوان */
.hero-content h1{
    font-size:28px !important;
    line-height:1.45 !important;
    font-weight:800 !important;
    margin-bottom:14px !important;
}

/* الوصف */
.hero-content p{
    font-size:15px !important;
    line-height:1.8 !important;
    margin-bottom:22px !important;
    color:rgba(255,255,255,.92) !important;
}

/* الزر */
.hero-content .btn{
    width:100%;
    max-width:260px;
    border-radius:14px;
    padding:13px 20px !important;
    font-size:15px;
    margin:auto;
}

/* الأسهم اخفاؤها */
.swiper-button-next,
.swiper-button-prev{
    display:none !important;
}

/* النقاط */
.swiper-pagination{
    bottom:18px !important;
}

.swiper-pagination-bullet{
    width:9px;
    height:9px;
    opacity:.55;
    background:#fff !important;
}

.swiper-pagination-bullet-active{
    width:24px;
    border-radius:20px;
    opacity:1;
}

/* منع تلاصق */
.hero-swiper{
    border-radius:0 0 22px 22px;
    overflow:hidden;
}

}

/* اظهار صورة السلايدر كاملة على الهاتف */

@media (max-width:768px){

.hero-slide{
    min-height:72vh !important;

    /* أهم جزء */
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;

    background-color:#16337A; /* لون الخلفية الفارغة */
    
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px 0;
}

/* الأوفرلاي أخف */
.hero-overlay{
    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.20)
    ) !important;
}

}

/* =====================================
   FINAL BRAND COLORS OVERRIDE
   Physio Speaker Official Blue Theme
===================================== */

:root{
  --teal:#16337A !important;
  --teal-deep:#0D235A !important;
  --teal-light:#E8EEFF !important;

  --amber:#1E40C2 !important;
  --amber-dark:#16337A !important;

  --bg:#F8F9FC !important;
  --bg-alt:#EEF2FF !important;
  --line:#D9E1F2 !important;
}

/* أي عنصر كان أخضر */
.bg-success,
.btn-success,
.text-success{
  background:#16337A !important;
  color:#fff !important;
}

/* أي أيقونة / أرقام / روابط */
.text-primary,
.brand,
.gateway-cta,
.doc-spec,
.stat-num{
  color:#16337A !important;
}

/* الأزرار */
.btn-primary,
.btn.btn-primary{
  background:#16337A !important;
  color:#fff !important;
}

.btn-primary:hover{
  background:#0D235A !important;
}

.btn-amber{
  background:#1E40C2 !important;
  color:#fff !important;
}

.btn-amber:hover{
  background:#16337A !important;
}

/* الشريط العلوي */
.announce{
  background:#0D235A !important;
  color:#fff !important;
}

/* Sidebar الأدمن */
.admin-sidebar{
  background:#0D235A !important;
}

/* البطاقات */
.gateway:nth-child(1)::before,
.gateway:nth-child(2)::before,
.gateway:nth-child(3)::before,
.gateway:nth-child(4)::before{
  background:#16337A !important;
}

/* النجوم أو الأسعار */
.price,
.stars,
.rating{
  color:#1E40C2 !important;
}

/* إزالة أي أخضر قديم من الظلال */
*{
  box-shadow-color:#16337A !important;
}

/* =========================
   Banner Image Only
========================= */
/* الحل النهائي: صورة البانر على الهاتف تكون متناسقة */

.inner-banner-only{
  width:100%;
  height:420px;
  background-image:url('../uploads/doctors-banner.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

/* الهاتف */
@media (max-width:768px){

.inner-banner-only{

    /* لا تستخدم vh */
    height:300px !important;

    /* أهم نقطة */
    background-size:100% auto !important;

    /* اظهار الجزء المهم */
    background-position:center top !important;

    background-repeat:no-repeat !important;
    background-color:#16337A;
  }

}

/* الموبايلات الصغيرة */
@media (max-width:480px){

.inner-banner-only{
    height:260px !important;
    background-size:100% auto !important;
    background-position:center top !important;
}

}

/* =========================
   Contact Banner Only
========================= */

.contact-banner-only{
  width:100%;
  height:420px;

  background-image:url('../uploads/contact-banner.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

/* التابلت */
@media(max-width:992px){

.contact-banner-only{
  height:340px;
  background-position:center center;
}

}

/* الهاتف */
@media(max-width:768px){

.contact-banner-only{

  /* أفضل تناسق للموبايل */
  height:300px !important;

  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;

  background-color:#16337A;
}

}

/* أجهزة صغيرة */
@media(max-width:480px){

.contact-banner-only{
  height:250px !important;
  background-size:100% auto !important;
  background-position:center top !important;
}

}

/* =========================
   Shop Banner Only
========================= */

.shop-banner-only{
  width:100%;
  height:420px;

  background-image:url('../uploads/shop-banner.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

/* تابلت */
@media(max-width:992px){

.shop-banner-only{
  height:340px;
}

}

/* الهاتف */
@media(max-width:768px){

.shop-banner-only{
  height:300px !important;

  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;

  background-color:#16337A;
}

}

/* أجهزة صغيرة */
@media(max-width:480px){

.shop-banner-only{
  height:250px !important;
  background-size:100% auto !important;
  background-position:center top !important;
}

}

/* =========================
   Institution Banner Only
========================= */

.institution-banner-only{
  width:100%;
  height:420px;

  background-image:url('../uploads/institution-banner.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

/* تابلت */
@media(max-width:992px){

.institution-banner-only{
  height:340px;
}

}

/* الهاتف */
@media(max-width:768px){

.institution-banner-only{
  height:300px !important;

  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;

  background-color:#16337A;
}

}

/* أجهزة صغيرة */
@media(max-width:480px){

.institution-banner-only{
  height:250px !important;
  background-size:100% auto !important;
  background-position:center top !important;
}

}

/* =========================
   Membership Banner Only
========================= */

.membership-banner-only{
  width:100%;
  height:800px;

  background-image:url('../uploads/membership-banner.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

/* تابلت */
@media(max-width:992px){

.membership-banner-only{
  height:340px;
}

}

/* الهاتف */
@media(max-width:768px){

.membership-banner-only{
  height:300px !important;

  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;

  background-color:#16337A;
}

}

/* أجهزة صغيرة */
@media(max-width:480px){

.membership-banner-only{
  height:250px !important;
  background-size:100% auto !important;
  background-position:center top !important;
}

}