//
// Video Background
//

.video-bg {
  background-color: #1b94b5;
  text-align: center;
  display: table;
}

.video-bg__video {
  display: inline-block;
  width: 100%;
  max-width: 960px;
  max-height: 330px;
  height: intrinsic;
  height: fit-content;
}

.video-overlay-blue {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0073ff61;
}

@include media-breakpoint-down(md) {
  .video-bg__video {
    width: 100%;
  }
}


//
// Fullscreen bg jobs hall
//
.video-bg-jobs-hall-wrap {
  background-color: #1b94b5;
}

.video-bg-jobs-hall {
  text-align: center;
}

.video-bg-jobs-hall__video {
  display: inline-block;
  width: 100%;
  max-width: 960px;
}

@include media-breakpoint-down(md) {
  .video-bg-jobs-hall__video {
    width: 100%;
  }
}

//
// Brands
//

.brands {
  .owl-carousel {

    .item {

      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 80px;
      flex-direction: column;

      img {
        padding: 10px;
        display: inline-block;
        background: #ffffff;
        max-height: 60px;
        max-width: 100%;
        width: auto;
      }
    }

  }

  .owl-carousel .owl-dots {
    margin-top: 0;
    margin-bottom: 0px;
  }
}


//
//Stand
//

.image-stand {
  width: 100%;

}


//
// Fullscreen BG
//

.video-bg {
  background-color: #f6f7f9;
  display: table;
}

@include media-breakpoint-down(lg) {

}

@include media-breakpoint-down(md) {
  .video-bg {
    max-height: 200px;
  }
}

@include media-breakpoint-down(sm) {

}


.video-bg__video {
  border-radius: 4px;
  border: solid 1px $dark;
}


.btn-virtual-fair {

  @include media-breakpoint-down(sm) {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
}

//
//Aniamtion text
//
.slide-text {
  margin-left: -15px;
  margin-right: -15px;
  white-space: nowrap;
  position: relative;
  left: 0;
  z-index: 500;
  overflow: hidden;
}

.slide-text span {
  display: inline-block;
  padding-left: 100%;
  animation: slide-left 10s linear infinite;
}

.employer-grid-outer:nth-child(1) .slide-text span {
  animation-delay: 500ms
}

.employer-grid-outer:nth-child(2) .slide-text span {
  animation-delay: 1000ms
}

.employer-grid-outer:nth-child(3) .slide-text span {
  animation-delay: 1500ms
}

.employer-grid-outer:nth-child(4) .slide-text span {
  animation-delay: 2000ms
}

.employer-grid-outer:nth-child(5) .slide-text span {
  animation-delay: 2500ms
}

.employer-grid-outer:nth-child(6) .slide-text span {
  animation-delay: 3000ms
}

.employer-grid-outer:nth-child(7) .slide-text span {
  animation-delay: 3500ms
}

.employer-grid-outer:nth-child(8) .slide-text span {
  animation-delay: 4000ms
}

.employer-grid-outer:nth-child(9) .slide-text span {
  animation-delay: 4500ms
}

.employer-grid-outer:nth-child(10) .slide-text span {
  animation-delay: 5000ms
}

.employer-grid-outer:nth-child(11) .slide-text span {
  animation-delay: 5500ms
}

.employer-grid-outer:nth-child(12) .slide-text span {
  animation-delay: 6000ms
}

.employer-grid-outer:nth-child(13) .slide-text span {
  animation-delay: 6500ms
}

.employer-grid-outer:nth-child(14) .slide-text span {
  animation-delay: 7000ms
}

.employer-grid-outer:nth-child(15) .slide-text span {
  animation-delay: 7500ms
}

.employer-grid-outer:nth-child(16) .slide-text span {
  animation-delay: 8000ms
}

.employer-grid-outer:nth-child(17) .slide-text span {
  animation-delay: 8500ms
}

.employer-grid-outer:nth-child(18) .slide-text span {
  animation-delay: 9000ms
}

.employer-grid-outer:nth-child(19) .slide-text span {
  animation-delay: 9500ms
}

.employer-grid-outer:nth-child(20) .slide-text span {
  animation-delay: 10000ms
}


//
// Company Logos
//

.slide-element-root {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  white-space: nowrap;
  position: relative;
  left: 0;
  z-index: 500;
  overflow: hidden;


  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 30px;
    top: 0;
    height: 100%;
    z-index: 1;
  }

  &:before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
  }

  &:after {
    right: 0;
    background: linear-gradient(270deg, #ffffff, transparent);
  }

  .slide-element-slide {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 0;
    animation: slide-left 15s linear infinite;
  }

  &:hover .slide-element-slide {
    animation-play-state: paused;
  }

  .slide-element-image-root {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;

    width: 120px;
    height: 60px;

    .slide-element-image {
      max-width: 80px;
      max-height: 25px;
    }

    &:hover {
      border-top-color: #16a3f2;
      border-bottom-color: #16a3f2;
    }
  }
}


