/*@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');*/

@font-face {
  font-family: Poppins;
      font-display: swap;

  src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype')
}

@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url('../fonts/Poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url('../fonts/Poppins/Poppins-Italic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url('../fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url('../fonts/Poppins/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;

}



/* =======================
   Variablen
======================= */
:root {
  --color-primary: #333;
  --color-secondary: #007B8B;

  --color-bg-primary: #c9e0f2;
  --color-bg-secondary: #333;
  --color-bg-footer: #12222d;

  --color-text: #333;
  --color-white: #fff;
  --color-dark: #333;


  --border-color: #ddd;

  --spacer: 1rem;

  --font-sm: 0.875rem;
  --font-md: 1.125rem;
  --font-lg: 1.25rem;
  --font-xl: 2rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  --break-sm: 36rem; /* 576px */
  --break-md: 48rem; /* 768px */
  --break-lg: 62rem; /* 992px */
  --break-xl: 75rem; /* 1200px */
  --break-xxl: 87.5rem; /* 1400px */
}

/* =======================
   Reset & Grundlegendes
======================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: var(--font-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  background: var(--color-bg-primary);
}

/* =======================
   Spacing Utilities
======================= */
.m-0{margin:0!important}.m-1{margin:0.25rem!important}.m-2{margin:0.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}
.mx-0{margin-left:0!important;margin-right:0!important}.mx-1{margin-left:0.25rem!important;margin-right:0.25rem!important}.mx-2{margin-left:0.5rem!important;margin-right:0.5rem!important}.mx-3{margin-left:1rem!important;margin-right:1rem!important}.mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.mx-5{margin-left:3rem!important;margin-right:3rem!important}
.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:0.25rem!important;margin-bottom:0.25rem!important}.my-2{margin-top:0.5rem!important;margin-bottom:0.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:0.25rem!important}.mt-2{margin-top:0.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:0.25rem!important}.mb-2{margin-bottom:0.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ml-0{margin-left:0!important}.ml-1{margin-left:0.25rem!important}.ml-2{margin-left:0.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.5rem!important}.ml-5{margin-left:3rem!important}
.mr-0{margin-right:0!important}.mr-1{margin-right:0.25rem!important}.mr-2{margin-right:0.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.5rem!important}.mr-5{margin-right:3rem!important}

.p-0{padding:0!important}.p-1{padding:0.25rem!important}.p-2{padding:0.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:0.25rem!important;padding-right:0.25rem!important}.px-2{padding-left:0.5rem!important;padding-right:0.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.px-5{padding-left:3rem!important;padding-right:3rem!important}
.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:0.25rem!important;padding-bottom:0.25rem!important}.py-2{padding-top:0.5rem!important;padding-bottom:0.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.pt-0{padding-top:0!important}.pt-1{padding-top:0.25rem!important}.pt-2{padding-top:0.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:0.25rem!important}.pb-2{padding-bottom:0.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}
.pl-0{padding-left:0!important}.pl-1{padding-left:0.25rem!important}.pl-2{padding-left:0.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.5rem!important}.pl-5{padding-left:3rem!important}
.pr-0{padding-right:0!important}.pr-1{padding-right:0.25rem!important}.pr-2{padding-right:0.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.5rem!important}.pr-5{padding-right:3rem!important}


/* =======================
   Z-Index Utilities
======================= */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* =======================
   Position Utilities
======================= */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* =======================
   Overflow Utilities
======================= */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* =======================
   Visibility Utilities
======================= */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* =======================
   Border Utilities
======================= */
.border { border: 1px solid var(--border-color); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }

/* =======================
   Background Utilities
======================= */
.bg-primary { background-color: var(--color-bg-primary); color: var(--color-white); }
.bg-secondary { background-color: var(--color-bg-secondary); color: var(--color-white); }
.bg-white { background-color: #FFF; color: var(--color-text); }
.bg-gray { background-color: #f5f5f5; color: var(--color-text); }
.bg-transparent{ background-color: transparent; color: var(--color-dark); }
@media(min-width:62rem){
.bg-lg-transparent{ background-color: transparent; color: var(--color-dark); }
}

/* =======================
   Width / Height Utilities
======================= */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }

/* =======================
   Flex & Grid Utilities
======================= */
.flex{display:flex;}
.flex-row{flex-direction:row;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap: wrap;}
.justify-center{justify-content:center;}
.justify-around{justify-content:space-around;}
.justify-between{justify-content:space-between;}

.items-center{align-items:center;}

.expand-lg {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 62rem) {
  .expand-lg {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.grid{display:grid;gap:var(--spacer);grid-template-columns:repeat(1,1fr);}
/* Grid-Klassen 1–12 für alle Breakpoints */
@media(min-width:36rem){
  .grid-sm-1{grid-template-columns:repeat(1,1fr)}
  .grid-sm-2{grid-template-columns:repeat(2,1fr)}
  .grid-sm-3{grid-template-columns:repeat(3,1fr)}
  .grid-sm-4{grid-template-columns:repeat(4,1fr)}
  .grid-sm-5{grid-template-columns:repeat(5,1fr)}
  .grid-sm-6{grid-template-columns:repeat(6,1fr)}
  .grid-sm-7{grid-template-columns:repeat(7,1fr)}
  .grid-sm-8{grid-template-columns:repeat(8,1fr)}
  .grid-sm-9{grid-template-columns:repeat(9,1fr)}
  .grid-sm-10{grid-template-columns:repeat(10,1fr)}
  .grid-sm-11{grid-template-columns:repeat(11,1fr)}
  .grid-sm-12{grid-template-columns:repeat(12,1fr)}
}
@media(min-width:48rem){
  .grid-md-1{grid-template-columns:repeat(1,1fr)}
  .grid-md-2{grid-template-columns:repeat(2,1fr)}
  .grid-md-3{grid-template-columns:repeat(3,1fr)}
  .grid-md-4{grid-template-columns:repeat(4,1fr)}
  .grid-md-5{grid-template-columns:repeat(5,1fr)}
  .grid-md-6{grid-template-columns:repeat(6,1fr)}
  .grid-md-7{grid-template-columns:repeat(7,1fr)}
  .grid-md-8{grid-template-columns:repeat(8,1fr)}
  .grid-md-9{grid-template-columns:repeat(9,1fr)}
  .grid-md-10{grid-template-columns:repeat(10,1fr)}
  .grid-md-11{grid-template-columns:repeat(11,1fr)}
  .grid-md-12{grid-template-columns:repeat(12,1fr)}
}
@media(min-width:62rem){
  .grid-lg-1{grid-template-columns:repeat(1,1fr)}
  .grid-lg-2{grid-template-columns:repeat(2,1fr)}
  .grid-lg-3{grid-template-columns:repeat(3,1fr)}
  .grid-lg-4{grid-template-columns:repeat(4,1fr)}
  .grid-lg-5{grid-template-columns:repeat(5,1fr)}
  .grid-lg-6{grid-template-columns:repeat(6,1fr)}
  .grid-lg-7{grid-template-columns:repeat(7,1fr)}
  .grid-lg-8{grid-template-columns:repeat(8,1fr)}
  .grid-lg-9{grid-template-columns:repeat(9,1fr)}
  .grid-lg-10{grid-template-columns:repeat(10,1fr)}
  .grid-lg-11{grid-template-columns:repeat(11,1fr)}
  .grid-lg-12{grid-template-columns:repeat(12,1fr)}
}
@media(min-width:75rem){
  .grid-xl-1{grid-template-columns:repeat(1,1fr)}
  .grid-xl-2{grid-template-columns:repeat(2,1fr)}
  .grid-xl-3{grid-template-columns:repeat(3,1fr)}
  .grid-xl-4{grid-template-columns:repeat(4,1fr)}
  .grid-xl-5{grid-template-columns:repeat(5,1fr)}
  .grid-xl-6{grid-template-columns:repeat(6,1fr)}
  .grid-xl-7{grid-template-columns:repeat(7,1fr)}
  .grid-xl-8{grid-template-columns:repeat(8,1fr)}
  .grid-xl-9{grid-template-columns:repeat(9,1fr)}
  .grid-xl-10{grid-template-columns:repeat(10,1fr)}
  .grid-xl-11{grid-template-columns:repeat(11,1fr)}
  .grid-xl-12{grid-template-columns:repeat(12,1fr)}
}

/* =======================
   Gap Utilities
======================= */
/* Basis (alle Elemente) */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }  /* 4px */
.gap-2 { gap: 0.5rem; }   /* 8px */
.gap-3 { gap: 1rem; }     /* 16px */
.gap-4 { gap: 1.5rem; }   /* 24px */
.gap-5 { gap: 3rem; }     /* 48px */

/* Spezifisch für Spalten / Reihen */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 1rem; }
.gap-x-4 { column-gap: 1.5rem; }
.gap-x-5 { column-gap: 3rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 1rem; }
.gap-y-4 { row-gap: 1.5rem; }
.gap-y-5 { row-gap: 3rem; }

/* =======================
   Responsive Gap Utilities
======================= */
/* Small (sm) */
@media (min-width: 36rem) {
  .gap-sm-0 { gap: 0; }
  .gap-sm-1 { gap: 0.25rem; }
  .gap-sm-2 { gap: 0.5rem; }
  .gap-sm-3 { gap: 1rem; }
  .gap-sm-4 { gap: 1.5rem; }
  .gap-sm-5 { gap: 3rem; }
}

/* Medium (md) */
@media (min-width: 48rem) {
  .gap-md-0 { gap: 0; }
  .gap-md-1 { gap: 0.25rem; }
  .gap-md-2 { gap: 0.5rem; }
  .gap-md-3 { gap: 1rem; }
  .gap-md-4 { gap: 1.5rem; }
  .gap-md-5 { gap: 3rem; }
}

/* Large (lg) */
@media (min-width: 62rem) {
  .gap-lg-0 { gap: 0; }
  .gap-lg-1 { gap: 0.25rem; }
  .gap-lg-2 { gap: 0.5rem; }
  .gap-lg-3 { gap: 1rem; }
  .gap-lg-4 { gap: 1.5rem; }
  .gap-lg-5 { gap: 3rem; }
}

/* Extra Large (xl) */
@media (min-width: 75rem) {
  .gap-xl-0 { gap: 0; }
  .gap-xl-1 { gap: 0.25rem; }
  .gap-xl-2 { gap: 0.5rem; }
  .gap-xl-3 { gap: 1rem; }
  .gap-xl-4 { gap: 1.5rem; }
  .gap-xl-5 { gap: 3rem; }
}

/* XXL */
@media (min-width: 87.5rem) {
  .gap-xxl-0 { gap: 0; }
  .gap-xxl-1 { gap: 0.25rem; }
  .gap-xxl-2 { gap: 0.5rem; }
  .gap-xxl-3 { gap: 1rem; }
  .gap-xxl-4 { gap: 1.5rem; }
  .gap-xxl-5 { gap: 3rem; }
}

/* =======================
   Row & Col System
======================= */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--spacer) * -1);
    margin-left: calc(var(--spacer) * -0.5);
    margin-right: calc(var(--spacer) * -0.5);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacer);
    padding-left: calc(var(--spacer) * 0.5);
    padding-right: calc(var(--spacer) * 0.5);
}

