/* ======================================================
   KSAA Conference — Global Theme
   Primary:  #092c43 (dark navy)
   Secondary:#fb3238 (red)
====================================================== */
:root {
  --primary: #092c43;
  --primary-light: #11405f;
  --secondary: #fb3238;
  --secondary-dark: #d81f25;
  --muted: #6c7a86;
  --bg-soft: #f4f7fa;
}

* { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color: #22313a;
  background: #fff;
  line-height: 1.7;
}

a { text-decoration: none; }

/* ---- Korean sub-line helper ---- */
.lang-ko {
  display: block;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 400;
  margin-top: 2px;
}
.text-white .lang-ko,
.footer-ksaa .lang-ko,
.hero .lang-ko { color: rgba(255,255,255,.75); }

/* ---- Top bar ---- */
.topbar {
  background: var(--primary);
  color: #fff;
  font-size: .85rem;
  border-bottom: 2px solid var(--secondary);
}
.topbar a { color: #fff; opacity: .9; }
.topbar a:hover { color: var(--secondary); opacity: 1; }

/* ---- Navbar ---- */
.navbar-ksaa {
  background: #fff;
  box-shadow: 0 2px 14px rgba(9,44,67,.10);
}
.navbar-ksaa .navbar-brand { font-weight: 800; color: var(--primary); letter-spacing: .5px; padding: 0; }
.navbar-ksaa .navbar-brand span { color: var(--secondary); }
.navbar-ksaa .brand-logo { height: 56px; width: auto; object-fit: contain; }
@media (max-width: 991px){ .navbar-ksaa .brand-logo { height: 46px; } }
.navbar-ksaa .nav-link {
  color: var(--primary) !important;
  font-weight: 600;
  font-size: .82rem;
  padding: .35rem .55rem !important;
  line-height: 1.2;
  text-align: center;
}
.navbar-ksaa .nav-link small {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  margin-top: 1px;
}
/* hide default Bootstrap caret — replaced by explicit chevron icon */
.navbar-ksaa .dropdown-toggle::after { display: none; }
.navbar-ksaa .nav-caret { font-size: .56rem; vertical-align: 1px; opacity: .7; }
.navbar-ksaa .nav-link:hover,
.navbar-ksaa .nav-link.active { color: var(--secondary) !important; }

/* Mobile / collapsed menu: left-aligned vertical list */
@media (max-width: 1199.98px){
  .navbar-ksaa .navbar-nav { padding-top: .5rem; }
  .navbar-ksaa .nav-link { text-align: left; padding: .5rem .25rem !important; font-size: .95rem; }
  .navbar-ksaa .nav-link small { font-size: .8rem; display: inline; margin-left: .4rem; }
  .navbar-ksaa .dropdown-menu { border-top: none; box-shadow: none; padding-left: 1rem; }
}
.navbar-ksaa .dropdown-menu {
  border: none;
  box-shadow: 0 8px 24px rgba(9,44,67,.15);
  border-top: 3px solid var(--secondary);
  border-radius: 0 0 .5rem .5rem;
}
.navbar-ksaa .dropdown-item { font-weight: 500; padding: .5rem 1.1rem; }
.navbar-ksaa .dropdown-item small { color: var(--muted); }
.navbar-ksaa .dropdown-item:hover { background: var(--bg-soft); color: var(--secondary); }

/* ---- Buttons ---- */
.btn-ksaa {
  background: var(--secondary);
  border: 2px solid var(--secondary);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  padding: .6rem 1.6rem;
  transition: .25s;
}
.btn-ksaa:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: #fff; }
.btn-ksaa-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  padding: .6rem 1.6rem;
  transition: .25s;
}
.btn-ksaa-outline:hover { background: #fff; color: var(--primary); }
.btn-navy {
  background: var(--primary);
  border: 2px solid var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  padding: .6rem 1.6rem;
}
.btn-navy:hover { background: var(--primary-light); color: #fff; }

/* ---- Hero ---- */
.hero {
    position: relative;
    background: linear-gradient(rgb(9 44 67 / 0%), rgb(9 44 67 / 0%)), url(img/KSAA-Event-2-3.png) center / cover no-repeat;
    color: #fff;
    padding: 5rem 0;
    margin-top: 2px;
    background-size: cover;
}
.hero h1 { font-weight: 800; font-size: 2.6rem; }
.page-banner {
  background: linear-gradient(rgba(9,44,67,.88), rgba(9,44,67,.92)),
              url("https://placehold.co/1920x400/092c43/ffffff?text=KSAA") center/cover no-repeat;
  color: #fff;
  padding: 4rem 0;
}
.page-banner h1 { font-weight: 800; }

/* ---- Section titles ---- */
section { padding: 3.2rem 0; }
.section-title {
  color: var(--primary);
  font-weight: 800;
  margin-bottom: .25rem;
}
.section-title + .lang-ko { margin-bottom: 1.5rem; font-size: 1.05rem; }
.title-bar { width: 64px; height: 4px; background: var(--secondary); border-radius: 4px; margin: .6rem 0 1.6rem; }
.bg-soft { background: var(--bg-soft); }

/* ---- Wider container with more side spacing ---- */
.container { padding-left: 1.75rem; padding-right: 1.75rem; }
@media (min-width: 1200px){ .container { max-width: 1340px; } }
@media (min-width: 1500px){ .container { max-width: 1470px; } }

/* ---- Inner page: content + sidebar layout ---- */
.page-content { padding: 3rem 0; }
.page-main .container { max-width: 100%; padding-left: 0; padding-right: 0; }
.page-main section { padding: 0 0 1.5rem; }
.page-main > section:last-child { padding-bottom: 0; }
.page-main section.bg-soft {
  background: var(--bg-soft);
  border-radius: .8rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px){
  .page-content aside { margin-top: 1.5rem; }
}

/* ---- Cards ---- */
.ksaa-card {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: .8rem;
  padding: 1.6rem;
  height: 100%;
  box-shadow: 0 4px 18px rgba(9,44,67,.05);
  transition: .25s;
}
.ksaa-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(9,44,67,.12); }
.ksaa-card .icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(251, 50, 56, .12);
    color: var(--secondary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    margin: auto;
    margin-bottom: 17px;
}
.lead {
    font-size: 16px;
    font-weight: 400;
    font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
.ksaa-card h5 { color: var(--primary); font-weight: 700; }

/* ---- Benefit / icon list ---- */
.icon-list { list-style: none; padding-left: 0; }
.icon-list li { padding: .5rem 0 .5rem 2rem; position: relative; border-bottom: 1px dashed #e3eaf0; }
.icon-list li::before {
  content: "\F26A"; font-family: "bootstrap-icons";
  position: absolute; left: 0; top: .5rem; color: var(--secondary);
}

/* ---- Check list (image + ticked content) ---- */
.check-list { list-style: none; padding-left: 0; margin: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 0; border-bottom: 1px dashed #e3eaf0;
}
.check-list li:last-child { border-bottom: 0; }
.check-list li i {
  color: var(--secondary); font-size: 1.25rem; line-height: 1.4; flex-shrink: 0;
}

/* ---- Quick links sidebar ---- */
.sidebar-widget {
  background: #fff; border: 1px solid #e7edf2;
  border-radius: .8rem; overflow: hidden; margin-bottom: 1.6rem;
  box-shadow: 0 4px 18px rgba(9,44,67,.06);
}
.sidebar-widget .widget-head {
  background: var(--primary); color: #fff;
  padding: .9rem 1.2rem; font-weight: 700;
}
.quick-links { list-style: none; margin: 0; padding: .5rem 0; }
.quick-links li a {
  display: block; padding: .65rem 1.2rem; color: var(--primary);
  font-weight: 600; border-bottom: 1px solid #eef2f6; transition: .2s;
}
.quick-links li a:hover { background: var(--bg-soft); color: var(--secondary); padding-left: 1.5rem; }
.quick-links li a small { display: block; color: var(--muted); font-weight: 400; }

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 3px; background: #e3eaf0;
}
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.65rem; top: .35rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--secondary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--secondary);
}
.timeline-item .tl-date { color: var(--secondary); font-weight: 700; }
.timeline-item .tl-title { color: var(--primary); font-weight: 700; }

