/* Table of contents */
/* 1 RESET CSS */
/* 2 Base classes */
/* 3 Utility classes */
/* 4 Typography and Elements */

:root {
  --ff-base: "SkylineRegular", sans-serif;
  --ff-heading: "SkylineBlack", sans-serif;
  --fs-base: 18px;
  --fw-regular: normal;
  --fw-bold: 700;

  --p-regular: 1rem;
  --p-large: 2rem;
  --p-extra-large: 4rem;

  --m-small: 0.75rem;
  --m-regular: 1rem;
  --m-large: 2rem;

  --clr-theme-base-primary: #000f27;
  /* used for button */
  --clr-theme-base-secondary: #00aeef;

  --clr-theme-accent-primary: #00aeef;
  --clr-theme-accent-secondary: #f7c14b;

  --clr-light-text: #fff;
}

@font-face {
  font-family: "SkylineBlack";
  src: url("fonts/SkylineSans-Black.woff") format("woff"), url("fonts/SkylineSans-Black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SkylineRegular";
  src: url("fonts/SkylineSans-Regular.woff") format("woff"), url("fonts/SkylineSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SkylineRegular";
  src: url("fonts/SkylineSans-Bold.woff") format("woff"), url("fonts/SkylineSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: bold;
}

/* 1 RESET CSS */
/*b
  Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
    Remove default margin
  */
* {
  margin: 0;
}
/*
    Allow percentage-based heights in the application
  */
html,
body {
  height: 100%;
  overflow-x: hidden;
}
/*
    Typographic tweaks!
    Add accessible line-height
    Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image: url('images/Inspire-bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
/*
    Improve media defaults
  */
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  display: block;
}
/*
    Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}
/*
    Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
    Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}
/* END RESET CSS */

/* 2 Base classes */

body {
  font-family: var(--ff-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  color: var(--clr-light-text);
  background-color: var(--clr-theme-base-primary);
}

section {
  padding: var(--p-extra-large) 0;
}

@media (max-width: 768px) {
  section {
    padding: var(--p-large) 0;
  }
}

/* 3 Utility classes */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
} /* Hides the element on screen, but the text is still readable for screen readers  */

.theme-color {
  background-color: var(--clr-theme-base-primary);
  border-color: var(--clr-theme-base-primary);
}

.accent-color-pink {
  color: var(--clr-theme-accent-secondary);
}

.accent-color-green {
  color: var(--clr-theme-accent-primary);
}

._button-wrapper {
  display: grid;
  padding: 0;
  margin: var(--m-regular) 0 0 0;
}

._submit:hover {
  background-color: #73bfa1 !important;
}

.maxwidth-5 {
  max-width: 5rem;
  height: 4rem;
  margin: 0 auto 0.5rem;
}

.highlight-no-rotate::before {
  transform: rotate(0) !important;
}

.btn {
  font-family: var(--ff-base);
  font-size: 1.125rem !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 700;
  border-radius: 0.5rem !important;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
  background: var(--clr-theme-base-secondary) !important;
  border: 0 !important;
  -moz-border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
  border-radius: 8px !important;
  color: var(--clr-theme-base-primary) !important;
  padding: 8px 20px !important;
  text-transform: uppercase;
}

/* 4 Typography and Elements */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
}

h1 {
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

h3.cohost {
  font-size: 1.5rem;
}

p:not(:last-child) {
  padding-bottom: var(--p-regular);
}

form {
  margin: 0 !important;
}

input[type="text"] {
  color: var(--clr-light-text) !important;
  border: none !important;
  background: transparent;
  border-bottom: var(--clr-theme-accent-secondary) 2px solid !important;
  border-radius: 0 !important;
  font-size: 1.25rem !important;
  margin-bottom: var(--m-large);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: white;
}

legend {
  color: var(--clr-theme-accent-primary);
  font-family: monospace;
  font-size: 1rem !important;
  padding-top: var(--p-regular);
}

label {
  color: var(--clr-light-text);
  font-size: 1rem !important;
  padding-left: 0.5rem;
  line-height: 1.75;
}

button {
  text-transform: uppercase;
  font-size: 1.25rem !important;
}

._form-thank-you {
  color: var(--clr-light-text) !important;
  font-family: var(--ff-base) !important;
}

.navbar-shadow {
  box-shadow: rgba(0, 0, 0, 0.07) -4px -2px 2.6px;
}

.nav-link {
  position: relative;
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  color: var(--clr-light-text);
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (min-width: 768px) {
  .navbar-shadow {
    box-shadow: rgba(0, 0, 0, 0.07) 1.95px 1.95px 2.6px;
  }

  .nav-link {
    font-size: 1rem;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  }
}

/* after selector for elements with class nav-link that do not have a class nav-highlight */
.nav-link:not(.nav-highlight):after {
  content: "";
  z-index: -1;
  left: -0.5em;
  top: -0.1em;
  top: -0.3em;
  border-bottom: 2px solid var(--clr-theme-accent-secondary);
  position: absolute;
  border-right-color: transparent;
  width: 125%;
  height: 2em;
  transform: rotate(2deg);
  opacity: 1;
  padding: 0.1em 0.25em;
  transform: scaleX(0%);
  transition: all 0.35s ease-out;
}

/* after selector for hover on elements with class nav-link that do not have a class nav-highlight */
.nav-link:not(.nav-highlight):hover:after {
  opacity: 0.7;
  transform: scaleX(85%) rotate(-0.76deg);
  transition: all 0.35s ease-in-out;
}

.nav-highlight {
  position: relative;
}

.nav-highlight:before {
  content: "";
  z-index: -1;
  left: -0.5em;
  top: -0.1em;
  border-width: 2px;
  border-style: solid;
  border-color: var(--clr-theme-accent-secondary);
  position: absolute;
  border-right-color: transparent;
  width: 125%;
  height: 2em;
  transform: rotate(2deg);
  opacity: 0.7;
  border-radius: 50% 50% 30% 50%;
  padding: 0.1em 0.25em;
}

.nav-highlight:after {
  content: "";
  z-index: -1;
  left: -0.5em;
  top: 0em;
  padding: 0.1em 0.25em;
  border-width: 2px;
  border-style: solid;
  border-color: var(--clr-theme-accent-secondary);
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  width: 125%;
  height: 2em;
  transform: rotate(-1deg);
  opacity: 0.7;
  border-radius: 50%;
}

/* Animation image dates */

/* When - What - Where */

#when-what-where p {
  margin: 0 auto;
}

.text-whuut {
  max-width: 40ch;
}

.text-when {
  max-width: 25ch;
}

.text-who {
  max-width: 30ch;
}

/* Disclaimer */

.disclaimer {
  color: var(--bs-gray-200);
  font-size: 0.8rem;
}

.disclaimer a {
  color: var(--bs-gray-200);
}

.disclaimer a:hover {
  color: var(--clr-theme-accent-primary);
}

/* venue */
.venue-img {
  -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNjQyIDkyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTY0MiA5MjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTE0LjgsOTExLjJWNDYyYzAsMCw4LTQ0OS4yLDQ1Ny44LTQ0OS4yYzQxNi41LDAsMTE1NC43LDAsMTE1NC43LDBWNDkzYzAsMCwwLjcsMzU4LTQxMi43LDQxOC4ySDE0Ljh6Ii8+Cjwvc3ZnPgo=)
    no-repeat center;
  mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNjQyIDkyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTY0MiA5MjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTE0LjgsOTExLjJWNDYyYzAsMCw4LTQ0OS4yLDQ1Ny44LTQ0OS4yYzQxNi41LDAsMTE1NC43LDAsMTE1NC43LDBWNDkzYzAsMCwwLjcsMzU4LTQxMi43LDQxOC4ySDE0Ljh6Ii8+Cjwvc3ZnPgo=)
    no-repeat center;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  position: relative;
}
.venue-img img {
  object-fit: cover;
}

