header {
  max-width: 1440px;
  margin: 0 auto;
      display: block;
    position: relative;
    width: 100%;
}
.homepage-video {
  background: transparent;
  overflow: hidden;
  width: 100%;
  min-width: 1440px;
  min-height: 988px;
  position: relative;
  height: 100%;
}

#bgVideo {
    min-width: 100%;
    min-height: 100%;
}

.homepage-video .rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #242424;
}

.homepage-video .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
      object-fit: cover;
    display: flex
;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.homepage-video .ry {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 988px;
  display: flex;
  z-index: 9;
  opacity: 0.2;
  height: 100%;
  display: flex;
    justify-content: center;
    align-items: center;

}

.homepage-video .div {
  width: 240px;
  height: 100%;
  border: 1px solid;
  border-color: #ffffff33;
}

.homepage-video .gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: #ffffff2e;
  box-shadow: inset 0px 0px 8px #ffffff40;

  background: linear-gradient(
    301deg,
    rgba(255, 0, 0, 0.15) 0%,
    rgba(0, 8, 255, 0.15) 100%
  );
}

.homepage-video .text-wrapper {
  position: absolute;
bottom: 0px;
    left: 190px;
    transform: rotate(-90.00deg);
    transform-origin: top left;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: #d9d9d966;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.homepage-video .fittech-horizontal {
  position: absolute;
  top: 34px;
right: 30px;
  width: 320px;
  height: auto;
  z-index:9999;
  overflow: hidden;
}

.homepage-video .fittech-horizontal-in {
      width: 519px;
    left: -90px;
    position: relative;
}


