video {
  transition: transform 0.5s ease-in-out;
}

video.scrolled {
  scroll-behavior: smooth;
  animation: videoscrollAnimation both;
  transform: scale(0.4) translate(-45vw, 71vh);
  border-radius: 3vw 5vh 20vw 5vh;

}



/*scroll animation*/
.autoshow {
  animation: autoShowAnimation both;
  animation-timeline: view(50% 5%);
}

@keyframes autoShowAnimation {
  0% {
    opacity: 0;
    transform: translateY(200px) scale(0.3);
  }

  35% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }

  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#banneranim {
  animation: baneranimation both;
  animation-timeline: view(45% 5%);
  transform: translateX(30vw)
}

@keyframes baneranimation {
  0% {
    opacity: 0;
    transform: translatex(1000vw);
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  60% {
    opacity: 1;
    transform: translateX(30vw);
    zoom: 120%;
  }

  90% {
    opacity: 1;
    transform: translateX(30vw)
  }

  100% {
    opacity: 1;
    transform: translateX(30vw)
  }

}

@media (max-width: 1920px) {
  video {
    transform: scaleX(1.2) translateY(-20vh);
    object-fit: cover;
    /* add this to maintain aspect ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
}

@media (max-width: 1900px) {
  video {
    transform: translateY(-13vh);
    object-fit: cover;
    /* add this to maintain aspect ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;



  }
}

@media (max-width: 1600px) {
  video {
    transform: translateX(6vw) translateY(-16vh);

  }

  video.scrolled {
    transform: scale(.4) translate(-25vw, 71vh);
  }

  #img-carousel {
    transform: translateX(80vw) !important;
  }

  #what-we-do {
    transform: translateX(-4vw) !important;
  }

}

@media (max-width: 1500px) {

  video.scrolled {
    transform: scale(.4) translate(-25vw, 71vh);
  }

  video {
    transform: translateX(7vw) translateY(-16vh);
  }

  #img-carousel {
    transform: translateX(80vw) !important;
  }

  #what-we-do {
    transform: translateX(-4vw) !important;
  }

}

.combined-container {
  scale: .8;
  transform: translateX(-1vw) !important;
  margin-top: -10vh !important;
  z-index: 0;
}

@media (max-width: 1230px) {
  video.scrolled {
    transform: scale(.4) translate(-15vw, 71vh) !important;

  }

  video {
    transform: translateX(14vw) translateY(-14vh) !important;
  }


  #primary-nav {
    scale: .8;
  }

  #contact-us-nav {
    zoom: .8 !important;

  }

  #banneranim {
    transform: translateX(25vw) !important;

  }

  #img-carousel {
    transform: translateX(93vw) !important;
  }

  #what-we-do {
    transform: translateX(-4vw) !important;
  }


}

@media (max-width:500px) {
  .bideyo {
    margin-top: 10vh !important;
    margin-left: -4.5vh !important;
    width: 90vw !important;
    height: 20vh !important;
    animation: none !important;

  }
}

@media (min-width:1229px) and (max-width: 1600px) {
  .bideyo {
    margin-top: 30vh !important;
    margin-left: -30.5vh !important;
    width: 45vw !important;
    height: 45vh !important;
    animation: none !important;

  }

}

@media (min-width:1366px) and (max-width: 1600px) {
  .bideyo {
    margin-top: 5vh !important;
    margin-left: -5.5vh !important;
    width: 30vw !important;
    height: 40vh !important;
    animation: none !important;

  }

}

@media (max-width:500px) {
  video {
    margin-top: 10vh !important;
    margin-left: -7vh !important;
    width: 100vw !important;
    height: 20vh !important;
    animation: none !important;

  }

  video.scrolled {
    animation: none !important;
    transform: scale(0) translate(0, 0) !important;

  }

  #banneranim {
    margin-top: -130vh !important;
    padding-left: 6vw;

  }

  /*1st banner adjustments for mobile*/
  .bannerBuild-container {

    width: 80vw;


  }

  .txt-rotate-keyword,
  span.txt-rotate-keyword {
    font-size: 1em !important;
    /* adjust font size as needed */
  }

  .bannerBuild-container h2,
  .bannerBuild-container h6,
  .bannerBuild-container .bannerBuild-container {

    font-size: 1.5em !important;
    /* adjust font size as needed */
  }

  #firstSection p {
    font-size: 1.2em !important;


  }

  .btn-txt {

    padding: 5% !important;
    font-size: .8em !important;
    z-index: 100000;
  }



  #boxingdiscover {
    transform: translateX(4vw) translateY(-.5vh) !important;

  }


  /*z-indexfixxing*/

  #customvid {
    z-index: 0 !important;

    transform: translateY(-60vh) !important;
  }

  #zindexfix1 {
    z-index: 0 !important;
  }

  .ld-masked-image {
    z-index: 0 !important;
  }

  #banner-masked-svg {
    z-index: 0 !important;
  }

}