.venue-img a {
  position: relative;
  bottom: 2rem;
  left: 1rem;
  color: white;
  text-transform: uppercase;
}

/* hotels */
.hotel-item-img {
  position: relative;
}

.hotel-item-img::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent, 80%, black);
}

.hotel-item-img__round {
  border-radius: 1rem;
  position: relative;
}

.hotel-item__basicinfo {
  position: absolute;
  bottom: 2.2rem;
  padding: calc(var(--m-small) / 2) var(--m-small) 0 var(--m-small);
  color: var(--clr-theme-base-primary);
}

.hotel-item-img__address {
  position: absolute;
  bottom: 0;
  font-size: 0.75rem;
  width: 100%;
  padding: calc(var(--m-small) / 2) var(--m-small);
  color: var(--clr-theme-base-primary);
  font-weight: var(--fw-bold);
  background-color: var(--clr-theme-accent-secondary);
}

.hotel-item__name,
.hotel-item__stars,
.hotel-item-img__address {
  z-index: 3;
}

.hotel-item__stars img {
  width: 1rem;
}

.hotel-item-info {
  padding: var(--m-small) 0;
  font-size: 0.875rem;
}

.hotel-item-info p {
  padding: 0.75rem 0;
}

.hotel-item__contactinfo {
  margin-bottom: 0.25rem;
  flex-direction: row;
}

