b, strong {
     font-weight: 400;
 }


 body {
     /* layout & typography */
     margin: 0;
     min-height: 100vh;
     z-index: 0;
     font-family: "Josefin Sans", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;
     font-weight: 200;
     color: #fff;

     /* background */
     background-color: #030306;
     /* fallback color */
     background-image: url("../test-2.webp");

     /* fallback */
     background-image: image-set(url("../test-2.avif") type("image/avif"),
             url("../test-2.webp") type("image/webp"));


     /* hero image */
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 h1,
 h2,
 h3,
 .h3,
 .h4,
 .h5 {
     font-family: "Josefin Sans", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;
     font-weight: 200;
 }

 p {
     font-size: 1.1rem;


 }

 body::before {
     content: "";
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle,
             rgba(65, 130, 230, .25) 0%,
             rgba(65, 130, 230, .2) 15%,
             rgba(28, 56, 99, .55) 45%,
             rgba(15, 25, 45, .75) 70%,
             rgba(0, 0, 0, 1) 100%);
     z-index: -1;
 }

 .social-icons {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     background-color: #101D30;
     text-align: center;
     padding: .75rem;
     transition: all .5s ease-in-out;
     margin: 0 .35rem;
     color: #fff;
 }

 .container {

     max-width: 1200px;

 }

 .social-icons svg {
     width: 24px;
     height: 24px;
     display: block;
     transition: all .5s ease-in-out;
 }

 .social-icons svg * {
     fill: currentColor;
 }

 .social-icons:hover {
     background-color: #fff;
     color: #101D30;
 }

 .mh1 {
     margin-left: .25rem;
     margin-right: .25rem;
 }

 a.no-border {
     border-bottom: none;
     text-decoration: none;
 }

 audio {
     width: 100%;

     border-radius: 30px;
     background-color: #101D30;
     padding: 16px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
 }

 ul#playlist {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 ul#playlist li {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     margin-bottom: 10px;
     background: #101D30;
     border-radius: 6px;
     cursor: pointer;
     transition: background .3s;
     font-size: 18px;
     margin: 30px auto 10px;
     border: 1px #999 solid;
     height: 60px;
 }

 ul#playlist li:hover {
     background: #333;
     box-shadow: 0 0 80px rgba(13, 22, 38, 0.8);


 }

 ul#playlist li.active {
     background: #999;
     color: #000;
     font-weight: 700;
 }

 .custom-player {
     background: #f0f0f0;
     padding: 10px 20px;
     border-radius: 30px;
     display: flex;
     align-items: center;
     gap: 10px;
     width: 100%;

     margin: auto;
 }

 #progress {
     flex: 1;
     height: 5px;
     border-radius: 5px;
     background: #ccc;
     accent-color: #666;
 }

 .nav-link {
     display: block;
     font-size: 1.2rem;
     font-weight: 300;
     color: #eee;
     padding: 0;
 }

 .nav-link:hover {
     color: #0788c0;
 }

 p {
     line-height: 1.4 !important;
 }

 #toggleLoop .icon,
 .fa-repeat {
     margin-right: 10px;
 }

 .btn-secondary {
     background-color: #31425A !important;
     border-color: #eee !important;
     font-family: "effra", sans-serif;
     font-weight: 300;
     font-size: .85rem;
 }

 #toggleLoop.active {
     background: #086891 !important;
     color: #fff !important;
 }

 .lang {
     opacity: 0;
     transition: opacity .3s ease;
     pointer-events: none;
     height: 0;
     overflow: hidden;
 }

 .lang.active {
     opacity: 1;
     pointer-events: auto;
     height: auto;
     overflow: visible;
 }

 a {
     color: #fff;
 }

 .countdown {
     display: flex;
     gap: .75rem;
     align-items: center;
     flex-direction: column;
 }

 .timer {
     font-variant-numeric: tabular-nums;
     letter-spacing: .5px;
 }

 .countdown.is-ended {
     opacity: .7;
 }

 .countdown.is-ended .cta {
     pointer-events: none;
     opacity: .5;
 }

 .promocode {
     font-family: 'Courier New', Courier, monospace;
     font-size: 1.2rem;
     background-color: #000;
     padding: .25rem .5rem;
     display: inline-block;
 }

 @media (prefers-reduced-motion: reduce) {

     .social-icons,
     .social-icons svg {
         transition: none;
     }
 }

 .video-shell {
     position: relative;
     aspect-ratio: 16/9;
     border-radius: 0;
     overflow: hidden;
     background: #0E1A2A
 }

 .video-shell-misfit {
     position: relative;
     aspect-ratio: 3/2;

     overflow: hidden;
     background: #0E1A2A
 }

 .video-shell>img, .video-shell-misfit>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block
 }

 .video-shell .play-btn, .video-shell-misfit .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: .5rem;
     border: 0;
     border-radius: 999px;
     background: rgba(14, 26, 42, 0.6);
     cursor: pointer;
     font-size: 1rem;
     backdrop-filter: blur(2px);
     transition: all 0.3s ease-in-out;

 }

 .video-shell svg, .video-shell-misfit svg {
     width: 50px;
     fill: white;


 }



 .video-shell .play-btn:hover {

     background: rgba(14, 26, 42, 0.9);

 }

 .video-shell .play-btn:focus {
     outline: 2px solid #fff;
     outline-offset: 2px
 }

 /* Base variables */
 .rainbow-heading {
     --t: 0;
     --count: 1;
 }

 /* Each character gets its own hue, then we add a global time offset (--t) */
 .rainbow-heading .char {
     display: inline-block;
     /* keeps emoji/accents stable */
     /*  color: hsl(calc((var(--i) / var(--count)) * 360 + var(--t)), 85%, 60%); */

     color: hsl(calc(120 + (var(--i) / var(--count)) * 80 + var(--t)), 100%, 60%);
     transition: color 60ms linear;
 }

 /* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
     .rainbow-heading .char {
         transition: none;
     }
 }


 .accordion-button {

     padding: 2rem;
     font-size: 1.25rem;
     color: #fff;
     text-align: left;
     background-color: rgba(13, 24, 40, 0.8);
     border: 0;

     overflow-anchor: none;

 }

 .accordion-item {
     border: none;
     background-color: rgba(13, 24, 40, 0.8);

 }

 .accordion-button:not(.collapsed) {
     color: #fff;
     background-color: #101D30;

     box-shadow: none;
 }

 .accordion-button:focus {

     box-shadow: none
 }

 #accordionExample>.accordion-item:first-child .accordion-header {
     border-bottom: 1px solid #555;



 }

 .accordion-flush>.accordion-item>.accordion-collapse, .accordion-flush>.accordion-item>.accordion-header .accordion-button, .accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed {
     border-radius: 8px;
 }


 .accordion-flush>.accordion-item {}

 .accordion-body {

     padding: 0.5rem;


 }