/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito Sans", sans-serif;
}

:root {
  /* Primary Brand Colors */
   --background-color: #072e47;
   --green-btn: #23d100;
  --color-home-bg: #f5f5f2;
  --color-primary: #ffca40;
  --color-primary-lighter: #ffe599;
  --color-primary-lighter-50: #f8f3e5;
  --color-primary-darker: #cc9c2d;
  --color-primary-hover: #f5c036;
  --color-primary-active: #d9a52c;
  --color-primary-disabled: #e6d8a8;
  --color-primary-text-disabled: #8c8c8c;
  --color-black: black;
   /* --red-colour: rgba(255, 0, 0, 0.548); */
   --toast-colour-success:#23d100;
  --color-ash: rgb(56, 56, 56);
  --color-lightblack: rgba(151, 151, 151, 0.89);
  --color-white: #ffffff;
  --feature-blue: rgb(182, 207, 207);
  --card-feature-shadow: 0 20px 30px rgba(33, 182, 199, 0.87);
  --black-shadow: 0 -1px 1px rgba(8, 8, 8, 0.1) !important;
  --card-shadow-black: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  --card-overlay-gradient: linear-gradient(
    var(--card-white-overlay-start),
    var(--card-white-overlay-end)
  );
    --radial-yellow-gradient: linear-gradient(to right,
      #ffe550 0%,
      #f6c94d 0%,
      #fdfc47 100%);
  --card-white-overlay-end: rgba(255, 255, 255, 0.45);
  --card-white-overlay-start: rgba(253, 253, 253, 0.55);
  --card-gradinet: linear-gradient(
    135deg,
    #f1eacff5 0%,
    #f3e48cf6 50%,
    #f7d765 120%
  );
  --card-blue: linear-gradient(
    135deg,
    #def4f8f5 0%,
    #dbf2faf6 50%,
    #f3e48cf6 120%
  );
  --header-blue: radial-gradient(
    circle at top right,
    #fcf8ec 30%,
    #e0f1f8 65%,
    #e0f0f5 100%
  );
  --card-white-shadow: 0 10px 30px rgba(252, 248, 248, 0.08);
}



.feature-card1 {
  height: 100%;
  background: var(--color-home-bg);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 20px;
  /* box-shadow: 1px 10px 20px var(--color-primary-lighter); */
}

.feature-card:hover {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
  transform: translateY(-6px);
  box-shadow: 1px 10px 30px var(--color-primary);
}

.feature-icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.feature-card h5 {
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-card {
  height: 100%;
  padding: 24px 16px;
  border: 1px solid var(--color-primary);
  border-radius: 14px;
  background: var(--color-white);
  transition: all 0.3s ease;
}

.feature-card:hover {
  color: var(--color-black);
  transform: translateY(-5px);
}
.feature-card1 {
  background: #f1f5f9;
  border-radius: 24px;
  padding: 30px 20px;
  /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); */
  transition: all 0.35s ease;
   /* box-shadow: 1px 10px 20px var(--color-primary-lighter); */
}

.feature-card1 h5 {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
}

.feature-card1 p {
  font-size: 15px;
  color: #334155;
}

/* Hover effect (subtle lift like image) */
.feature-card1:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.who-attend-box {
  /* background: #c8ffea; */
   background: var(--card-blue) !important;
    box-shadow: var(--card-white-shadow);
  /* border-radius: 22px; */
  padding: 50px 20px;
}

.keyfeature-card {
  background: var(--card-blue) !important;
  border-radius: 16px;
  font-weight: 600 !important;
  box-shadow: var(--card-white-shadow);
  border: none;
}

.who-attend-box h2 {
  font-weight: 800;
  font-size: 36px;
}

.attend-pill {
  /* background: #11f3a2; */
 /* background: var(--radial-yellow-gradient); */
 background: linear-gradient(to right,
      #ffe550 0%,
      #f6c94d 0%,
      #fddc47 100%); ;
  padding: 10px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

.attend-subtext {
  font-size: 14px;
  /* opacity: 0.8; */
}

/* Responsive */
@media (max-width: 576px) {
  .who-attend-box h2 {
    font-size: 28px;
  }
}
.scroll-ui {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.agenda-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 20px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
}

.agenda-card strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
}

.agenda-card span {
  font-size: 15px;
}

.agenda-card.highlight {
  background: var(--color-primary);
  font-weight: 700;
}

.agenda-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}
.step-card {
  justify-content: center;
  text-align: center;
  padding: 14px 20px;
  border-radius: 14px;
}

.step-card h6 {
  font-weight: 800;
  font-size: 18px;
}

.step-card p {
  font-size: 15px;
  margin: 0;
}

/* Highlight break */
.step-card.highlight {
 background: var(--color-primary);
  font-weight: 700;
}


/* EVENT HERO */
.event-hero {
  padding: 100px 0 80px;
  background: radial-gradient(
    circle at top left,
    #0e3a52,
    #041822 70%
  );
}

/* BADGE */
.event-badge {
  display: inline-block;
  background: rgba(255, 215, 0, 0.15);
  color: #ffd84d;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* TITLE */
.event-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

/* DESCRIPTION */
.event-description {
  margin-top: 16px;
  font-size: 16px;
  color: #b7d0df;
  max-width: 520px;
}

/* META */
.event-meta {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  color: #9fb6c6;
  font-size: 14px;
}

.event-meta i {
  color: #ffd84d;
  margin-right: 6px;
}

/* BUTTONS */
.event-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* IMAGE */
.event-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.event-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .event-title {
    font-size: 32px;
  }

  .event-image {
    height: 300px;
  }

  .event-hero {
    padding: 70px 0 60px;
  }
}