/* ================================== *//* ================================== */
/*            STYLES.CSS              *//* ================================== */
/*                                    *//* ================================== */
/* ================================== *//* ================================== */



/* ================================== */
/* == Root variables ================ */
/* ================================== */


/* Include fonts */
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/quicksand-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-variable.ttf') format('truetype');
}


:root {
   /* Theme colors */
   --color-primary: #e4137d;
   --color-secondary: #c18efe;
   --color-dark: #110f12;
   --color-semi-dark: #231f26;
   --color-light: #ececec;

   /* Raw theme colors */
   --color-primary-raw: 228, 19, 125;
   --color-secondary-raw: 193, 142, 254;
   --color-dark-raw: 13, 11, 12;
   --color-semi-dark-raw: 35, 31, 38;
   --color-light-raw: 236, 236, 236;

   /* Fonts */
   --font-primary: 'Lora';
   --font-secondary: 'Quicksand';
   --font-tertiary: 'Sora'
}


/* ================================== */
/* == Default styling =============== */
/* ================================== */


*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--color-primary-raw), 0.85);
}

::-moz-selection {
  background: rgba(var(--color-primary-raw), 0.85);
}

html {
   font-size: 100%;
	box-sizing: inherit;
	scroll-behavior: smooth;
}

body {
   font-family: var(--font-primary);
   font-size: clamp(1rem, 2vw, 1.125rem);
   font-weight: 400;
   line-height: 1.5;
   color: var(--color-light);
   background-color: var(--color-dark);
}

body.no-scroll {
   position: fixed;      
   width: 100%;
   overflow-y: scroll;   
}

main, section {
   overflow: hidden;
}

a, button {
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
   border: none;
   outline: none;
   color: inherit;
   background: unset;
   transition: all 0.3s ease;
}

h1, h2, h3, h4, h5 {
   font-family: inherit;
   line-height: 1.25;
   word-wrap: break-word;
}

p, li {
   font-family: inherit;
   line-height: 1.5;
   text-wrap: pretty;
   word-wrap: break-word;
}

img, svg, picture {
   max-width: 100%;
   height: auto;
   vertical-align: middle;
   object-fit: cover;
   background-size: cover;
   background-repeat: no-repeat;
}


/* ================================== */
/* == Navbar and hero =============== */
/* ================================== */


/* == Navbar ======================== */

.nav {
   position: fixed;
   top: 0; left: 0;
   width: 100%; 
   z-index: 999;
   margin: 0 auto;
   font-family: var(--font-secondary);
   background-color: transparent;
   font-weight: 500;
   transition: all 0.2s ease-in-out;
}

.nav.on-scroll {
   box-shadow: rgba(var(--color-dark-raw), 0.3) 0px 1px 5px;
   background-color: var(--color-dark);
}

.nav .container {
   position: relative;
   display: flex; flex-direction: row;
   align-items: center; justify-content: baseline;
   width: 100%; max-width: 1200px;
   margin: auto;
   padding: 1rem;
}

.nav .logo {
   position: relative;
   display: inline-block;
   width: 100px;
   margin-right: auto;
}

.nav .logo:hover {
   opacity: 0.5;
}

.nav .navbar {
   position: relative;
   display: inline-block;
   display: flex; flex-direction: row;
   column-gap: 2rem;
}

.nav .btn {
   position: relative;
   display: inline-block;
   margin-left: auto;
}

/* Menu on phone */
.menu {
   display: none;
   visibility: hidden;
}