.col {
    flex: 1 0 0%;
}
.col-1{flex:0 0 8.3333%;max-width:8.3333%}
.col-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-5{flex:0 0 41.6667%;max-width:41.6667%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.3333%;max-width:58.3333%}
.col-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-11{flex:0 0 91.6667%;max-width:91.6667%}
.col-12{flex:0 0 100%;max-width:100%}


/* sm/md/lg/xl breakpoints for cols 1-12 */
@media(min-width:36rem){
  .col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}
  .col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}
  .col-sm-3{flex:0 0 25%;max-width:25%}
  .col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}
  .col-sm-6{flex:0 0 50%;max-width:50%}
  .col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}
  .col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}
  .col-sm-9{flex:0 0 75%;max-width:75%}
  .col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}
  .col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}
  .col-sm-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:48rem){
  .col-md-1{flex:0 0 8.3333%;max-width:8.3333%}
  .col-md-2{flex:0 0 16.6667%;max-width:16.6667%}
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-md-5{flex:0 0 41.6667%;max-width:41.6667%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.3333%;max-width:58.3333%}
  .col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
  .col-md-9{flex:0 0 75%;max-width:75%}
  .col-md-10{flex:0 0 83.3333%;max-width:83.3333%}
  .col-md-11{flex:0 0 91.6667%;max-width:91.6667%}
  .col-md-12{flex:0 0 100%;max-width:100%}

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.33333333%
    }

    .offset-md-2 {
        margin-left: 16.66666667%;
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.33333333%
    }

    .offset-md-5 {
        margin-left: 41.66666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.33333333%
    }

    .offset-md-8 {
        margin-left: 66.66666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.33333333%
    }

    .offset-md-11 {
        margin-left: 91.66666667%
    }
}
@media(min-width:62rem){
  .col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}
  .col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}
  .col-lg-3{flex:0 0 25%;max-width:25%}
  .col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}
  .col-lg-6{flex:0 0 50%;max-width:50%}
  .col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}
  .col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}
  .col-lg-9{flex:0 0 75%;max-width:75%}
  .col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}
  .col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}
  .col-lg-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:75rem){
  .col-xl-1{flex:0 0 8.3333%;max-width:8.3333%}
  .col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}
  .col-xl-3{flex:0 0 25%;max-width:25%}
  .col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}
  .col-xl-6{flex:0 0 50%;max-width:50%}
  .col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}
  .col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}
  .col-xl-9{flex:0 0 75%;max-width:75%}
  .col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}
  .col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}
  .col-xl-12{flex:0 0 100%;max-width:100%}
}

