*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
  text-decoration: none;
  list-style: none;
	list-style-type: none;
	text-decoration: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
  background: var(--primary);
  color: var(--white);
  font-family: 'Inter', sans-serif;
} body.no-scroll {
  overflow: hidden;
}

:root {
/* COLORS */
  --primary: #050E12;
  --primary-light: #0b1d29;
  --primary-dark: #436568;
  --secondary: #8a5cfd;
  --secondary-light: #b496ff;
  --active: #71dfe9;
  --active-light: #89dfe7;
  --active-dark: #102428;
  --white: #f0f8fc;
  --grey: #ababab;
  --border: #2A3235;
}

.active {
  color: var(--active);
} .white {
  color: var(--white);
} .secondary {
  color: var(--secondary);
} .durchgestrichen {
  text-decoration: line-through var(--white);
  width: max-content;
}

/* TEXT */
h1, h2 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.25;
  font-weight: 900;
} h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.5;
  font-weight: 400;
} h4 {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.4;
  font-weight: 400;
} p {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.5;
  margin-top: 12px;
} p:last-child {
  margin-bottom: 0;
} a {
  cursor: pointer;
  text-decoration: none;
  color: var(--active);
  transition: .2s ease-in-out;
} a:hover {
  color: var(--secondary);
}

.text-center {
  text-align: center;
  margin: 0 auto;
} .line-through {
  text-decoration: line-through;
} .gradient {
  background: linear-gradient(160deg, var(--secondary) 0%, var(--active) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
} .grey {
  color: var(--grey);
} .grey-bg {
  background-color: var(--grey);
} .gcal-event {
  color: red;
}

::selection {
  background: var(--primary-light);
  color: var(--white);
} ::-moz-selection {
  background:  var(--primary-light);
  color: var(--white);
}

/* VISUALS AND ELEMENTS */
main, section {
  padding: 6rem 1.5rem;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

.fs-bg-img {
  height: 100vh;
  background: url("img/img.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

input, button, textarea, select {
  font: inherit;
  line-height: inherit;
  color: inherit;
} textarea {
  vertical-align: top;
  overflow: auto;
} button, [role="button"] {
  cursor: pointer;
  background-color: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus, [role="button"]:focus {
  outline: 0;
} .primary-button {
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--active) 100%);
  color: var(--primary);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 5px;
  transition: background-image 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
} .primary-button:hover {
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 20%, var(--active) 100%);
  color: var(--primary);
} .primary-button-small {
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--active) 100%);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 5px;
  font-weight: 500;
  margin-bottom: 216px;
} .primary-button-small:hover {
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--active) 100%);
  color: var(--primary);
} .secondary-button {
  color: var(--active);
  border: 1px solid var(--active);
  padding: 12px 24px;
  border-radius: 5px;
} .secondary-button:hover {
  color: var(--active-light);
  border: 1px solid var(--active-light);
} .secondary-button-small {
  color: var(--active);
  border: 1px solid var(--active);
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 400;
  margin-bottom: 216px;
} .secondary-button-small:hover {
  color: var(--active-light);
  border: 1px solid var(--active-light);
}

.plätze {
  color: var(--secondary);
  font-weight: 600;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ol, ul {
  list-style: none;
}

:focus {
  outline: none;
}

/* Define the fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* Optional: Adds a subtle slide effect */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
} .fadein.visible {
  opacity: 1;
  transform: translateY(0);
  animation: fadeIn 1s ease-in forwards;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 8.2px;
  background: var(--primary);
  border: none;
}
::-webkit-scrollbar-thumb {
  border-radius: 8.2px;
  background-color: var(--active);
    background-image: linear-gradient(160deg, var(--active) 0%, var(--active-dark) 100%);
}

/* LAYOUT/POSITIONING */
/* grid */
.grid {
  display: grid;
  gap: 1.5rem;
}

/* cards */
.card {
  display: flex;
  background: linear-gradient(160deg, rgba(91, 50, 209, 0.1) 0%, rgba(138, 92, 253, 0.1) 25%, rgba(107, 98, 240, 0.1) 50%, rgba(104, 175, 232, 0.1) 75%, rgba(113, 223, 233, .1) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 16px 24px;
} .card h3 {
  font-weight: 600;
} .card p {
  color: var(--grey);
} .card img {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  margin: 7px 24px 0 0;
} .card-column {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(91, 50, 209, 0.1) 0%, rgba(138, 92, 253, 0.1) 25%, rgba(107, 98, 240, 0.1) 50%, rgba(104, 175, 232, 0.1) 75%, rgba(113, 223, 233, .1) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
} .card-column img {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
} .card-column-desc {
  padding: 32px 0;
} .card-column p {
  margin-top: 16px;
} .card-time h2 {
  margin-top: 24px;
} .card .svg-icon {
  width: 1.5rem;
  fill: var(--white);
  margin-bottom: 4px;
}

/* spaces */
.space {
  margin: 24px 0;
} .bottom-space-4 {
  margin-bottom: 4px;
} .bottom-space-24 {
  margin-bottom: 24px;
} .bottom-space-48 {
  margin-bottom: 48px;
} .top-space-4 {
  margin-top: 4px;
} .top-space-12 {
  margin-top: 12px;
} .top-space-24 {
  margin-top: 24px;
} .top-space-48 {
  margin-top: 48px;
} .br {
  display: none;
}

/* CONTENT */
/* HEADER */
header input[type="checkbox"]{
  display: none;
} #active:checked ~ .menu-items{
  clip-path: circle(75%);
}

