.event-registration-details .creativepro-container {
  padding: 0;
  font-family: var(--header-font);
}

.sub-hero {
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-16x, 64px);
}

.sub-hero--inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1220px;
  width: 100%;
  padding: var(--spacing-8x, 32px) 0;
}

/* ***************************************
 * Event Registration Details
 * ***************************************/
.table--heading {
  border-bottom: 4px solid var(--color-accent);
  padding-bottom: var(--spacing-2x, 8px);
  width: fit-content;
  margin: 0;
}

.table--heading-hr {
  padding: 0;
  margin: 0 0 var(--spacing-6x, 24px) 0;
  position: relative;
  top: -1px;
  z-index: -1;
  border: 1px solid var(--cp-light-gray);
}

/* ***************************************
 * Event Pricing Table
 * ***************************************/

.event-pricing-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin: var(--spacing-8x, 32px) 0;
}

.event-pricing-table thead th {
  background-color: var(--color-bg);
}

.event-pricing-table tbody tr:first-child td:first-child {
  background-color: var(--color-bg);
}

.event-pricing-table tbody tr td:first-child {
  text-align: left;
}

.event-pricing-table th,
.event-pricing-table td {
  width: 33.33%;
  padding: var(--spacing-6x, 24px);
  text-align: center;
  vertical-align: middle;
  border: none;
}

.event-pricing-table th {
  background-color: var(--color-accent);
  color: var(--cp-black);
  font-weight: bold;
}

.event-pricing-table tbody tr:nth-child(even) {
  background-color: var(--cp-light-gray2);
}

.event-pricing-table .best-deal-tag {
  background-color: var(--accent-color);
  color: white;
  padding: var(--spacing-1x, 8px) var(--spacing-2x, 8px);
  border-radius: 10px;
  margin-bottom: var(--spacing-2x, 8px);
  display: block;
  width: fit-content;
  font-size: 13px;
}

.event-pricing-table h1,
.event-pricing-table h2,
.event-pricing-table h3,
.event-pricing-table h4,
.event-pricing-table h5,
.event-pricing-table h6 {
  margin: 0;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 24px;
}

.event-pricing-table p,
.event-pricing-table span {
  font-size: 15px;
}

.event-pricing-table tbody tr:first-child td:not(:first-child) h1,
.event-pricing-table tbody tr:first-child td:not(:first-child) h2,
.event-pricing-table tbody tr:first-child td:not(:first-child) h3,
.event-pricing-table tbody tr:first-child td:not(:first-child) h4,
.event-pricing-table tbody tr:first-child td:not(:first-child) h5,
.event-pricing-table tbody tr:first-child td:not(:first-child) h6 {
  font-size: 44px;
  margin-bottom: var(--spacing-2x, 8px);
}

.event-pricing-table td p {
  color: var(--cp-dark-gray1);
}

.event-pricing-table td .btn {
  background-color: var(--cp-light-red);
  color: var(--cp-white);
  font-size: 20px;
  font-weight: var(--fw-normal-bold);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-4x, 16x);
  border-radius: 56px;
  text-transform: unset;
}

.event-pricing-table td .btn:hover {
  background-color: var(--cp-bg-red1);
  transition: ease-in-out .2s;
}

/* ***************************************
 * Event Registration Additional Info
 * ***************************************/

.registration-details-inner .additional-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8x, 32px);
  justify-content: flex-start;
  padding-bottom: var(--spacing-16x, 64px);
}

.registration-details-inner .additional-info .info-card {
  max-width: 590px;
  width: 100%;
  padding: var(--spacing-6x, 24px);
  background-color: var(--cp-light-gray2);
  border-radius: 8px;
}

.registration-details-inner .additional-info .info-card h1,
.registration-details-inner .additional-info .info-card h2,
.registration-details-inner .additional-info .info-card h3,
.registration-details-inner .additional-info .info-card h4,
.registration-details-inner .additional-info .info-card h5,
.registration-details-inner .additional-info .info-card h6 {
  font-size: 24px;
  margin: 0;
  margin-bottom: var(--spacing-2x, 8px);
}

.registration-details-inner .additional-info .info-card li,
.registration-details-inner .additional-info .info-card p,
.registration-details-inner .additional-info .info-card span,
.registration-details-inner .additional-info .info-card a {
  font-size: 15px;
}

.registration-details-inner .additional-info .info-card ul {
  display: flex;
  flex-direction: column;
}


.additional-info .info-card ul {
  padding-left: 0;
}

.additional-info .info-card ul li {
  position: relative;
  padding-bottom: 10px;
  padding-left: var(--spacing-6x);
  font-family: var(--header-font);
  font-size: var(--p-normal);
  font-weight: var(--p-weight);
  line-height: var(--p-line-height);
  color: var(--cp-dark-gray1);
  list-style-type: none;
}

.additional-info .info-card ul li p {
  line-height: inherit;
  color: var(--cp-dark-gray1);
}

.additional-info .info-card ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  transform: translateY(0) !important;
  width: 12px !important;
  height: 12px !important;
  background: url("../images/gray-bullet.png") no-repeat center center !important;
  background-size: contain !important;
}

.additional-ifno .info-card ul li:last-child {
  padding-bottom: 0;
}

@media (max-width: 1220px) {
  .event-registration-details .sub-hero .sub-hero--inner {
    padding: var(--spacing-6x, 24px);
  }

  .event-registration-details .creativepro-container {
    padding: 0 var(--spacing-6x, 24px);
  }
}

/* ***************************************
 * Mobile Media Query Styles
 * ***************************************/

.desktop-view {
  display: block;
}

.mobile-view {
  display: none;
}

@media (max-width: 768px) {
  .desktop-view {
    display: none;
  }

  .mobile-view {
    display: block;
  }

  .event-pricing-table p,
  .event-pricing-table span {
    font-size: 13px;
  }

  .event-pricing-table th[colspan="2"] {
    text-align: center;
    font-weight: bold;
  }

  .event-pricing-table tbody tr td {
    text-align: left;
  }

  .event-pricing-table tbody tr td:nth-child(2) {
    text-align: center;
  }
}