@media (max-width: 1000px) {      
   .nav, .nav.on-scroll {
      position: fixed;
      height: auto; width: 95%;
      top: 1.5rem; left: 0; right: 0;
      margin: 0 auto;
      color: var(--color-light);
      background: rgba(var(--color-semi-dark-raw), 0.75);
      border-radius: 0.5rem;
      transition: all 0.3s ease-in-out;
   }

   .nav .logo {
      width: 80px;
   }

   .nav:after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 0.5rem;
   }

   .nav .container {
      padding: .5rem 1.5rem;
   }

   .nav .navbar {
      display: none;
   }

   .menu {
      position: fixed;
      display: unset;
      visibility: unset;
      top: -100%;
      left: 0;
      right: 0;
      margin: auto;
      padding: 1.25rem 1.25rem 3rem 1.25rem;
      width: 95%;
      height: auto;
      overflow: hidden;
      transition: all .2s ease-out .1s, top 0s ease;
      color: inherit;
      background: rgba(var(--color-semi-dark-raw), 0.75); 
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: .5rem;
      opacity: 0;
   }

   .menu.is-active {
      opacity: 1;
      top: 6.5rem;
   }

   .menu-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      row-gap: .75rem;
   }

   .menu-link {
      position: relative;
      font-family: inherit;
      font-size: 1.7rem;
      font-weight: 600;
      line-height: 1.3;
      color: inherit;
      transition: all 0.15s ease;
      width: 100%;
   }

   .menu-seperation {
      position: relative;
      background-color: rgba(var(--color-primary-raw), 0.6);
      height: 1px;
      width: 100%;
   }

   .menu-link:hover {
      opacity: 0.7;
      text-transform: capitalize;
   }

   .burger {
      cursor: pointer;
      position: relative;
      display: block;
      order: 1;
      z-index: 10;
      width: 1.5rem;
      height: 1rem;
      user-select: none;
      visibility: visible;
   }

   @media screen and (min-width: 70rem) {
      .burger {
         display: none;
         visibility: hidden;
      }
   }

   .burger-line {
      position: absolute;
      display: block;
      left: 0;
      opacity: 1;
      width: 100%;
      height: 2px;
      background-color: currentColor;
      transition: all 0.25s ease;
   }

   .burger-line:nth-child(1) {
      top: 0px;
   }

   .burger-line:nth-child(2) {
      top: 0.5rem;
      width: 70%;
   }

   .burger-line:nth-child(3) {
      top: 1rem;
   }

   .burger.is-active .burger-line:nth-child(1) {
      top: 0.5rem;
      transform: rotate(135deg);
   }

   .burger.is-active .burger-line:nth-child(2) {
      left: -1rem;
      opacity: 0;
   }

   .burger.is-active .burger-line:nth-child(3) {
      top: 0.5rem;
      transform: rotate(-135deg);
   }
}

/* == Hero ========================== */

.section.hero {
   padding-top: 175px;
}

.bg-img {
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
}

.bg-img img {
   width: 100%; height: 100%;
   object-fit: cover;
   object-position: center;
}

.bg-img:after {
   content: '';
   position: absolute;
   left: 0; top: 0;
   width: 100%; height: 100%;
   background-color: rgba(var(--color-dark-raw), 0.7);
}


/* ================================== */
/* == Layout and sections =========== */
/* ================================== */


.section {
   position: relative;
   width: 100%;
   padding: 50px 0;
}

.section .container {
   position: relative;
   width: 100%; max-width: 1200px;
   margin: auto;
}

.container.flexbox {
   display: flex; flex-direction: row; flex-wrap: wrap;
   justify-content: center; align-items: flex-start;
}

.inner {
   display: flex;
   flex: 1 1 20rem;
   flex-direction: column;
   max-width: 50rem;
   align-items: baseline;
   row-gap: .8rem;
   margin: 2rem;
   z-index: 1;
}

.single {
   display: flex; flex-direction: column; flex: 100% 1 1;
   row-gap: 1.25rem;
   text-align: center; justify-content: center; align-items: center;
   max-width: 1200px;
   margin: auto;
   padding: 1rem;
}

.column {
   position: relative;
   display: flex; flex-direction: column; 
}

.column.small {
   gap: 1.5rem; margin: 4rem 2rem;
   width: 100%; max-width: 325px; min-width: 225px;
}

.column.wide {
   gap: 1.5rem; margin: 2rem;
   width: 100%; max-width: 425px; min-width: 225px;
}

/* == Cards ========================= */

.cards-wrapper {
   position: relative;
   text-align: center;
   margin-top: 70px;
   padding: 1.75rem;

   display: flex;
   flex-wrap: wrap;
   justify-content: center;  
   gap: 1rem;               
}

