body{
    background-color: black;
    font-family: 'Inter', sans-serif;
}

.container {
    container-type: inline-size;
  }

.video-border {
  border: 0.5px solid #424558;
}

.desktop-vid {
  aspect-ratio: 1444 / 1064; 
}
.mobile-vid {
  aspect-ratio: 1032 / 930;
}

/* Example: 16:9 player box that scales responsively */
.tutorial-player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;  /* or match your video */
  background: #000;
  overflow: hidden;
}

.tutorial-player-wrap mux-player.tutorial-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0; /* with absolute positioning, the -0.5px margin is usually unnecessary */
}

.my-bar {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right,#000000, #121622, #4a536e, #121622, #000000 );
}


/* COLORS */
.color-light {
  color: #eceef4;
}
.color-grey {
  color: #b5c3e2;
}

/* TEXT */
.ebs-icon{
    width: 2.8cqi;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) { .ebs-icon {width: 2.8rem;} }
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .ebs-icon {width: 2.1rem;} } /* 1.9rem*/
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .ebs-icon {font-size: 1.9rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .ebs-icon {font-size: 1.7rem;}}

.ebs-icon-text {
  font-family: "Exo 2", sans-serif;
  font-size: 2.4cqi;
  font-weight: 600;
  font-optical-sizing: auto;
  text-decoration: none;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) { .ebs-icon-text {font-size: 2.4rem;} }
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .ebs-icon-text {font-size: 1.9rem;} } /*1.7rem*/
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .ebs-icon-text {font-size: 1.8rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .ebs-icon-text {font-size: 1.6rem;}}


.made-with {
  font-family: "Exo 2", sans-serif;
  font-size: 2cqi;
  font-weight: 400;
  font-optical-sizing: auto;
  text-decoration: none;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) { .made-with {font-size: 2rem;} }
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.made-with {font-size: 1.3rem;}}
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .made-with {font-size: 1.1rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .made-with {font-size: 1rem;}}