@media (max-width:1400px) {
  video {
    transform: translateX(10vw) translateY(-14vh);

  }

}

@media (max-width: 380px) {
  #banneranim {
    margin-top: -130vh !important;
    padding-left: 6vw;
    scale: .8;

  }
}

@media (min-width:850px) and (max-width:1050px) {
  .whatwedo-container {
    margin-left: 20vh !important;
    margin-top: -20vh;
    scale: 1.7;
    max-width: 40vh;
    padding-bottom: 10vh;
  }

  #specialisationPng {
    z-index: 100 !important;
    margin-top: -30vh;
    scale: .8 !important;
    padding-bottom: 10vh;
  }

  video {
    margin-top: 42vh !important;
    width: 90vw !important;
    height: 50vh !important;
    animation: none !important;

  }

  video.scrolled {
    animation: none !important;
    transform: scale(0) translate(0, 0) !important;


  }

  #banneranim {
    margin-top: -130vh !important;
    padding-left: 6vw;
    max-width: 40vw;
    scale: 1.6;

  }

  #services1 {
    margin-left: 15vw !important;
    scale: 1.5;
  }

  #services {
    margin-top: -70vh !important;
  }

  /*1st banner adjustments for mobile*/
  .bannerBuild-container {

    width: 80vw;


  }

  .txt-rotate-keyword,
  span.txt-rotate-keyword {
    font-size: 1em !important;
    /* adjust font size as needed */
  }

  .bannerBuild-container h2,
  .bannerBuild-container h6,
  .bannerBuild-container .bannerBuild-container {

    font-size: 1.5em !important;
    /* adjust font size as needed */
  }

  #firstSection p {
    font-size: 1.2em !important;


  }

  .btn-txt {

    padding: 5% !important;
    font-size: .8em !important;
    z-index: 100000;
  }



  #boxingdiscover {
    transform: translateX(4vw) translateY(-.5vh) !important;

  }


  /*z-indexfixxing*/

  #customvid {
    z-index: 0 !important;

    transform: translateY(-60vh) !important;
  }

  #zindexfix1 {
    z-index: 0 !important;
  }

  .ld-masked-image {
    z-index: 0 !important;
  }

  #banner-masked-svg {
    z-index: 0 !important;
  }

}

@media (min-width:765px) and (max-width:820px) {
  #areas-of-specialisation {
    scale: .5 !important;
    margin-top: -5vh;
    margin-bottom: -5vh;
    transform: translateX(-30vw) !important;
  }

  .whatwedo-container {
    margin-left: 15vh !important;
    margin-top: -5vh !important;
    scale: 1.5;
    max-width: 70vh;
  }

  #specialisationPng {
    visibility: hidden;
    z-index: 100 !important;
    margin-top: -30vh;
    scale: .8 !important;
    padding-bottom: 10vh;
  }

  video {
    margin-top: 42vh !important;
    width: 90vw !important;
    height: 50vh !important;
    animation: none !important;

  }

  video.scrolled {
    animation: none !important;
    transform: scale(0) translate(0, 0) !important;


  }

  #banneranim {
    margin-top: -120vh !important;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    max-width: 40vw;
    scale: 1.6;

  }

  /*1st banner adjustments for mobile*/
  .bannerBuild-container {

    width: 80vw;


  }

  .txt-rotate-keyword,
  span.txt-rotate-keyword {
    font-size: 1em !important;
    /* adjust font size as needed */
  }

  .bannerBuild-container h2,
  .bannerBuild-container h6,
  .bannerBuild-container .bannerBuild-container {

    font-size: 1.3em !important;
    /* adjust font size as needed */
  }

  #firstSection p {
    font-size: 1.2em !important;


  }

  .btn-txt {

    padding: 5% !important;
    font-size: .8em !important;
    z-index: 100000;
  }



  #boxingdiscover {
    transform: translateX(4vw) translateY(-.5vh) !important;

  }


  /*z-indexfixxing*/

  #customvid {
    z-index: 0 !important;

    transform: translateY(-60vh) !important;
  }

  #zindexfix1 {
    z-index: 0 !important;
  }

  .ld-masked-image {
    z-index: 0 !important;
  }

  #banner-masked-svg {
    z-index: 0 !important;
  }

}