.hotel-item__contactinfo li:not(:last-child)::after {
  content: "";
  margin: 0 0.375rem;
}

.hotel-item__contactinfo li a {
  color: var(--clr-theme-accent-tertiary);
  font-size: 1.25rem;
}

.hotel-item__bookinginfo {
  flex-direction: row;
  gap: 0.5rem;
  margin-top: var(--m-small);
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
}

.hotel-item__bookinginfo li {
  color: var(--clr-theme-base-primary);
  font-weight: var(--fw-bold);
  background-color: var(--clr-theme-accent-tertiary);
  padding: calc(var(--p-regular) / 4) var(--p-regular);
  border-radius: 100em;
}

.hotel-item__contactinfo,
.hotel-item__bookinginfo {
  font-size: 0.875rem;
}

.hotel-link {
  color: var(--clr-theme-accent-primary);
  font-weight: 600;
}

.hotel-link:hover {
  color: var(--clr-theme-accent-tertiary);
  font-weight: 600;
  transition: all 0.125s ease-in;
}

/* Getting there */
.accordion {
  margin-top: var(--m-large);
  --bs-accordion-color: var(--clr-light-text);
  --bs-accordion-bg: transparent;
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-gray-300);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--clr-light-text);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);

  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;

  --bs-accordion-btn-focus-border-color: var(--clr-theme-accent-secondary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--clr-theme-accent-secondary);
  --bs-accordion-active-bg: var(--clr-theme-base-primary);
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--p-large);
  font-size: 1.33rem;
  color: var(--clr-light-text);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordion-header {
  position: relative;
}

.accordion-body {
  text-align: left;
  padding: var(--p-large);
}

.accordion__icon-wrapper {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 38px;
  right: 0;
  pointer-events: none;
}

.accordion__icon-line {
  position: absolute;
  top: 50%;
  right: 1rem;
  height: 2px;
  width: 100%;
  transform-origin: 50% 50%;
  background-color: var(--clr-theme-accent-primary);
  transition: opacity 0.25s ease;
}

@media only screen and (min-width: 768px) {
  .accordion__icon-wrapper {
    width: 22px;
    height: 22px;
  }
}

.accordion__icon-line--horizontal {
  transform: translateY(-50%);
  z-index: 999;
}

.accordion__icon-line--vertical {
  transform: translateY(-50%) rotate(-90deg);
}

.accordion-button::after {
  display: none;
}

/* Calendar */
#hero-timetable {
  background-color: var(--clr-theme-accent-secondary);
  color: var(--clr-theme-base-primary);
  text-align: center;
}

#hero-timetable h1 {
  letter-spacing: 0.07em;
  line-height: 1.3;
  font-size: 2rem;
  font-family: var(--bs-font-monospace) !important;
  position: relative;
  z-index: 1;
  margin-bottom: var(--m-large);
}

#hero-timetable p {
  line-height: 1.5;
}

@media only screen and (min-width: 576px) {
  #hero-timetable h1 {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  #hero-timetable h1 {
    font-size: 3rem;
  }

  #hero-timetable p {
    line-height: 1.8;
  }
}

.timetable {
  margin-top: 5rem;
}

.program-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding: var(--p-large);
}

.program-item h2 {
  padding-bottom: var(--p-regular);
}

.item1 {
  background-color: hsl(38, 100%, 85%);
}

.item2 {
  background-color: hsl(341, 85%, 85%);
}

.item3 {
  background-color: hsl(156, 37%, 85%);
}

.item4 {
  background-color: hsl(196, 100%, 88%);
}