.ebs-icon-small {
  width: 2.6cqi;
  position: relative;
  top: -0.35cqi;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) { .ebs-icon-small {width: 2.6rem; top: -0.5rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.ebs-icon-small {width: 1.6rem; top: -0.2rem;}}
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .ebs-icon-small  {width: 1.45rem; top: -0.15rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .ebs-icon-small  {width: 1.35rem; top: -0.1rem;}}


.ebs-icon-text-small{
  font-family: "Exo 2", sans-serif;
  font-size: 2.4cqi;
  font-weight: 600;
  font-optical-sizing: auto;
  text-decoration: none;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) { .ebs-icon-text-small {font-size: 2.4rem;} }
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.ebs-icon-text-small {font-size: 1.5rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .ebs-icon-text-small {font-size: 1.5rem; } }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .ebs-icon-text-small {font-size: 1.35rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .ebs-icon-text-small {font-size: 1.25rem;}}


.ebs-icon-big{
    width: 3.5cqi;
    position: relative;
    top: -0.2cqi;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) { .ebs-icon-big {width: 3.5rem;} }
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .ebs-icon-big {width: 2.5rem;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .ebs-icon-big {width: 2rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .ebs-icon-big {width: 1.7rem;}}


.my-p {
    font-size: 1.4cqi; 
    font-weight: normal;
    line-height: 1.6;
  }
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {.my-p {font-size: 1.4rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.my-p {font-size: 0.95rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .my-p {font-size: 1rem; line-height: 1.5;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .my-p {font-size: 0.95rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .my-p {font-size: 0.85rem;}}


.my-headline {
  font-weight: bold;
  font-size: 3.3cqi;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {.my-headline {font-size: 3.3rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .my-headline {font-size: 2.8rem; font-weight: 800;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .my-headline {font-size: 2.2rem; } }
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .my-headline {font-size: 1.8rem; } }


.my-headline2 {
    font-weight: bold;
    font-size: 2.8cqi;
  }
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {.my-headline2 {font-size: 2.8rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .my-headline2 {font-size: 2.5rem; font-weight: 800;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .my-headline2 {font-size: 1.9rem; } }
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .my-headline2 {font-size: 1.6rem; } }


.my-headline3 {
    font-weight: 600;
    font-size: 2.2cqi;
  }
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {.my-headline3 {font-size: 2.2rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .my-headline3 {font-size: 1.5rem;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .my-headline3 {font-size: 1.4rem; } }
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .my-headline3 {font-size: 1.2rem; } }

a.my-a {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}
a.my-a:hover{
    color: #d9def3;
}

.intro-a {
        color: #b5bce2;
        text-decoration: none;
        display: inline-flex;
        align-items: center; 
        font-size: 1.1rem;    
    }
.intro-a:hover{
        color: #d9def3;
        text-decoration: underline;
    }
.intro-a i {
    font-size: 1.3rem;   
    }
/* sm container */
    @media (max-width: 767.98px) { 
        .intro-a {font-size: 0.9rem;}
        .intro-a i {font-size: 1.1rem;}
    }


.foot {
  font-size:  1.4cqi;
  text-decoration: none;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {.foot {font-size: 1.3rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.foot {font-size: 0.95rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .foot {font-size: 0.9rem;} }
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .foot {font-size: 0.8rem; } }

a.foot:hover {
  color: #eceef4;
}

.foot-icon {
  font-size: 1.7cqi;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {.foot-icon {font-size: 1.6rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199.98px) {.foot-icon {font-size: 1.25rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) { .foot-icon {font-size: 1.3rem;} }
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { .foot-icon {font-size: 1.2rem; } }

a.foot-icon:hover {
  color: #eceef4;
}

ul li {
  padding: 5px;
}


/* Buttons */
a.my-button, button.my-button{
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* giant container, br 1920px, width 1810px*/
@media (min-width: 1921px) {a.my-button, button.my-button {height: 62px; padding-left: 1.9rem; padding-right: 1.9rem; font-size: 18px;}}
/* xxl container, br start 1600 end 1921, width 1320 */
@media (max-width: 1920.98px) {a.my-button, button.my-button {height: 52px; padding-left: 1.8rem; padding-right: 1.8rem; font-size: 16px;}}
/* xl container, br start 1200 end 1600, width 1140 */
@media (max-width: 1599.98px) {a.my-button, button.my-button {height: 48px; padding-left: 1.4rem; padding-right: 1.4rem; font-size: 14px;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199.98px) {a.my-button, button.my-button {height: 46px; padding-left: 1.3rem; padding-right: 1.3rem; font-size: 14px;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) { a.my-button, button.my-button {height: 45px; padding-left: 1.2rem; padding-right: 1.2rem; font-size: 13px;}}



a.button-main, button.button-main {
  background: #00e7a2;
  border: 2px solid #00e7a2;
  color: black;
  transition: 150ms all ease-in;
}

a.button-main:hover, button.button-main:hover {
  background: #32ffc1;
  border: 2px solid #32ffc1;
}

a.button-second{
  background: #112425;
  color: #029e7a;
  border: solid 2px #027056;
  transition: 150ms all ease-in;
}

a.button-second:hover{
  background: rgba(50,255,193, 0.15);
  color: #01c698;
  border: solid 2px #019875;
}

a.button-second-light{
  background: #112425;
  color: #01c698;
  border: solid 2px #019875;
  transition: 150ms all ease-in;
}

a.button-second-light:hover{
  background: #00e7a2;
  color: black;
  border: solid 2px #00e7a2;
}

a.button-third{
  background-color: transparent;
  border: #d9def3 1px solid;
  color: #d9def3;
  transition: 150ms all ease-in;
}

a.button-third:hover{
  background-color: #d9def3;
  border: #d9def3 1px solid;
  color: black;
}

/* BACKGROUNDS */
.gradient-right{
  background-image: radial-gradient(ellipse 60% 60% at 100% 50%, rgb(19, 23, 40), #0a0a14, #000000);
}

.gradient-left{
  background-image: radial-gradient(ellipse 60% 60% at 0% 50%,rgb(19, 23, 40), #0a0a14, #000000);
}

.gradient-down {
  background: linear-gradient(#000000, #000000, #0e121b);
}

.gradient-lightbulb {
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgb(22, 27, 49), #0a0c17, #000000);
  }

.gradient-lightbulb-down {
    background: radial-gradient(ellipse 60% 50% at 50% 100%, rgb(22, 27, 49), #0a0c17, #000000);
}

.gradient-middle {
  background: linear-gradient(#000000, rgb(15, 19, 35), #000000 );
}
.gradient-middle-strong {
  background: linear-gradient(#000000, rgb(22, 27, 49), #000000 );
}

.gradient-sun {
    background-image: radial-gradient(ellipse 65% 60% at 50% 50%,  rgb(22, 27, 49), #000000);
}
/* xxl: container = 1320px*/
@media (min-width: 1601px) {
  .gradient-sun {
    background-image: radial-gradient(ellipse 750px 45% at 50% 58%,  rgb(22, 27, 49), #000000);
  }
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {
  .gradient-sun {
     background-image:radial-gradient(ellipse 950px 45% at 50% 55%,  rgb(22, 27, 49), #000000);
  }
}


.gradient-sun-strong {
    background-image: radial-gradient(ellipse 85% 50% at 50% 50%,  rgb(28, 34, 61), #000000);
}


.gradient-tutorial {
    background-image: radial-gradient(ellipse 60% 50% at 50% 55%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
}
/* xxl: container = 1320px*/
@media (min-width: 1601px) {
  .gradient-tutorial {
    background-image: radial-gradient(ellipse 900px 45% at 50% 58%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
  }
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {
  .gradient-tutorial {
     background-image: radial-gradient(ellipse 1150px 45% at 50% 55%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
  }
}


.gradient-stripeglow {
    background-image: radial-gradient(ellipse 60% 50% at 50% 50%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
}
/* xxl: container = 1320px*/
@media (min-width: 1601px) {
  .gradient-stripeglow {
    background-image: radial-gradient(ellipse 950px 45% at 50% 47%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
  }
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {
  .gradient-stripeglow {
    background-image: radial-gradient(ellipse 1300px 45% at 50% 47%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
  }
}


.gradient-videoglow {
  /*background-image: radial-gradient(ellipse 32% 47% at 66% 55%, rgb(40, 50, 96), rgb(34, 42, 77), rgb(30, 37, 70), rgb(23, 27, 52), rgb(13, 15, 33), #000000);*/
  /* glow_width = 0.8 * video_width (precteno z inspectu pro kazdy breakpoint) */
  /* glow_height = 0.7 * video_height*/
  /* glow_x = 50vw + (container_width / 12 * 2.5) :: video zabira 7 slpupcu zprava, jeho polovina zacina na 8.5 sloupci*/
  background-image: radial-gradient(ellipse 600px 384px at calc(50vw + 275px) 53%, rgb(34, 42, 77),rgb(24, 29, 56), #000000);
}
/* lg: container = 990px*/
@media (min-width: 1034px) {
  .gradient-videoglow {
    background-image: radial-gradient( ellipse 442px 284px at calc(50vw + 206px) 53%, rgb(34, 42, 77),rgb(24, 29, 56), #000000);
  }
}

/* xl: container = 1140px*/
@media (min-width: 1201px) {
  .gradient-videoglow {
    background-image: radial-gradient( ellipse 512px 330px at calc(50vw + 238px) 53%, rgb(34, 42, 77), rgb(24, 29, 56), #000000);
  }
}

/* xxl: container = 1320px*/
@media (min-width: 1601px) {
  .gradient-videoglow {
    background-image: radial-gradient(ellipse 600px 384px at calc(50vw + 275px) 53%, rgb(34, 42, 77),rgb(24, 29, 56), #000000);
  }
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {
  .gradient-videoglow {
    background-image: radial-gradient(ellipse 824px 530px at calc(50vw + 377px) 55%,  rgb(34, 42, 77),rgb(24, 29, 56), #000000);
  }
}



/* PRICING */
.pricing-plan {
  margin: 0 0 1rem 0;
  width: 100%;
  background: #090911;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: #252a3d 2px solid;
}
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .pricing-plan {border: #626a8b 1px solid;}}

.pricing-plan.pro{
  border: #02cb9d 2px solid;
}
.pricing-plan .pricing-header {
  padding-left: 2.5rem;
  border-bottom: #191e2e 2px solid;
}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) {.pricing-plan .pricing-header {padding-left: 1.3rem;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .pricing-plan .pricing-header {padding-left: 1.6rem; border-bottom: #626a8b 1px solid;}}


.pricing-plan .pricing-header .pricing-title {
  font-weight: 600;
  font-size: 1.9cqi; 
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {.pricing-plan .pricing-header .pricing-title {font-size: 1.9rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.pricing-plan .pricing-header .pricing-title {font-size: 1.3rem;}}
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .pricing-plan .pricing-header .pricing-title {font-size: 1.2rem;}}


.pricing-plan .pricing-header .pricing-cost {
  font-weight: 600;
  font-size: 2.7cqi;
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {.pricing-plan .pricing-header .pricing-cost {font-size: 2.7rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.pricing-plan .pricing-header .pricing-cost {font-size: 1.7rem;}}

.pricing-plan .pricing-features {
  padding: 0;
  margin: 20px 0;
  text-align: left;
}
.pricing-plan .pricing-features li {
  font-size: 1.2cqi;
  padding: 0.5rem 2.5rem 0.5rem 2.5rem;
  overflow: hidden;
  position: relative;
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {.pricing-plan .pricing-features li {font-size: 1.1rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.pricing-plan .pricing-features li {font-size: 0.88rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) {.pricing-plan .pricing-features li {font-size: 0.85rem; padding: 0.5rem 1.3rem 0.5rem 1.3em;} }
/* sm container, start at 576, end 744, width 720px*/
@media (max-width: 743.98px) { .pricing-plan .pricing-features li {  padding: 0.25rem 1.6rem 0.25rem 1.6rem;}}


.pricing-plan .pricing-footer {
  text-align: center;
  padding: 1rem 0 2rem 0;
}


/* FAQ */
.accordion-item{
  background-color: transparent !important;
  border-bottom: 1px solid #191e2e !important;
}

.accordion-body {
    font-size: 1.4cqi;
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {.accordion-body {font-size: 1.2rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.accordion-body {font-size: 0.95rem;}}
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) {.accordion-body {font-size: 0.8rem;}}

.accordion-button{
  background-color: transparent !important;
  color: #eceef4 !important;
  font-size:  1.5cqi;
  line-height: 3;
}
/* giant: container = 1810px*/
@media (min-width: 1921px) {.accordion-button {font-size: 1.4rem;}}
/* lg container, br start 1033 end 1200, width 990 */
@media (max-width: 1199px) {.accordion-button {font-size: 1rem;}}
/* md container, start at 744, end 1033, width 720px*/
@media (max-width: 1032.98px) {.accordion-button {font-size: 1.05rem; line-height: 2.5;} }
/* xs container, start at 0, end 576, width 540px*/
@media (max-width: 575.98px) {.accordion-button {font-size: 0.85rem; line-height: 1.7;}}

.accordion-button:focus{
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.accordion-button:not(.collapsed)::before {
  border: none;
}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9def3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9def3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


/* MODAL */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: all;
}

.modal-overlay.active {
    opacity: 1;
}

.modal {
    display: none;
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 90%;
    max-width: 400px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
}

.modal-content {
    background-color: #181c2c;
    border: #4a536e 1px solid;
    pointer-events: auto;
}

.modal.active {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.modal-content a[role="button"] {
    min-width: 13ch;
    width: auto;
}

body.modal-open {
    overflow: hidden;
}


/* ABOUT US */
.table-transparent {
    background-color: transparent !important;
}
.table-transparent > tbody > tr > td {
    background-color: transparent !important;
    color: #eceef4 !important;
    font-weight: 500;
    font-size: clamp(1rem, 1.5cqi, 1.5rem); 
    line-height: normal;
}

.profile-img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.gray-icon {
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5cqi, 1.3rem);
}
.gray-icon:hover {
    color: #eceef4;
}

hr {
    border: none;
    border-top: 1px solid #979fc9;
    height: 1px;
    width: 100%;
  }

html{
  scroll-behavior: smooth;
}


/* LIGHTBOX */
mux-player {
    --pip-button: none;
    aspect-ratio: 16 / 9;
}

.video-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.4s;
}
.video-lightbox.active {
  opacity: 1; pointer-events: auto;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
}

/* Responsive Content Container */
.video-lightbox-content {
  position: relative;
  background: #111;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  padding: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1);
}
.video-lightbox.active .video-lightbox-content {
  opacity: 1;
  transform: scale(1);
}

/* Close Button outside the video/content */
.close-lightbox {
  position: absolute;
  top: 1%; 
  right: 0.5%;
  background: none; border: none; color: #d1d1d1;
  font-size: 2.2rem;
  line-height: 1; opacity: 0.85; z-index: 1001;
  cursor: pointer; transition: opacity 0.2s;
  padding: 0.1em 0.4em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.close-lightbox:hover { opacity: 1; }

.close-lightbox:focus { opacity: 1; outline:none;}