.sonderangebot {
  position: fixed;
  background-color: var(--secondary);
  color: var(--active);
  height: auto;
  max-height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  z-index: 5;
} .sonderangebot h1 {
  font-size: 1rem;
} .sonderangebot a {
  margin-left: 24px;
  margin-right: 74px;
  font-weight: 900;
  border: 2px solid var(--active);
}


.menu-btn {
  position: fixed;
  z-index: 10;
  right: 16px;
  top: 16px;
  height: 64px;
  width: 64px;
  text-align: center;
  line-height: 64px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--white);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background-color: black;
} .menu-items {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: black;
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
  z-index: 9;
} .menu-items ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
} .menu-items ul li {
  margin: 16px 0;
} .menu-items ul li a {
  color: none;
  text-decoration: none;
  font-size: 32px;
  font-weight: 500;
  padding: 5px 12px;
  color: var(--white);
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
} .menu-items ul li a:hover {
  color: var(--grey);
}

.ham {
  cursor: pointer;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
} .ham .line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:var(--white);
  stroke-width:5.5;
  stroke-linecap:round;
} .ham .top {
  stroke-dasharray: 40 160;
} .ham .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
} .ham .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
} .ham.active .top {
  stroke-dashoffset: -64px;
} .ham.active .middle {
  //stroke-dashoffset: -20px;
  transform: rotate(90deg);
} .ham.active .bottom {
  stroke-dashoffset: -64px;
} .hamRotate.active {
  transform: rotate(45deg);
} .hamRotate180.active {
  transform: rotate(180deg);
}

nav {
  display: none;
  z-index: 10000;
}.sidebar-navigation {
    display: none;
}

/* Desktop */
@media (min-width: 98rem) {
  header {
    display: none;
  }  .sonderangebot a {
    margin-left: 24px;
    margin-right: 0;
  }

  .sidebar-navigation {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    display: inline-block;
    width: 80px;
    background-color: var(--primary-light);
    background-image: linear-gradient(160deg, var(--active-dark) 0%, var(--primary-light) 100%);
    border-radius: 50px;
    
  }

  .sidebar-navigation ul {
    text-align: center;
    color: white;
  } .sidebar-navigation ul li {
    padding: 28px 0;
    cursor: pointer;
    transition: all ease-out 480ms;
    display: flex;
    justify-content: center;
    align-items: center;
  } .sidebar-navigation ul li:hover {
    background-color: var(--primary-dark);
    border-radius: 50px;
  }

  .sidebar-navigation ul li .tooltip {
    display: inline-block;
    position: absolute;
    background-color: var(--primary-dark);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 3px;
    left: 90px;
    opacity: 0;
    visibility: hidden;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 480ms ease-out;
 }
  .sidebar-navigation ul li .tooltip:before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    top: 10px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: inherit;
  } .sidebar-navigation ul li:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }

  .sidebar-navigation ul li.active {
    background-color: var(--primary-dark);
    border-radius: 50%;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }

  .sidebar-navigation ul li .svg-icon {
    fill: var(--white);
    width: 2rem;
    height: 1.5rem;
  } .sidebar-navigation ul li.active .svg-icon {
    color: var(--white);
  } .sidebar-navigation img {
    width: 48%;
  } .sidebar-navigation #homeIMG {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
}

/* MAIN */
main {
  background-image: url("../img/black-stars.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
} main h1 {
  margin-top: 16px;
} main video {
  margin: 24px 0 28px 0;
  border-radius: 5px;
}  main .mehr-erfahren {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 24px;
  color: var(--white);
} main .cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
} .main {
  margin-top: 62px;
}

.arrow-container {
  width: 30px;
  animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  cursor: pointer;
  height: 20px;
  margin: 24px auto 0 auto;
  
}

.arrow-down {
  height: 4px;
  background: var(--white);
  transform: rotate(45deg);
  transform-origin: 0% 0%;
  border-radius: 5px;
  margin-right: 3px;
}
.arrow-down:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 100%;
  border-radius: 10px;
  background: var(--white);
  transform: rotate(-90deg);
  transform-origin: 0% 100%;
}

