:root{
  --accent:#ff6a00;
  --text:#111;
  --muted:#555;
  --bluebar:#5d5414;
  --bluebar2:#534716;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:#fff;
}
a{text-decoration:none;color:inherit;}
.container{width:min(1200px,92%);margin:0 auto;}
.main{min-height:65vh;}

/* HERO */
.hero{
  position: relative;
  height: 520px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.hero-content{position:relative;height:100%;display:grid;place-items:center;}
.hero-logo{width:240px;height:240px;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(0,0,0,.65));}

/* TITLES */
.section-title{
  font-family:"Playfair Display", serif;
  font-size:clamp(30px,3.2vw,48px);
  font-weight:900;
  letter-spacing:-.8px;
  margin:34px 0 18px;
  color:#1a1a1a;
}

/* PROGRAMS (SMALL HORIZONTAL) */
.programs-home{padding:22px 0 10px;}
.programs-rail{
  display:flex;
  gap:18px;
  align-items:flex-start;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:8px 4px 14px;
}
.programs-rail::-webkit-scrollbar{height:7px;}
.programs-rail::-webkit-scrollbar-thumb{background:#d2d2d2;border-radius:999px;}

.program-card{
  width:260px;
  flex:0 0 auto;
  text-align:center;
  transform:translateY(0);
  transition:transform .22s ease;
}
.program-card:hover{transform:translateY(-4px);}

.program-img{
  width:260px;
  height:165px;
  border-radius:14px;
  overflow:hidden;
  background:#eaeaea;
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  position:relative;
}
.program-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.20), rgba(0,0,0,0));
  opacity:0;
  transition:opacity .2s ease;
}
.program-card:hover .program-img::after{opacity:1;}
.program-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.program-card:hover .program-img img{transform:scale(1.06);}

.program-name{
  margin-top:14px;
  font-family:"Playfair Display", serif;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.35px;
  color:#2b1c1c;
  line-height:1.15;
}

/* GLASS */
.glass{
  background:rgba(255,255,255,0.60);
  border:1px solid rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,0.10);
}

/* COMPARISON TABLE */
.compare{padding:14px 0 60px;}

.compare-headbar{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr;
  background:var(--bluebar);
  border-radius:14px;
  overflow:hidden;
  border:1px solid #d09e15;
  box-shadow:0 16px 34px rgba(0,0,0,.08);
}
.compare-headbar .ch{
  padding:18px 16px;
  font-weight:900;
  color:#111;
  display:flex;
  align-items:center;
  gap:10px;
  border-right:1px solid rgba(0,0,0,0.06);
}
.compare-headbar .ch:last-child{border-right:none;}
.compare-headbar .ch i{opacity:.9;font-size:18px;}


/* rows */
.compare-body{
  margin-top:14px;
  padding:10px;
}
.cr{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr;
  gap:12px;
  padding:10px;
  border-radius:14px;
}
.cr:not(:last-child){
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.cf{
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,0.55);
}
.cf i{width:20px;text-align:center;opacity:.9;}
.cc{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,0.45);
  line-height:1.55;
  font-weight:500;
  color:#1f1f1f;
}
.cr:hover .cc,.cr:hover .cf{
  background:rgba(238,245,249,0.80);
  transition:background .2s ease;
}

/* BENEFITS */
.content{padding:22px 0 60px;}
.page-h1{
  font-family:"Playfair Display", serif;
  font-size:clamp(26px,3vw,44px);
  margin:0 0 18px;
  letter-spacing:-.6px;
  font-weight:900;
}
.checklist{list-style:none;padding:0;margin:0;}
.checklist li{
  font-size:18px;
  margin:10px 0;
  padding-left:30px;
  position:relative;
  color:#222;
  line-height:1.55;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;top:0;
  color:#111;
  font-weight:900;
}

/* Responsive comparison stacking */
@media (max-width: 980px){
  .compare-headbar{display:none;}
  .compare-body{padding:0;background:transparent;border:none;box-shadow:none;}
  .cr{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:14px;
    padding:14px;
    background:rgba(255,255,255,0.60);
    border:1px solid rgba(255,255,255,0.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:16px;
    box-shadow:0 14px 30px rgba(0,0,0,0.10);
  }
  .cr:not(:last-child){border-bottom:none;}
  .cc::before{
    display:block;
    font-weight:900;
    color:#111;
    margin-bottom:6px;
  }
  .cr .cc:nth-child(2)::before{content:"MQA–Accredited Programs";}
  .cr .cc:nth-child(3)::before{content:"Non–MQA Industrial Programs";}
  .cr .cc:nth-child(4)::before{content:"RPL & RPEL Pathway";}
}

@media (max-width: 820px){
  .program-card{width:240px;}
  .program-img{width:240px;height:150px;}
  .program-name{font-size:20px;}
}



/* =========================================================
   HEADER (match screenshot)
   ========================================================= */
/* =========================================
   STICKY HIDE / SHOW HEADER
========================================= */

.eaa-header{
  background:#fff;
  border-bottom:1px solid #eaeaea;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  transition:transform .4s ease, box-shadow .3s ease;
}
body{
  padding-top:200px; /* adjust based on your header height */
}
/* Hidden state (scrolling down) */
.eaa-header.hide{
  transform: translateY(-100%);
}

/* Add shadow when scrolling */
.eaa-header.scrolled{
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
}
.eaa-header-inner{
  width:min(1400px,95%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1px;
  padding:1px 0;
}
.eaa-brand{
  display:flex;
  align-items:center;
  gap:120px;
  position:relative;
}
.eaa-logo{
  width:180px;
  height:180px;
  border-radius:999px;
  object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.18);

  transform: scale(1.7);
  transform-origin: center left;
  position:relative;
  z-index:1;
}
.eaa-brand-title{
  font-family:Inter, sans-serif;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.3px;
  line-height:1.1;
}
.eaa-brand-subtitle{
  font-size:16px;
  color:#555;
  margin-top:3px;
}

/* Navigation */
.eaa-nav{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}
.eaa-nav a{
  font-family:Inter, sans-serif;
  font-weight:800;
  font-size:16px;
  color:#222;
  position:relative;
  padding:10px 0;
}
.eaa-nav a:hover{ color:#ff6a00; }
.eaa-nav a.active{ color:#ff6a00; }
.eaa-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:0;
  height:3px;
  background:#ff6a00;
  border-radius:999px;
  transition:width .25s ease;
}
.eaa-nav a:hover::after,
.eaa-nav a.active::after{
  width:100%;
}

/* Mobile menu toggle (hamburger) */
.eaa-menu-toggle{
  display:none;
  width:36px;
  height:28px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
}
.eaa-menu-toggle span{
  display:block;
  height:3px;
  width:100%;
  border-radius:999px;
  background:rgba(245,242,234,0.9);
  transition:transform .25s ease, opacity .25s ease, width .25s ease, background .25s ease;
}
.eaa-menu-toggle span:nth-child(2){
  width:75%;
}
.eaa-menu-toggle span:nth-child(3){
  width:55%;
}

/* When menu is open, animate into "X" */
.eaa-header.nav-open .eaa-menu-toggle span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
  width:100%;
}
.eaa-header.nav-open .eaa-menu-toggle span:nth-child(2){
  opacity:0;
}
.eaa-header.nav-open .eaa-menu-toggle span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
  width:100%;
}

/* =========================================================
   FOOTER (match screenshot)
   ========================================================= */
