/* =========================================================
   THEME / VARIABLES
========================================================= */
:root{
  /* Darker background */
  --bg: #070708;
  --bg2:#0b0b0d;

  --card:#121217;
  --text:#f2f2f3;
  --muted:#b0b0b7;
  --line: rgba(255,255,255,.08);

  /* Gold as a soft gradient (not solid) */
  --goldA:#d7bb72;
  --goldB:#a98d4d;
  --goldC:#6f5a2b;
  --goldGrad: linear-gradient(135deg, rgba(215,187,114,.22), rgba(169,141,77,.10), rgba(111,90,43,.10));

  --shadow: 0 18px 60px rgba(0,0,0,.62);
  --radius: 18px;
  --radius2: 26px;
  --max: 1300px;

  /* Typography (bigger overall) */
  --base: 17px;
  --p: 15.8px;
  --lh: 1.92;
}

/* =========================================================
   GLOBAL RESET / BASE
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(900px 600px at 14% 10%, rgba(215,187,114,.08), transparent 62%),
    radial-gradient(800px 600px at 86% 26%, rgba(215,187,114,.06), transparent 64%),
    radial-gradient(900px 600px at 45% 110%, rgba(215,187,114,.04), transparent 64%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  overflow-x:hidden;
  position:relative;
  font-size: var(--base);
}

/* Subtle animated shimmer layer (darker + softer) */
body::before{
  content:"";
  position:fixed;
  inset:-40%;
  background:
    radial-gradient(520px 240px at 20% 18%, rgba(215,187,114,.08), transparent 62%),
    radial-gradient(480px 260px at 78% 36%, rgba(215,187,114,.06), transparent 64%),
    radial-gradient(520px 280px at 60% 74%, rgba(215,187,114,.05), transparent 66%);
  filter: blur(14px);
  opacity:.42;
  pointer-events:none;
  transform: translate3d(0,0,0);
  animation: floatGlow 12s ease-in-out infinite;
  z-index:0;
}

@keyframes floatGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-16px,0) scale(1.03); }
}

body > *{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--max), calc(100% - 44px)); margin-inline:auto; }

/* =========================================================
   TOP NAV / HEADER BAR
========================================================= */
.topbar{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,7,8,.84), rgba(7,7,8,.52));
  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 18px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform: uppercase;
  font-size: 14px;
}

.brand-badge{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(215,187,114,1) 42%, rgba(111,90,43,1));
  box-shadow: 0 0 0 4px rgba(215,187,114,.10);
}

.menu{
  display:flex; align-items:center; gap: 10px;
  color: var(--muted);
  font-size: 14px;
  flex-wrap:wrap;
  justify-content:center;
}

.menu a{
  padding: 9px 10px;
  border-radius: 12px;
  transition: .2s ease;
  border:1px solid transparent;
}

.menu a:hover{ color: var(--text); background: rgba(255,255,255,.04); }

.menu a.active{
  color: var(--text);
  background: rgba(215,187,114,.10);
  border:1px solid rgba(215,187,114,.22);
}

.nav-cta{ display:flex; align-items:center; gap:10px; flex: 0 0 auto; }

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 11px 15px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 500;
  font-size: 14.5px;
  transition:.22s ease;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}

.btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(120deg, transparent 0%, rgba(215,187,114,.14) 30%, transparent 60%);
  transform: translateX(-120%);
  transition: .55s ease;
  pointer-events:none;
}

.btn:hover::after{ transform: translateX(120%); }

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(215,187,114,.26);
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
}

.btn.primary{
  background: var(--goldGrad);
  border-color: rgba(215,187,114,.28);
}

/* =========================================================
   HERO
========================================================= */
.hero{ padding: 46px 0 18px; }

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

.hero-left{
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: var(--radius2);
  padding: 34px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  text-align: center;
}

.hero-left:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(720px 320px at 18% 18%, rgba(215,187,114,.16), transparent 60%);
  opacity: .92;
  pointer-events:none;
}

.hero-kicker{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(242,242,243,.78);
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  margin-inline: auto;
  justify-content: center;
}

.dot{
  width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(215,187,114,1) 55%, rgba(111,90,43,1));
  box-shadow: 0 0 0 4px rgba(215,187,114,.10);
}

h1{
  position:relative;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.03;
  margin: 16px 0 12px;
  letter-spacing: .2px;
}

