:root {
      --o2b-primary: #003366;
      --o2b-light: #e7f1ff;
      --o2b-dark: #1f1f1f;
      --o2b-muted: #6c757d;
  }

  /* General */
  body {
      font-family: 'Inter', sans-serif;
      background: #f4f4f4;
      color: var(--o2b-dark);
  }

  .manrope {
      font-family: 'Manrope', sans-serif;
      color: var(--o2b-primary);
  }

  /* Hero */
  .hero {
      background: #eeedfe;
      padding:150px 0px;
      background: url('/static/webinar_events/event.jpg') center/cover no-repeat;
  }

  .content h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--o2b-primary);
  }

  /* Breadcrumb */
  .breadcrumb-custom {
      font-size: 14px;
      color: var(--o2b-muted);
  }

  /* Info box */
  .info-box {
      background: #d7edf3;
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 30px;
  }

  .info-box strong {
      display: block;
      margin-bottom: 8px;
  }

  /* Content */
  .section-title {
      color: var(--o2b-primary);
      font-weight: 700;
      margin-top: 35px;
  }

  .content p {
      line-height: 1.8;
  }

  /* Sidebar */
  .sidebar-card {
      background: #ffffff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
  }

  .date-box {
      font-size: 36px;
      font-weight: 700;
      color: var(--o2b-primary);
  }

  .share-icons i {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #f1f1f1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
  }

  .calendar-icon {
      width: 45px;
      height: 45px;
      background: #e9ecef;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      margin-right: 8px;
      font-size: 18px;
      color: #003366;
      cursor: pointer;
  }

  .calendar-icon:hover {
      background: #003366;
      color: #fff;
  }

  .social {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      cursor: pointer;
      font-size: 15px;
      border: 1px solid #ddd;
  }

  .social:hover {
      background: #003366;
      ;
      color: #fff;
      border-color: #003366;
  }

  .btn-hero-ctas {
      background: #0066ff !important;
      color: #ffffff !important;
      font-weight: 700;
      padding: 14px 38px;
      border-radius: 40px !important;
      border: none !important;
      box-shadow: 0px 12px 35px rgba(0, 0, 0, 0.45) !important;
      margin: 50px 0 !important;
      transition: all 0.3s;
  }

  .btn-hero-ctas:hover {
      transform: scale(1.05);
      box-shadow: 15px 15px 20px rgba(126, 58, 255, 0.2);
      color: #fff;
  }

  .share .footer-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      background: #a2aabe;
      border-radius: 10px;
      color: #fff;
      margin-right: 10px;
      font-size: 15px;
  }

  .share .footer-socials a:hover {
      background: #3c6ace;
      text-decoration: none;
  }

  /* RIGHT CARD */
  .sticky-card {
      border: 1px solid #eeedf2;
      border-radius: 10px;
      padding: 25px;
      position: sticky;
      top: 100px;
      /* header height + spacing */
      z-index: 2;
  }

  .sticky-card h5 {
      font-weight: 700;
      color: #000000;
  }

  .sticky-card .date {
      font-size: 14px;
      color: #6f7287;
      margin-bottom: 20px;
  }

  .btn-block {
      background-color: #007bff;
      color: #ffffff;
      border: 2px solid #007bff;
      transition: all 0.3s ease;
      text-decoration: none;
  }

  .btn-block:hover {
      background-color: #0056b3;
      border-color: #0056b3;
      color: #ffffff;
  }

  .oig-quote {
      background: #e7f1ff;
      border-left: 6px solid #003366;
      padding: 22px;
      margin: 10px 0;
      font-weight: 600;
      border-radius: 0 8px 8px 0;
  }


  .event-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 9;
  }

  .event-modal-content {
      background: #ffffff !important;
      width: 440px !important;
      max-width: 92% !important;
      max-height: 560px !important;
      margin: 20px auto;
      padding: 30px;
      border-radius: 8px;
      position: relative;
      overflow: visible;
      animation: slideDown 0.5s ease;
  }

  .event-close {
      position: absolute;
      top: 10px;
      right: 14px;
      font-size: 22px;
      cursor: pointer;
  }

  @keyframes slideDown {
      from {
          transform: translateY(-20px);
          opacity: 0;
      }

      to {
          transform: translateY(0);
          opacity: 1;
      }
  }

  .event-modal-content .form-control {
      height: 32px !important;
      font-size: 14px;
      font-weight: 500;
      border-radius: 10px;
  }

  .iti__country-list {
      border-right: none;
  }

  .iti--separate-dial-code .iti__selected-flag {
      border-right: none;
  }

  .iti--separate-dial-code input[type="text"] {
      padding-left: 100px !important;
  }

  /* ===== intl-tel-input FIX ===== */
  .iti {
      width: 100%;
  }

  /* ===============================
   INTL TEL INPUT – CORE FIX
================================ */
  .event-modal-content .iti {
      width: 100%;
      position: relative;
  }

  /* input itself */
  .event-modal-content .iti input.form-control {
      width: 100%;
      padding-left: 130px !important;
      /* space for flag + code */
  }

  /* flag + code container */
  .event-modal-content .iti__flag-container {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      background: #f8f9fa;
      border-right: 1px solid #ced4da;
      padding: 0;
      z-index: 10000;
  }

  /* selected flag */
  .event-modal-content .iti__selected-flag {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  /* country code text */
  .event-modal-content .iti__selected-dial-code {
      font-size: 14px;
      color: #000;
  }

  /* dropdown arrow */
  .event-modal-content .iti__arrow {
      margin-left: 6px;
  }

  /* ===============================
   DROPDOWN LIST (IMPORTANT)
================================ */
  .iti__country-list {
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
      max-height: 230px;
      overflow-y: auto;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
      z-index: 100000 !important;
      position: absolute !important;
  }

  /* each row */
  .iti__country {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
  }

  /* hover */
  .iti__country:hover {
      background-color: #f1f1f1;
  }

  /* hide bullets added by bootstrap */
  .iti__country-list li {
      list-style: none !important;
  }

  .iti--separate-dial-code input {
      padding-left: 130px !important;
  }

  /* When dropdown is appended to body */
  body>.iti__country-list {
      z-index: 100000 !important;
  }


  .iti--separate-dial-code .iti__selected-flag {
      background: #f8f9fa;
      border-right: 1px solid #ced4da;
      padding: 0 12px;
  }

  /* THIS IS THE MAIN FIX 👇 */
  .iti--separate-dial-code input.form-control {
      padding-left: 130px !important;
      /* shifts placeholder/text to right */
  }

  /* Align height with Bootstrap inputs */
  .iti input.form-control {
      height: calc(1.5em + .75rem + 2px);
  }

  /* ===== FIX PHONE PLACEHOLDER OVERLAP ===== */

  /* Increase left padding so text starts AFTER flag + code */
  .iti--separate-dial-code input[type="tel"] {
      padding-left: 130px !important;
      /* ← THIS IS THE KEY */
  }

  /* Keep height consistent with Bootstrap */
  .iti--separate-dial-code input.form-control {
      height: calc(1.5em + .75rem + 2px);
  }