/* ---- Timeline of Events marquee (sidebar) ---- */
.timeline-widget { padding: 0; }
.timeline-marquee-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--secondary); color: #fff;
  padding: .9rem 1.2rem; font-weight: 700; line-height: 1.3;
}
.timeline-marquee-head .lang-ko { font-size: .85rem; opacity: .92;color:#fff; }
.timeline-marquee {
  height: 320px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.timeline-marquee-track { animation: tl-mq-scroll 18s linear infinite; }
.timeline-marquee:hover .timeline-marquee-track { animation-play-state: paused; }
.tl-mq-item {
  padding: 1rem 1.2rem; border-bottom: 1px solid #eef2f6;
}
.tl-mq-item .tl-mq-date { color: var(--secondary); font-weight: 700; font-size: .9rem; }
.tl-mq-item .tl-mq-date .lang-ko { color: var(--muted); font-weight: 400; font-size: .82rem; }
.tl-mq-item .tl-mq-title { color: var(--primary); font-weight: 700; margin-top: .15rem; }
.tl-mq-item .lang-ko { color: var(--muted); font-size: .85rem; }
@keyframes tl-mq-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-marquee { overflow-y: auto; }
  .timeline-marquee-track { animation: none; }
}

/* ---- Speaker cards ---- */
.speaker-card { text-align: center; }
.speaker-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--bg-soft); }
.speaker-card .name { color: var(--primary); font-weight: 700; margin-top: .8rem; }