.homepage-video .frame {
  position: absolute;
bottom: -360px;
  left: 960px;
  width: 240px;
  height: 611px;
  display: flex;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid;
  border-color: #ffffff2e;
  box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a, inset 0px
    0px 8px #ffffff40;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  background: linear-gradient(
    301deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

.homepage-video .sou-st-skupiny {
  margin-top: 57px;
  width: 179px;
  height: 64px;
  margin-left: 30px;
  font-family: "Roboto", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.homepage-video .span {
  font-weight: 300;
}

.homepage-video .text-wrapper-2 {
  font-family: "Roboto", Helvetica;
}

.homepage-video .text-wrapper-3 {
  font-family: "Roboto", Helvetica;
  font-weight: 100;
}

.homepage-video .frame-wrapper {
  position: absolute;
bottom: -430px;
  left: 1200px;
  width: 240px;
  height: 611px;
  display: flex;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid;
  border-color: #ffffff2e;
  box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a, inset 0px
    0px 8px #ffffff40;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  background: linear-gradient(
    301deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

.homepage-video .frame-2 {
  display: flex;
  margin-top: 42px;
  width: 179px;
  height: 49.15px;
  margin-left: 30px;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: white;
    text-align: center;
}

.homepage-video .frame-2 .span {
    font-family: "Roboto", Helvetica;
  font-weight: 400;
    font-size: 12px;
}
.homepage-video .frame-2 .text-wrapper-3{
  font-family: "Roboto", Helvetica;
  font-weight: 100;
  font-size: 12px;
} 
.homepage-video .copyright-ON-BOARD {
  position: relative;
  align-self: stretch;
  height: 28px;
  margin-top: -1.00px;
  font-family: "Roboto", Helvetica;
  font-weight: 100;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.homepage-video .logo-onboard {
  position: relative;
  width: 15px;
  height: 15.15px;
  background-color: #ffffff;
  border-radius: 7.5px / 7.58px;
  opacity: 0.5;
}

.homepage-video .ellipse {
  position: absolute;
  width: 47.67%;
  height: 47.67%;
  top: 19.77%;
  left: 25.58%;
  background-color: #ffffff;
  border-radius: 3.58px / 3.61px;
  border: 1.04px solid;
  border-color: #000000;
}

.homepage-video .rectangle-2 {
  position: absolute;
  width: 24.42%;
  height: 6.98%;
  top: 70.93%;
  left: 37.21%;
  background-color: #000000;
  border: 0.17px solid;
}

.homepage-video .justfit-tlaidlo {
  position: absolute;
  bottom: -260px;
  left: 241px;
  width: 240px;
  height: 611px;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid;
  border-color: #ffffff2e;
  box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a, inset 0px
    0px 8px #ffffff40;
  backdrop-filter: blur(7.5px) brightness(100%);
  -webkit-backdrop-filter: blur(7.5px) brightness(100%);
  background: linear-gradient(
    301deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transition: all 300ms ease-in-out;
  cursor: pointer;
  z-index: 999;
}

.justfit-tlaidlo:hover {
    bottom: -250px;
        background: linear-gradient(
    301deg,
    rgba(255, 0, 0, 0.07) 0%,
    rgba(0, 8, 255, 0.07) 100%
  );
}

.homepage-video .logo {
  position: absolute;
  top: 86px;
  left: 78px;
  width: 82px;
  height: 90px;
  aspect-ratio: 0.91;
  object-fit: cover;
}

.homepage-video .vector {
  position: absolute;
  width: 19.17%;
  height: 5.56%;
  top: 36.82%;
  left: 38.33%;
}

.homepage-video .akuis-tlaidlo {
  position: absolute;
bottom: -260px;
  left: 480px;
  width: 240px;
  height: 611px;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid;
  border-color: #ffffff2e;
  box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a, inset 0px
    0px 8px #ffffff40;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  background: linear-gradient(
    301deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
   transition: all 300ms ease-in-out;
  cursor: pointer;
  z-index: 999;
}

.homepage-video .akuis-tlaidlo:hover {
    bottom: -250px;
        background: linear-gradient(
    301deg,
    rgba(255, 0, 0, 0.07) 0%,
    rgba(0, 8, 255, 0.07) 100%
  );
}

.homepage-video .akuis-white {
  position: absolute;
  top: 109px;
  left: 50px;
  width: 140px;
  height: 30px;
  aspect-ratio: 4.71;
  object-fit: cover;
}

.homepage-video .wellsystem-tlaidlo {
  position: absolute;
bottom: -260px;
  left: 720px;
  width: 240px;
  height: 611px;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid;
  border-color: #ffffff2e;
  box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a, inset 0px
    0px 8px #ffffff40;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  background: linear-gradient(
    301deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transition: all 300ms ease-in-out;
  cursor: pointer;
  z-index: 999;
}

.homepage-video .wellsystem-tlaidlo:hover {
    bottom: -250px;
        background: linear-gradient(
    301deg,
    rgba(255, 0, 0, 0.07) 0%,
    rgba(0, 8, 255, 0.07) 100%
  );

}

.homepage-video .wellsystem-logo {
  position: absolute;
  width: 72.08%;
  top: 98px;
  left: 13.75%;
  height: 51px;
  aspect-ratio: 3.39;
  object-fit: cover;
}

.homepage-video .pipravujeme-pro-vs {
  position: absolute;
  top: 201px;
  left: 240px;
  width: 515px;
  height: 150px;
  display: flex;
}

.homepage-video .p-ipravujeme-pro-v-s {
  flex: 1;
  width: 540px;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: #ffffff;
  font-size: 64px;
  letter-spacing: 0;
  line-height: normal;
}

.homepage-video .sputn {
  position: absolute;
  top: 393px;
  left: 241px;
  width: 470px;
  height: 28px;
  display: flex;
  padding-top:10px;
}

.homepage-video .p {
  width: 470px;
  height: 28px;
  font-family: "Roboto", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.homepage-video .line {
  position: absolute;
  top: 377px;
  left: 240px;
  width: 480px;
    height: 5px;
    display: flex;
    background: linear-gradient(93deg, rgba(214, 36, 42, 1) 0%, rgba(38, 45, 101, 1) 100%);
    border: 0;
}

.homepage-video .img {
  flex: 1;
  width: 480px;
}
/* Inject original CSS code here */


.frames {
    height: 100%;
    position:relative;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.animated-text {
  animation: shadowPulse 2.5s ease-in-out infinite alternate;
}

.homepage-video .justfit-tlaidlo .logo.hover,
.homepage-video .akuis-tlaidlo .akuis-white.hover,
.homepage-video .wellsystem-tlaidlo .wellsystem-logo.hover {
opacity: 0 !important;
visibility: hidden !important;
transition:all 300ms ease-in-out;
display: none;
}

.homepage-video .justfit-tlaidlo:hover .logo,
.homepage-video .akuis-tlaidlo:hover .akuis-white,
.homepage-video .wellsystem-tlaidlo:hover .wellsystem-logo {
opacity: 0 !important;
visibility: hidden !important;
display: none;
}
.homepage-video .justfit-tlaidlo:hover .logo.hover,
.homepage-video .akuis-tlaidlo:hover .akuis-white.hover,
.homepage-video .wellsystem-tlaidlo:hover .wellsystem-logo.hover {
opacity: 1 !important;
visibility: visible !important;
display: block;
}

@keyframes shadowPulse {
  from {
    text-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
  }
  to {
    text-shadow: 0px 0px 25.6px rgba(255, 255, 255, 0.7);
  }
}

/* Mobile responsive styles */

@media (max-width: 1439px) {
  .homepage-video {
    min-width: 100%;
    min-height: unset;
    display: flex;
        flex-direction: column;
  }
  
  .frames {
    max-width: 100%;
    min-width: 100%;
    padding: 0 20px;
  }

  .homepage-video .text-wrapper {
    left: 20px;

  }
  .homepage-video .justfit-tlaidlo{
    left: 5%;
    width: 18%;

  }
  .homepage-video .akuis-tlaidlo {
    left: 23%;
    width: 18%;

  }
  .homepage-video .wellsystem-tlaidlo {
    left: 41%;
    width: 18%;

  }
  .homepage-video .frame {
    left: 59%;
       width: 18%;

  }
  .homepage-video .frame-wrapper {
    left: 77%;
       width: 18%;
  
  }
  .line,
  .homepage-video .sputn,
.homepage-video .pipravujeme-pro-vs {
left: 62px;
}
.homepage-video .sou-st-skupiny{
         margin: 30px auto;
}

.homepage-video .logo{
    left: 28%
}
    .homepage-video .akuis-white {
        position: absolute;
        top: 109px;
        left: 17%;
    }

    .homepage-video .line {
        left:6%;
    }
    .homepage-video .fittech-horizontal {
        right: 40px;
        left: auto;
    }
}

@media (max-width: 768px) {
  .homepage-video {
    min-width: 100%;
    min-height: unset;
            overflow-x: hidden;
        position: relative;
        height: auto;
  }




  /* Hide desktop grid background */
  .homepage-video .ry {
    display: none;
  }

  /* Header logo */
  .homepage-video .fittech-horizontal {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: auto;
  }

  /* Main content */
  .frames {
    flex-direction: column-reverse;
    align-items: center;
    padding: 0 20px;
    max-width: 100%;
  }

  .homepage-video .pipravujeme-pro-vs {
    position: relative;
    top: -30px;
    left: 0;
    width: 100%;
    height: auto;
    padding: 0 20px;
            text-align: center;
        padding-top: 300px;
        padding-bottom: 100px;
  }

  .homepage-video .p-ipravujeme-pro-v-s {
    font-size: 32px;
    line-height: 1.2;
    width: 100%;
  }

  .homepage-video .sputn {
    position: relative;
    top: 375px;
    left: 0;
    width: 100%;
    height: auto;
    padding: 0 20px;
    text-align: center;
padding-top: 10px !important;

  }

  .homepage-video .p {
    font-size: 16px;
    white-space: normal;
    width: 100%;
    height: auto;
  }

  .homepage-video .line {
    position: relative;
    top: 140px;
    left: 0;
    width: calc(100% - 40px);
    margin: 0 20px;
    display: none;
  }

  .homepage-video .img {
    width: 100%;
  }

  /* Tagline */
  .homepage-video .text-wrapper {
    position: relative;
    bottom: 20px;
    left: 0px;
    transform: none;
    font-size: 17px;
    writing-mode: horizontal-tb;
  }

  /* Cards - stack vertically */
  .homepage-video .justfit-tlaidlo,
  .homepage-video .akuis-tlaidlo,
  .homepage-video .wellsystem-tlaidlo {
    position: relative;
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: 320px;
    height: 180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
        flex-direction: column;
  }

  .homepage-video .justfit-tlaidlo {
    margin-top: 0px;
  }

  .homepage-video .justfit-tlaidlo:hover,
  .homepage-video .akuis-tlaidlo:hover,
  .homepage-video .wellsystem-tlaidlo:hover {
    bottom: auto;
    transform: scale(1.02);
  }
  .homepage-video .logo.hover,
  .homepage-video .logo {
    position: static;
    width: 60px;
    height: auto;
    margin: 0 auto;
        opacity: 1;
    visibility: visible;
     transition: all 300ms ease-in-out;
  }
.homepage-video .akuis-white.hover,
  .homepage-video .akuis-white {
    position: static;
    width: 120px;
    height: auto;
    margin: 0 auto;
    opacity: 1;
    visibility: visible;
     transition: all 300ms ease-in-out;
  }
.homepage-video .wellsystem-logo.hover,
  .homepage-video .wellsystem-logo {
    position: static;
    width: 150px;
    height: auto;
    margin: 0 auto;
    opacity: 1;
    visibility: visible;
    transition: all 300ms ease-in-out;
  }
   .homepage-video .justfit-tlaidlo .logo.hover,
  .homepage-video .akuis-tlaidlo .akuis-white.hover,
  .homepage-video .wellsystem-tlaidlo .wellsystem-logo.hover {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .homepage-video .justfit-tlaidlo:hover .logo,
  .homepage-video .akuis-tlaidlo:hover .akuis-white,
  .homepage-video .wellsystem-tlaidlo:hover .wellsystem-logo {
    opacity: 0;
    visibility: hidden;
  }
   .homepage-video .justfit-tlaidlo:hover .logo.hover,
  .homepage-video .akuis-tlaidlo:hover .akuis-white.hover,
  .homepage-video .wellsystem-tlaidlo:hover .wellsystem-logo.hover {
    opacity: 1;
    visibility: visible;
  }


  .homepage-video .vector {
    display: none;
  }

  /* Side frames - move to bottom */
  .homepage-video .frame {
    position: relative;
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 20px auto;
    padding: 30px 20px;
  }

  .homepage-video .sou-st-skupiny {
    margin: 0;
    width: 100%;
    font-size: 10px;
  }

  .homepage-video .frame-wrapper {
    position: relative;
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: 320px;
    height: auto;
    padding: 30px 20px;
  }

  .homepage-video .frame-2 {
    margin: 0;
    width: 100%;
  }

  .homepage-video .copyright-ON-BOARD {
    font-size: 10px;
  }

  .homepage-video .video {
      align-items: flex-start !important;
  }
  #bgVideo {
      min-width: 100%;
      min-height: 400px !important;
      height: 400px !important;
          
  }
}

@media (max-width: 480px) {

  .homepage-video .p-ipravujeme-pro-v-s {
    font-size: 28px;
  }

  .homepage-video .p {
    font-size: 14px;
  }

  .homepage-video .justfit-tlaidlo,
  .homepage-video .akuis-tlaidlo,
  .homepage-video .wellsystem-tlaidlo,
  .homepage-video .frame,
  .homepage-video .frame-wrapper {
    max-width: 280px;
    height: 130px;
    min-height: 130px;
    margin: 0;
    flex-direction: column;
    margin-bottom:10px;
  }

    .homepage-video .frame {
      height: 240px;
      min-height: 160px;   
    }
  .homepage-video .frame-wrapper {
    height: 170px;
    min-height: 110px;
  }
}