.card {
   position: relative;
   z-index: 1;
   transition: all 0.25s ease;
   overflow: hidden;
   cursor: pointer;
   border: solid 1px var(--color-secondary);
   border-radius: 0.5rem;
}

.static-card {
   position: relative;
   z-index: 1;
   overflow: hidden;
   border-radius: 0.5rem;
}

.card.slim, .static-card.slim {
   height: 375px;
   flex: 1 1 265px;
   min-width: 250px;
   max-width: 300px;
}

.card.wide, .static-card.wide {
   height: 275px;
   flex: 1 1 365px;
   min-width: 325px;
   max-width: 425px;
}

.card:after {
   content: '';
   position: absolute;
   left: 0; top: 0;
   width: 100%; height: 100%;
   background-color: rgba(var(--color-dark-raw), 0.4);
}

.card .info {
   position: absolute;
   display: flex; flex-direction: column;
   row-gap: 0.75rem;
   bottom: 1rem; left: 50%;
   transform: translateX(-50%);

   text-align: left;
   width: 85%; 
   padding: 0.75rem 1.25rem;
   border-radius: 0.5rem;
   background-color: #24201fCC;
   z-index: 2;
}

.card .checker {
   position: absolute;
   top: 1rem; right: 7.5%;

   text-align: right;
   padding: 0.5rem 0.8rem;
   border-radius: 0.5rem;
   background-color: #24201fCC;
   z-index: 2;
}

.card .checker i, .card .info i {
   margin-right: 0.5rem;
}


.card .checker.nu i {
   color: #78C841;
}


.card .checker.online i {
   color: #78C841;
}



.card .checker.vandaag i {
   color: #FF9B2F;
}
.card .checker.morgen i {
   color: #E43636;
}
.card .checker.overmorgen i {
   color: #E43636;
}





.card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
}

.card:hover {
   transform: translateY(-12.5px);
}

/* == Splits ======================== */

.section.splits {
   padding: 0;
   display: flex;
   flex-wrap: wrap;
}

.split {
   position: relative;
   flex: 1 1 50%; 
   min-height: 100vh; min-width: 300px;
   padding: 12rem 2rem 2rem 2rem;
   margin: 0;
   overflow: hidden;
}

.split .description {
   flex: 1 1 50%;
   display: flex; flex-direction: column;
   margin: 2rem auto 2rem auto;
   max-width: 25rem;
   row-gap: 0.25rem;
}

.split .btn {
   align-self: start; 
}

.split .img-mask {
   position: absolute;
   top: 0; left: 0;
   height: 100%; width: 100%;
   z-index: -1;
}

.split .img-mask img {
   width: 100%; height: 100%;
   background-size: cover;
}

.split:has(img):after {
   content: '';
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background-color: var(--color-dark);
   opacity: 0.7;
   z-index: -1;
}

.split .fa-euro-sign, .split .fa-phone {
   margin-right: 1rem;
}

@media (max-width: 1109px) {
   .split {
      padding: 8rem 2rem 2rem 2rem;
   }
}

@media (min-width: 555px) {
   .split {
      min-width: 555px;
   }

   .split .description {
      margin: 2rem auto 2rem 4rem;
   }
}

/* == Gallery ======================= */

.gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.gallery img {
   margin: 10px;
   cursor: pointer;
   max-width: 225px; aspect-ratio: 1/1;
   width: 50%;
   height: 50%;
   border-radius: 10px;
   border: solid 2px var(--color-secondary);
   transition: opacity 0.3s;
}

.gallery img:hover {
   opacity: 0.5;
}

#lightbox {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-items: center;
   overflow: hidden;
   flex-direction: column;
   z-index: 999;
}

#lightbox img {
   max-width: 80%; max-height: 60vh; aspect-ratio: 1/1;
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
   border: 2px solid var(--color-secondary);
   border-radius: 0.5rem;
}

#close-btn {
   position: absolute;
   top: 2.5%;
   right: 2.5%;
   font-size: 5rem;
   color: #fff;
   cursor: pointer;
   z-index: 2;
}

#prev-btn,
#next-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 4rem;
   color: #fff;
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
   padding: 10px;
   cursor: pointer;
   transition: background-color 0.3s;
}