.eaa-footer{
  background:#0b0b0b;
  color:#fff;
  padding:50px 0 40px;
}
.eaa-footer-inner{
  width:min(1200px,92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.2fr 0.7fr;
  gap:40px;
  align-items:start;
}

/* Left */
.eaa-footer-title{
  color:#ffcc33;
  font-size:22px;
  font-weight:900;
  margin:0 0 6px;
}
.eaa-footer-id{
  color:#ffcc33;
  font-weight:100;
  margin-bottom:18px;
}
.eaa-footer-links ul{
  list-style:none;
  padding:0;
  margin:0;
}
.eaa-footer-links li{ margin:10px 0; }
.eaa-footer-links a{
  color:#ffcc33;
  font-size:18px;
  display:inline-flex;
  gap:10px;
  align-items:center;
}
.eaa-footer-links a span{ font-size:22px; }
.eaa-footer-links a:hover{ text-decoration:underline; }

/* Middle info */
.eaa-footer-info .row{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:12px;
  margin:12px 0;
  font-size:18px;
  color:#eaeaea;
  line-height:1.6;
}
.eaa-footer-info i{
  margin-top:3px;
  color:#d9d9d9;
}
.eaa-footer-info a{ color:#fff; }
.eaa-footer-info a:hover{ text-decoration:underline; }





/* ===== PREMIUM FLOATING WHATSAPP ===== */

.eaa-wa-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  z-index: 999;

  /* Animations */
  animation: eaaFloat 3s ease-in-out infinite,
             eaaPulse 2.8s infinite;

  transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover effect */
.eaa-wa-float:hover{
  transform: scale(1.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* Floating movement */
@keyframes eaaFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Soft pulse ring */
@keyframes eaaPulse{
  0% {
    box-shadow: 0 12px 28px rgba(0,0,0,.35),
                0 0 0 0 rgba(37,211,102,.5);
  }
  70% {
    box-shadow: 0 12px 28px rgba(0,0,0,.35),
                0 0 0 20px rgba(37,211,102,0);
  }
  100% {
    box-shadow: 0 12px 28px rgba(0,0,0,.35),
                0 0 0 0 rgba(37,211,102,0);
  }
}

/* Responsive */
@media (max-width: 980px){
  .eaa-header-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .eaa-brand{
    gap:12px;
  }
  .eaa-logo{
    width:80px;
    height:80px;
    transform:scale(1);
  }
  .eaa-brand-title{
    font-size:18px;
  }
  .eaa-brand-subtitle{
    font-size:12px;
  }
  .eaa-menu-toggle{
    display:flex;
  }
  /* Hide desktop nav and turn into full-screen overlay */
  .eaa-nav{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.96);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:24px;
    padding:0 20px;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
    z-index:900;
  }
  .eaa-nav a{
    font-size:20px;
    padding:8px 0;
    color:#f9f4e5 !important;
  }
  .eaa-nav .portal-nav{
    margin-top:12px;
  }
  .eaa-header.nav-open .eaa-nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .eaa-footer-inner{
    grid-template-columns:1fr;
  }
  .eaa-footer-social{
    justify-content:flex-start;
  }
}


/* =========================
   ABOUT US PAGE (premium + motion)
   ========================= */
.about-hero{
  position: relative;
  padding: 56px 0;
  background: #101010;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
}
.about-hero-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.60);
}
.about-hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}
.about-title{
  font-family: "Inter", sans-serif;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: -0.6px;
  margin: 0 0 10px;
  color: #f0a70a;
}
.about-subtitle{
  margin: 0 0 18px;
  color: rgba(254, 254, 252, 0.9);
  font-size: 18px;
  line-height: 1.65;
  max-width: 720px;
}
.about-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.badge i{ color: #ffcc33; }

.glass-card{
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.card-title{
  color:#ffcc33;
  font-weight: 900;
  margin: 0 0 8px;
  font-size: 18px;
}
.card-text{
  color: rgba(255,255,255,.90);
  margin: 0 0 14px;
  line-height: 1.65;
}
.aid-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.aid-item{
  display:flex;
  align-items:center;
  gap: 10px;
  color: #fff;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
}
.aid-item i{ color:#ffcc33; }

/* Section typography */
.about-section{ padding: 48px 0 64px; }
.section-h2{
  font-family: "Inter", sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  letter-spacing: -0.4px;
  margin: 0 0 10px;
}
.section-p{
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.75;
  max-width: 900px;
}
.section-head{ margin-bottom: 28px; }

/* Motion (simple, professional) */
.motion{
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp .7s ease forwards;
}
.motion:nth-of-type(2){ animation-delay:.06s; }
.motion:nth-of-type(3){ animation-delay:.12s; }
.motion:nth-of-type(4){ animation-delay:.18s; }
.motion:nth-of-type(5){ animation-delay:.24s; }

@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0); }
}

/* Advisory Panel */
.panel-wrap{ margin-top: 26px; }
.panel-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.person-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.person-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
}
.person-photo{
  position: relative;
  height: 280px;
  background: #f2f2f2;
  overflow: hidden;
}
.person-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.photo-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#666;
  font-weight: 800;
}
.person-body{
  padding: 22px 20px;
  text-align: center;   /* CENTER EVERYTHING */
}

.person-name{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

.person-role{
  color:#555;
  font-weight: 700;
  font-size: 15px;
}

/* Why Us grid */
.why-wrap{ margin-top: 34px; }
.why-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.why-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.10);
}
.why-icon{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(255,106,0,.10);
  border: 1px solid rgba(255,106,0,.18);
  color: #ff6a00;
  font-size: 20px;
  margin-bottom: 10px;
}
.why-h{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}
.why-p{
  color:#444;
  line-height: 1.65;
  font-size: 15.5px;
}