@keyframes bounce {
50% {
    transform: translateY(-15px);
  }
}

@media screen and (min-width: 52rem) {
  .main video, .main .button {
    width: 70%;
    margin: 0 auto;
  } .main video {
    margin: 24px auto;
  } .main {
    margin-top: 0;
  }
}

@media screen and (min-width: 64rem) {
  .main video, .main .button {
    width: 50%;
  }
}

/* ANGEBOT */
.angebot h3 {
  margin-bottom: 0;
} .angebot p {
  margin: 6px 0 24px 0;
} #was ion-icon {
  font-size: 1.2rem;
  color: var(--grey);
  margin-bottom: 4px;
  border: 1px solid var(--grey);
  border-radius: 50%;
  padding: 5px;
}

/* carousel/swiper */
.swiper-main {
  overflow: hidden;
  border-radius: 5px;
} .swiper-wrapper img {
  border-radius: 5px;
} .section {
  margin: 0 auto;
  padding-block: 1.5rem;
} .container {
  width: 100%;
  height: auto;
  margin-inline: auto;
} .swiper-button-next::after, .swiper-button-prev::after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.25rem;
  font-weight: 600;
  padding: 2.5rem;
  width: .5rem;
  height: .5rem;
  opacity: 0.52;
  border-radius: 50%;
  color: var(--primary);
  background: var(--white);
}

/* ARTIKEL */
.artikel {
  padding: 96px 24px 48px 24px;
} .artikel ul, .artikel p {
  margin-bottom: 12px;
} .artikel ul li {
  list-style-type: circle;
  margin: 0 0 4px 16px;
} .artikel h2 {
  margin-top: 48px;
} .artikel .svg-icon {
  width: 3.5rem;
  position: fixed;
  top: 24px;
  fill: var(--white);
  background: linear-gradient(160deg, rgba(91, 50, 209, 0.9) 0%, rgba(138, 92, 253, 0.9) 25%, rgba(107, 98, 240, 0.9) 50%, rgba(104, 175, 232, 0.9) 75%, rgba(113, 223, 233, .9) 100%);
  border-radius: 50%;
  padding: 10px;
}

@media (min-width: 52rem) {
  .artikel {
      width: 50em;
      margin: 0 auto;
  } .preis-item {
    flex-direction: row;
  }
}

/* PREIS */
.preis-angebote {
  margin-top: 24px;
} .preis-item {
  background: linear-gradient(160deg, rgba(91, 50, 209, 0.1) 0%, rgba(138, 92, 253, 0.1) 25%, rgba(107, 98, 240, 0.1) 50%, rgba(104, 175, 232, 0.1) 75%, rgba(113, 223, 233, .1) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 32px 32px 48px 32px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 24px;
} .preis-desc {
  text-align: left;
  width: minmax(50%, 65%);
} .preis-desc ul {
  margin-top: 12px;
} .preis-desc ul li {
  list-style-type: circle;
  margin: 0 0 4px 16px;
} .preis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 24px;
  height: max-content;
} .preis p {
  font-size: 2.8rem;
  text-align: right;
} .preis-euro {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  margin-top: 0;
} .euro {
  font-size: 1.1rem;
  color: var(--grey);
}

/* SCHRITTE */
.schritte h1 {
  margin-top: 12px;
} .schritte h2 {
  margin-top: 12px;
}

.step {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 300;
  color: var(--grey);
  border: 1px solid var(--grey);
  border-radius: 50%;
}

.step::after {
  content: attr(data-step);
  position: absolute;
  font-weight: bold;
  color: var(--grey);
}

.step-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* UEBER MICH */
.ueber-mich {
  background: linear-gradient(160deg, rgba(91, 50, 209, 0.1) 0%, rgba(138, 92, 253, 0.1) 25%, rgba(107, 98, 240, 0.1) 50%, rgba(104, 175, 232, 0.1) 75%, rgba(113, 223, 233, .1) 100%);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 32px 32px 48px 32px;
} .ueber-mich h1 {
  margin-bottom: 12px;
} .ueber-mich h2 {
  margin: 48px 0 24px 0;
} .ueber-mich p {
  margin: 0 0 24px 0;
  color: var(--grey);
  font-weight: 300;
} .ueber-mich img {
  aspect-ratio: 1 / 1;
  width: 60%;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  margin-bottom: 24px;
}

@media screen and (min-width: 52rem) {
  .ueber-mich img {
      width: 248px;
      height: 248px;
      margin-right: 32px;
  }
}

