@import '../general-repository.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css';

.nav-container nav {z-index: 9999999 !important;}

.video-position{
  width: 100%;
  display: flex;
  height: 100vh;
  object-fit: cover;
  align-items: center;
  border-radius: 15px;
  justify-content: center;
  background-color: #000;
}

.video-position video{
  width: 432px;
  height: 945px;
  object-fit: cover;
  position: absolute;
  border-radius: 30px;
}

/* SVG Snake */
.features-title {margin: 4em 0 0;}
/*End*/

.principal-brands{
  padding: 0 4em;
  max-width: 85vw;
  margin: 60px auto 30px;
}

.section-align {
  display: flex;
  flex-direction: column;
}

.section-align:nth-child(odd) {align-items: flex-start;}
.section-align:nth-child(even) {align-items: flex-end;}

.brand-content{
  margin: 0;
  padding: 0 80px;
  max-width: 1000px;
}

.brand-content h2{
  margin: 0;
  line-height: 1;
  font-size: clamp(3.5em, 5vw, 5.4em);
}

.reco-container{width: fit-content;}

.reco-container .gradient-border {
  top: 0;
  width: auto;
  margin: 0 0 50px; 
}

.owl-carousel .owl-stage {height: 300px;}

.owl-carousel .item{
  width: 15em;
  height: 15em;
}

.own-name{
  margin: 0;
  color: white;
  display: block;
  font-size: 22px;
  max-width: 100%;
  text-align: center;
  padding-top: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden !important;
  font-family: 'Gilroy ExtraBold';
}

.owl-carousel .owl-item img {
  width: 100%;
  height: 100%;
  padding: 15px;
  object-fit: contain;
  border-radius: 20px;
  background-color: white;
}

.owl-nav {
  top: -13em;
  z-index: -1;
  width: 100%;
  position: relative;
  display: flex !important;
  justify-content: space-between;
}

button img{width: 40px;}
button.owl-prev {margin-left: -70px;}
button.owl-next{margin-right: -70px;}

@media (max-width: 1920px){
  .video-position video {
    width: 380px;
    height: 685px;
  }
}

@media (max-width: 1600px){
  .principal-brands{
    padding: 0 2em;
    max-width: 100%;
  }
}

@media (max-width: 1024px){
  .section-align:nth-child(even) {align-items: flex-start;}
}

@media (max-width: 991px) {
  .brand-content {
    margin: 0 auto;
    max-width: 100%;
  }

  .owl-carousel .item {
    width: 11em;
    height: 11em;
  }
}

@media (max-width: 600px) {
  .brand-content {padding: 0 10px 50px;}
  .owl-carousel .owl-stage {height: 205px;}

  .owl-carousel .item {
    width: 10rem;
    height: 10rem;
  }

  .own-name{font-size: 16px;}

  .owl-nav {
    top: 10px;
    padding: 10px 60px;
    justify-content: space-evenly;
  }

  button img {width: 25px;}
}