.subtitle{
  position:relative;
  color: rgba(242,242,243,.74);
  font-size: 16.6px;
  line-height: 1.85;
  margin: 0;
  text-wrap: pretty;
  margin-inline: auto;
  max-width: 78ch;
}

.hero-actions{
  position:relative;
  display:flex; flex-wrap:wrap; gap: 12px;
  margin-top: 18px;
  justify-content: center;
}

/* =========================================================
   SECTIONS / HEADERS
========================================================= */
section{ padding: 30px 0; }

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

.section-head h2{
  margin:0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: .2px;
}

.section-head p{
  margin:0;
  color: var(--muted);
  max-width: 75ch;
  line-height: 1.85;
  font-size: 15px;
}

/* =========================================================
   CARDS / CONTENT
========================================================= */
.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius2);
  padding: 20px;
  transition: .22s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(560px 240px at 15% 0%, rgba(215,187,114,.09), transparent 66%);
  opacity:.65;
  pointer-events:none;
}

.card:hover{
  border-color: rgba(215,187,114,.20);
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
}

.tag{
  display:inline-flex;
  gap:8px; align-items:center;
  font-size: 12.5px;
  color: #f3ead4;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(215,187,114,.22);
  background: linear-gradient(135deg, rgba(215,187,114,.10), rgba(255,255,255,.02));
  margin-bottom: 12px;
  position:relative;
  z-index:1;
}

.content{
  color: rgba(242,242,243,.72);
  line-height: var(--lh);
  font-size: var(--p);
  white-space: pre-wrap;
  position:relative;
  z-index:1;
  text-wrap: pretty;
}

/* =========================================================
   ABOUT LAYOUT
========================================================= */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.left-img{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  position:relative;
  transform: translateZ(0);

  /* key: stretch to match the card */
  height: 100%;
  min-height: unset;
}

.left-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.03);
}

.left-img::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 260px at 55% 20%, rgba(215,187,114,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.74));
  pointer-events:none;
}

/* =========================================================
   EDUCATION
========================================================= */
.edu-full{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}

/* =========================================================
   RECOGNIZED (Gallery + Lightbox)
========================================================= */
.recognized-stack{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.gallery{
  border:1px solid rgba(215,187,114,.18);
  background: linear-gradient(135deg, rgba(215,187,114,.07), rgba(255,255,255,.015));
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow:hidden;
  position:relative;
}

.gallery-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gallery-head span{
  color: rgba(242,242,243,.62);
  font-size: 13.5px;
}

.gallery-track{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gallery-track::-webkit-scrollbar{ height: 8px; }
.gallery-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 99px; }
.gallery-track::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 99px; }

.g-item{
  flex: 0 0 auto;
  width: min(440px, 72vw);
  scroll-snap-align: start;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  position:relative;
  cursor: pointer;
  box-shadow: 0 22px 65px rgba(0,0,0,.60);
  transform: translateZ(0);
}

.g-item img{
  width:100%;
  height: 280px;
  object-fit: cover;
  display:block;
  filter: saturate(1.03) contrast(1.03);
}

.g-cap{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(12,12,14,.62);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.10);
  color: #f2f2f3;
  font-size: 13.5px;
  line-height: 1.35;
}

.gallery-controls{ display:flex; gap: 10px; }

.iconbtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  transition:.2s ease;
  font-size: 18px;
}

.iconbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(215,187,114,.22);
  background: rgba(215,187,114,.06);
}

/* =========================================================
   LIGHTBOX (Shared for Recognized + Career images)
========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.80);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 22px;
  z-index: 999;
}

.lightbox.show{ display:flex; }

/* Card */
.lb-card{
  width: min(980px, 100%);
  position:relative;
  border-radius: 22px;
  overflow:hidden; /* ✅ keep bar inside */
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  display:flex;
  flex-direction: column;
}

/* Image */
.lb-img{
  display:block;
  width: 100%;
  height: auto;
  max-height: 82vh; /* ✅ no big empty space */
  object-fit: contain;
  background: transparent;
}

