@import "../colors/colors.scss";

@keyframes z_index {
  0% {
    z-index: 2;
  }
  100% {
    z-index: -2;
  }
}
@keyframes button {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    width: 60%;
  }
  25% {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(90deg);
    width: 10%;
  }
  75% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(180deg);
    width: 60%;
  }
}
@keyframes video {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


body {
  background-color: $blueDark;
  color: $text;
  font-family: 'Poppins', sans-serif;
  margin: 0!important;
  font-weight: 400;
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
  }
  .text-blue {
    color: $blue!important;
  }
  .text-sky {
    color: $blue!important;
  }
  .text-primary {
    color: $green !important;
  }
  .text-secondary {
    color: $blue !important;
  }
  .text-red {
    color: $red!important;
  }
  .text-purple {
    color: #903669!important;
  }
  .text-green {
    color: $green!important;
  }
  .text-gray {
    color: $gray!important;
  }
  .bg-gray {
    background-color: $gray;
  }
  .bg-blue {
    background-color: $blue;
  }
  .fw-medium {
    font-weight: 500;
  }
  .btn {
    background-color: $white;
    font-size: 18px;
    font-weight: 500;
    padding: 12px 32px;
    transition: all .4s ease;
    &:hover,
    &:focus,
    &:active {
      background-color: $sky;
      color: $white;
    }
  }
  .btn.btn-s1 {
    background-color: transparent;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    padding: 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none;
    border-radius: 50px;
    box-shadow: none!important;
    transition: all .4s ease;
    span {
      font-weight: 600;
      background-color: $green;
      padding: 12px 80px;
      border-radius: 50px;
      border: solid 2px;
      transition: all .4s ease;
      display: flex;
      gap: 10px;
      img {
        height: auto;
        width: 30px;
        transition: all .4s ease;
        filter: brightness(1) invert(1);
      }
    }
    &:before {
      content: "";
      background: $green;
      opacity: 0.4;
      background: -moz-linear-gradient(90deg, rgba($green,0) 0%, rgba($green,1) 25%, rgba($green,1) 50%, rgba($green,1) 75%, rgba($green,0) 100%);
      background: -webkit-linear-gradient(90deg, rgba($green,0) 0%, rgba($green,1) 25%, rgba($green,1) 50%, rgba($green,1) 75%, rgba($green,0) 100%);
      background: linear-gradient(90deg, rgba($green,0) 0%, rgba($green,1) 25%, rgba($green,1) 50%, rgba($green,1) 75%, rgba($green,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ec3e3c",endColorstr="#ec3e3c",GradientType=1);
      padding-bottom: calc(100% + 10px);
      width: 60%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      z-index: -1;
      transition: all 1s ease;
      pointer-events: none;
      user-select: none;
      animation: button 4s linear infinite;
    }
    &:hover,
    &:focus,
    &:active {
      span {
        background-color: $blueDark2;
        color: $white;
        border-color: $blueDark2;
        img {
          filter: brightness(0) invert(1);
        }
      }
    }
  }
  .btn-outline-primary {
    background-color: transparent;
    border-color: $green;
    color: $green;
    &:hover,
    &:focus {
      border-color: $blue;
      background-color: $blueDark2;
    }
  }
  .badge {
    background-color: rgba($white, .1);
    border: solid 1px rgba($white, .2);
    border-radius: 50px;
    padding: 6px 20px;
    max-width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    img {
      height: auto;
    }
  }
  .bg-glass {
    background-color: rgba($white, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba($white, 0.18) !important;
    box-shadow: 0 8px 32px 0 rgba($black, .2) !important;
  }
  .bg-gradient {
    background: $blueDark2 !important;
    background: linear-gradient(65deg,rgba($blueDark2, 0.2) 1%, rgba($green, 0.2) 100%) !important;
  }
  .bg-gradient2 {
    background: $blueDark2 !important;
    background: linear-gradient(65deg,rgba($blueDark2, 0.4) 1%, rgba($green, 0.5) 100%) !important;
  }
  .bg-gradient3 {
    background: $blueDark2 !important;
    background: linear-gradient(65deg,rgba($blueDark2, 0.8) 1%, rgba($blueDark, 0.8) 100%) !important;
  }

  .video_wrapper {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    video {
      border-radius: 24px;
      width: 100%;
      max-width: 100%;
    }
    button.btn_play {
      background: $green;
      padding: 0;
      height: 64px;
      width: 64px;
      border: solid 2px $white;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all .2s ease-in-out;
      img {
        height: auto;
        width: 25px;
      }
      &:hover,
      &:focus {
        background: rgba($sky, 1);
      }
    }
  }
  .video_wrapper_lg {
    button.btn_play {
      height: 124px;
      width: 124px;
      img {
        height: auto;
        width: 48px;
      }
    }
  }
  .video_wrapper_bordered {
    padding: 8px;
    position: relative;
    z-index: 1;
    transition: all .4s ease;
    &:before {
      content: "";
      background: $green;
      background: -webkit-linear-gradient(0deg, rgba($green, 0) 0%, rgba($green, 1) 100%);
      background: -moz-linear-gradient(0deg, rgba($green, 0) 0%, rgba($green, 1) 100%);
      background: linear-gradient(0deg, rgba($green, 0) 0%, rgba($green, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28A9E0", endColorstr="#28A9E0", GradientType=0);
      padding-bottom: 120%;
      width: 120%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      z-index: -1;
      transition: all 1s ease;
      pointer-events: none;
      user-select: none;
      animation: video 4s linear infinite;
    }
  }
  .video_wrapper.video_played {
    img.main-thumb {
      opacity: 0;
      animation: z_index .1s ease forwards;
      animation-delay: .5s;
    }
    button.btn_play {
      opacity: 0;
      animation: z_index .1s ease forwards;
      animation-delay: .5s;
    }
  }
  header {
    background: rgba($blueDark2, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: background-color .2s ease-in-out;
    .navbar {
      padding: 0;
      display: block;
      .header-top {
        padding: 20px 0;
        transition: background-color .2s ease-in-out;
        > .container {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          > {
            div {
              width: 100%;
              max-width: max-content;
            }
          }
        }
        .navbar-brand {
          padding: 0;
          display: block;
          max-width: max-content;
          img {
            height: auto;
            width: 100%;
            max-width: 200px;
          }
        }
        .navbar-toggler {
          border: none;
          outline: none;
          box-shadow: none;
          span {
            background: url("https://files.rewardlion.com/Websites/Ai_Ads_Pro/assets/img/webp/icon_20.webp") no-repeat center / 24px 16px;
          }
          &[aria-expanded="true"] {
            span {
              background: url("https://files.rewardlion.com/Websites/Ai_Ads_Pro/assets/img/webp/icon_21.webp") no-repeat center / 20px;
            }
          }
        }
        .navbar-collapse {
          transition: background-color .2s ease-in-out;
          transition-delay: 0s!important;

          .navbar-nav {
            .nav-item {
              .nav-link {
                font-size: 18px;
                padding: 0 12px;
              }
              .navbar-toggler {
                border: none;
                outline: none;
                box-shadow: none;
                span {
                  background: url("https://files.rewardlion.com/Websites/Ai_Ads_Pro/assets/img/webp/icon_21.webp") no-repeat center / 20px;
                }
              }
            }
          }
        }
      }
    }
    &.scrolled {
      background-color: rgba($blueDark2, .6);
      backdrop-filter: blur(4px);
      .navbar {
        .header-top {
          padding: 10px 0;
        }
      }
    }
  }
  #form_popup {
    .modal-dialog {
      max-width: 800px;
      .modal-header {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        border: none;
      }
    }
  }
}
//Min Width
.order-6 {
  order: 6 !important;
}
.order-7 {
  order: 7 !important;
}
.order-8 {
  order: 8 !important;
}
.order-9 {
  order: 9 !important;
}
.order-10 {
  order: 10 !important;
}
.order-11 {
  order: 11 !important;
}
.order-12 {
  order: 12 !important;
}
.order-13 {
  order: 13 !important;
}
.order-14 {
  order: 14 !important;
}
.order-15 {
  order: 15 !important;
}
@media (min-width: 992px) {
  .order-lg-6 {
    order: 6 !important;
  }
}
@media (min-width: 1180px) {
  body {
    .container {
      max-width: 1084px;
    }
  }
}
@media (min-width: 1380px) {
  body {
    .container {
      max-width: 1284px;
    }
  }
}
@media (min-width: 1580px) {
  body {
    .container {
      max-width: 1484px;
    }
  }
}
@media (min-width: 1780px) {
  body {
    .container {
      max-width: 1624px;
    }
  }
}

//Max Width
@media (max-width: 1580px) {
  body {
    .btn.btn-s1 {
      font-size: 18px;
      line-height: 28px;
      span {
        img {
          width: 28px;
        }
      }
    }
    header {
      .navbar {
        .header-top {
          .navbar-brand {
            img {
              height: auto;
              max-width: 200px;
            }
          }
          .navbar-collapse {
            .navbar-nav {
              .nav-item {
                .nav-link {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1380px) {
  body {
    .btn {
      font-size: 16px;
      padding: 10px 32px;
    }
    .btn.btn-s1 {
      font-size: 16px;
      line-height: 26px;
      span {
        padding: 8px 60px;
        img {
          width: 26px;
        }
      }
    }
    .video_wrapper_lg {
      button.btn_play {
        height: 100px;
        width: 100px;
        img {
          width: 38px;
        }
      }
    }
    header {
      .navbar {
        .header-top {
          .navbar-brand {
            img {
              max-width: 214px;
            }
          }
          .navbar-collapse {
            .navbar-nav {
              .nav-item {
                .nav-link {
                  font-size: 14px;
                  padding: 0 8px;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1180px) {
  body {
    header {
      .navbar {
        .header-top {
          .navbar-brand {
            img {
              max-width: 184px;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 992px) {
  body {
    .btn {
      font-size: 16px;
      padding: 8px 24px;
    }
    .btn.btn-s1 {
      span {
        padding: 6px 40px;
      }
    }
    header {
      .navbar {
        .header-top {
          padding: 16px 0;
          .navbar-collapse {
            padding: 20px;
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            max-width: 100%!important;
            height: calc(100vh - 70px)!important;
            .navbar-nav {
              .nav-item {
                .nav-link {
                  font-size: 16px;
                  padding: 8px 0!important;
                }
              }
            }
          }
        }
      }
      &.scrolled {
        .navbar {
          .header-top {
            .navbar-collapse {
              top: 58px;
              height: calc(100vh - 58px)!important;
            }
          }
        }
      }
      &:has(.navbar-toggler[aria-expanded="true"]) {
        background-color: $black;
        .navbar {
          .header-top {
            .navbar-collapse {
              background-color: $black;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 767px) {
  body {
    .video_wrapper_lg {
      button.btn_play {
        height: 80px;
        width: 80px;
        img {
          width: 24px;
          margin-left: 4px;
        }
      }
    }
    .video_wrapper_bordered {
      padding: 4px;
    }

  }
}
@media (max-width: 567px) {
  body {
    .video_wrapper_lg {
      button.btn_play {
        height: 50px;
        width: 50px;
        img {
          width: 16px;
        }
      }
    }
  }
}