.header {
  /* background-color: var(--main-bg-color); */
  color: var(--text-white-color);

  padding-bottom: 20vh;
  height: auto;
}
.main {
  /* overflow: hidden; */

  transition-duration: 1400ms;
  /* height: auto; */
  transition-delay: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0.1, 0.2, 1);
}

/* ================================ Anumation header start ====================================  */
/* Starten außerhalb des Viewports */
/* Starten unsichtbar */
/* Für Animationseffekt */
.animated-card {
  /* transform: translateX(0px);  */
  /* opacity: 0;   */
  /* transition: transform 1.5s ease, opacity 1.5s ease; */
}

.char {
  display: inline-block;
}

/* .char.space {
  width: 0.5em; 
} */

h1,
p {
  overflow: hidden;
}
.char {
  display: inline-block;
}
/* Platzhalter für Leerzeichen */
.char.space {
  width: 0.5em;
}
/* Verhindert, dass animierte Elemente über das Element hinausragen */
h1,
p {
  overflow: hidden;
}
/* ================================ Anumation header end ====================================  */
.header h1 {
  text-shadow: 2px 2px 0px var(--second-bg-color) !important;
}

.row-height-title {
  height: 56vh;
  /* background-color: rgb(253, 176, 176); */
}
.row-card-holder {
  display: flex !;
}
.header-col-image {
  position: relative;
  overflow: hidden;
  width: 20.4vw !important;
  height: 79vh;
  border-radius: 0.9vw;
  /* border: 1px solid var(--second-bg-color); */
}

/* button contakt start*/
.btn-contact-header {
  --bs-btn-color: var(--text-white-color) !important;
  --bs-btn-bg: var(--second-bg-color) !important;
  --bs-btn-border-color: var(--second-bg-color) !important;
  --bs-btn-hover-color: var(--second-bg-color) !important;
  --bs-btn-hover-bg: var(--text-white-color) !important;
  --bs-btn-hover-border-color:var(--second-bg-color) !important;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--text-white-color) !important;
  --bs-btn-active-bg: var(--text-white-color) !important;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px var(--second-bg-color) !important;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--second-bg-color) !important;
  --bs-btn-disabled-border-color: var(--second-bg-color) !important;
}
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: var(--montserat-regular) !important;
  --bs-btn-font-size: clamp(min(0.9rem, 0.9rem), 2.5vw, max(1rem, 1rem));
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem
    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: 20px !important;
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  width: clamp(10rem, 20em, 10vw) !important;
}

.btn-course {
  background-color: var(--text-white-color);
  text-decoration: none;
  color: var(--second-bg-color) !important;
  font-size: clamp(0.75rem, 0.51rem + 1.2vw, 1.44rem);
  width: 15vw;
  padding: 1.6rem 2rem 1.6rem 2rem;
  border-radius: 0.5vw;
}
.btn-course:hover {
  background-color: var(--second-bg-color);
  text-decoration: none;
  color: var(--text-white-color) !important;
  font-size: clamp(0.75rem, 0.51rem + 1.2vw, 1.44rem);

  padding: 1.6rem 2rem 1.6rem 2rem;
  border-radius: 0.5vw;
}