/* Bottom bar (Prev / Close / Next) */
.lb-controls{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

.lb-controls button{ justify-self:center; }
.lb-controls .lb-prev{ justify-self:start; }
.lb-controls .lb-next{ justify-self:end; }

/* Shared style for arrows */
.lb-ctrl{
  width: 46px;
  height: 46px;
  border-radius: 16px;

  border:1px solid rgba(215,187,114,.65);
  background: rgba(215,187,114,.16);
  color: #d7bb72;

  cursor:pointer;
  transition:.2s ease;
  font-size: 24px;
  font-weight: 800;

  box-shadow: 0 10px 28px rgba(215,187,114,.18);
  backdrop-filter: blur(10px);
}

.lb-ctrl:hover{
  border-color: rgba(215,187,114,.95);
  background: rgba(215,187,114,.28);
  box-shadow: 0 0 22px rgba(215,187,114,.35);
  transform: translateY(-1px);
}

/* Close button (kept centered, gold themed) */
.lb-close{
  width: 54px;
  height: 54px;
  border-radius: 18px;

  border: 1px solid rgba(215,187,114,.85);
  background: rgba(215,187,114,.18);
  color: #d7bb72;

  cursor:pointer;
  transition:.2s ease;
  font-size: 16px;

  box-shadow: 0 14px 35px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.lb-close:hover{
  background: rgba(215,187,114,.30);
  box-shadow: 0 0 22px rgba(215,187,114,.35);
  transform: scale(1.05);
}

/* Responsive (mobile: image fills card, no top/bottom blanks) */
@media (max-width: 768px){
  .lightbox{ padding: 12px; }
  .lb-img{ max-height: 78vh; }
  .lb-controls{ padding: 12px 12px; }
}



/* =========================================================
   VIDEOS
========================================================= */
.videos-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}

.video-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius2);
  overflow:hidden;
  position:relative;
  transition: .22s ease;
  text-decoration:none;
  color: inherit;
}

.video-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(560px 240px at 15% 0%, rgba(215,187,114,.08), transparent 66%);
  opacity:.65;
  pointer-events:none;
}

.video-card:hover{
  border-color: rgba(215,187,114,.20);
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
}

.video-embed{
  position:relative;
  width:100%;
  padding-top: 56.25%;
  background: rgba(0,0,0,.18);
}

.video-embed video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}

.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.video-thumb{
  --thumb: none;
  position:relative;
  width:100%;
  padding-top: 56.25%;
  background:
    var(--thumb) center/cover no-repeat,
    radial-gradient(520px 260px at 55% 20%, rgba(215,187,114,.12), transparent 62%),
    linear-gradient(145deg, #0a0a0d, #0e0e14);
}


.video-thumb::after{
  content:"▶";
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 18px;
  border:1px solid rgba(215,187,114,.60);
  background: rgba(0,0,0,.28);
  color: #d7bb72;
  font-size: 18px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.video-meta{
  position:relative;
  padding: 14px 14px 16px;
}

.video-title{
  margin:0;
  font-size: 15.2px;
  line-height: 1.35;
  font-weight: 650;
  color: rgba(242,242,243,.94);
}

.video-link{
  display:inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  color: rgba(242,242,243,.70);
}

.video-card:hover .video-link{
  color: rgba(242,242,243,.90);
}

.v-span-3{ grid-column: span 3; }
.v-span-2{ grid-column: span 2; }

/* Mobile: stack videos in one column */
@media (max-width: 768px){
  .videos-grid{ grid-template-columns: 1fr; }
  .v-span-3, .v-span-2{ grid-column: auto; }
}

/* =========================================================
   ARTICLES
========================================================= */
.articles-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.article-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius2);
  overflow:hidden;
  position:relative;
  transition:.22s ease;
  text-decoration:none;
  color: inherit;
}

.article-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(560px 240px at 15% 0%, rgba(215,187,114,.08), transparent 66%);
  opacity:.65;
  pointer-events:none;
}

.article-card:hover{
  border-color: rgba(215,187,114,.20);
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
}

.article-img{
  position:relative;
  width:100%;
  height: 190px;
  background: rgba(0,0,0,.22);
}

.article-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.03) contrast(1.03);
}

.article-meta{
  position:relative;
  padding: 14px 14px 16px;
}

.article-title{
  margin:0;
  font-size: 15.4px;
  line-height: 1.35;
  font-weight: 650;
  color: rgba(242,242,243,.94);
}

.article-link{
  display:inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  color: rgba(242,242,243,.70);
}