.program-item::after {
  content: "";
  position: absolute;
  border: 1px solid var(--bs-gray-500);
  width: 100%;
  height: 100%;
  top: 0.5rem;
  left: 0.5rem;
  z-index: -1;
}

.timetable-lesson {
  display: grid;
  gap: var(--m-large);
  grid-template-columns: 6fr;
  align-items: center;
  position: relative;
  margin-bottom: calc(var(--m-large) * 1.5);
}

@media only screen and (min-width: 992px) {
  .timetable-lesson {
    grid-template-columns: 6fr 1fr;
  }
}

.timetable-lesson p:last-child {
  font-size: small;
  margin-top: var(--m-small);
  margin-bottom: 0;
  color: var(--bs-gray-600);
}

.timetable-lesson__name h3 {
  position: relative;
  width: fit-content;
}

.item1-lesson::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1rem;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: hsl(38, 100%, 80%);
}

.item2-lesson::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1rem;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: hsl(341, 85%, 80%);
}

.item3-lesson::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1rem;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: hsl(156, 37%, 80%);
}

.item4-lesson::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1rem;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: hsl(196, 100%, 80%);
}

.timetable-lesson__name-description {
  margin-bottom: 0;
  padding-bottom: 0.125rem !important;
  line-height: 1.6;
}

@media only screen and (max-width: 992px) {
  .table {
    font-size: 0.85rem;
  }
}

.timetableInspire-row {
  display: flex;
  gap: var(--m-large);
  padding-bottom: var(--m-small);
}

.timetableInspire-row:last-child {
  padding-bottom: 0;
}

.timetableInspire-row-time {
  font-size: var(--m-large);
  font-family: var(--ff-heading);
  min-width: 110px;
}

.timetableInspire-row-time span {
  font-size: var(--m-small);
  font-family: var(--ff-base);
}

.timetableInspire-row-description {
  text-align: left;
  /* margin-top: 1rem; */
}

.timetableInspire-row-description > * {
  padding-bottom: 0 !important;
  margin-bottom: 0;
}

.timetableInspire-row-description > p:last-child {
  font-size: smaller;
  color: var(--clr-theme-accent-secondary);
}

@media only screen and (max-width: 768px) {
  .timetableInspire-row {
    display: block;
    gap: var(--m-small);
  }

  .timetableInspire-row-time {
    font-size: var(--m-medium);
  }

  .timetableInspire-row-time p {
    margin-bottom: 0;
  }

  .timetableInspire-row-description {
    text-align: center;
  }

  .timetableInspire-row-description p:last-child {
    margin-bottom: 0.5rem;
  }

  .timetableInspire-row-partners {
    justify-content: space-between !important;
  }
}

.bg-tertiary {
  color: var(--clr-light-text);
  text-transform: uppercase;
}

.bg-green {
  background-color: var(--clr-theme-accent-secondary);
  border-radius: calc(var(--m-small) / 2);
  color: var(--clr-theme-base-primary);
}

.bg-yellow {
  background-color: var(--clr-theme-accent-tertiary);
  border-radius: calc(var(--m-small) / 2);
  color: var(--clr-theme-base-primary);
}

.bg-pink {
  background-color: var(--clr-theme-accent-primary);
  border-radius: calc(var(--m-small) / 2);
  color: var(--clr-theme-base-primary);
}

.bg-tertiary td:hover {
  background-color: var(--clr-theme-accent-primary);
  color: var(--clr-theme-base-primary);
  cursor: pointer;
}

tr.bg-tertiary td {
  padding: var(--m-small) 0;
  background-color: var(--clr-theme-accent-tertiary);
  border-left: hsl(38, 100%, 80%) 1px solid;
  position: relative;
  isolation: isolate;
  z-index: 2;
}

.table tr td:first-child {
  border-left: none;
}

tr.bg-tertiary td::before {
  content: attr(session-tooltip);
  position: absolute;
  font-size: small;
  width: calc(100% - 2rem);
  height: fit-content;
  text-transform: capitalize;
  border-radius: 500px;
  inset: 0 0 0 50%;
  opacity: 0;
  transform: translateX(-50%);
  color: var(--clr-theme-base-primary);
  background-color: var(--bs-gray-600);
  transition: 0.35s ease-in-out;
}

tr.bg-tertiary td:hover::before {
  inset: -1.5rem 0 0 50%;
  opacity: 1;
  transition: 0.45s cubic-bezier(0.71, 0, 0.16, 0.99);
}