/* =======================
   Container System
======================= */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacer);
  padding-right: var(--spacer);
}

@media (min-width: 36rem) {  /* sm / 576px */
  .container { max-width: 33.75rem; } /* 540px */
}
@media (min-width: 48rem) {  /* md / 768px */
  .container { max-width: 45rem; } /* 720px */
}
@media (min-width: 62rem) {  /* lg / 992px */
  .container { max-width: 60rem; } /* 960px */
}
@media (min-width: 75rem) {  /* xl / 1200px */
  .container { max-width: 71.25rem; } /* 1140px */
}
@media (min-width: 87.5rem) { /* xxl / 1400px */
  .container { max-width: 82.5rem; } /* 1320px */
}

.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-left: var(--spacer);
  padding-right: var(--spacer);
}

/* =======================
   Buttons & Links
======================= */
a{color:var(--color-primary);text-decoration:none;position:relative;transition:all 0.3s;}
a:hover{color:var(--color-secondary);transform:translateY(-2px);}
.nav-item a::after{content:'';display:block;height:2px;width:0;background:var(--color-primary);transition:width 0.3s;}
.nav-item a:hover::after{width:100%;background:var(--color-secondary);}

.nav-item.active a{color:var(--color-secondary);transform:translateY(-2px);}
.nav-item.active a::after{content:'';display:block;height:2px;width:100%;background:var(--color-secondary);transition:width 0.3s;}