.article-card:hover .article-link{ color: rgba(242,242,243,.90); }

@media (max-width: 980px){
  .articles-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){
  .articles-grid{ grid-template-columns: 1fr; }
  .article-img{ height: 200px; }
}


/* =========================================================
   CAREER HIGHLIGHTS GRID
========================================================= */
.highlights-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.h-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius2);
  padding: 20px;
  position:relative;
  overflow:hidden;
  transition:.22s ease;
}

.h-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(560px 240px at 15% 0%, rgba(215,187,114,.09), transparent 66%);
  opacity:.65;
  pointer-events:none;
}

.h-card:hover{
  border-color: rgba(215,187,114,.20);
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
}

.h-title{
  position:relative;
  margin:0 0 10px;
  font-size: 16.2px;
  color: var(--text);
  line-height: 1.35;
  font-weight: 600;
}

.h-text{
  position:relative;
  margin:0;
  color: rgba(242,242,243,.72);
  line-height: var(--lh);
  font-size: var(--p);
  white-space: pre-wrap;
  text-wrap: pretty;
}
/* =========================================================
   CONTACT (Polished + Photo) — FULL CSS
========================================================= */
.contact-wrap{
  border:1px solid rgba(215,187,114,.18);
  background: linear-gradient(135deg, rgba(215,187,114,.10), rgba(255,255,255,.015));
  border-radius: var(--radius2);
  padding: 22px;
  display:flex;
  align-items: stretch;
  justify-content:space-between;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

/* subtle glow */
.contact-wrap::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 220px at 12% 10%, rgba(215,187,114,.12), transparent 62%);
  opacity:.8;
  pointer-events:none;
}

/* Left content */
.contact-left{
  position: relative;
  flex: 1 1 0;
  min-width: 260px;
  z-index: 1;
}

.contact-left h3{
  margin:0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing:.2px;
}

/* Optional subtitle (if you use it later) */
.contact-sub{
  margin: 8px 0 0;
  color: rgba(242,242,243,.70);
  line-height: var(--lh);
  font-size: var(--p);
  max-width: 70ch;
}

/* Contact list (phone + email) */
.contact-list{
  margin: 14px 0 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.c-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.c-key{
  color: rgba(242,242,243,.62);
  font-size: 13px;
  min-width: 54px;
}

.c-val{
  color: rgba(242,242,243,.92);
  font-size: 14.5px;
  line-height: 1.6;
  word-break: break-word;
}

.c-val a{
  color: inherit;
  text-decoration: none;
}

.c-val a:hover{
  text-decoration: underline;
}

/* Actions moved under phone/email */
.contact-actions{
  position: relative;
  display:flex;
  gap:10px;
  margin-top: 14px;
  flex-wrap: wrap;
  z-index: 1;
}

/* Photo block (wider) */
.contact-photo{
  min-height: 140px;
  position: relative;
  flex: 1 1 0; /* ✅ wider */
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
  z-index: 1;
}

.contact-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03);
}

.contact-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 260px at 55% 20%, rgba(215,187,114,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.55));
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .contact-wrap{
    flex-direction: column;
  }

  .contact-photo{
    flex: 0 0 auto;
    height: 370px;
  }

  .contact-actions{
    justify-content: flex-start;
  }
}
/* =========================================================
   FOOTER
========================================================= */
footer{
  padding: 24px 0 38px;
  color: rgba(242,242,243,.58);
  font-size: 13.5px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-row{
  display:flex; align-items:center; justify-content: center;
  gap: 12px;
  flex-wrap:wrap;
}

.goldline{
  height:1px; width:100%;
  background: linear-gradient(90deg, rgba(215,187,114,.50), rgba(255,255,255,.06), transparent);
  margin: 10px 0 18px;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: .7s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
  opacity:1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .menu{ display:none; }
  .contact-wrap{ flex-direction: column; }

  .edu-full{ grid-template-columns: 1fr; }

  .g-item{ width: 84vw; }
  .g-item img{ height: 240px; }

  .highlights-grid{ grid-template-columns: 1fr; }
  .lb-img{ height: min(70vh, 225px); }

  .lb-ctrl{ width: 38px; height: 38px; font-size: 18px; }
  .lb-close{ width: 40px; height: 40px; font-size: 14px; }
}

/* =========================================================
   CAREER SLIDER
========================================================= */
.career-slider{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #0a0a0d, #0e0e14);
  box-shadow: var(--shadow);
}

.slides{
  display: flex;
  transition: transform 0.6s cubic-bezier(.77,0,.18,1);
}

.slide{
  min-width: 100%;
  height: 100%;
  position: relative;
}

.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrows (FIX: renamed to avoid conflict with header .nav) */
.snav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition: 0.3s;
  z-index: 5;
}