@media only screen and (max-width: 992px) {
  tr.bg-tertiary td:hover::before {
    display: none;
  }
}

tr.bg-green td {
  padding: var(--m-small) 0;
  border-left: hsl(156, 37%, 80%) 1px solid;
}

.table thead th,
.table td {
  border: none;
  font-weight: bold;
  text-align: center;
}

#spacing-row {
  height: var(--m-regular);
}

.highlight-huddle:after {
  content: "";
  z-index: -1;
  left: -5%;
  bottom: -1em;
  padding: 0.1em 0.25em;
  border-width: 2px;
  border-style: solid;
  border-color: var(--clr-light-text);
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  width: 110%;
  height: 2em;
  transform: rotate(-1deg);
  opacity: 0.7;
  border-radius: 50%;
}

/* About */
#hero-about {
  background-color: var(--clr-theme-accent-secondary);
  color: var(--clr-theme-base-primary);
  text-align: center;
}

#hero-about h1 {
  letter-spacing: 0.07em;
  line-height: 1.3;
  font-size: 2rem;
  font-family: var(--bs-font-monospace) !important;
  position: relative;
  z-index: 1;
  margin-bottom: var(--m-large);
}

#about p {
  line-height: 1.5;
}

@media only screen and (min-width: 576px) {
  #hero-about h1 {
    font-size: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  #hero-about h1 {
    font-size: 5rem;
  }

  #about p {
    line-height: 1.8;
  }
}

.title-highlight,
.title-selection {
  position: relative;
}

.title-highlight:before {
  content: "";
  left: -0.2em;
  top: -0.3em;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  position: absolute;
  width: 105%;
  height: 1.76em;
  transform: rotate(2deg);
  opacity: 0.7;
  border-radius: 44% 43% 41% 57%;
  z-index: -1;
}

.title-selection:before {
  content: "";
  background-color: var(--clr-theme-accent-tertiary);
  position: absolute;
  left: -0.2em;
  width: 106%;
  height: 1.2em;
  transform: rotate(1.2deg);
  z-index: -2;
  opacity: 0.9;
}

.title-marker::after {
  content: "";
  position: absolute;
  width: 106%;
  height: 40%;
  left: 50%;
  bottom: 0rem;
  z-index: -1;
  transform: translateX(-50%);
  background-color: var(--clr-theme-accent-secondary);
  -webkit-mask: url(https://grainy-gradients.vercel.app/noise.svg) no-repeat center;
  mask: url(https://grainy-gradients.vercel.app/noise.svg) no-repeat center;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}

.text-marker::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  bottom: 0.33rem;
  z-index: -1;
  opacity: 0.85;
  background-color: var(--clr-theme-accent-tertiary);
}

/* Registration */
.sidenote-wrapper {
  position: relative;
  padding: calc(var(--p-regular) * 1.5);
  margin: var(--p-regular) calc(-1 * calc(var(--p-regular) * 1.5)) calc(var(--p-regular) * 1.75);
}

@media screen and (max-width: 850px) {
  .sidenote-wrapper {
    margin: var(--p-regular) 0 calc(var(--p-regular) * 1.75);
  }
}

.sidenote__info {
  border-left: 0.25rem solid var(--clr-theme-accent-tertiary);
  background-color: hsl(318.77deg 100% 96%);
  color: hsl(38, 100%, 14%);
}

.sidenote__info svg {
  color: var(--clr-theme-accent-secondary);
}

.sidenote__icon {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(-50% - 1.5px), -50%);
  padding: 8px;
  background-color: var(--clr-theme-base-primary);
  background-repeat: no-repeat;
  border-radius: 50%;
}

/* prerequisitions sessions */
.sidebar-wrapper {
  float: right;
  position: -webkit-sticky;
  position: sticky;
  top: 10rem;
  padding: calc(var(--p-regular) * 1.5);
  margin: var(--p-regular) calc(-1 * calc(var(--p-regular) * 1.5)) calc(var(--p-regular) * 1.75);
}

.sidebar__info {
  border-left: 0.25rem solid #ee326c;
  background-color: #f9b8cd;
  color: var(--clr-light-text);
}

.sidebar__info svg {
  color: #ee326c;
}

.sidebar__icon {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(-50% - 1.5px), -50%);
  padding: 8px;
  background-color: var(--clr-theme-base-primary);
  background-repeat: no-repeat;
  border-radius: 50%;
}

