body {
      font-family: "Helvetica Neue", sans-serif !important;
      background-color: #0c0227;
      color: #fff;
      overflow-x: hidden;
    }

    /* ====== NAVBAR ====== */
    .navbar {
      padding: 1rem 0;
      background: rgba(20, 0, 60, 0.6);
      backdrop-filter: blur(6px);
    }

    .navbar-brand span {
      color: #8243d5;
    }

    .nav-link {
      color: #fff !important;
      font-weight: 500;
      margin-right: 1rem;
    }

    .nav-link:hover {
      color: #a870ff !important;
    }

    .btn-buy {
      background: linear-gradient(90deg, #26037f, #4218ad);
      color: #fff;
      font-weight: 600;
      border-radius: 6px;
      padding: 8px 18px;
      transition: 0.3s;
    }
    .d-b{
      display: block !important;
      padding: 8px 6rem !important;
      align-items: center !important;
      justify-content:center !important ;
    }

    .btn-buy:hover {
       background: linear-gradient(90deg, #361a7e, #4b15d4);
    }

    /* ====== HERO SECTION ====== */
    .hero-section {
      background-image: url("../img/summit/ai-banner.png");
         background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 4rem;
    padding-bottom: 9rem;
    text-align: center;
      position: relative;
      z-index: -1;
    }

    .modal-content{
        background-color: #2b2b2b !important;
          border: 1px solid #444 !important;
          color: #fff;
    }

    .hero-section h6 {
      font-size: 1rem;
      color: #ffffff;
      margin-bottom: 25px;
    }

    /* .hero-section h1 {
      font-size: 6rem;
      font-weight: 700;
      text-transform: uppercase;
      color: #ecececf8;
      background: linear-gradient(0deg, #888888 0%, #ffffff 75%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    } */

    .hero-section h2 {
      font-size: 2rem;
      font-weight: 700;
      /* text-transform: uppercase; */
      /* color: #fff; */
          color: #f8f8f8f8;
      background: linear-gradient(0deg, #888888 0%, #ffffff 75%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    h2{
      font-size: 2rem;
      font-weight: 700;
      /* text-transform: uppercase; */
      /* color: #fff; */
      color: #ecececf8;
      background: linear-gradient(0deg, #c5c5c5 0%, #ffffff 75%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-section .event-info {
      font-size: 1.1rem;
      margin: 20px 0;
      color: #ddd;
      font-weight: 500;
    }

    .hero-section .btn-purple {
      background-color: #8243d5;
      border: none;
      color: #fff;
      padding: 10px 25px;
      border-radius: 6px;
      font-weight: 600;
      margin-right: 10px;
      transition: 0.3s;
    }

    .hero-section .btn-purple:hover {
      background-color: #6125a8;
    }

    .hero-section .btn-outline-light {
      border: 1px solid #fff;
      color: #fff;
      padding: 10px 25px;
      border-radius: 6px;
      font-weight: 500;
      transition: 0.3s;
    }

    .hero-section .btn-outline-light:hover {
      background-color: #fff;
      color: #000;
    }

    /* The Animated Text Styling */
    .shiny-text {
        font-size: 6rem;
        font-weight: 700;
        text-transform: uppercase;
        
        background: linear-gradient(
            to right,
            #ffffff 0%,       
            #7E7EFF 40%,      
            #9B73FF 50%,      
            #7E7EFF 60%,      
            #ffffff 100%      
        );
        
        background-size: 200% auto;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        animation: shine-text 5.5s linear infinite;
    }

    /* The Animation: Slide the background from right to left */
    @keyframes shine-text {
        to {
            background-position: 200% center;
        }
    }

    /* ====== COUNTDOWN SECTION ====== */
    .countdown {
      background: linear-gradient(90deg, #1f006d, #200a57);
      border-radius: 12px;
      padding: 30px 20px;
      color: #fff;
      max-width: 950px;

      margin: -81px auto 60px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    /* .countdown:hover{
      border: 1px solid #fff;
    } */

  @property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;

  }

  .countdown::after, .countdown::before {
    content:'';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(
      from var(--angle), 
      transparent 0%, 
      transparent 45%, 
      white 50%, 
      transparent 50%, 
      transparent 95%, 
      white 100%
      );
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 85px;
    padding-left: 867px;
    padding-right: 90px;
    border-radius: 12px;
    animation: 8s spin linear infinite;
  }

  .countdown::before{
    filter:blur(4rem);
    opacity: 0.5;
  }

  /* Responsive padding for countdown pseudo-elements */
  /* @media (max-width: 1200px) {
    .countdown::after, .countdown::before {
      padding: 70px;
      padding-left: 700px;
      padding-right: 75px;
    }
  } */

  /* @media (max-width: 992px) {
    .countdown::after, .countdown::before {
      padding: 60px;
      padding-left: 550px;
      padding-right: 65px;
    }
  } */

  @media (max-width: 768px) {
    .countdown::after, .countdown::before {
      padding: 152px;
      padding-left: 627px;
      padding-right: 55px;
    }
  }

  @media (max-width: 576px) {
    .countdown::after, .countdown::before {
      /* padding: 40px; */
      padding-bottom: 40px;
      padding-top: 40px;

      padding-left: 10px;
      /* padding-right: 20px; */
    }
  }

  @media (max-width: 480px) {
    .countdown::after, .countdown::before {
      padding: 163px;
      padding-left: 320px;
      padding-right: 35px;
    }
  }

  @keyframes spin{
    from{
      --angle: 0deg;
    }
    to{
      --angle:360deg;
    }
  }

    .countdown .number {
      font-size: 2rem;
      font-weight: 700;
    }

    .countdown .label {
      text-transform: uppercase;
      font-size: 0.85rem;
      color: #ccc;
    }

    .countdown .location i {
      color: #a66eff;
      margin-right: 8px;
      font-size: xxx-large;
    }
    .why {
      background-color: #0a0121;
      color: #ccc;
      padding: 40px 0 10px;
      /* text-align: center; */
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    }
    /* ====== FOOTER ====== */
    footer {
      background-color: #0a0121;
      color: #ccc;
      padding: 40px 0 10px;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    footer a {
      color: #f5f3f8;
      text-decoration: none;
         font-size: 18px;
      color: #dddcdc;
      margin-bottom: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
    }
    footer a :hover{
      color: #6f17b8 !important;
    }
    footer i{
      font-size: x-large;
    }
    footer p{
            font-size: 18px;
      color: #dddcdc;
      margin-bottom: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
    }

    footer a:hover {
      color: #6f17b8;
    }

    @media (max-width: 768px) {
      .hero-section h1 {
        font-size: 2.5rem;
      }

      .location h6{
        margin-left: 10px !important;
        font-size: 16px !important;
      }
      .location i{
        font-size: 38px !important;
        margin-left: 5px;
        margin-top: 20px;
      }
      /* .number{
        font-size: 18px !important;
      } */
      .countdown {
        flex-direction: column;
        text-align: center;
        margin-top: -120px;
        width: 90%;
      }

      .navbar-nav {
        background-color: rgba(0, 0, 0, 0.6);
        padding: 10px;
        border-radius: 8px;
      }
    }

    .about h6 {
      font-size: 20px;
     color: #bd97ff;
      margin-bottom: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
      /* 150% */
      letter-spacing: -0.3px;
    }

    .about h5 {
      font-size: 18px;
      color: #dddcdc;
      margin-bottom: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
      /* 150% */
      letter-spacing: -0.3px;
    }
    .why h5 {
      font-size: 18px;
      color: #cecece;
      margin-bottom: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
      /* 150% */
      letter-spacing: -0.3px;
    }

    .about span {
       font-size: 21px;
      color: #ffffff;
        letter-spacing: 0.3px;
      /* margin-bottom: 20px; */
    }
    .why span {
      font-size: 21px;
      color: #ffffff;
        letter-spacing: 0.3px;
      /* margin-bottom: 20px; */
    }

    .logo-marquee {
        overflow: hidden;
        white-space: nowrap;
        padding: 20px 0;
        border-radius: 10px;
        background: linear-gradient(90deg, rgba(232, 228, 240, 0.15), rgba(245, 243, 248, 0.15));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .marquee-track {
        display: flex;
        align-items: center;
        gap: 40px;
        animation: scroll 22s linear infinite;
    }

    .logo-marquee .marquee-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        opacity: 0.8;
        /* filter: grayscale(1); */
        transition: 0.3s;
    }

    .logo-marquee .marquee-logo:hover {
        filter: grayscale(0);
        opacity: 1;
        transform: scale(1.1);
    }

    @keyframes scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }


    .about ul li{
           font-size: 18px;
      color: #dddcdc;
      margin-bottom: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
    }
    .why ul li{
           font-size: 18px;
      color: #dddcdc;
      margin-bottom: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
    }
    .location h6{
      margin-left: -24px;
      line-height: 24px;
      font-size: 18px;
    }
    .speakers-section {
  color: #fff;
  
}

.speakers-section p {
  color: #c9c9d1;
}

.speaker-card {
  width: 100%;
  /* max-width: 350px; */
  background-color: transparent;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}
.speaker-card:hover {
     background: radial-gradient(circle, rgba(118, 77, 240, 0) 50%, rgba(118, 77, 240, 1) 100%) !important;
     cursor: pointer;
     opacity: 1 !important;
     position: relative !important;
     border: 1px solid rgb(250, 250, 250);
     transform: translateY(-5px);
     box-shadow: 0 5px 20px rgba(189, 151, 255, 0.3);
}

.speaker-card img {
  border-radius: 12px;
  object-fit: cover;
  width: 100%;
  transition: all 0.3s ease;
  /* height: 400px; */
}

.speaker-card img:hover {
     border: 2px solid rgba(189, 151, 255, 0.6);
     transform: scale(1.02);
}

/* Responsive adjustments for speaker cards */
@media (max-width: 768px) {
  .speaker-card:hover {
    transform: translateY(-3px);
  }
}
.img-logo{
  /* border-radius: 0px !important; */
  border: none !important;
  object-fit: contain !important;
  width: 110px !important;
  height: 20px !important;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  /* left: 0; */
  right: 0;
  padding: 7px;
  background: rgba(0, 0, 0, .15);
  backdrop-filter: blur(10px);
  margin-bottom: 0.5rem;
  margin-left: 2rem;
  margin-right: 0.5rem;
  border-radius:15px;
  width: 45%;
}
.schedule-section {
    background: linear-gradient(180deg, #070215, #1d1239);
      color: #ccc;
      padding: 40px 0 10px;
      /* text-align: center; */
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}

.session-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}

.schedule-section .border-secondary {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.schedule-section h5 {
  font-size: 1.15rem;
  line-height: 1.6;
}

.schedule-section p {
  color: #c9c9d1;
  font-size: 0.95rem;
}

/*register */

.register-container {
      /* max-width: 900px; */
      margin: 3rem;
      /* background-color: #1e1e1e; */
      border-radius: 12px;
      padding: 7rem;
      box-shadow: 0 0 25px rgba(0,0,0,0.5);
      margin: 0 auto;
        background: linear-gradient(180deg, #070215, #1d1239);
      color: #ccc;
      padding: 40px 0 10px;
      text-align: center;
      /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
    }

    h2 {
      /* text-align: center; */
      margin-bottom: 30px;
      font-weight: 700;
      position: relative;
                /* font-size: 2rem;
      font-weight: 700; */
      /* text-transform: uppercase; */
      /* color: #fff; */
          color: #ecececf8;
      background: linear-gradient(0deg, #c5c5c5 0%, #ffffff 75%);
          -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

    /* h2::after {
      content: "";
      width: 60px;
      height: 3px;
      background-color: #ffcc00;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
    } */

    label {
      color: #f0f0f0;
      font-weight: 500;
      float: left;
    }

    .form-control, .form-select {
      background-color: #2b2b2b;
      border: 1px solid #444;
      color: #fff;
    }
::placeholder {
  color: white;
}
    .form-control:focus, .form-select:focus {
      border-color: #ffcc00;
      box-shadow: none;
      background-color: #333;
    }

    .btn-submit {
      background-color: #ffcc00;
      border: none;
      font-weight: 600;
      width: 300px;
      padding: 10px 25px;
      color: #000;
      transition: 0.3s;
    }

    .btn-submit:hover {
      background-color: #c5a421;
      color: #000;
    }

    .total-cost {
      font-size: 1.3rem;
      font-weight: 600;
      margin-top: 10px;
        margin-bottom: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
    }

    .total-cost span {
      color: #ffcc00;
        margin-bottom: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 30px;
        font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
/* Im
age Placeholders */
.image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  min-height: 180px;
  max-height: 300px;
  background: linear-gradient(135deg, rgba(232, 228, 240, 0.15), rgba(245, 243, 248, 0.15));
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  object-fit: cover;
  overflow: hidden;
}

.image-placeholder span {
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
  text-align: center;
  padding: 1rem;
}

.image-placeholder:hover {
  border-color: rgba(189, 151, 255, 0.6);
  background: linear-gradient(135deg, rgba(232, 228, 240, 0.25), rgba(245, 243, 248, 0.25));
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(189, 151, 255, 0.3);
}

/* Responsive adjustments for image placeholders */
@media (max-width: 1200px) {
  .image-placeholder {
    aspect-ratio: 4/3;
    min-height: 160px;
  }
}

@media (max-width: 992px) {
  .image-placeholder {
    aspect-ratio: 16/10;
    min-height: 150px;
  }
}

@media (max-width: 768px) {
  .image-placeholder {
    aspect-ratio: 16/9;
    min-height: 140px;
    max-height: 220px;
  }
  
  .image-placeholder:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 576px) {
  .image-placeholder {
    aspect-ratio: 16/9;
    min-height: 120px;
    max-height: 200px;
  }
}

@media (max-width: 400px) {
  .image-placeholder {
    aspect-ratio: 3/2;
    min-height: 100px;
    max-height: 180px;
  }
}