.snav:hover{
  background: rgba(215,187,114,0.25);
}

.sprev{ left: 20px; }
.snext{ right: 20px; }

/* Dots */
.dots{
  position: absolute;
  bottom: 18px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 6;
}

.dots span{
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.dots span.active{
  background: linear-gradient(90deg, #d7bb72, #fff2b0);
}




/* =========================
   Career Grid (replaces slider)
========================= */
.career-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #0a0a0d, #0e0e14);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 7px;
  overflow: hidden;
}

.c-item{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  cursor: pointer;
  position: relative;
  transform: translateZ(0);
  transition: .22s ease;
}

.c-item:hover{
  transform: translateY(-2px);
  border-color: rgba(215,187,114,.20);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
}

.c-item img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.03);
}

/* Mobile: 2 per row */
@media (max-width: 768px){

  /* نخلي الجريد 2 كولوم بشكل افتراضي */
  .career-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  /* أول 3 صور تاخد عرض كامل */


  /* نزبط ارتفاع الصور */
  .c-item img{
    height: 200px;
  }
}



/* =========================================================
   CAREER HIGHLIGHTS (Grouped Companies)
========================================================= */
.companies-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.company-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius2);
  padding: 18px;
  position:relative;
  overflow:hidden;
  transition: .22s ease;
}

.company-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(560px 240px at 15% 0%, rgba(215,187,114,.09), transparent 66%);
  opacity:.65;
  pointer-events:none;
}

.company-card:hover{
  border-color: rgba(215,187,114,.20);
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
}

/* Header */
.company-head{
  position: relative;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

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

.company-logo{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.company-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* علشان اللوجوهات */
  display:block;
  padding: 8px;
  filter: saturate(1.02) contrast(1.02);
}

.company-meta{
  min-width: 0;
}

.company-name{
  margin:0;
  font-size: 16.4px;
  line-height: 1.25;
  font-weight: 650;
  color: var(--text);
}

.company-loc{
  margin: 6px 0 0;
  color: rgba(242,242,243,.65);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Badge */
.company-badge{
  flex: 0 0 auto;
  font-size: 12.5px;
  color: #f3ead4;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(215,187,114,.22);
  background: linear-gradient(135deg, rgba(215,187,114,.10), rgba(255,255,255,.02));
  white-space: nowrap;
}

/* Roles grid inside company */
.roles-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.roles-grid.single{
  gap: 0;
}

.role-card{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 14px;
  position: relative;
  overflow:hidden;
}

.role-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(520px 220px at 18% 0%, rgba(215,187,114,.06), transparent 66%);
  opacity:.7;
  pointer-events:none;
}

.role-title{
  position: relative;
  margin: 0 0 8px;
  font-size: 14.8px;
  font-weight: 650;
  color: rgba(242,242,243,.92);
  line-height: 1.3;
}

.role-text{
  position: relative;
  margin: 0;
  color: rgba(242,242,243,.70);
  line-height: var(--lh);
  font-size: var(--p);
  text-wrap: pretty;
}

/* Responsive */
@media (max-width: 980px){
  .companies-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   CONTACT — Social Icons
========================================================= */
.contact-social{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
z-index: 1;
}

.social-ico{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  transition: .22s ease;
}

.social-ico:hover{
  transform: translateY(-1px);
  border-color: rgba(215,187,114,.26);
  background: rgba(215,187,114,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
}

.social-ico svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-row > div{
  width: 100%;
  text-align: center;
}

/* Compact Contact Section */
.contact-section{
  padding: 32px 0;
}


/* Compact Contact tweak */
.contact-left{gap:12px;}
.contact-fields{gap:10px;}
.contact-actions{gap:10px; flex-wrap:wrap; align-items:center;}

/* Social icons inline with buttons */
.contact-actions .social-ico{
  width: 44px;
  height: 44px;
}