//
// Countdown Logos
//

.countdown-title {
  display: block;
  margin: 0;
}

.countdown-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0 20px;
}

.countdown-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;

  background-color: rgb(6, 0, 64, 1);
  color: #fff;
  border-radius: 5px;

  text-align: center;
  line-height: 1;

  .countdown-time {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .countdown-desc {
    font-size: 12px;
    color: #ccc
  }
}

//
// Button Enter Event
//
$color: #16a3f2;

.btn-enter-event {
  display: inline-block;
  padding: .75rem 1.25rem;
  border-radius: 6px;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .15rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $color;
    border-radius: 6px;
    z-index: -2;
  }

  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: darken($color, 15%);
    transition: all .3s;
    border-radius: 6px;
    z-index: -1;
  }

  &:hover {
    color: #fff;
    text-decoration: none;

    &:before {
      width: 100%;
    }
  }
}


//
// Company grid
//

.companies-logo-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;

  @include media-breakpoint-down(lg) {
    grid-template-columns: repeat(6, 1fr);
  }

  @include media-breakpoint-down(md) {
    grid-template-columns: repeat(4, 1fr);
  }

  @include media-breakpoint-down(md) {
    grid-template-columns: repeat(3, 1fr);
  }

  @include media-breakpoint-down(xs) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.companies-logo-grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  min-height: 90px;

  @include media-breakpoint-down(lg) {
    min-height: 100px;
  }

  @include media-breakpoint-down(md) {
    min-height: 100px;
  }

  @include media-breakpoint-down(md) {
    min-height: 100px;
  }

  @include media-breakpoint-down(xs) {
    min-height: 120px;
  }

  &:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  a {
    text-decoration: none;
  }

  img {
    max-width: 100%;
    max-height: 50px;
    height: auto;
  }
}


//
//Banner bottom
//

.vf-banner-ul {
}

.vf-banner-ul li {
  list-style-image: url("../img/check.png");
  margin-left: 10px;
  font-size: 14px;
  line-height: 30px;

  span {
    position: relative;
    top: -5px;
  }
}


//
//Steps To Join Meeting
//
.vf-feature-step-bg {
  //background: linear-gradient(176deg, rgba(118, 162, 255, 0.86), rgba(204, 228, 255, 0.82));
  //background: linear-gradient(-45deg, rgba(159, 211, 239, 0.5), rgb(18, 133, 194), rgb(22, 163, 242), rgba(22, 163, 242, 0.78));
  background: linear-gradient(-45deg, #01346b, #1a72d2, #1971d3, #064e9d);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.vf-feature-steps {
  display: flex;
  justify-content: center;
  align-items: center;

  @include media-breakpoint-down(sm) {
    flex-direction: column;
    gap: 15px 0;
  }
}

.vf-feature-step {
  width: 100%;
}

.vf-icon-parent {
  display: inline-block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 15px;

  color: #000;
  transition: all 0.3s ease-in-out;
  border: solid 2px rgba(255, 255, 255, 0.2);
}

.vf-icon {
  font-size: 40px;
}


//
//Grid 2 column
//

.employer-column-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;

  @include media-breakpoint-down(sm) {
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 10px;
  }
}

.employer-column {
  display: flex;
  justify-content: space-between;
  align-items: center;


  min-height: 60px;
  padding: 10px 15px;
  border-radius: 6px;
}

.employer-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;

  width: 100px;
  height: 80%;

  padding-left: 10px;
  border-left: solid thin #eee;
}

.employer-logo {
  max-width: 80px;
  height: auto;
}


//
//
//

.vf-bg-animation-dark-light {
  //background: linear-gradient(176deg, rgba(118, 162, 255, 0.86), rgba(204, 228, 255, 0.82));
  //background: linear-gradient(-45deg, rgba(159, 211, 239, 0.5), rgb(18, 133, 194), rgb(22, 163, 242), rgba(22, 163, 242, 0.78));
  background: linear-gradient(-45deg, #01346b, #0d4d93, #277ae0, #064e9d);
  background-size: 200% 400%;
  animation: gradient 15s ease infinite;
}