/* Custom Font - PP Pangram Sans Rounded */
@font-face {
  font-family: 'Pangram Sans Rounded';
  src: url('./font/PPPangramSansRounded-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pangram Sans Rounded';
  src: url('./font/PPPangramSansRounded-CompactRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pangram Sans Rounded';
  src: url('./font/PPPangramSansRounded-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pangram Sans Rounded';
  src: url('./font/PPPangramSansRounded-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pangram Sans Rounded';
  src: url('./font/PPPangramSansRounded-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

:root{
  --bg:#262626;
  --card: #e6fbfd;
  --muted:#6b7280;
  --danger:#ef2b2d;
  --accent: #2A98CA;      /* teal / cyan from logo */
  --accent-2: #ff9a2a;    /* orange from logo */
  --accent-3: #76c7ff;    /* light blue */
  --accent-4: #66c28a;    /* soft green */
  --glass: rgba(255,255,255,0.03);
  --radius:16px;
  --max-width:1100px;
  font-size:16px;
}
*{box-sizing:border-box}
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:transparent;
  color: #222222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.caps{ text-transform: capitalize;}
h1,h2,h3,h4,h5,h6{color:var(--accent) !important; margin-top:0;font-weight:600 !important;line-height:1.25;font-family:'Pangram Sans Rounded', 'Sora', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
p{margin-bottom:1rem; line-height: 20px; font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial; }
.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; 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:0.5rem;align-items:center !important;background: linear-gradient(135deg, #2aa5c6 0%, #1e8ba8 100%);margin: 0 auto;padding: 10px 10px 12px 10px;border-radius: 50px;box-shadow: 0 4px 15px rgba(0,0,0,0.2);position: absolute;width:min(98vw, 1280px);top: 15px;left: 50%;transform: translateX(-50%);z-index: 100;}

.main-nav .nav-links{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;min-width:0;}

.main-nav a.nav-btn{color:#fff;text-decoration:none;padding:.7rem 0.7rem;border-radius:50px; font-weight:600; font-size:.75rem; width:auto; white-space:nowrap; text-transform:uppercase; transition: all 0.3s ease; background: transparent;}

.main-nav a.nav-btn:hover{background:rgba(255,255,255,0.15); transform: translateY(-1px);}

.main-nav a.nav-btn.cta{background:linear-gradient(135deg,#ff9a5c,#ff7a3a); color:#fff !important; box-shadow: 0 2px 8px rgba(255,122,58,0.4); }
.main-nav a.nav-btn.cta:hover{background:linear-gradient(135deg,#ff8a4c,#ff6a2a); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(255,122,58,0.6);}
.main-nav .nav-btn.cta{margin-left:auto;flex-shrink:0;}

/* 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=7');
  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:480px;object-fit:contain; border:none;}

/* Center conference logo */
.hero-center{flex:1;display:flex;align-items:center;justify-content:center;margin:0 auto !important;}
.conference-logo img{width:100%;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:'Pangram Sans Rounded', '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:'Pangram Sans Rounded', '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:'Pangram Sans Rounded', '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{background:#41a7c4;padding:2rem 2.5rem;min-width:140px;text-align:center;border-right:5px solid #8bc34a;position:relative}
.countdown .unit:last-child{border-right:none}
.countdown .unit.muted{opacity:1}
.countdown .unit .num{font-weight:800;font-size:4rem;color:#fff;line-height:1;display:block;margin-bottom:.5rem;font-family:'Pangram Sans Rounded', 'Sora', Inter, sans-serif}
.countdown .unit .label{font-size:1.2rem;color:#fff;text-transform:capitalize;letter-spacing:.05em;font-weight:600;font-family:'Pangram Sans Rounded', 'Sora', Inter, sans-serif}

@media (max-width:768px){
  .countdown .unit{min-width:100px;padding:1.5rem 1.5rem;border-right:3px solid #8bc34a}
  .countdown .unit .num{font-size:3rem}
  .countdown .unit .label{font-size:1rem}
}

@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)}
}

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

.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=7');
  background-size:cover;background-position:center bottom;
  }
  p{ font-size: 12px; line-height: 16px;}
  .text-justify{ text-align: left !important; } 
  .hero-full{min-height:90vh;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:.8rem;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:12px; color:var(--bg); }
  .cme-badge{width:80px; margin-right: 15%;}
  .hero-card{padding:1.25rem; text-align: center;}
  .hero-title{font-size:2rem; text-align:center; line-height: 2.3rem;}
  /* 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}
}
.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:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.card img{width:100%;object-fit:cover;border-radius:8px; margin-bottom: 10px; background:linear-gradient(180deg, rgba(236, 231, 231, 0.2), rgba(186, 183, 204, 0.3));}

.section{padding:3rem 0}
.section.alt{background:linear-gradient(180deg, rgba(96,186,153,0.001),  rgba(245,153,67,0.8))}
.grid{display:grid;gap:1.25rem}
.program-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.speakers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1rem}
.speakers-grid figure{background:var(--card);padding:0;border-radius:10px;overflow:hidden;text-align:center}
.speakers-grid img{width:100%;height:140px;object-fit:cover;display:block}
.speakers-grid figcaption{padding:.75rem;color:var(--muted);font-size:.95rem}
.btn{ border-radius: 32px !important;}
.cta-card{background:linear-gradient(90deg, rgba(124,58,237,0.08), rgba(6,182,212,0.04)) !important;padding:2rem;border-radius:14px;text-align:center}
.btn{display:inline-block;text-decoration:none;padding:.6rem .9rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none}
.btn.ghost{background:transparent; color:var(--bg); border:2px dashed #333;}
.btn.large{padding:1rem 1.2rem;font-size:1.05rem}

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


/* 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; }

@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:380px !important;}


}

/* Responsive */
@media (max-width:980px){
  .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 .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0.25rem;width:100%;}
  .main-nav a.nav-btn{width:100%;text-align:center;padding:.6rem 1rem;margin:0.02rem 0}
  .main-nav .nav-btn.cta{margin-left:0;margin-top:0.25rem;}
}
@media (max-width:520px){
  h1{font-size:1.6rem}
  .container{padding:1rem}
  .brand img{height:80px;}
}


#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;              /* IMPORTANT */
    justify-content: center;    /* Horizontal center */
    align-items: center;        /* Vertical center */
    z-index: 9999;
  }

    /* 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; }

/* Custom SweetAlert2 Theme */
.my-swal-popup {
  background: #f1f1f1 !important;   /* modal background */
  color: #333 !important;            /* text color */
  border-radius: 20px !important;    /* rounded corners */
  padding:20px !important;
  font-family: 'Sora', sans-serif !important;
}

.my-swal-title {
  font-size: 22px !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  color: #f59943 !important;         /* title color */
}

.my-swal-text {
  font-size: 16px !important;
  opacity: 0.9 !important;
}

.my-swal-confirm {
  background: #f59943 !important;
  color: #000 !important;
  border-radius: 10px !important;
  padding: 10px 25px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.my-swal-icon {
  transform: scale(1.1);             /* Bigger icon */
  margin-bottom: 15px !important;
}

/* Background overlay blur */
.swal2-backdrop-show {
  backdrop-filter: blur(6px) !important;
}    

.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:1rem; border:1px solid var(--accent); background: rgba(255,255,255, 0.2); border-radius:14px;overflow:hidden}
.agenda-item{display:grid;grid-template-columns:100px 1fr 40px;gap:1rem;padding:1rem;border-bottom:1px dotted rgba(17,33,31,0.4);}
.agenda-item:last-child{border-bottom:none}
.agenda-time{font-weight:600;color:#000;font-size:.85rem;text-align:left; vertical-align: top;}
.agenda-meta{display:flex;flex-direction:column;gap:.3rem}
.agenda-title{font-weight:600;color:#000;margin:0;font-size:.85rem;}
.bold{ font-weight: 700 !important; }
.session{ background:rgba(255, 255, 255, 0.5); border-left:6px solid #2a98ca;}
.agenda-speaker{display:flex;align-items:center;gap:.6rem;color:var(--bg);font-size:.95rem;}
.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;}
.mod{align-items:flex-start; font-size:0.85rem;}
.faq{ background:rgba(255, 255, 255, 0.08); border-left:6px solid #f59943;}
.break{ background:rgba(245, 153, 67, 0.2);}
::placeholder{ color:#ddd !important; }
.form-check-input{ width:18px; height:18px; margin-right:8px; border-radius:4px; border:1px solid var(--muted); }
.agenda-toggle{background:transparent; font-size: .75rem; border:1px dotted var(--muted) ; border-radius: 32px; color:var(--bg);cursor:pointer;font-weight:500}
.form-control{ border-color:#999 !important; outline:none; }

.form-control:focus{ box-shadow: 0 0 0 3px rgba(38,180,214,0.3); border-color: var(--accent); outline:none; }
.agenda-bio{padding:1rem 1rem;color:var(--bg);font-size:.95rem;display:none}
.agenda-bio.open{display:block}

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

.custom-card{
    transition: all 0.3s ease;
    border-radius: 16px;
    border: 1px solid rgba(42, 155, 201, 0.3);
    box-shadow: 0 4px 15px rgba(42, 155, 201, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #e8f7fc 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    position: relative;
    overflow: hidden;
}
.custom-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2a9bc9 0%, #60ba99 50%, #eb994a 100%);
}
.custom-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(42, 155, 201, 0.25);
}
.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: 'Pangram Sans Rounded', 'Sora', Inter, sans-serif;
}
/* subtle hover highlight for agenda rows */
.agenda-item:hover{background:linear-gradient(90deg, rgba(38,180,214,0.02), rgba(255,154,42,0.01));transform:translateY(-2px);transition:all .18s ease}


.spc img{
    transition: all 1s;
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    background: linear-gradient(45deg, #f59943, #f9ce91, #2a98ca);
}
.spc:hover img{
    border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
    transform: scale(1.03);
}

@media (max-width:980px){
  .spc img{height:260px;}
}

@media (max-width:520px){
  .spc img{height:220px;}
}

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; text-transform: 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; text-transform: capitalize; }


.speaker-card {
    position: relative; 
}


.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;}