/* WARUM */
.warum {
  background-color: black;
  border-radius: 5px;
  padding: 24px 24px 0 24px;
  position: relative;
  box-shadow: rgba(91, 50, 209, 0.9) 5px 5px, rgba(138, 92, 253, 0.7) 10px 10px, rgba(107, 98, 240, 0.5) 15px 15px, rgba(104, 175, 232, 0.3) 20px 20px, rgba(113, 223, 233, .1) 25px 25px;
} .warum img {
  width: 70%;
  margin: 48px auto 0 auto;
} .warum-desc p {
  margin-bottom: 32px;
}
@media screen and (min-width: 52rem) {
  .warum-desc {
      padding: 32px 12px 48px 48px;
      width: 60%;
  } .warum img {
      width: 348px;
      position: absolute;
      bottom: 0;
      right: 0;
  } .warum p {
      max-width: 70ch;
  }
}

@media screen and (min-width: 64rem) {
  .warum-desc {
      width: 64%;
  } .warum img {
      width: 424px;
  }
}

/* BONI */
.boni .card-desc {
  position: relative;
  padding-bottom: 32px;
} 
.boni h2 {
  margin: 12px 0 24px 0;
} .boni-1-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
} .artikel-button {
  border: 1px solid var(--white);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .8rem;
} .boni h3 {
  margin: 12px 0 24px 0;
} .boni a {
  display: block;
  text-align: center;
  width: 100%;
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--active) 100%);
  color: var(--primary);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 5px;
  transition: all .5s ease-in-out;
  position: absolute;
  bottom: 0px;
} .boni a:hover {
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 20%, var(--active) 100%);
  color: var(--primary);
} .grey-boni {
  filter: grayscale(80%);
} .boni-button {
  display: block;
  text-align: center;
  width: 100%;
  background-color: var(--secondary);
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--active) 100%);
  color: var(--primary);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 5px;
  transition: all .5s ease-in-out;
  position: absolute;
  bottom: 0px;
  cursor: pointer;
} #boni-title {
  margin: 48px 0 0 0;
}

/* COOKIES */
.cookie-popup {
  position: fixed;
  bottom: -300px; /* Start außerhalb des Bildschirms */
  left: 0;
  right: 0;
  background-color: var(--primary-light);
  color: var(--white);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  transition: bottom 0.5s ease-in-out;
  z-index: 1000;
} .cookie-popup.show {
  bottom: 0; /* Zielposition */
} .cookie-popup button {
  background-color: var(--primary);
  border: none;
  padding: 8px 24px;
  color: var(--white);
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
} .cookie-popup button:hover {
  background-color: var(--active-light);
}

/* TERMIN */
.termin h2, .termin p {
  display: flex;
  justify-content: center;
} .css-1n2mv2k {
  justify-content: flex-start !important;
} #termin-iframe {
  border:none;
  margin-bottom: 96px;
  min-width: 320px;
  min-height: 544px;
  height: auto; 
  width: 100%
} @media screen and (max-width: 980px) {
  #termin-iframe {
    margin-top: 24px;
    height: 960px;
  } .termin h2, .termin p {
    display: block;
  }
}

/* FOOTER */
footer {
  width: 100%;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 24px;
} .footer ul {
  display: flex;
  align-items: center;
  gap: 12px;
} .footer img {
  height: 64px;
} #daten {
  background: linear-gradient(45deg, #5E36D3 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
} #agb {
  background: linear-gradient(45deg, var(--secondary) 0%, #2A4E62 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
} #impressum {
  background: linear-gradient(45deg, #2A4E62 0%, var(--active) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

@media screen and (min-width: 420px) {
  .footer ul {
      gap: 24px;
  }
}
@media screen and (min-width: 52rem) {
  .footer img {
      height: 82px;
  }
}

@media screen and (min-width: 64rem) {
  .footer {
      padding: 24px 0;
  } .footer ul {
      gap: 48px;
  }
}

/* remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* WEBSITE CONTENT */
/* SMALL SCREENS LAPTOP STYLES */
@media screen and (min-width: 45rem) {
  /* flex */
  .flex {
    display: flex;
  } .row-center {
    align-items: center;
  } .column-left {
    flex-direction: column;
    align-items: flex-start;
  } .column-center {
    flex-direction: column;
    justify-content: center;
  } .space-around {
    justify-content: space-around;
    align-items: center;
  } .space-between {
    justify-content: space-between;
    align-items: center;
  }

  .grid-1-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  } .grid-1-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  } .grid-2-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    grid-template-rows: repeat(2, 1fr);
  }

  .w70 {
    max-width: 70ch;
    margin: 12px auto 0 auto;
  }

  .br {
    display: block;
  }

  .absolute-bottom-24 {
    width: calc(100% - 48px);
    position: absolute;
    bottom: 24px;
  } .absolute-bottom-74 {
    width: calc(100% - 48px);
    position: absolute;
    bottom: 74px;
  }
}

/* DESKTOPS, LARGE SCREEN STYLES */
@media screen and (min-width: 64rem) {
  .wrapper {
    width: clamp(60.5rem, 90vw, 80rem);
    margin: 0 auto;
  }
}