/* button card start*/
.card {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: ;
  --bs-btn-font-family: var(--montserat-regular) !important;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--text-white-color) !important;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 0px !important;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem
    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-top-left-radius: 0.9vw !important;
  border-top-right-radius: 0.9vw !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 100%;
  height: 18vh !important;
}
.btn-card {
  --bs-btn-color: var(--text-white-color) !important;
  --bs-btn-bg: var(--second-bg-color) !important;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.header-video-img-holder {
  position: relative;
  background-image: url(/images/Screenshot\ 2024-11-28\ 131125-small.webp);
  height: 79vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: -4vw 12vh !important;
  border-bottom-left-radius: 0.9vw;
  border-bottom-right-radius: 0.9vw;
  transition: all 400ms ease;
}
.header-video-img-holder-one {
  position: relative;
  background-image: url(/images/Screenshot\ 2024-12-01\ 145027-small.webp);
  height: 79vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: -4vw 13vh;
  border-bottom-left-radius: 0.9vw;
  border-bottom-right-radius: 0.9vw;
  transition: all 400ms ease;
}
.header-video-img-holder-two {
  position: relative;
  background-image: url(/images/Screenshot\ 2024-12-01\ 144838-small.webp);
  height: 79vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: -3vw 9vh;
  border-bottom-left-radius: 0.9vw;
  border-bottom-right-radius: 0.9vw;
  transition: all 400ms ease;
}
.header-video-img-holder-three {
  position: relative;
  background-image: url(/images/Screenshot\ 2024-12-01\ 144643-small.webp);
  height: 79vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  /* background-position: -7vw 13vh; */
  background-position: center 13vh;
  border-bottom-left-radius: 0.9vw;
  border-bottom-right-radius: 0.9vw;
  transition: all 400ms ease;
}

.header-video-text-holder {
  background-color: var(--second-bg-color);
  padding: 2rem;
  height: 18vh;
}
.video-container {
  position: relative;
  overflow: hidden;
  width: clamp(10.9rem, 0.022rem + 20vw, 32rem);
  height: 79vh;
  border-radius: 0.9vw;
}
.video-container .header-image-test {
  position: absolute;
  transform: translate(0%, 0%) !important;
  opacity: 0;
}
.video-container .header-image-test.show {
  position: absolute;
  transition: all 400ms ease;
  width: 100%;
  height: 79vh;
  transform: translate(0% 0px);
  transform: translateZ(0rem);
  opacity: 1;
}
.video-container .header-image-test {
  position: absolute;
  transform: translate3d(calc(-50% - 24px), -50%);
  transform: translateZ(0rem);
  opacity: 0;
}

.video-container .hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 24px), -50%);
  background: rgb(2, 0, 36);
  background: linear-gradient(
    180deg,
    hsl(266, 100%, 39%) 0%,
    rgb(0, 0, 0, 0.5) 15%,
    rgb(0, 0, 0, 0.3) 50%,
    rgb(0, 0, 0, 0.1) 100%
  );
  width: 100%;
  height: 100%;
  padding: 2rem;
  pointer-events: none;
  opacity: 0;
  letter-spacing: 0.8px;
  transition: all 400ms ease;
}