#prev-btn {
   left: 2%;
}

#next-btn {
   right: 2%;
}

#prev-btn:hover,
#next-btn:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.thumbnail-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

.thumbnail {
   max-width: 50px;
   width: 100px;
   cursor: pointer;
   margin-top: 40px;
   margin-left: 5px;
   margin-right: 5px;
   border: 2px solid var(--color-secondary);
   transition: opacity 0.3s;
}

.thumbnail:hover,
.thumbnail.active-thumbnail {
   opacity: 0.5;
}

@media (max-width: 1109px) {
   .split:has(.gallery) {
      order: 1;
   }

   .gallery img {
      max-width: 300px;
   }
}

@media (max-width: 705px) {
   .gallery img {
      width: 100%; 
   }
}


@media (max-width: 660px) {
   .thumbnail-container {
      display: none;
      visibility: hidden;
   }

   #prev-btn {
      left: 0;
   }

   #next-btn {
      right: 0;
   }

   #close-btn {
      right: 0; top: 0;
   }

}

/* == Highlights ==================== */

.highlights-wrapper {
   position: relative;
   text-align: center;
   margin-top: 30px;
   padding: 1.75rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;  
   column-gap: 2.75rem; row-gap: 4.5rem;               
}

.highlight {
   position: relative;
   text-align: left;
   transition: all 0.25s ease;
   overflow: hidden;
   flex: 1 1 325px;
   min-width: 250px;
   max-width: 350px;
   display: flex; flex-direction: row;
   row-gap: 1rem;
}

.highlight .tiny-img-mask {
   position: relative;
   width: 80px; height: 80px;
   overflow: hidden;
   border-radius: 50%;
   border: solid 2px var(--color-primary);
   flex-shrink: 0;
}

.highlight .tiny-img-mask img {
   width: 100%; height: 100%;
   object-fit: cover;
}

.highlight .vertical-wrapper {
   margin: auto;
   margin-left: 1.5rem;
}

/* == Boxes ======================== */

.boxes.section {
   padding-top: 25px;
}

.boxes .column {
   padding: 1.5rem 2.25rem; margin: 0.25rem 0.5rem; gap: 0;
   max-width: 250px; min-width: 150px;
   border-radius: 0.3rem;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: transparent;
   border: solid 4px var(--color-primary);
   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 0 0 1px rgba(255,255,255,.06),
      0 10px 20px rgba(0,0,0,.55),
      0 28px 60px rgba(0,0,0,.48),
      0 70px 120px rgba(0,0,0,.42),
      0 0 36px color-mix(in srgb, var(--color-primary), transparent 86%),
      0 0 90px color-mix(in srgb, var(--color-primary), transparent 90%);
      
}

.boxes .column:hover, .boxes .column:focus {
   background-color: var(--color-primary);
}

/* == Banner ======================= */

.banner {
   padding-bottom: 200px;
}

.usp-box {
   position: relative;
   min-width: 90px;
   z-index: 1;
}

@media (max-width: 850px) {
   .banner .spacial-horizontal-wrapper {
      text-align: center; justify-content: center;
   }

   .banner .spacial-horizontal-wrapper .btn{
      flex: 0 0 auto;
      width: auto;
      order: 99;        
   }
}

@media (max-width: 650px) {
   .usp-box {
      min-width: unset; width: 150px;
   }
}

.banner-first-img {
   position: relative;
   max-width: 310px; height: 425px;
   margin-right: 1.5rem;
   align-self: flex-start;
   overflow: hidden;
   border-radius: 0.25rem;
   border: solid 2px var(--color-secondary);
   z-index: 1;
}

.banner-second-img {
   position: absolute;
   top: 70%; left: 20%;
   height: 225px; width: 100%; max-width: 950px;
   margin-right: 1.5rem;
   align-self: flex-start;
   overflow: hidden;
   border-radius: 0.25rem;
   border: solid 2px var(--color-secondary);
}

.banner-first-img:after, .banner-second-img:after {
   content: '';
   position: absolute;
   left: 0; top: 0;
   width: 100%; height: 100%;
   background-color: rgba(var(--color-dark-raw), 0.6);
}