/* Vision / Mission */
.vm-wrap{
  margin-top: 34px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
}
.vm-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.vm-card.mission{
  background: #0b0b0b;
  color: #fff;
  border-color: #111;
}
.vm-title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.vm-card.mission .vm-title{ color:#ffcc33; }
.vm-text{
  margin: 0;
  line-height: 1.75;
  color:#333;
}
.vm-card.mission .vm-text{ color:#fff; }

/* Core values */
.core-wrap{ margin-top: 34px; }
.core-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.core-item{
  background:#fffffc;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
  line-height: 1.6;
  color:#333;
}
.core-key{
  font-weight: 900;
  color:#111;
}

/* Responsive */
@media (max-width: 980px){
  .about-hero-inner{ grid-template-columns: 1fr; }
  .aid-list{ grid-template-columns: 1fr; }
  .panel-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .vm-wrap{ grid-template-columns: 1fr; }
  .core-grid{ grid-template-columns: 1fr; }
  .person-photo{ height: 320px; }
}




/* =========================================================
   ABOUT US — Advisory Panel image clarity + premium hover zoom
   ========================================================= */
/* ===== Advisory Panel Portrait Fix ===== */

.person-photo{
  position: relative;
  height: 380px;               /* taller to fit portrait */
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.person-photo img{
  max-height: 100%;
  width: auto;                 /* keep portrait ratio */
  object-fit: contain;         /* SHOW FULL IMAGE */
  transition: transform 0.4s ease;
}

/* Subtle premium zoom */
.person-card:hover .person-photo img{
  transform: scale(1.06);
}

/* Remove any overlay */
.photo-fallback{
  display:none !important;
}
@media (max-width: 768px){
  .person-photo{
    height: 420px;
  }
}



/* =========================================================
   PARTNERS & CLIENTS PAGE
   ========================================================= */
.pc-hero{
  background: #0b0b0b;
  color:#e5a40d;
  padding: 48px 0 40px;
}
.pc-title{
  margin:0 0 10px;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 900;
  letter-spacing: -0.6px;
}
.pc-subtitle{
  margin:0;
  color: rgba(255,255,255,.88);
  font-size: 18px;
  line-height: 1.7;
  max-width: 880px;
}

.pc-wrap{
  padding: 40px 0 70px;
  display: grid;
  gap: 22px;
}

/* Card */
.pc-card{
  background:#fff;
  border:1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  overflow: hidden;
}
.pc-card-head{
  padding: 22px 22px 14px;
}
.pc-h2{
  margin:0 0 8px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.pc-p{
  margin:0;
  color:#444;
  line-height: 1.7;
  font-size: 16.5px;
  max-width: 980px;
}

/* Image frame */
.pc-image-frame{
  background: #fafafa;
  border-top: 1px solid #eee;
  padding: 18px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.pc-image-frame img{
  width: 100%;
  max-width: 1100px;     /* keeps it premium centered */
  height: auto;
  display:block;
  border-radius: 14px;
  background:#fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* subtle hover lift */
.pc-card{
  transition: transform .22s ease, box-shadow .22s ease;
}
.pc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
}

/* Motion (if you already have .motion keyframes, it will use it. If not, this adds it.) */
.motion{
  opacity: 0;
  transform: translateY(14px);
  animation: pcFadeUp .7s ease forwards;
}
.pc-card.motion:nth-child(1){ animation-delay: .06s; }
.pc-card.motion:nth-child(2){ animation-delay: .12s; }

@keyframes pcFadeUp{
  to{ opacity:1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px){
  .pc-hero{ padding: 40px 0 32px; }
  .pc-card-head{ padding: 18px 16px 12px; }
  .pc-image-frame{ padding: 14px; }
  .pc-h2{ font-size: 22px; }
  .pc-subtitle{ font-size: 16.5px; }
}




/* =========================================================
   CONTACT US (professional)
   ========================================================= */
.contact-hero{
  background: #0b0b0b;
  color:#e5a40d;
  padding: 46px 0 36px;
}
.contact-title{
  margin:0 0 10px;
  font-size: clamp(32px, 3.2vw, 56px);
  font-weight: 900;
  letter-spacing: -0.7px;
}
.contact-subtitle{
  margin:0;
  color: rgba(255,255,255,.88);
  font-size: 18px;
  line-height: 1.7;
  max-width: 900px;
}

.contact-wrap{
  padding: 42px 0 70px;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items:start;
}

/* Left card */
.contact-card{
  background:#fff;
  border:1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
.contact-card-head{
  padding: 22px 22px 10px;
  border-bottom: 1px solid #000000;
  background: linear-gradient(180deg, #0f0e0e, #b18e05);
}
.contact-h2{
  margin:0 0 6px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.contact-p{
  margin:0;
  color:#444;
  line-height: 1.7;
}
.req{ color:#171616; font-weight:900; }

.contact-form{
  padding: 18px 22px 22px;
}
.field{
  margin-bottom: 14px;
}
.field label{
  display:block;
  font-weight: 800;
  margin-bottom: 8px;
  color:#ffffff;
}
.field input,
.field textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  outline: none;
  font-size: 16px;
  transition: border .18s ease, box-shadow .18s ease;
}
.field textarea{ resize: vertical; min-height: 140px; }

.field input:focus,
.field textarea:focus{
  border-color: rgba(255,106,0,.55);
  box-shadow: 0 0 0 4px rgba(255,106,0,.12);
}

/* Button */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border: none;
  padding: 12px 18px;
  border-radius: 12px;
  background: #ff6a00;
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 14px 26px rgba(255,106,0,.22);
  transition: transform .18s ease, filter .18s ease;
}
.btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(.97);
}

/* Right side card */
.contact-side{
  position: sticky;
  top: 16px;
}
.contact-info-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  padding: 18px 18px 16px;
}
.side-title{
  margin:0;
  font-size: 20px;
  font-weight: 900;
}
.side-sub{
  margin: 6px 0 14px;
  color:#ffffff;
  font-weight: 700;
}

.info-row{
  display:grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  margin: 12px 0;
  line-height: 1.6;
}
.info-row i{
  margin-top: 3px;
  color:#f1aa02;
}
.info-label{
  font-weight: 900;
  color:#d9d7d7;
  margin-bottom: 2px;
}
.contact-info-card a{
  color:#e9e7e7;
  text-decoration:none;
}
.contact-info-card a:hover{ text-decoration: underline; }

.wa-pill{
  display:inline-block;
  background: rgba(37,211,102,.14);
  border: 1px solid rgba(37,211,102,.25);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
}

/* Social */
.side-divider{
  height:1px;
  background:#eee;
  margin: 16px 0;
}
.side-social{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.soc{
  width:44px;
  height:44px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}
.soc.fb{ background:#3b5998; }
.soc.ig{ background:#d6249f; }
.soc.tt{ background:#111; border:2px solid #4dd0ff; }
.soc.in{ background:#0a66c2; }
.tt-text{ font-family: Arial, sans-serif; font-weight: 900; font-size: 22px; line-height: 1; }

/* Motion fallback (if not already set) */
@keyframes contactFadeUp { to { opacity:1; transform: translateY(0);} }
.contact-wrap .motion{
  opacity:0;
  transform: translateY(14px);
  animation: contactFadeUp .7s ease forwards;
}
.contact-wrap .motion:nth-child(1){ animation-delay:.06s; }
.contact-wrap .motion:nth-child(2){ animation-delay:.12s; }

/* Responsive */
@media (max-width: 980px){
  .contact-wrap{ grid-template-columns: 1fr; }
  .contact-side{ position: static; }
}




/* Contact form alerts */
.form-alert{
  margin: 14px 22px 0;
  padding: 12px 14px;
  border-radius: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height: 1.5;
  font-weight: 700;
}
.form-alert i{ margin-top: 2px; }

.form-alert.success{
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.30);
  color: #1e7a42;
}
.form-alert.error{
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.30);
  color: #b23b2f;
}



/* ======================================================
   PROGRAMS PAGE
   ====================================================== */

.program-hero{
  background: #0b0b0b;
  color:#fff;
  padding:60px 0 40px;
  text-align:center;
}
.program-title{
  font-size: clamp(32px,3.5vw,54px);
  font-weight:900;
  margin:0 0 12px;
}
.program-subtitle{
  font-size:18px;
  opacity:0.9;
}

.program-selection{
  padding:60px 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:30px;
}

.program-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
  overflow:hidden;
  transition: all 0.3s ease;
}

.program-card:hover{
  transform: translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.program-card-content{
  padding:35px;
}

.program-card h2{
  font-size:24px;
  font-weight:900;
  margin-bottom:15px;
}

.program-card p{
  color:#444;
  line-height:1.7;
  margin-bottom:20px;
}

.program-features{
  list-style:none;
  padding:0;
  margin-bottom:25px;
}

.program-features li{
  margin-bottom:8px;
  font-weight:600;
  color:#222;
}

.program-btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  background:#ff6a00;
  color:#fff;
  transition: all 0.2s ease;
}

.program-btn:hover{
  background:#e55e00;
}

.program-badge{
  display:inline-block;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  border-radius:50px;
  margin-bottom:15px;
  color:#fff;
}

.program-badge.malaysia{
  background:#0a66c2;
}

.program-badge.international{
  background:#8e44ad;
}

/* Placeholder Sections */

.program-details-section{
  padding:70px 0;
}

.program-details-section h2{
  font-size:28px;
  font-weight:900;
  margin-bottom:15px;
}

.program-placeholder{
  font-size:18px;
  color:#666;
}

.alt-bg{
  background:#f7f7f7;
}

/* Responsive */

@media(max-width: 992px){
  .program-selection{
    grid-template-columns: 1fr;
  }
}



/* =========================================
   PROGRAMS PAGE (LISTING)
========================================= */

.section-head{
  margin-bottom: 20px;
}
.section-title{
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  margin: 0 0 8px;
}
.muted{
  color:#666;
  line-height: 1.6;
}

.program-category-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.category-card{
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px 18px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.category-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.10);
}

.category-top{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.category-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #f4f4f4;
  font-size: 18px;
  flex: 0 0 auto;
}

.category-title{
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 4px;
}

.category-sub{
  margin: 0;
  color:#666;
  font-weight: 600;
  font-size: 14px;
}

.program-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.program-list li{
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-weight: 700;
  color:#222;
  line-height: 1.45;
}

.program-list li span{
  color:#777;
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 900px){
  .program-category-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   HOMEPAGE PROGRAMS – STATIC GRID VERSION
========================================= */

.programs-home{
  padding: 80px 0 40px;
  background: #000;
}

/* Remove horizontal rail behavior */
.programs-rail{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
  justify-items: center;
}

/* Make cards fixed width so second row centers properly */
.program-card{
  width: 100%;
  max-width: 320px;
}

/* Card */
.program-card{
  display: flex;
  flex-direction: column;
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(212,175,55,0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transition: all .3s ease;
}

/* Hover Effect */
.program-card:hover{
  transform: translateY(-6px);
  border-color: rgba(212,175,55,0.6);
  box-shadow: 0 20px 60px rgba(212,175,55,0.15);
}

/* Image Container */
.program-img{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
}

.program-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.program-card:hover .program-img img{
  transform: scale(1.05);
}

/* Title */
.program-name{
  padding: 18px;
  text-align: center;
  font-family: "Georgia", serif;
  font-size: 18px;
  font-weight: 900;
  color: #d4af37;
  letter-spacing: .5px;
}

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

/* Mobile */
@media (max-width: 700px){
  .programs-rail{
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ======================================================
   PROGRAMS HUB (programs.php) - align perfectly
====================================================== */

.program-selection.pro-hub{
  padding: 50px 0 70px;
}

.program-hub-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch; /* key: equal height */
}

.program-hub-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  padding: 26px 26px 22px;
  display:flex;
  flex-direction: column;
  min-height: 100%;
}

.program-hub-top{
  margin-bottom: 12px;
}

.program-hub-title{
  font-size: 26px;
  font-weight: 900;
  margin: 10px 0 2px;
}

.program-hub-sub{
  margin: 0;
  font-weight: 800;
  color:#777;
}

.program-hub-desc{
  color:#444;
  line-height: 1.7;
  margin: 10px 0 14px;
}

.program-hub-features{
  list-style: none;
  padding: 0;
  margin: 0;
  color:#222;
  font-weight: 700;
}

.program-hub-features li{
  margin: 8px 0;
}

.program-hub-actions{
  margin-top: auto; /* button sticks to bottom */
  padding-top: 16px;
}

@media(max-width: 900px){
  .program-hub-grid{
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   MALAYSIA PROGRAMS (image beside list, not homepage style)
====================================================== */

.program-media-stack{
  display:flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.program-media-card{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 16px 46px rgba(0,0,0,0.07);
  display:grid;
  grid-template-columns: 260px 1fr;
}

.program-media-img{
  background: #f3f3f3;
  position: relative;
  overflow:hidden;
}

.program-media-img img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover; /* ensures full card filled nicely */
  transition: transform .35s ease;
}

.program-media-card:hover .program-media-img img{
  transform: scale(1.04); /* subtle premium zoom */
}

.program-media-body{
  padding: 18px 18px 14px;
}

.program-media-title{
  font-size: 22px;
  font-weight: 950;
  margin: 0 0 6px;
}

.program-media-sub{
  margin: 0 0 12px;
  color:#666;
  font-weight: 700;
}

.program-list.clean li{
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 10px 0;
}

.program-list.clean li:first-child{
  border-top: none;
  padding-top: 0;
}

.program-list.clean li span{
  display:inline-block;
  margin-left: 6px;
}

@media (max-width: 900px){
  .program-media-card{
    grid-template-columns: 1fr;
  }
  .program-media-img{
    height: 220px;
  }
}




/* ======================================================
   FOOTER SOCIAL ICONS (FINAL OVERRIDE - ALWAYS WORKS)
====================================================== */

@keyframes eaaSoftFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* Right column alignment */
.eaa-footer .eaa-footer-social-right{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding-top: 10px !important;
}

/* The row of icons */
.eaa-footer .footer-social.footer-social--furry{
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* FORCE the image size inside footer (super specific) */
.eaa-footer .footer-social.footer-social--furry a img{
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;

  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;

  box-shadow: 0 8px 22px rgba(0,0,0,0.22) !important;
  transition: transform .25s ease, filter .25s ease !important;
}

/* Float animation on each icon */
.eaa-footer .footer-social.footer-social--furry a{
  display: inline-flex !important;
  animation: eaaSoftFloat 3.8s ease-in-out infinite !important;
}
.eaa-footer .footer-social.footer-social--furry a:nth-child(2){ animation-delay: .2s !important; }
.eaa-footer .footer-social.footer-social--furry a:nth-child(3){ animation-delay: .4s !important; }
.eaa-footer .footer-social.footer-social--furry a:nth-child(4){ animation-delay: .6s !important; }

/* Premium hover */
.eaa-footer .footer-social.footer-social--furry a:hover img{
  transform: translateY(-6px) scale(1.06) !important;
  filter: brightness(1.06) contrast(1.02) !important;
}

/* Mobile */
@media (max-width: 980px){
  .eaa-footer .eaa-footer-social-right{
    justify-content: flex-start !important;
  }
}

@media (max-width: 768px){
  .eaa-footer .footer-social.footer-social--furry a img{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .eaa-footer .footer-social.footer-social--furry a{
    animation: none !important;
  }
}







/* ======================================================
   GOLD & BLACK PREMIUM THEME (FINAL OVERRIDE PACK)
   Paste this at the END of style.css
====================================================== */

/* Luxury palette */
:root{
  --bg:#070707;
  --panel:#0e0e0e;
  --panel2:#121212;

  --text:#f5f2ea;
  --muted:#bdb6a8;

  --gold:#d6b35a;
  --gold2:#f0d48a;
  --gold3:#a8842d;

  --border: rgba(214,179,90,0.22);
  --border2: rgba(255,255,255,0.08);

  --shadow: 0 18px 50px rgba(0,0,0,0.55);
  --shadow2: 0 14px 32px rgba(0,0,0,0.45);

  --ease: cubic-bezier(.2,.8,.2,1);
}

html,body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

a{ color: inherit; }

/* Make inner page sections look premium on black */
.content,
.compare,
.home-programs,
.program-details-section,
.pc-wrap,
.about-section,
.contact-wrap{
  background: transparent !important;
}

/* ======================================================
   HEADER — premium glass black + gold
====================================================== */
.eaa-header{
  background: rgba(7,7,7,0.72) !important;
  border-bottom: 1px solid rgba(214,179,90,0.20) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.eaa-brand-title{ color: var(--text) !important; }
.eaa-brand-subtitle{ color: var(--muted) !important; }
.site-logo{
  background: radial-gradient(circle, rgba(255,215,0,.15) 0%, rgba(0,0,0,0) 70%);
  padding: 8px;
  border-radius: 50%;
}
.eaa-nav a{
  color: rgba(245,242,234,0.86) !important;
}
.eaa-nav a:hover,
.eaa-nav a.active{
  color: var(--gold2) !important;
}
.eaa-nav a::after{
  background: linear-gradient(90deg, var(--gold3), var(--gold), var(--gold2)) !important;
}



/* ======================================================
   CARDS — turn your white cards into luxury dark cards
====================================================== */
.program-mini-card,
.category-card,
.program-media-card,
.person-card,
.why-card,
.vm-card,
.contact-card,
.contact-info-card,
.pc-card,
.program-hub-card{
  background: linear-gradient(180deg, rgba(18,18,18,0.95), rgba(10,10,10,0.95)) !important;
  border: 1px solid rgba(214,179,90,0.14) !important;
  box-shadow: var(--shadow2) !important;
  color: var(--text) !important;
}

.program-mini-title,
.category-title,
.program-media-title,
.person-name,
.why-h,
.vm-title,
.contact-h2,
.pc-h2{
  color: var(--text) !important;
}

.program-mini-sub,
.category-sub,
.program-media-sub,
.person-role,
.why-p,
.vm-text,
.contact-p,
.pc-p,
.muted{
  color: rgba(245,242,234,0.72) !important;
}

/* Lists inside cards */
.program-list li,
.program-list.clean li{
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(245,242,234,0.92) !important;
}
.program-list li span{
  color: rgba(245,242,234,0.62) !important;
}

/* ======================================================
   BUTTONS — premium gold gradient
====================================================== */
.btn-primary,
.program-btn{
  background: linear-gradient(90deg, var(--gold3), var(--gold), var(--gold2)) !important;
  color: #0a0a0a !important;
  box-shadow: 0 16px 30px rgba(214,179,90,0.20) !important;
}
.btn-primary:hover,
.program-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

/* ======================================================
   INPUTS — dark luxury form
====================================================== */
.field label{ color: rgba(245,242,234,0.88) !important; }

.field input,
.field textarea{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(214,179,90,0.18) !important;
  color: var(--text) !important;
}
.field input:focus,
.field textarea:focus{
  border-color: rgba(240,212,138,0.55) !important;
  box-shadow: 0 0 0 4px rgba(214,179,90,0.16) !important;
}

/* ======================================================
   FOOTER — richer black with gold glow
====================================================== */
.eaa-footer{
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(214,179,90,0.10), transparent 60%),
    radial-gradient(900px 300px at 80% 0%, rgba(240,212,138,0.08), transparent 60%),
    #060606 !important;
  border-top: 1px solid rgba(214,179,90,0.18) !important;
}
.eaa-footer-title,
.eaa-footer-id,
.eaa-footer-links a{
  color: var(--gold2) !important;
}
.eaa-footer-info .row{
  color: rgba(245,242,234,0.86) !important;
}
.eaa-footer-info i{
  color: rgba(240,212,138,0.85) !important;
}


/* ======================================================
   FOOTER SOCIAL ICONS — smaller + floating animation
====================================================== */
@keyframes eaaSoftFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* right column */
.eaa-footer .eaa-footer-social-right{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  padding-top:10px !important;
}

.eaa-footer .footer-social.footer-social--furry{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

/* IMPORTANT: set size here (not 120px) */
.eaa-footer .footer-social.footer-social--furry a img{
  width: 95px !important;
  height: 95px !important;
  min-width: 95px !important;
  min-height: 95px !important;
  max-width: 95px !important;
  max-height: 95px !important;

  object-fit: cover !important;
  border-radius: 12px !important;
  display:block !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45) !important;
  transition: transform .25s var(--ease), filter .25s var(--ease) !important;
}

/* float */
.eaa-footer .footer-social.footer-social--furry a{
  display:inline-flex !important;
  animation: eaaSoftFloat 3.8s ease-in-out infinite !important;
}
.eaa-footer .footer-social.footer-social--furry a:nth-child(2){ animation-delay:.2s !important; }
.eaa-footer .footer-social.footer-social--furry a:nth-child(3){ animation-delay:.4s !important; }
.eaa-footer .footer-social.footer-social--furry a:nth-child(4){ animation-delay:.6s !important; }
.eaa-footer .footer-social.footer-social--furry a:nth-child(5){ animation-delay:.8s !important; }

.eaa-footer .footer-social.footer-social--furry a:hover img{
  transform: translateY(-6px) scale(1.06) !important;
  filter: brightness(1.06) contrast(1.02) !important;
}

@media (max-width: 980px){
  .eaa-footer .eaa-footer-social-right{ justify-content:flex-start !important; }
}
@media (max-width: 768px){
  .eaa-footer .footer-social.footer-social--furry a img{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
    border-radius: 10px !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .eaa-footer .footer-social.footer-social--furry a{
    animation:none !important;
  }
}

/* ======================================================
   PREMIUM APPEAR ANIMATION (subtle)
====================================================== */
@keyframes luxeFadeUp{
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

.motion{
  opacity:0;
  transform: translateY(10px);
  animation: luxeFadeUp .75s var(--ease) forwards;
}



/* =========================================================
   LUXURY BLACK + TRUE GOLD (TEXTURED)
   Fixes:
   - textured background like reference
   - gold not brown
   - small hero (homepage only)
   - remove header-to-content gap on other pages
   ========================================================= */

:root{
  /* TRUE GOLD palette (not brown) */
  --gold:#d4ad2c;
  --gold2:#dbb22d;
  --gold3:#4d3905;

  /* luxury blacks */
  --lux-0:#050505;
  --lux-1:#0a0a0a;
  --lux-2:#121212;

  --text:#b98712;
  --text2:rgba(187, 135, 15, 0.86);
  --muted:rgba(247,242,230,.66);

  --border:rgba(222, 176, 26, 0.18);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --shadow2:0 12px 30px rgba(0,0,0,.45);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* --------- TEXTURED BACKGROUND (leather-ish) --------- */
/* Pure CSS texture: layered gradients to simulate grain */
html,body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 650px at 25% 15%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1000px 600px at 80% 10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(0,0,0,.55), transparent 60%),
    repeating-radial-gradient(circle at 20% 30%,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,.018) 1px 2px),
    linear-gradient(180deg, #0b0b0b 0%, #050505 60%, #040404 100%);
  background-attachment: fixed;
}

/* keep text readable everywhere */
p,li,label,span,small{ color:var(--text2); }
a{ color:inherit; }
a:hover{ color:var(--gold2); }

/* Remove accidental white backgrounds */
.main, main, .content, .compare, .about-section, .pc-wrap, .contact-wrap{
  background: transparent !important;
}

/* =========================================================
   REMOVE GAP BETWEEN HEADER AND CONTENT (other pages)
   ========================================================= */
/* Often caused by top padding/margins on first section */
main{ padding-top:0 !important; margin-top:0 !important; }
.main{ padding-top:0 !important; margin-top:0 !important; }

/* If your first block is a hero section, ensure it hugs header */
.about-hero,
.program-hero,
.pc-hero,
.contact-hero{
  margin-top:0 !important;
  padding-top:1px !important; /* compact */
  padding-bottom:1px !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(180deg, rgba(12,12,12,.98), rgba(5,5,5,.98));
}

/* Kill overlay issues that make words hard to see */
.about-hero-overlay{ display:none !important; }

/* =========================================================
   HOMEPAGE HERO ONLY (SMALLER + PREMIUM)
   ========================================================= */
/* HOMEPAGE HERO — Black/Gold badge theme (smaller, premium) */
/* CLEAN FULL BADGE HERO */
.hero.hero--badge{
  background: #000; /* pure black to match badge */
  height: 500px; /* adjust if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Badge fills nicely but not distorted */
.hero-full-badge{
  width: 90%;
  max-width:none ;   /* controls how big it can grow */
  height: auto;
  object-fit: contain;
  display: block;
}

/* Responsive */
@media (max-width: 768px){
  .hero.hero--badge{
    height: 400px;
  }

}

/* Badge (main logo) */
.hero-badge{
  width: min(520px, 78vw);
  height: auto;
  display:block;
  filter: drop-shadow(0 18px 55px rgba(255,215,0,.18))
          drop-shadow(0 26px 80px rgba(0,0,0,.65));
  animation: heroPop .9s ease both;
}

/* Small tagline */
.hero-tagline{
  margin:0;
  color: rgba(255,255,255,.88);
  font-weight: 700;
  letter-spacing: .2px;
  animation: fadeUp .9s ease .12s both;
}

/* Animations */
@keyframes heroPop{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px); }
}

/* =========================================================
   HOMEPAGE TITLES — white + premium font styling
   Targets: "Our Programs", "The differences between MQA...",
   and "The Benefits of RPEL & RPL Programs" on homepage.php
   ========================================================= */
.programs-home > .section-title,
.compare > .section-title,
.container.content > .page-h1,
.content > .page-h1{
  color: #ffffff !important;
  font-family: "Inter", "Poppins", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  font-size: clamp(20px, 2.8vw, 34px) !important;
  text-shadow: 0 6px 22px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.02);
  margin-bottom: 18px !important;
}

@media (max-width: 700px){
  .programs-home > .section-title,
  .compare > .section-title,
  .container.content > .page-h1,
  .content > .page-h1{
    font-size: clamp(18px, 5.2vw, 22px) !important;
    letter-spacing: -0.1px !important;
  }
}
  to{ opacity:1; transform: translateY(0); }


/* Responsive */
@media (max-width: 700px){
  .hero.hero--badge{ height: 320px; min-height: 300px; }
  .hero-tagline{ font-size: 14px; padding: 0 10px; }
}
/* =========================================================
   PREMIUM DARK PANELS (READABLE)
   ========================================================= */
.glass,
.compare-body,
.cr,
.category-card,
.program-media-card,
.person-card,
.why-card,
.vm-card,
.contact-card,
.contact-info-card,
.pc-card,
.program-hub-card{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg, rgba(18,18,18,.96), rgba(8,8,8,.96)) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow2) !important;
  color:var(--text) !important;
}

/* Section headings: gold accent */
.section-title,
.page-h1,
.section-h2,
.pc-h2,
.contact-h2,
.program-hub-title,
.category-title,
.program-media-title,
.person-name,
.why-h,
.vm-title{
  color:var(--text) !important;
}


/* =========================================================
   FIX: Comparison (“The differences between…”) to match theme
   ========================================================= */
.compare-headbar{
  background:
    linear-gradient(90deg, rgba(212,175,55,.18), rgba(212,175,55,.06)) !important;
  border:1px solid rgba(212,175,55,.28) !important;
  box-shadow:var(--shadow2) !important;
}
.compare-headbar .ch{
  color:var(--text) !important;
  border-right:1px solid rgb(231, 172, 7) !important;
}
.compare-headbar .ch i{ color:var(--gold2) !important; }

.cf, .cc{
  background:rgba(39, 37, 28, 0.03) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}
.cf{ color:var(--text) !important; }
.cf i{ color:var(--gold2) !important; }
.cc{ color:var(--text2) !important; }

.cr:hover .cc,.cr:hover .cf{
  background:rgba(255, 255, 255, 0.08) !important;
  border-color:rgb(248, 179, 42) !important;
}

/* Mobile stacked labels in gold */
@media (max-width:980px){
  .cc::before{ color:var(--gold2) !important; }
}

/* =========================================================
   FIX: Benefits readability
   ========================================================= */
.checklist li{ color:var(--text2) !important; }
.checklist li::before{ color:var(--gold2) !important; }

/* =========================================================
   PROGRAMS HUB must be CENTER + LANDSCAPE
   ========================================================= */
.program-selection.pro-hub{ padding:40px 0 70px !important; }

.program-selection.pro-hub .program-hub-grid{
  max-width:980px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:22px !important;
  align-items:stretch !important;
}
.program-hub-card{ display:flex !important; flex-direction:column !important; }
.program-hub-actions{ margin-top:auto !important; text-align:center !important; }

@media (max-width:900px){
  .program-selection.pro-hub .program-hub-grid{
    grid-template-columns:1fr !important;
    max-width:680px !important;
  }
}

/* =========================================================
   GOLD BUTTONS
   ========================================================= */
.btn-primary,
.program-btn{
  background:linear-gradient(90deg, var(--gold3), var(--gold), var(--gold2)) !important;
  color:#070707 !important;
  font-weight:900 !important;
  box-shadow:0 16px 30px rgba(212,175,55,.22) !important;
}
.btn-primary:hover,
.program-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

/* =========================================================
   SUBTLE PROFESSIONAL ANIMATIONS
   ========================================================= */
@keyframes luxFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.section-title, .page-h1, .about-section, .content, .compare, .pc-wrap, .contact-wrap, .program-selection{
  animation:luxFadeUp .65s var(--ease) both;
}
.program-hub-card,
.category-card,
.program-media-card,
.pc-card,
.contact-card,
.contact-info-card,
.person-card,
.why-card,
.vm-card{
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.program-hub-card:hover,
.category-card:hover,
.program-media-card:hover,
.pc-card:hover,
.contact-card:hover,
.contact-info-card:hover,
.person-card:hover,
.why-card:hover,
.vm-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(246,211,101,.25) !important;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}




/* ======================================================
   PROGRAM HUB - LANDSCAPE + CENTERED
====================================================== */

.program-hub-wrapper{
  min-height:70vh;
  display:flex;
  align-items:center;     /* vertical center */
  justify-content:center; /* horizontal center */
  padding:40px 20px;
}

.program-hub-container{
  display:flex;
  gap:40px;
  justify-content:center;
  align-items:stretch;
  max-width:1100px;
  width:100%;
}

/* Cards */
.program-hub-card{
  flex:1;
  background: linear-gradient(180deg, #141414, #0b0b0b);
  border:1px solid rgba(212,175,55,.25);
  border-radius:20px;
  padding:40px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transition: all .3s ease;
  display:flex;
  flex-direction:column;
}

.program-hub-card:hover{
  transform:translateY(-6px);
  border-color:#d4af37;
  box-shadow:0 25px 70px rgba(0,0,0,.7);
}

/* Title */
.program-hub-card h2{
  font-size:28px;
  font-weight:900;
  margin-bottom:10px;
  color:#f7f2e6;
}

/* Subtitle */
.hub-sub{
  color:#d4af37;
  font-weight:600;
  margin-bottom:25px;
}

/* List */
.program-hub-card ul{
  list-style:none;
  padding:0;
  margin:0 0 30px 0;
  text-align:left;
}

.program-hub-card ul li{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#eaeaea;
  font-weight:500;
}

/* Button */
.hub-btn{
  margin-top:auto;
  display:inline-block;
  padding:12px 24px;
  border-radius:8px;
  background:linear-gradient(90deg,#b8860b,#d4af37,#f6d365);
  color:#000;
  font-weight:800;
  text-decoration:none;
  transition: all .25s ease;
}

.hub-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

/* Responsive */
@media(max-width:900px){
  .program-hub-container{
    flex-direction:column;
    gap:25px;
  }
}


/* ======================================================
   PROGRAM OPTIONS WITH IMAGE BESIDE (CENTERED LANDSCAPE)
====================================================== */

.program-hub-wrapper{
  display:flex;
  justify-content:center;
  padding:60px 20px;
}

.program-hub-container{
  width:100%;
  max-width:1200px;
  display:flex;
  flex-direction:column;
  gap:50px;
}

/* Each option */
.program-option{
  display:flex;
  align-items:center;
  gap:40px;
  background:linear-gradient(180deg,#141414,#0b0b0b);
  border:1px solid rgba(212,175,55,.25);
  border-radius:20px;
  padding:35px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transition: all .3s ease;
}

.program-option:hover{
  transform:translateY(-6px);
  border-color:#d4af37;
}

/* Image side */
.program-option-image{
  flex:1;
}

.program-option-image img{
  width:100%;
  max-height:320px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}

/* Content side */
.program-option-content{
  flex:1;
}

.program-option-content h2{
  font-size:28px;
  font-weight:900;
  margin-bottom:8px;
  color:#f7f2e6;
}

.hub-sub{
  color:#d4af37;
  font-weight:700;
  margin-bottom:20px;
}

.program-option-content ul{
  list-style:none;
  padding:0;
  margin:0 0 25px 0;
}

.program-option-content ul li{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#eaeaea;
}

/* Button */
.hub-btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:10px;
  background:linear-gradient(90deg,#b8860b,#d4af37,#f6d365);
  color:#000;
  font-weight:900;
  text-decoration:none;
  transition:.3s ease;
}

.hub-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

/* Responsive */
@media(max-width:900px){
  .program-option{
    flex-direction:column;
    text-align:center;
  }

  .program-option-content ul{
    text-align:left;
  }
}

/* ==============================
   PORTAL NAV BUTTON (Premium)
============================== */

.eaa-nav .portal-nav{
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.6);
  background: linear-gradient(135deg,#D4AF37,#F6E27A);
  color: #000 !important;
  font-weight: 900;
  transition: all .25s ease;
  box-shadow: 0 6px 18px rgba(212,175,55,.35);
}

.eaa-nav .portal-nav:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(212,175,55,.45);
  filter: brightness(1.05);
}




/* ===============================
   International Programs Gallery
=================================*/

.brochure-section {
    padding: 70px 0;
    background: #000;
}

.brochure-container {
    max-width: 1200px;   /* prevents full width stretching */
    margin: auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    font-size: 32px;
    color: #d4af37;
    margin-bottom: 10px;
    font-weight: 700;
}

.gold-divider {
    width: 100px;
    height: 3px;
    margin: 0 auto 40px;
    background: linear-gradient(to right, transparent, #d4af37, transparent);
}

.brochure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 per row */
    gap: 25px;
}

.brochure-card {
    background: #111;
    padding: 10px;
    border-radius: 12px;
    transition: 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.brochure-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.brochure-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(212,175,55,0.35);
}

/* Tablet */
@media (max-width: 1024px) {
    .brochure-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .brochure-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ===== CLEAN FULL BADGE HERO ===== */

.hero.hero--badge{
  height: 400px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.hero.hero--badge .hero-badge{
  width: 95%;
  max-width: 1100px;
  height: auto;
  object-fit: contain;
  display: block;
}


/* ===== BROCHURE SHOWCASE ===== */

.brochure-section{
  background: #000;
  padding: 80px 0;
}

.brochure-section .section-title{
  text-align: center;
  color: #d4af37;
  margin-bottom: 60px;
  font-size: 32px;
}

.brochure-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.brochure-item{
  width: 100%;
  max-width: 900px;  /* keeps all same size */
  background: #111;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(212,175,55,0.15);
  transition: 0.3s ease;
}

.brochure-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.brochure-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 0 60px rgba(212,175,55,0.3);
}


/* =========================================================
   MOBILE FIX PACK (PASTE AT VERY END)
   Fixes:
   1) Mobile menu opens vertical + scrollable
   2) Header-to-hero gap reduced on mobile
========================================================= */

/* =========================================
   MOBILE HEADER + FULLSCREEN MENU (FIXED)
========================================= */
@media (max-width: 980px){

  /* reduce header-to-hero gap */
  body{
    padding-top: 110px !important;
  }

  .eaa-header-inner{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
  }

  .eaa-brand{
    gap: 12px !important;
  }

  .eaa-logo{
    width: 80px !important;
    height: 80px !important;
    transform: none !important;
  }

  .eaa-brand-title{ font-size: 18px !important; }
  .eaa-brand-subtitle{ font-size: 12px !important; }

  .eaa-menu-toggle{
    display: flex !important;
  }

  /* FULLSCREEN NAV - VERTICAL + SCROLLABLE */
  .eaa-nav{
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;     /* ✅ IMPORTANT FIX (prevents horizontal wrap columns) */
    align-items: stretch !important;
    justify-content: flex-start !important;

    padding: 110px 18px 24px !important;  /* space below fixed header */
    gap: 12px !important;

    background: rgba(0,0,0,0.96) !important;

    /* hidden by default */
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transition: transform .32s ease, opacity .32s ease;

    /* ✅ allow scroll inside menu */
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .eaa-nav a{
    display: block !important;
    width: 100% !important;
    text-align: center !important;

    padding: 14px 12px !important;
    border-radius: 14px !important;

    font-size: 18px !important;
    color: rgba(245,242,234,0.92) !important;

    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(214,179,90,0.18) !important;
  }

  .eaa-nav a:hover{
    background: rgba(214,179,90,0.10) !important;
    border-color: rgba(214,179,90,0.35) !important;
  }

  /* open state */
  .eaa-header.nav-open .eaa-nav{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* footer stack (keep your existing behavior) */
  .eaa-footer-inner{
    grid-template-columns: 1fr !important;
  }
}
/* Even smaller phones */
@media (max-width: 700px){
  body{
    padding-top: 100px !important;
  }

  .hero.hero--badge{
    height: 300px !important;  /* smaller hero on mobile */
  }
}

/* =========================================
   FIX: Portal Button Visible on Mobile
========================================= */
@media (max-width: 980px){

  .eaa-nav .portal-nav{
    background: linear-gradient(90deg,#b8860b,#d4af37,#f6d365) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(212,175,55,.35) !important;
  }

  .eaa-nav .portal-nav:hover{
    transform: translateY(-2px);
    filter: brightness(1.05);
  }

}
/* =========================================
   WEBSITE MOBILE NAV — match PORTAL style
   (paste at END of style.css)
========================================= */

:root{
  --portal-gold:#d6b35a;
  --portal-gold-light:#f0d48a;
  --portal-dark:#0b0b0b;
  --portal-ease:cubic-bezier(.22,.9,.32,1);
}

/* Hamburger button: gold gradient lines (portal style) */
@media (max-width: 980px){

  .eaa-menu-toggle{
    display:flex !important;
    width:36px;
    height:28px;
    border:none;
    background:transparent;
    cursor:pointer;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
    position:relative;
    z-index:1101; /* above overlay */
  }

  .eaa-menu-toggle span{
    height:3px;
    width:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--portal-gold),var(--portal-gold-light));
    transition:all .4s var(--portal-ease);
  }
  .eaa-menu-toggle span:nth-child(2){ width:75%; }
  .eaa-menu-toggle span:nth-child(3){ width:55%; }

  /* Animate to X (same as portal) */
  .eaa-header.nav-open .eaa-menu-toggle span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
    width:100%;
  }
  .eaa-header.nav-open .eaa-menu-toggle span:nth-child(2){
    opacity:0;
  }
  .eaa-header.nav-open .eaa-menu-toggle span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
    width:100%;
  }

  .eaa-header.nav-open .eaa-menu-toggle{
    filter:drop-shadow(0 0 8px rgba(214,179,90,.6));
  }

  /* Fullscreen overlay menu (portal style) */
  .eaa-nav{
    position:fixed !important;
    inset:0 !important;
    z-index:1100 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;

    padding:110px 18px 24px !important; /* space below fixed header */
    background:
      radial-gradient(600px 400px at 20% 0%, rgba(214,179,90,.10), transparent 60%),
      linear-gradient(180deg,#111,#0a0a0a) !important;

    transform:translateY(-100%) !important;
    opacity:0 !important;
    pointer-events:none !important;

    transition:transform .45s var(--portal-ease), opacity .35s ease;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .eaa-header.nav-open .eaa-nav{
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  

  /* Menu items = portal button cards */
  .eaa-nav a{
    display:block !important;
    width:100% !important;
    text-align:center !important;

    padding:14px 12px !important;
    border-radius:14px !important;

    font-size:18px !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;

    color:rgba(245,242,234,0.92) !important;

    background:rgba(255,255,255,0.04) !important;
    border:1px solid rgba(214,179,90,0.18) !important;

    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }

  .eaa-nav a:hover{
    background:rgba(214,179,90,0.10) !important;
    border-color:rgba(214,179,90,0.35) !important;
    transform:translateY(-1px) !important;
  }

  /* Active highlight */
  .eaa-nav a.active{
    background:rgba(214,179,90,0.12) !important;
    border-color:rgba(214,179,90,0.45) !important;
    color:var(--portal-gold-light) !important;
  }

  /* Keep your Portal button looking premium inside menu */
  .eaa-nav .portal-nav{
    background: linear-gradient(90deg,#b8860b,#d4af37,#f6d365) !important;
    color:#000 !important;
    border:none !important;
    box-shadow:0 10px 25px rgba(212,175,55,.35) !important;
  }
}
@media (max-width:980px){
  .site-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
    z-index:1099; /* just under .eaa-nav */
  }
  .eaa-header.nav-open ~ .site-overlay{
    opacity:1;
    pointer-events:auto;
  }
}



/* ✅ Premium Install Modal (EduAsia) */
.eaa-install{ position:fixed; inset:0; z-index:9999; display:none; }
.eaa-install.is-open{ display:block; }

.eaa-install__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.eaa-install__card{
  position:relative;
  width:min(520px, 92vw);
  margin: 10vh auto 0;
  border-radius: 22px;
  padding: 18px 18px 16px;
  color: #f5f2ea;
  border: 1px solid rgba(214,179,90,.25);
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(214,179,90,.16), transparent 60%),
    linear-gradient(180deg, rgba(12,12,12,.94), rgba(6,6,6,.94));
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
  transform: translateY(10px);
  opacity: 0;
  animation: eaaInstallIn .35s ease forwards;
}

@keyframes eaaInstallIn{
  to{ transform: translateY(0); opacity: 1; }
}

.eaa-install__close{
  position:absolute; top:10px; right:12px;
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size: 22px;
}

.eaa-install__top{
  display:flex; gap:14px; align-items:center;
  padding-right: 40px;
}
.eaa-install__icon{
  width: 58px; height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  background: #000;
}
.eaa-install__title{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .2px;
  color: #ffea9a;
}
.eaa-install__sub{
  margin-top: 4px;
  color: rgba(255,255,255,.76);
  font-weight: 650;
  line-height: 1.45;
  font-size: 13.5px;
}

.eaa-install__perks{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top: 14px;
}
.eaa-install__perk{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight: 850;
  font-size: 12px;
  color: rgba(255,255,255,.88);
}

.eaa-install__btn{
  margin-top: 14px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 950;
  color: #0a0a0a;
  background: linear-gradient(135deg, #ffea9a, #f6d36b, #caa246);
  box-shadow: 0 16px 34px rgba(214,179,90,.18);
  transition: transform .18s ease, filter .18s ease;
}
.eaa-install__btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }
.eaa-install__btn:active{ transform: translateY(0); }

.eaa-install__ios{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.eaa-install__iosTitle{ font-weight: 950; color: #ffea9a; margin-bottom: 6px; }
.eaa-install__iosSteps{ color: rgba(255,255,255,.82); line-height: 1.55; font-weight: 650; }

.eaa-install__foot{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.eaa-install__dont{
  display:flex; gap:8px; align-items:center;
  color: rgba(255,255,255,.78);
  font-weight: 750;
  font-size: 13px;
}
.eaa-install__hint{
  color: rgba(255,255,255,.55);
  font-weight: 650;
  font-size: 12px;
}

/* =========================================
   CONTACT PAGE — QUICK ACTIONS (PREMIUM)
========================================= */
.quick-actions{
  margin-top: 22px;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, rgba(18,18,18,.96), rgba(8,8,8,.96));
  border: 1px solid rgba(212,175,55,.18);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.quick-title{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 900;
  color: #f6d365;
  letter-spacing: -.2px;
}

.quick-sub{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  font-weight: 600;
}

.quick-actions-grid{
  display: grid;
  gap: 12px;
}

.quick-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

/* Gold primary button */
.quick-btn.enroll{
  background: linear-gradient(135deg, #f6d365, #d4af37, #b8860b);
  color: #0b0b0b !important;
  box-shadow: 0 14px 28px rgba(212,175,55,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.quick-btn.enroll:hover{
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow: 0 18px 36px rgba(212,175,55,.30);
}

/* Dark luxury secondary button */
.quick-btn.agent{
  background: rgba(255,255,255,.04);
  color: #f5f2ea !important;
  border: 1px solid rgba(212,175,55,.28);
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}

.quick-btn.agent:hover{
  transform: translateY(-3px);
  background: rgba(212,175,55,.10);
  border-color: rgba(246,211,101,.45);
  box-shadow: 0 18px 34px rgba(0,0,0,.30);
}

.quick-btn i{
  font-size: 16px;
  line-height: 1;
}

/* Nice mobile fit */
@media (max-width: 980px){
  .quick-actions{
    margin-top: 18px;
    padding: 18px 16px 16px;
  }

  .quick-title{
    font-size: 18px;
  }

  .quick-btn{
    min-height: 50px;
    font-size: 15px;
  }
}

/* ===============================
   JOIN SECTION
================================ */

.join-section{
padding:80px 0;
background:#0f0f0f;
}

.join-title{
text-align:center;
font-size:36px;
color:#d4af37;
margin-bottom:10px;
font-weight:700;
}

.join-sub{
text-align:center;
color:#bbb;
margin-bottom:50px;
}

.join-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.join-card{
background:#111;
border:1px solid rgba(212,175,55,0.3);
border-radius:12px;
overflow:hidden;
display:flex;
flex-direction:column;
transition:0.3s;
}

.join-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(212,175,55,0.2);
}

.join-img img{
width:100%;
height:220px;
object-fit:cover;
}

.join-content{
padding:25px;
}

.join-content h3{
color:#fff;
margin-bottom:10px;
font-size:22px;
}

.join-content p{
color:#ccc;
margin-bottom:20px;
}

.join-btn{
display:inline-block;
background:#d4af37;
color:#000;
padding:12px 22px;
border-radius:6px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.join-btn:hover{
background:#b8962e;
}

/* MOBILE */
@media(max-width:900px){

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

.join-img img{
height:200px;
}

}