/* ============================================
   BASE.CSS – Variables, Reset, Global Styles
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --blue:#003893;
  --gold:#FFD700;
  --gold2:#e6b800;
  --dark:#060f24;
  --mid:#0a1f4e;
  --light:#f0f5ff;
  --gray:#555;
  --white:#fff;
  --shadow:0 4px 20px rgba(0,56,147,.1);
  --shadow-hover:0 20px 50px rgba(0,56,147,.22);
  --radius:16px;
  --radius-sm:10px;
  --tr:.4s cubic-bezier(.4,0,.2,1);
}

html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Arial,sans-serif;background:#fff;overflow-x:hidden;width:100%;color:#222}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;object-fit:cover}

/* ── SECTION COMMONS ── */
.section{padding:64px 40px;width:100%}
.section-alt{background:var(--light)}

.sec-header{
  text-align:center;margin-bottom:48px;
  max-width:700px;margin-left:auto;margin-right:auto;
}
.sec-tag{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--blue);font-size:11px;font-weight:800;
  padding:5px 18px;border-radius:6px;display:inline-block;
  margin-bottom:14px;text-transform:uppercase;letter-spacing:.8px;
  box-shadow:0 4px 12px rgba(255,215,0,.25);
}
.sec-title{font-size:30px;font-weight:900;color:var(--blue);margin-bottom:12px;letter-spacing:-.3px}
.sec-sub{color:var(--gray);font-size:15px;line-height:1.7}
.sec-line{width:70px;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold2));margin:14px auto 0;border-radius:2px}

/* ── 3D CARD ── */
.card3d{
  border-radius:var(--radius);position:relative;overflow:hidden;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  cursor:pointer;
}
.card3d::after{
  content:'';position:absolute;top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.1),transparent);
  transform:skewX(-15deg);transition:.6s;z-index:2;pointer-events:none;
}
.card3d:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-hover)}
.card3d:hover::after{left:150%}

/* ── BUTTONS ── */
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--blue);padding:14px 34px;border-radius:8px;
  font-weight:800;font-size:15px;transition:all .25s;display:inline-block;
  box-shadow:0 6px 20px rgba(255,215,0,.3);
}
.btn-gold:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 30px rgba(255,215,0,.45)}
.btn-outline{
  border:2px solid var(--gold);color:var(--gold);
  padding:12px 32px;border-radius:8px;font-weight:700;
  font-size:15px;transition:all .25s;display:inline-block;
}
.btn-outline:hover{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--blue);transform:translateY(-3px)}

/* ── FADE UP ── */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .65s,transform .65s}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE PADDING ── */
@media(max-width:860px){.section{padding-left:20px;padding-right:20px}}
@media(max-width:640px){.sec-title{font-size:24px}}


/* Fit images inside all round-square avatars */
.lb-avatar img,
.comm-avatar img,
.pres-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
} 


.lb-avatar img {
  width:100%;height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

/* Logo image fit */
.nav-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}