.banner-first-img img, .banner-second-img img {
   width: 100%;
}

@media (max-width: 1225px) {
   .banner {
      padding-bottom: unset;
   }

   .banner .inner h1 {
      color: var(--color-secondary);
   }

   .banner-first-img {
      display: none;
   }

   .banner-second-img {
      position: relative;
      top: unset; left: unset;
      margin: 1rem;
   }
}


/* ================================== */
/* == Links and buttons ============= */
/* ================================== */


.btn {
   position: relative; display: inline-flex;
   font-size: clamp(0.9rem, 3.5vw, 1.15rem); 
   font-weight: 700;
   white-space: nowrap; text-wrap: nowrap; 
   text-align: center; align-items: center; vertical-align: middle; 
   justify-content: center; 
   padding: 0.5rem 2.2rem;
   border-radius: 0.2rem;
   transition: all 0.2s ease-in-out;
   cursor: pointer;
}

.spacial-horizontal-wrapper .btn {
   align-self: center;
   height: auto;           
}

.column .btn {
   align-self: start;
   height: auto;           
}

.btn.btn-primary {
   border: solid 3px var(--color-primary);
   background-color: var(--color-primary);
   color: var(--color-light);
}

.btn.btn-primary:hover {
   background-color: transparent;
}

.btn.btn-secondary {
   border: solid 3px var(--color-secondary);
   background-color: var(--color-secondary);
   color: var(--color-light);
}

.btn.btn-secondary:hover {
   background-color: transparent;
}

.navbar-link, .footer-link {
   position: relative;
   transition: all 300ms ease;
}

.navbar-link:after, .footer-link:after {
   content: '';
   position: absolute;
   bottom: -5px; left: 0;
   height: 2px; width: 0;
   transition: all 300ms ease;
}

.navbar-link:after {
   background-color: var(--color-light);
}

.footer-link:after {
   background-color: var(--color-primary);
}

.navbar-link:hover:after, .footer-link:hover:after {
   width: 100%;
}

.footer-link:hover {
   color: var(--color-primary);
}

.footer-link:hover:after {
   width: 100%;
}



/* ================================== */
/* == Footer ======================== */
/* ================================== */


.section.footer {
   padding-bottom: 0;
}

.footer .container {
   max-width: 1200px;
   justify-content: center;
}

.footer .column {
   border-top: solid 2px var(--color-primary);
   padding-top: 1rem;
}

@media (max-width: 777px) {
   .footer .logo {
      margin: auto;
   }

   .footer .container.flexbox {
      align-items: center; justify-content: center; text-align: center;
   }

   .footer .super-spacial-horizontal-wrapper {
      align-items: center; justify-content: center; text-align: center; gap: 2rem;
   }

   .footer .super-spacial-horizontal-wrapper:has(> ul:nth-of-type(2)):not(:has(> ul:nth-of-type(3))) > ul {
      text-align: left;
   }

   .footer .btn {
      align-self: center;
   }
}

.footer .logo {
   position: relative;
   width: 175px;
   margin-right: auto;
}

.footer .payment-methods {
   position: relative;
   display: flex; flex-direction: row; column-gap: 1rem;
   font-size: 3.25rem;
}

.payment-methods .fa-cc-visa {
   position: relative;
   color: #1434CB;
}

.payment-methods .fa-cc-visa:after {
   content: '';
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%); 
   width: 80%; height: 80%;
   background-color: #ececec;
   z-index: -1;
}

.payment-methods .fa-cc-mastercard {
   position: relative;
   
}

.payment-methods .fa-cc-mastercard .orange {
   position: absolute;
   top: 10%; left: 10%;
   width: 47.5%; height: 60%;
   background-color: #EB001B;
   border-radius: 100%;
   z-index: -1;
}

.payment-methods .fa-cc-mastercard .red {
   position: absolute;
   top: 10%; right: 10%;
   width: 47.5%; height: 60%;
   background-color: #F79E1B;
   border-radius: 100%;
   z-index: -2;
}

.payment-methods .fa-cc-amex {
   position: relative;
   color: #0974d1;
}

.payment-methods .fa-cc-amex:after {
   content: '';
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%); 
   width: 90%; height: 70%;
   background-color: #ececec;
   z-index: -1;
}