.prerequisite-link {
  color: var(--clr-theme-base-primary);
  font-weight: 600;
}

.prerequisite-link:hover {
  color: var(--clr-theme-accent-tertiary);
  font-weight: 600;
  transition: all 0.125s ease-in;
}

/* Deelsites */

/* on tour landing pages */
.empower-on-tour_locations img,
.inspire-on-tour_locations_link img {
  height: 500px;
}

.empower-on-tour_locations_link a,
.inspire-on-tour_locations_link a {
  text-decoration: none;
  color: var(--clr-theme-base-primary) !important;
}

.inspire-on-tour_location {
  padding-bottom: var(--p-extra-large);
}

.inspire-on-tour_big-title {
  font-size: 2.8rem;
}

@media screen and (max-width: 576px) {
  .inspire-on-tour_big-title {
    font-size: 2rem;
  }
}

/* Partners */

.timetableInspire-row-partners {
  gap: 1rem;
}

.partner {
  min-width: 17rem;
  max-width: 19rem;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .partner {
    max-width: 100%;
  }
}

img.partnerLogo {
  max-height: 4rem;
  height: auto;
}

.partnerLogo {
  max-width: 13rem;
  margin: 0 auto;
  padding: 0 var(--m-small) var(--m-small) var(--m-small);
}

@media screen and (max-width: 992px) {
  .partnerLogo {
    max-width: 100%;
  }
}

.partnerName {
  margin-bottom: 0;
  padding-bottom: 0 !important;
  text-transform: capitalize;
}

.partnerJobTitle {
  font-size: small;
  margin-bottom: 0;
}

/* --- Banner date --- */
.c-banners {
  display: none;
  font-weight: bold;
  overflow-x: hidden;
}

@media (max-width: 320px) {
  .c-banners-xs {
    display: inline;
  }
}