a.nav-link{font-size: 1.125rem;}
.a-link{color: var(--color-white);}

.btn{display:inline-block;padding:0.5rem 1rem;border-radius:var(--radius-md);font-weight:700;cursor:pointer;transition:all 0.3s;}
.btn-primary{background:var(--color-primary);color:var(--color-white);}
.btn-primary:hover{background:var(--color-secondary);}


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

/* =======================
   Listen
======================= */
ul,ol{padding-left:1rem;margin-bottom:1rem;line-height:1.6;}
.list-none{list-style:none;}
.list-disc{list-style:disc;padding-left:1.5rem;}
.list-decimal{list-style:decimal;padding-left:1.5rem;}
.list-inline{list-style:none;display:flex;gap:1rem;padding-left:0;margin:0;}
.list-inline li{margin-bottom:0;}


/* =======================
   Utilities (Display, Text)
======================= */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

@media (min-width: 62rem) {
    .d-lg-none {
        display: none !important;
    }
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-sm { font-size: var(--font-sm); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }

.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }


.text { color: var(--color-text); }
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-dark{color: var(--color-dark);}
.underline{text-decoration: underline;}
.italic{font-style: italic;}
strong { font-weight: bold; }

/* ==========================================================================
                                    Custom Parts
============================================================================= */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--color-secondary);
}
#btn-back-to-top {
  display: inline-block;
  background-color: var(--color-secondary);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  cursor:pointer;
}
  
#btn-back-to-top:active, #btn-back-to-top:hover {
  background-color: var(--color-bg-secondary);
}
#btn-back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* main */
.section{
  display: block;
  width: 100%;
  position: relative;
  background-color: var(--color-bg-primary);
  padding: 5rem 0;
}
.section.error-page{
  background-color: var(--color-bg-footer);
  color: var(--color-white);
  min-height: 50vh;
}
.section + .section{
  border-top: 1px solid var(--border-color);
  margin-top: -1px;
}
.noxium{
  color: #007B8B !important;
  font-size: calc(1em + 0.5rem);
  font-weight: bolder !important;
  font-style: italic;
}