.sub-footer {
   position: relative;
   text-align: center;
   margin-top: 75px; padding-top: 25px; padding-bottom: 25px;
   background-color: var(--color-dark);
}

/* ================================== */
/* == Fonts & utilities ============= */
/* ================================== */


.title-small {
   font-family: inherit;
   font-size: clamp(1.75rem, 4vw, 2.35rem);
   font-weight: 500;
   line-height: 1.25;
}

.title-medium {
   font-family: inherit;
   font-size: clamp(2.15rem, 5vw, 3.15rem);
   font-weight: 600;
   line-height: 1.15;
}

.title-big {
   font-family: inherit;
   font-size: clamp(2.2rem, 5.5vw, 4rem);
   font-weight: 600;
   line-height: 1.15;
}

.text-small {
   font-family: inherit;
   font-size: 0.85rem;
   line-height: 1.25;
}

.text-medium {
   font-family: inherit;
   font-size: 1.15rem;
   line-height: 1.5;
}

.text-big {
   font-family: inherit;
   font-size: 1.3rem;
   line-height: 1.5;
}

.text-extra {
   font-family: inherit;
   font-size: 1.5rem;
   line-height: 1.5;
}

.font-weight-900 {
   font-weight: 900;
}

.font-weight-800 {
   font-weight: 800;
}

.font-weight-700 {
   font-weight: 700;
}

.font-weight-600 {
   font-weight: 600;
}

.font-weight-500 {
   font-weight: 500;
}

.font-weight-400 {
   font-weight: 400;
}

.font-weight-300 {
   font-weight: 300;
}

.font-weight-200 {
   font-weight: 200;
}

.font-weight-100 {
   font-weight: 100;
}

.primary-font {
   font-family: var(--font-primary);
}

.secondary-font {
   font-family: var(--font-secondary);
}

.tertiary-font {
   font-family: var(--font-tertiary);
}

.text-center {
   text-align: center;
   align-items: center;
   justify-content: center;
}

.text-left {
   text-align: left;
   align-items: flex-start;
   justify-content: flex-start;
}

.text-right {
   text-align: right;
   align-items: flex-end;
   justify-content: flex-end;
}

.primary-color {
   color: var(--color-primary);
}

.secondary-color {
   color: var(--color-secondary);
}

.primary-background {
   background: var(--color-primary);
}

.secondary-background {
   background: var(--color-secondary);
}

.vertical-wrapper {
   display: flex; flex-direction: column; flex-wrap: wrap;
   gap: 0.25rem;
}

.horizontal-wrapper {
   display: flex; flex-direction: row; flex-wrap: wrap;
   gap: 0.5rem;
}

.spacial-vertical-wrapper {
   display: flex; flex-direction: column; flex-wrap: wrap;
   gap: 2rem;
}

.spacial-horizontal-wrapper {
   display: flex; flex-direction: row; flex-wrap: wrap;
   gap: 3rem;
}

.super-spacial-vertical-wrapper {
   display: flex; flex-direction: column; flex-wrap: wrap;
   gap: 5rem;
}

.super-spacial-horizontal-wrapper {
   display: flex; flex-direction: row; flex-wrap: wrap;
   gap: 6rem;
}

.mt-0 {
   margin-top: 0;
}

.mt-10 {
   margin-top: 10px;
}

.mt-25 {
   margin-top: 25px;
}

.mt-50 {
   margin-top: 50px;
}

.mt-75 {
   margin-top: 75px;
}

.mt-100 {
   margin-top: 100px;
}

.align-top {
   align-items: flex-start;
}

.align-bottom {
   align-items: flex-end;
}

.max-width-200 {
   max-width: 200px;
}

.max-width-300 {
   max-width: 300px;
}

.max-width-400 {
   max-width: 400px;
}

.max-width-500 {
   max-width: 500px;
}

.max-width-600 {
   max-width: 600px;
}

.list-disced li {
   list-style: disc;
   list-style-position: inside;
}

@media (max-width: 1000px) {
   .hide-below-1000 {
      display: none;
      visibility: hidden;
   }
}