@media (min-width: 321px) and (max-width: 576px) {
  .c-banners-sm {
    display: inline;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .c-banners-md {
    display: inline;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .c-banners-lg {
    display: inline;
  }
}

@media (min-width: 993px) and (max-width: 1440px) {
  .c-banners-xl {
    display: inline;
  }
}

@media (min-width: 1441px) and (max-width: 1920px) {
  .c-banners-xxl {
    display: inline;
  }
}

@media (min-width: 1921px) {
  .c-banners-4k {
    display: inline;
  }
}

.c-banner-date {
  inline-size: 100%;
  overflow: hidden;
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
  margin-top: 4vh;
  background-color: #01f601;
  text-align: center;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px) and (max-width: 1440px) {
  .c-banner-date {
    width: 150%;
    margin-left: -16%;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .c-banner-date {
    width: 150%;
    margin-left: -25%;
  }
}

.c-banner-date p {
  background-color: #01f601;
  width: 100%;
  height: 100%;
  color: #191919;
  padding: 10px 0;
  font-size: 20px;
  -webkit-animation: c-banner-date 5s linear infinite;
  animation: c-banner-date 5s linear infinite;
}

@-webkit-keyframes c-banner-date {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}

@keyframes c-banner-date {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}

/* --- Banner location --- */
.c-banner-location {
  inline-size: 100%;
  overflow: hidden;
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
  margin-top: 0vh;
  background-color: white;
  text-align: center;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px) and (max-width: 1440px) {
  .c-banner-location {
    width: 150%;
    margin-left: -16%;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .c-banner-location {
    width: 150%;
    margin-left: -25%;
  }
}

.c-banner-location p {
  width: 100%;
  color: #191919;
  padding: 10px 0;
  font-size: 20px;
  -webkit-animation: c-banner-location 5s linear infinite;
  animation: c-banner-location 5s linear infinite;
}

@-webkit-keyframes c-banner-location {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

@keyframes c-banner-location {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

/* --- Banner date mobile --- */
.c-banner-date-mobile {
  margin-top: 2rem;
  background-color: #01f601;
  text-align: center;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: hidden;
}

.c-banner-date-mobile p {
  width: 100%;
  color: #191919;
  padding: 10px 0;
  font-size: 20px;
  -webkit-animation: c-banner-date 5s linear infinite;
  animation: c-banner-date 5s linear infinite;
}

@keyframes c-banner-date {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}

/* --- Banner location mobile --- */
.c-banner-location-mobile {
  margin-top: 1rem;
  background-color: white;
  text-align: center;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-banner-location-mobile p {
  width: 100%;
  color: #191919;
  padding: 10px 0;
  font-size: 20px;
  -webkit-animation: c-banner-location 5s linear infinite;
  animation: c-banner-location 5s linear infinite;
}

@keyframes c-banner-location {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

.agenda-title {
  font-size: 26px;
  font-family: var(--ff-heading);
}

.agenda-subtitle {
  color: #fb48c4 !important;
  font-size: 20px !important;
}

.agenda-descr {
  color: black !important;
  font-size: 20px !important;
}

.agenda-speaker {
  color: gray !important;
  font-size: 16px !important;
}

.box {
  background-color: white;
  width: 120%;
  border-radius: 15px;
}

/* Style for the speaker section */
.speakers-section {
  display: flex;
  padding-bottom: var(--m-small);
  text-align: center;
}

/* Style for each speaker */
.speaker {
  display: inline-block;
  margin: 0 30px 0 0;
}

/* Style for speaker image */
.speaker img {
  border-radius: 50%; /* Make the image round */
  width: 75px;
  height: 75px;
  object-fit: cover;
  border: 1px solid black;
}

/* Style for speaker name */
.speaker-name {
  margin-top: 10px;
  font-size: smaller;
  background-color: #01f601;
  color: black;
  border-radius: 15px;
  padding: 0 10px;
}

.dubai-time {
  font-family: "SkylineRegular";
}

.logoAmbassade {
  width: 75px;
  height: 75px;
  align-self: center;
  margin: 0 auto;
}

.agenda-box {
  /* background-color: white !important; */
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
  border-radius: 15px;
}

.alert-secondary {
  background-color: white !important;
}

/* iframe google maps */
.googlemaps {
  margin-top: 2rem;
}

.logo-home img {
  height: 220px;
  margin: 4rem auto 0 auto;
}

/* banner logo's */

.slider-logo {
  height: 40px;
  position: relative;
  width: 100%;
  background-color: white;
  transform: rotate(-2deg);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1030;
  margin-top: 0vh;
}

.slider-event {
  height: 40px;
  position: relative;
  width: 100%;
  background-color: #01f601;
  transform: rotate(2deg);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1030;
  margin-top: 4vh;
}

.slider::before,
.slider::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 25%;
  z-index: 2;
  pointer-events: none;
}

.slider::before {
  left: 0;
  top: 0;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

/*  IMPORTANT CODE BELOW */

.slide-track-left {
  width: calc(150px * 20);
  display: flex;
  animation: scroll-left 20s linear infinite;
  justify-content: space-between;
}

.slide-track-right {
  width: calc(150px * 20);
  display: flex;
  animation: scroll-right 20s linear infinite;
  justify-content: space-between;
}

.slide-event {
  width: 10%;
  display: grid;
  place-items: center;
  font-weight: bold;
  color: black;
}

.slide-logo {
  width: 10%;
  height: 100%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}

.slide:hover {
  transform: scale(0.8);
}

.q-agenda .timetableInspire-row-description {
  font-size: 24px;
  margin-top: 0.6rem;
}

.q-agenda .timetableInspire-row-description > p:last-child {
  margin-bottom: 2rem;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(calc(-150px * 10));
  }
  100% {
    transform: translateX(0px);
  }
}

@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }

  .slide {
    width: 80px;
  }

  .logo-home img {
    height: 150px;
    margin: 2rem auto 0 auto;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll-right {
    0% {
      transform: translateX(calc(-80px * 10));
    }
    100% {
      transform: translateX(0px);
    }
  }
}

@media screen and (max-width: 768px) {
  .speakers-section {
    justify-content: center;
  }
  .speaker {
    scale: 0.8;
    margin: 0 10px 0 0;
  }
  .agenda-title,
  .agenda-subtitle {
    font-size: var(--m-medium);
  }
  .agenda-speaker,
  .agenda-descr {
    font-size: var(--m-small) !important;
  }
  .q-agenda .timetableInspire-row-description {
    font-size: 24px;
    margin-top: 0;
    font-size: var(--m-medium);
  }
}