.video-container .hover-text.active {
  opacity: 1;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
}
.video {
  width: auto;
  height: 100%;
}
.second-video {
  margin-right: 20vw;
}
.alpha-video {
  margin-right: 10vw;
}
.video {
  pointer-events: none; /* Verhindert Klicks auf das Video */
}
.bi-arrow-right-circle {
  color: var(--main-bg-color);
}

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}
/* @media (max-width: 1366.98px) {
  .video-container .header-image-test.show {
  position: absolute;
  transition: all 400ms ease;
  width: 100%;
  height: 68vh;
  transform: translate(0% 0px);
  transform: translateZ(0rem);
  opacity: 1;
}
  .video-container {
  position: relative;
  overflow: hidden;
  width: clamp(10.9rem, 0.022rem + 20vw, 26.75rem);
  height: 68vh;
  border-radius: 0.9vw;
}
   .header-video-img-holder {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-11-28\ 131125-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -7vw 13vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
.header-video-img-holder-one {
  position: relative;
  background-image: url(/images/Screenshot\ 2024-12-01\ 145027-small.jpg);
  height: 79vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: -4vw 6vh;
  border-bottom-left-radius: 0.9vw;
  border-bottom-right-radius: 0.9vw;
  transition: all 400ms ease;
}
.header-video-img-holder-two {
  position: relative;
  background-image: url(/images/Screenshot\ 2024-12-01\ 144838-small.jpg);
  height: 79vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: -3vw 9vh;
  border-bottom-left-radius: 0.9vw;
  border-bottom-right-radius: 0.9vw;
  transition: all 400ms ease;
}
  .header-video-img-holder-three {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144643-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -13vw 13vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }

} */
/* iPad Pro 12.9 */
@media only screen and (min-width: 1366px) and (orientation: landscape) {
  .header-video-img-holder {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-11-28\ 131125-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -7vw 12vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-one {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 145027-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -4vw 13vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-two {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144838-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -3vw 9vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-three {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144643-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    /* background-position: -7vw 13vh; */
    background-position: center 13vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
}
/* iPad Pro 12.9 */
@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .nav-mobile {
    display: block;
  }
  .nav-display {
    display: none;
  }

  .header {
    padding-bottom: 5vh !important;
    height: auto;
  }
  .row-height-title {
    height: 29vh;
  }

  .video-container {
    position: relative;
    overflow: hidden;
    width: 20.5vw !important;

    width: clamp(20vw, 30vw, 20vw);

    width: clamp(20vw, 1.1165rem + 0.4174vw, 20vw);

    width: clamp(10.9rem, 0.022rem + 20vw, 26.75rem);

    height: 30vh !important;

    border-radius: 0.9vw;

    border: 1px solid var(--main-bg-color);
  }
  .video-container .header-image-test.show {
    position: absolute;
    transition: all 400ms ease;
    width: 100%;
    height: 30vh !important;
    transform: translate(0% 0px);
    opacity: 1;
  }
  .header-video-text-holder {
    background-color: var(--second-bg-color);
    padding: 1rem;
    height: 9vh !important;
  }
  .header-video-img-holder {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-11-28\ 131125-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center 8vh !important;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-one {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 145027-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center 8vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-two {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144838-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center 6vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-three {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144643-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    /* background-position: -7vw 13vh; */
    background-position: center 8vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .btn-course {
    background-color: var(--text-white-color);
    text-decoration: none;
    color: var(--second-bg-color) !important;
    font-size: clamp(0.75rem, 0.51rem + 1.2vw, 1.44rem);
    width: 27vw;
    padding: 1.6rem 2rem 1.6rem 2rem;
    border-radius: 0.5vw;
  }
  .btn-course:hover {
    background-color: var(--second-bg-color);
    text-decoration: none;
    color: var(--text-white-color) !important;
    font-size: clamp(0.75rem, 0.51rem + 1.2vw, 1.44rem);

    padding: 1.6rem 2rem 1.6rem 2rem;
    border-radius: 0.5vw;
  }
  .second-video {
    margin-right: 10vw;
  }
  .video-container {
    position: relative;
    overflow: hidden;

    width: clamp(10.9rem, 0.022rem + 20vw, 26.75rem);
    height: 70vh;

    border-radius: 0.9vw;
  }
  .video-container .header-image-test.show {
    position: absolute;
    transition: all 400ms ease;
    width: 100%;
    height: 70vh;
    transform: translate(0% 0px);
    opacity: 1;
  }
  .header-video-text-holder {
    background-color: var(--second-bg-color);
    padding: 1rem;
    height: 20vh;
  }

  .video-container .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 24px), -50%);
    background: rgb(2, 0, 36);
    background: linear-gradient(
      180deg,
      hsl(266, 100%, 39%) 0%,
      rgb(0, 0, 0, 0.5) 15%,
      rgb(0, 0, 0, 0.3) 50%,
      rgb(0, 0, 0, 0.1) 100%
    );
    width: 100%;
    height: 100%;
    padding: 1rem;
    pointer-events: none;
    opacity: 0;
    letter-spacing: 0.8px;
    transition: all 400ms ease;
  }
  .header-video-img-holder {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-11-28\ 131125-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -4vw 7vh !important;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-one {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 145027-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center 6vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-two {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144838-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: -3vw 9vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
  .header-video-img-holder-three {
    position: relative;
    background-image: url(/images/Screenshot\ 2024-12-01\ 144643-small.jpg);
    height: 79vh;
    background-size: auto 100%;
    background-repeat: no-repeat;

    background-position: center 7vh;
    border-bottom-left-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    transition: all 400ms ease;
  }
}

@media only screen and (min-height: 832px) and (max-width: 1194.98px) and (orientation: landscape) {
  .video-container {
    position: relative;
    overflow: hidden;
    width: clamp(10.9rem, 0.022rem + 20vw, 26.75rem);
    height: 60vh;
    border-radius: 0.9vw;
  }
  .video-container .header-image-test.show {
    position: absolute;
    transition: all 400ms ease;
    width: 100%;
    height: 60vh;
    transform: translate(0% 0px);
    transform: translateZ(0rem);
    opacity: 1;
  }
}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .btn-course {
    background-color: var(--text-white-color);
    text-decoration: none;
    color: var(--second-bg-color) !important;
    font-size: clamp(0.75rem, 0.51rem + 1.2vw, 1.44rem);
    width: 32vw;
    padding: 1.6rem 2rem 1.6rem 2rem;
    border-radius: 0.5vw;
  }
  .btn-course:hover {
    background-color: var(--second-bg-color);
    text-decoration: none;
    color: var(--text-white-color) !important;
    font-size: clamp(0.75rem, 0.51rem + 1.2vw, 1.44rem);

    padding: 1.6rem 2rem 1.6rem 2rem;
    border-radius: 0.5vw;
  }
  .second-video {
    margin-right: 10vw;
  }
  .btn-contact-header {
    --bs-btn-color: var(--text-white-color) !important;
    --bs-btn-bg: var(--second-bg-color) !important;
    --bs-btn-border-color: var(--second-bg-color);
    --bs-btn-hover-color: var(--text-white-color) !important;
    --bs-btn-hover-bg: var(--second-bg-color) !important;
    --bs-btn-hover-border-color: var(--second-bg-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--text-white-color) !important;
    --bs-btn-active-bg: var(--text-white-color) !important;
    --bs-btn-active-border-color: var(--second-bg-color);
    --bs-btn-active-shadow: inset 0 3px 5px var(--second-bg-color) !important;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--second-bg-color) !important;
    --bs-btn-disabled-border-color: var(--second-bg-color) !important;
  }
  .video {
    width: auto;
    height: 100%;
  }
  .header {
    /* background-color: var(--main-bg-color); */
    color: var(--text-white-color);

    padding-bottom: 0vh;
    height: auto;
  }
  .nav-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    height: 4.3vw;
    position: fixed;
    left: 89vw;
    top: 2rem;
    width: 4.5vw;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--text-white-color);
  }
  .row-height-title {
    height: 65vh;
    /* background-color: rgb(253, 176, 176); */
  }
  .video-container {
    position: relative;
    overflow: hidden;
    /* width: 20.5vw !important; */
    /* width: clamp(20vw, 30vw, 20vw ); */
    /* width: clamp(20vw, 1.1165rem + 0.4174vw, 20vw ); */
    width: clamp(10.9rem, 0.022rem + 20vw, 26.75rem);
    height: 73vh;

    border-radius: 0.9vw;
    /* border: 1px solid var(--main-bg-color)  */
  }

  .header a {
    text-decoration: none;
    color: var(--text-white-color);
  }

  .row-height-title {
    height: auto;
  }
  .header-col-mobile-card {
    position: relative;
    overflow: hidden;
    width: 45vw;
    height: 30vh;
    border-radius: 2vw;
    /* border: 1px solid var(--second-bg-color); */
  }
  .header-mobile-img-holder {
    overflow: hidden;
    height: 30vh;
  }
  .header-mobile-text-holder {
    padding: 0.9rem;
    background-color: var(--second-bg-color);
  }
}
/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .btn-course {
    width: 50vw;

    padding: 1rem 1rem 1rem 1rem;
    border-radius: 0.9vw;
  }
  .btn-course:hover {
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 0.9vw;
  }
  .second-video {
    margin-right: 0vw;
  }
  .header a {
    text-decoration: none;
    color: var(--text-white-color);
  }
  .video {
    width: 100%;
    height: auto;
  }

  .row-height-title {
    height: auto;
  }
  .header-col-mobile-card {
    position: relative;
    overflow: hidden;
    width: auto !important;
    height: 12vh;
    border-radius: 3vw;
    /* border: 1px solid var(--second-bg-color); */
  }
  .header-mobile-img-holder {
    overflow: hidden;
    height: 12vh;
  }
  .header-mobile-text-holder {
    padding: 0.6rem;
    background-color: var(--second-bg-color);
  }
  .header-mobile-text-holder {
    padding: 2rem;
    background-color: var(--second-bg-color);
  }
}
/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .video {
    width: auto !important;
    height: 100%;
  }
  .header a {
    text-decoration: none;
    color: var(--text-white-color);
  }

  .row-height-title {
    height: auto;
  }
  .header-col-mobile-card {
    position: relative;
    overflow: hidden;
    width: auto !important;
    height: 16vh;
    border-radius: 3vw;
    /* border: 1px solid var(--second-bg-color); */
  }
  .header-mobile-img-holder {
    overflow: hidden;
    height: 16vh;
  }
  .header-mobile-text-holder {
    padding: 0.6rem;
    background-color: var(--second-bg-color);
  }
}