/* ---- Award cards ---- */
.award-card { border-left: 4px solid var(--secondary); }
.award-card .badge-sdg { background: var(--primary); color: #fff; font-weight: 600; }
.award-card .paper-title { font-style: italic; color: #3a4a55; }

/* ---- Testimonials ---- */
.testimonial-card .quote-icon { color: var(--secondary); font-size: 2rem; }
.testimonial-card .author { color: var(--primary); font-weight: 700; }

/* ---- Fee table ---- */
.fee-table thead th { background: var(--primary); color: #fff; vertical-align: middle; }
.fee-table tbody tr:hover { background: var(--bg-soft); }
.fee-table .price { font-weight: 700; color: var(--secondary); }

/* ---- Forms ---- */
.ksaa-form { background:#fff; border:1px solid #e7edf2; border-radius:.8rem; padding:2rem; box-shadow:0 4px 18px rgba(9,44,67,.06); }
.ksaa-form label { font-weight: 600; color: var(--primary); }
.ksaa-form .form-group-title { color: var(--secondary); font-weight: 700; border-bottom: 2px solid var(--bg-soft); padding-bottom: .4rem; margin: 1.5rem 0 1rem; }
.required { color: var(--secondary); }

/* ---- FAQ accordion ---- */
.faq-accordion .accordion-item { border: 1px solid #e7edf2; border-radius: .6rem; margin-bottom: .75rem; overflow: hidden; }
.faq-accordion .accordion-button { font-weight: 700; color: var(--primary); background: #fff; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: var(--bg-soft); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: #e7edf2; }
.faq-accordion .accordion-button small { color: var(--muted); font-weight: 400; margin-top: 2px; }
.faq-accordion .accordion-button:not(.collapsed) small { color: var(--secondary); }
.faq-accordion .accordion-button::after { background-size: 1rem; }
.ksaa-form .form-label { margin-bottom: .35rem; font-size: .9rem; }
.ksaa-form .form-label em { color: var(--muted); font-style: italic; }
.ksaa-form .form-label .fw-normal { color: var(--muted); font-weight: 400; }
/* prefilled / read-only fields */
.form-prefill,
.form-prefill:focus,
.ksaa-form .form-control:disabled,
.ksaa-form .form-control[readonly] {
  background-color: #e9eef3;
  color: #56707f;
  box-shadow: none;
}

/* ---- Step / process ---- */
.process-step { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.process-step .step-num {
  flex: 0 0 46px; height: 46px; border-radius: 50%;
  background: var(--secondary); color: #fff; font-weight: 800;
  display: grid; place-items: center;
}
.process-step h5 { color: var(--primary); font-weight: 700; margin: 0; }

/* ---- Gallery ---- */
.gallery-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: .6rem; transition: .25s; }
.gallery-grid img:hover { transform: scale(1.03); box-shadow: 0 8px 22px rgba(9,44,67,.18); }

/* ---- Footer ---- */
.footer-ksaa { background: var(--primary); color: rgba(255,255,255,.82); padding-top: 3.5rem; }
.footer-ksaa h5 { color: #fff; font-weight: 700; margin-bottom: 1.2rem; position: relative; padding-bottom: .6rem; }
.footer-ksaa h5::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background: var(--secondary); }
.footer-ksaa a { color: rgba(255,255,255,.82); transition: .2s; }
.footer-ksaa a:hover { color: var(--secondary); padding-left: 4px; }
.footer-ksaa .footer-links { list-style: none; padding: 0; }
.footer-ksaa .footer-links li { margin-bottom: .6rem; }
.footer-ksaa .social a {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.1); margin-right: .5rem; color:#fff;
}
.footer-ksaa .social a:hover { background: var(--secondary); padding-left: 0; }
.footer-bottom { background: rgba(0,0,0,.2); margin-top: 3rem; padding: 1rem 0; font-size: .88rem; }

/* ---- Responsive ---- */
@media (max-width: 991px){
  .hero { padding: 4.5rem 0; }
  .hero h1 { font-size: 2rem; }
}
/* ---- Check list (image + ticked content) ---- */
.check-list { list-style: none; padding-left: 0; margin: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 0; border-bottom: 1px dashed #e3eaf0;
}
.check-list li:last-child { border-bottom: 0; }
.check-list li i {
  color: var(--secondary); font-size: 1.25rem; line-height: 1.4; flex-shrink: 0;
}

/* ---- Participant feedback slider ---- */
.feedback-carousel { position: relative; padding: 0 3rem; }
.feedback-slider { overflow: hidden; cursor: grab; }
.feedback-slider:active { cursor: grabbing; }
.feedback-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(9,44,67,.2); z-index: 3;
  transition: background .25s, transform .25s;
}
.feedback-btn:hover { background: var(--secondary); }
.feedback-prev { left: 0; }
.feedback-next { right: 0; }
@media (max-width: 575.98px){
  .feedback-carousel { padding: 0 1rem; }
  .feedback-prev { left: -.4rem; }
  .feedback-next { right: -.4rem; }
}
.feedback-track {
  display: flex;
  transition: transform .6s ease;
  will-change: transform;
}
.feedback-slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: .75rem;
  box-sizing: border-box;
}
@media (max-width: 991.98px){ .feedback-slide { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 575.98px){ .feedback-slide { flex-basis: 100%; max-width: 100%; } }

.feedback-card {
  background: #f3f7fb;
  border: 1px solid #e7edf2;
  border-radius: .9rem;
  padding: 2rem 1.5rem;
  height: 100%;
  text-align: center;
  box-shadow: 0 4px 18px rgba(9,44,67,.05);
  transition: transform .25s, box-shadow .25s;
}
/* light alternating tints per card */
.feedback-slide:nth-child(5n+1) .feedback-card { background: #f3f7fb; }
.feedback-slide:nth-child(5n+2) .feedback-card { background: #fef4f4; }
.feedback-slide:nth-child(5n+3) .feedback-card { background: #f4f8f4; }
.feedback-slide:nth-child(5n+4) .feedback-card { background: #f7f4fb; }
.feedback-slide:nth-child(5n)   .feedback-card { background: #f4f9fa; }

.feedback-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(9,44,67,.12); }
.feedback-img {
  width: 110px; height: 110px; object-fit: cover;
  border-radius: 50%;
  border: 4px solid #dbe5ee;
  margin-bottom: 1rem;
  transition: border-color .3s, transform .3s;
}
.feedback-card:hover .feedback-img { border-color: var(--secondary); transform: scale(1.06); }
.feedback-name { color: var(--primary); font-weight: 700; margin-bottom: .15rem; }
.feedback-role { color: var(--muted); font-size: .85rem; margin-bottom: .9rem; }
.feedback-text { color: #22313a; font-style: italic; margin-bottom: 0; }