:root{
  --bg:#1a1a1a;
  --card: #ffffff;
  --muted:#64748b;
  --danger:#ef2b2d;
  --accent: #008097;
  --accent-2: #ff9a2a;
  --accent-3: #023E6F;
  --accent-4: #66c28a;
  --glass: rgba(255,255,255,0.08);
  --radius:20px;
  --max-width:1200px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.15);
  font-size:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:100px;}
html,body{height:100%;margin:0;padding:0}
/* Prevent transient horizontal scrollbar caused by subtle overflow */
html,body{overflow-x:hidden}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background:#FFF;
  color: #333;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.7;
  letter-spacing:-0.01em;
}
#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    backdrop-filter: blur(4px);
  }

    /* Spinner */
    .spinner {
      border: 3px solid #f1f1f1;
      border-top: 3px solid #336;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .success { color: green; }
    .error { color: red; }
.caps{ text-transform: capitalize;}
h1,h2,h3,h4,h5,h6{color:#023E6F !important; margin-top:0;font-weight:700 !important;line-height:1.2;font-family:'Sora', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; letter-spacing:-0.02em; }
p{margin-bottom:1.25rem; line-height: 1.7; font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial; color:#475569; }
.text-justify{ text-align: justify !important; } 
h1{ font-size: 2.5rem;}
h2{ font-size: 2.2rem;}
h3{ font-size: 2rem;}
h4{ font-size: 1.8rem;} 
h5{ font-size: 1.2rem;}
h6{ font-size: 1rem;}
h7{ font-size: .9rem; color:var(--bg);}
h8{ font-size: .8rem; color:var(--bg);}
h9{ font-size: .7rem; color:var(--bg);}
.m-0{ margin: 0 !important; }
.lg{ font-size: 1.25rem; }
.sm{ font-size: 0.875rem; }
.xs{ font-size: 0.75rem; }
.resp{ width: 100%;}
.bg-transparent{ background: transparent !important;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem; background: transparent !important;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{color:var(--accent);font-weight:700;text-decoration:none;font-size:1rem;display:flex;align-items:center;gap:0.6rem}
.brand img{height:120px;width:auto;display:block;max-height:120px;}
.site-header{/* backdrop-filter:blur(6px);*/top:0;  background:transparent;}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,0.04);padding:.5rem 0.75rem;border-radius:10px;color:#fff;font-size:1.2rem}
.main-nav{display:flex; gap:.5rem; align-items:center; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px) saturate(180%); margin: 0 auto; padding: 8px 12px; border-radius: 50px; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; border: 1px solid rgba(255,255,255,0.3);}
.main-nav a.nav-btn{color:#334155;text-decoration:none;padding:.75rem 1.3rem;border-radius:50px; font-weight:600; font-size:.85rem; text-transform:uppercase; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent;}
.main-nav a.nav-btn:hover{background:rgba(42,152,202,0.1); transform: translateY(-2px); color:var(--accent);}
.main-nav a.nav-btn.cta{background:linear-gradient(135deg,#2A98CA,#008097); color:#fff !important; box-shadow: 0 4px 12px rgba(42,152,202,0.35);}
.main-nav a.nav-btn.cta:hover{background:linear-gradient(135deg,#023E6F,#008097); transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(42,152,202,0.5);}
/* Branded title styles matching logo */
.logo-badge{width:86px;height:86px;flex:0 0 86px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));display:flex;align-items:center;justify-content:center;padding:6px;box-shadow:0 6px 20px rgba(2,6,23,0.06)}
.logo-badge img{max-width:100%;height:auto;display:block}
.hero-header .hero-title{margin:0;padding:0}
.title-conference{color:var(--bg);font-weight:700;font-size:1.5rem;margin-right:.6rem}
.tagline{color:#111;font-weight:600;font-size:1rem}

/* CTA subtle pulse */
.btn.primary.pulse{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 30px rgba(255,154,42,0.14);transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s cubic-bezier(.2,.9,.3,1)}
.hero{padding:0;}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}

/* Full-bleed hero with subtle Ken Burns animation */
.hero-full{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden;margin-top:0;padding-top:0}
/* animated background layer */
.hero-full::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background-image:url('./slider.jpg?v=1');
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  transform-origin:center center;
}
.hero-overlay{position:absolute;inset:0;background:transparent;pointer-events:none;z-index:1}
.hero-wrap{position:relative;z-index:2;padding:5rem 2rem 3rem;width:100%;max-width:1100px;margin:0 auto; display:flex; flex-direction:column; justify-content:space-between; min-height:90vh;}

/* Top logos and organization text */
.hero-top-logos{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}
.partner-logos{display:flex;gap:1.5rem;align-items:center}
.partner-logo{width:350px;object-fit:contain}

/* Center conference logo */
.hero-center{flex:1;display:flex;align-items:center;justify-content:center;margin:0 auto !important;}
.conference-logo img{width:460px;height:auto;display:block}

/* Bottom event details */
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;}
.event-details{display:flex;gap:0rem;align-items:flex-end;}
.event-date{color:#ff9a5c;text-align:left;}

.date-large{font-size:4rem;font-weight:800;line-height:.9;display:block; font-family:'Sora', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.date-month{font-size:1.8rem;font-weight:700;text-transform:capitalize; font-family:'Sora', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.event-venue{color:#FFF;font-size:1rem;font-weight:600; line-height:1.3; font-family:'Sora', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.cme-badge{width:150px}
.cme-badge img{width:100%;height:auto}

/* two-column layout inside hero */
.hero-columns{display:flex;gap:1rem;align-items:flex-start}
.hero-card{background:linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.001));padding:2rem;border-radius:14px;flex:1;min-width:0}

.host-card{background:linear-gradient(0deg, rgba(255,255,255,0.8), rgba(255,255,255,0.001));padding:4% 3%;border-radius:12px;flex:0 0 280px;box-shadow:0 6px 20px rgba(2,6,23,0.08);color:var(--bg)}
.host-title{font-size:1.2rem !important;color:var(--bg); margin:0 0 1rem ; font-weight:700; text-align: center;}
.host-body{margin:0;color:#000; text-align: center;}

.hero-title{font-size:3.5rem; color:var(--accent) !important; margin:0 0 1rem; line-height:3rem; font-weight: 700; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); letter-spacing: -1px}
.hero-title span{display:inline-block; font-weight: 700; color:var(--accent-2);}
.hero-sub{color:#000 !important; margin:0 0 1rem; font-size: 1.2rem;}
.countdown{display:inline-block;background:transparent;padding:0;border-radius:0;color:#fff;margin-bottom:0}

/* Styled countdown grid */
.countdown-grid{display:flex;gap:0;align-items:stretch;justify-content:center}
.countdown .unit{padding:0.5rem !important;min-width:110px;text-align:center;border:2px dotted #008097;position:relative; background:rgba(255,255,255,0.0); margin:0 4px; border-radius:16px; backdrop-filter:blur(10px);}
.countdown .unit.muted{opacity:0.9}
.countdown .unit .num{font-weight:600;font-size:3rem;color:#ffffff;line-height:1;display:block;margin-bottom:.2rem;font-family:'Sora', Inter, sans-serif; text-shadow:0 2px 8px rgba(0,0,0,0.2);}
.countdown .unit .label{font-size:0.85rem;color:rgba(255,255,255,0.95);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-family:'Sora', Inter, sans-serif;}

@media (max-width:768px){
  .countdown .unit{width:auto !important; padding:1.5rem 0.5rem;}
  .countdown .unit .num{font-size:1.6rem}
  .countdown .unit .label{font-size:0.55rem !important;}
}

@media (max-width:520px){
  .countdown .unit{min-width:70px;padding:1rem 1rem}
  .countdown .unit .num{font-size:2.2rem}
  .countdown .unit .label{font-size:.85rem}
}

@keyframes kb-zoom{
  0%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.06) translateY(-6px)}
  100%{transform:scale(1.12) translateY(-12px)}
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .hero-full::before{animation:none}
  *{animation:none !important; transition:none !important;}
}

.flag-badge{ position: absolute; left:3%; background: transparent !important; box-shadow:none !important;}        
.flag-badge i{ font-size:34px !important; border-radius:50% !important;}    

@media (max-width:980px){
  .hero-full::before{
  background-image:url('./mobile-slider.jpg?v=4');
  background-size:cover;background-position:center bottom;
  }
  p{ font-size: 14px; line-height: 1.6;}
  .text-justify{ text-align: left !important; } 
  .hero-full{min-height:100vh;background-position:center center;margin-top:0 !important;padding-top:0 !important}
  .hero-wrap{padding:0 1rem 2rem; min-height:auto}
  .hero-top-logos{flex-direction:column;gap:1rem;margin-bottom:1.5rem;padding-top:0}
  .organization-text{font-size:.85rem;max-width:100%}
  .hero-center{margin:1.5rem 0}
  .hero-bottom{padding-top:25px; flex-direction:column;gap:4rem;align-items:end}
  .event-details{flex-direction:column;gap:1rem;align-items:center;text-align:center}
  .date-large{font-size:2rem;}
  .date-month{font-size:1rem}
  .event-date{ text-align: center !important;}
  .event-venue{ font-size:13px; color:var(--bg); }
  .cme-badge{width:80px; margin-right: 15%;}
  .hero-card{padding:1.5rem; text-align: center;}
  .hero-title{font-size:2.2rem; text-align:center; line-height: 2.5rem;}
  /* Stack hero columns and make both cards full width on smaller screens */
  .hero-columns{flex-direction:column;gap:1rem}
  .hero-card{max-width:none;width:100%}
  .host-card{flex:1;width:100%}
  .brand img{height:36px;max-height:40px}
  .container{padding:0 1rem;}
  h1{font-size:2rem;}
  h2{font-size:1.8rem;}
  h3{font-size:1.5rem;}
}
.eyebrow{color:var(--accent-2);font-weight:600}
.lead{color:var(--muted);margin:.6rem 0 1rem}
.meta{list-style:none;padding:0;margin:0 0 1.2rem;color:var(--muted)}
.hero-actions .btn{margin-right:.6rem}
.card{background:#ffffff;padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow-md); border:1px solid rgba(226,232,240,0.8); transition:all 0.3s ease;}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.card img{width:100%;object-fit:cover;border-radius:12px; margin-bottom: 12px; background:linear-gradient(180deg, rgba(236, 231, 231, 0.3), rgba(186, 183, 204, 0.4));}

.section{padding:4rem 0;}
.section.alt{background:linear-gradient(180deg, rgba(96,186,153,0.001),  rgba(245,153,67,0.8))}
.grid{display:grid;gap:1.5rem}
.program-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.speakers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin-top:1.5rem}
.speakers-grid figure{background:#ffffff;padding:0;border-radius:16px;overflow:hidden;text-align:center; box-shadow:var(--shadow-md); border:2px solid rgba(226,232,240,0.6); transition:all 0.3s ease;}
.speakers-grid figure:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.speakers-grid img{width:100%;height:180px;object-fit:cover;display:block}
.speakers-grid figcaption{padding:1rem;color:#475569;font-size:1rem; font-weight:600;}
.btn{ border-radius: 32px !important; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight:600; letter-spacing:0.02em;}
.cta-card{background:linear-gradient(135deg, rgba(42,152,202,0.08) 0%, rgba(255,154,42,0.08) 100%) !important;padding:3rem 2rem;border-radius:24px;text-align:center; border:2px solid rgba(42,152,202,0.15); box-shadow:var(--shadow-lg);}
.btn{display:inline-block;text-decoration:none;padding:.75rem 1.5rem;border-radius:50px;border:2px solid rgba(226,232,240,0.8);color:#475569; box-shadow:var(--shadow-sm);}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;border:none; box-shadow:0 2px 8px rgba(42,152,202,0.3);}
.btn.primary:hover{box-shadow:0 6px 24px rgba(42,152,202,0.4); transform:translateY(-3px) scale(1.02);}
.btn.ghost{background:transparent; color:var(--bg); border:2px solid #cbd5e1;}
.btn.ghost:hover{background:#f8fafc; border-color:var(--accent);}
.btn.large{padding:1.1rem 2rem;font-size:1.1rem; font-weight:700;}

.site-footer{padding:2rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02); background:#1e293b;}


/* Also style the original #about structure so content remains unchanged but gets the new look */
#about{background:linear-gradient(180deg, rgba(95,90,193,0.03), rgba(6,182,212,0.01));padding:4rem 0}

#about h2{font-size:2rem;margin:0 0 .6rem;color:var(--bg);font-weight:700}
#about .card{box-shadow:0 10px 30px rgba(15,23,36,0.06);border-radius:12px}

.ledby{ font-size: 17px !important;  line-height: 22px !important; color: #222 !important; margin:0 0 0 0; font-weight: 700 !important; }



.custom-card {
    background: rgba(255, 255, 255, 0.02);    /* transparent white */
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);              /* blur effect (glass) */
    -webkit-backdrop-filter: blur(10px);
    
    border-radius: 18px;
    padding: 25px;
    color: #fff;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Hover effect */
.custom-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

.custom-card h3 {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 600;
}

.custom-card p {
    margin: 0;
    font-size: 15px;
    opacity: 0.85;
}


.speaker-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: transparent;
  position: relative;
}
.speaker-card a{ text-decoration: none; color: inherit; display:block; }

/* Image container: fixed square area to keep layout consistent */
.speaker-image {
  width: 75% !important;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto;
  border: 3px solid rgba(47,70,123,0.9);
  display:flex;align-items:center;justify-content:center;
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  position: relative;
  z-index: 1;
}

/* Rounded variant keeps a circular look */
.speaker-image.round { border-radius: 50%; }

/* Square variant with subtle rounding */
.speaker-image.square { border-radius: 12px; }

.speaker-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* default: cover the box while keeping aspect */
  /* bias upper-center for portraits so faces don't get cropped */
  object-position: 50% 15%;
  display: block;
}

/* Full variant shows the entire image (contain) but keeps container size */
.speaker-image.full img {
  object-fit: contain;
  padding: 8px; /* small padding so contained images don't touch edges */
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
}

.speaker-image:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }

.flag-icon {
  position: absolute;
  top: 5px;
  right: 5px; /* align to image right edge regardless of container */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.6);
  background: #fff;
}

.speaker .fi{ font-size: 1.2rem; border-radius: 32px; }
.fi { font-size: 1.2rem; border-radius: 12px; }
.flag-icon .fi { width: 100%; height: 100%; display: block; background-size: cover; }

.speaker-info{
  color: #fff;
  padding: 12px 2px;
  margin-top: 5px;    /* small overlap to sit nicely under taller image */
  position: relative;
  z-index: 3; /* ensure info panel sits above the image */
}

.speaker-info h4 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.speaker-info p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }


.speaker-image.full img {
    /* Show the whole image scaled to fit the container without cropping.
       This will letterbox inside the circle (or square) so the whole head shows. */
    object-fit: contain;
    object-position: center;
    background: rgba(255,255,255,0.03);
    height: 100%;
    width: 100%;
  }

  .speaker-image.square {
    border-radius: 8px !important;
    overflow: hidden;
  }
  .speaker-image.square img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

.glass-modal {
  background: rgba(45, 47, 71, 0.3); /* Transparent dark */
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: #fff;
}

#bioModal .modal-header .btn-close {
  filter: invert(1); /* Make close button white */
}

#bioModal .modal-body {
  color: #f0f0f0;
  font-size: 16px;
}

@media (max-width:980px){
  .ledby{ font-size: 13px !important; line-height: 16px !important; color: #222 !important; margin:0 0 0 0; font-weight: 800 !important; }
  .conference-logo img{max-width:240px;}
  .partner-logo{width:280px !important;}


}

.dates {font-size:1.8rem; color:#fff !important; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,0.2);}
  .venue{ font-size:1.3rem; font-weight:400; color:#fff;}

/* Responsive */
@media (max-width:980px){
  .dates {font-size:1.2rem; color:#fff !important; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,0.2);}
  .venue{ font-size:0.85rem; font-weight:400; color:#fff;}
  .hero-grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex !important;position:fixed;top:-4px;right:30px;z-index:1001;background:rgba(42,165,198,1);color:#fff;border:none;padding:.7rem 1rem;border-radius:8px;font-size:1.5rem;cursor:pointer;}
  .main-nav{position:fixed;top:35px;right:30px;left:auto;transform:none;background:linear-gradient(135deg, #2aa5c6 0%, #1e8ba8 100%);padding:1rem;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.5);flex-direction:column;display:none;z-index:1000;min-width:220px;max-width:90vw}
  .main-nav.open{display:flex !important}
  .main-nav a.nav-btn{width:100%;text-align:center;padding:.8rem 1rem;margin:0.2rem 0}
}
@media (max-width:520px){
  h1{font-size:1.6rem}
  .container{padding:1rem}
  .brand img{height:80px;}
}

.btn-xs{padding:.4rem .6rem !important; font-size:.75rem !important; border:2px dashed var(--bg) !important;}
/* Tabs: custom pill style */
.tabs-custom{display:flex;gap:.5rem;align-items:center;justify-content:flex-start;margin-bottom:1.5rem}
.tabs-custom .tab{padding:1rem 1.5rem;border-radius:999px;background:transparent;border:1px solid var(--muted);color:var(--muted);font-weight:700;cursor:pointer;transition:all .25s ease}
.tabs-custom .tab.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(38,180,214,0.12)}
.tabs-custom .tab:hover{background:rgba(38,180,214,0.06);color:var(--text)}

/* Agenda list */
.agenda{margin-top:1.5rem; border:2px solid rgba(42,152,202,0.2); background: #ffffff; border-radius:20px;overflow:hidden; box-shadow:var(--shadow-md);}
.agenda-item{display:grid;grid-template-columns:110px 1fr 50px;gap:1.5rem;padding:1.5rem;border-bottom:1px solid rgba(226,232,240,0.6); transition:all 0.3s ease;}
.agenda-item:last-child{border-bottom:none}
.agenda-time{font-weight:700;color:var(--accent);font-size:1rem;text-align:left; vertical-align: top; background:rgba(42,152,202,0.08); padding:0.5rem 0.75rem; border-radius:12px; display:inline-block;}
.agenda-meta{display:flex;flex-direction:column;gap:.5rem}
.agenda-title{font-weight:700;color:#1e293b;margin:0; font-size:1.05rem;}
.agenda-speaker{display:flex;align-items:center;gap:.75rem;color:#64748b;font-size:1rem;}
.speaker-avatar{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:0 0 44px}
.speaker-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.agenda-actions{display:flex;align-items:center;justify-content:center;}
.agenda-toggle{background:rgba(42,152,202,0.08); font-size: .85rem; border:2px solid rgba(42,152,202,0.2); border-radius: 32px; color:#2A98CA;cursor:pointer;font-weight:600; padding:0.5rem 1rem; transition:all 0.3s ease;}
.agenda-toggle:hover{background:rgba(42,152,202,0.15); border-color:rgba(42,152,202,0.4); transform:scale(1.05);}

.agenda-bio{padding:1.5rem 1.5rem;color:#475569;font-size:1rem;display:none; background:rgba(42,152,202,0.03); border-radius:12px; margin-top:1rem; line-height:1.7;}
.agenda-bio.open{display:block; animation:fadeIn 0.3s ease;}

@media (max-width:720px){
  .agenda-item{grid-template-columns:80px 1fr 36px}
  .speaker-avatar{width:40px;height:40px}
}

.custom-card{
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    border: 2px solid rgba(42, 155, 201, 0.15);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    position: relative;
    overflow: hidden;
}
.custom-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2a9bc9 0%, #60ba99 50%, #eb994a 100%);
}
.custom-card:hover{
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-xl);
    border-color: rgba(42, 155, 201, 0.3);
}
.custom-card .card-body{ 
    padding: 30px 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.custom-card .card-body h7{ 
    font-weight: 700;
    line-height: 1.4 !important;
    font-size: 1rem !important;
    color: #2a9bc9 !important;
    margin: 0;
    font-family:'Sora', Inter, sans-serif;
}
/* subtle hover highlight for agenda rows */
.agenda-item:hover{background:linear-gradient(90deg, rgba(42,152,202,0.04), rgba(255,154,42,0.02));transform:translateX(4px);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}


.spc img{
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #f59943, #f9ce91, #2a98ca);
}
.spc:hover img{
    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; 
    padding: 8px;
    transform: scale(1.05);
    box-shadow: var(--shadow-xl);
}

a.view { font-size: 1rem !important; color: #444 !important; margin:35px 0 0 0; text-align: center; font-weight: 500 !important; text-decoration:none !important; capitalize;}
.spc a h2 { font-size: 1rem !important; color: #444 !important; margin:35px 0 0 0; text-align: center; font-weight: 500 !important; text-decoration:none !important; capitalize; }


.speaker-card {
    position: relative; /* required for absolute child */
}


.flag-badge{ position: absolute; left:3%; top:0; z-index:10; background:#FFF !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.3) !important; padding: 2px; border-radius: 50%;}        
.flag-badge i{ font-size:34px !important; border-radius:50% !important;}