.col,
.scroll {
  animation: appear 5s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
a {
  text-decoration: none;
  color: var(--color-white);
}

i {
  color: var(--color-accent-orange);
}
.w-45 {
  width: 45%;
}
.btn--orange,
.bg-danger {
  background-color: var(--color-accent-orange) !important;
  color: var(--color-white);
}
.btn--orange:hover {
  color: var(--color-white) !important;
}
.text--orange {
  color: var(--color-accent-orange);
}

main {
  .ourVision {
    background-image: url("/assets/images/home/bgVision.jpg");
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.8);
    margin-top: 90px;
  }
  header {
    position: relative;
    #heroCarousel {
      height: 100vh;
      overflow: hidden;

      .carousel-item {
        transition: transform 0.5s ease-in-out;

        &:not(.active) {
          .carousel-bg {
            animation: none;
          }
        }

        .carousel-bg {
          height: 100vh;
          background-size: cover;
          background-position: center;
          /* background-blend-mode: overlay;
          background-color: rgba(0, 0, 0, 0.6);
          animation: zoomIn 4s ease-in-out forwards; */
        }
      }
    }
    .header__text {
      position: absolute;
      z-index: 999;
      top: 10%;
      left: 100px;
      h2 {
        font-size: 51px;
        font-weight: 700;
        line-height: 61px;
      }
      .changing-text {
        color: var(--color-accent-orange);
        display: block;
      }
    }
    .carousel-control-prev,
    .carousel-control-next{
      width: 9% !important;
    }

    .carousel-control-prev-icon,.carousel-control-next-icon
  {
        background-color: var(--color-accent-orange);
        border-radius: 50%;
  }
  }
  .video {
    .row {
      display: flex;
      align-items: stretch;
      position: relative;
      top: -100px;
      z-index: 999;
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);

      .col {
        background-color: var(--color-white);
        text-align: center;
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        i {
          font-size: 50px;
          padding: 20px;
        }
      }

      .home-card {
        background-image: url(../assets/images/home/home-card.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .col:first-child {
        padding: 0;
      }
      .col:nth-child(2) {
        border-right: #d8d5d5 solid 1px;
      }

      .video-wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        video {
          width: 100%;
          height: 295.6px;
          object-fit: cover;
          display: block;
        }
      }
      .feature-item h2 {
        font-size: 24px !important;
      }
    }
  }

  .about {
    .about__experiences {
      padding: 30px;
      background-color: var(--color-accent-orange);
      color: var(--color-white);
      .experience__years {
        text-align: center;
        border-right: var(--color-white) solid 1px;
        h3 {
          font-size: 44px;
        }
        p {
          font-size: 18px;
          font-weight: 400 !important;
        }
      }
      .experience__list {
        ul {
        padding-left: 15px ;
          li {
            margin-bottom: 10px;
            font-size: 18px !important;
            font-weight: 400 !important;
          }
        }
      }
    }
    .about__image-box img {
      transition: transform 0.7s;
    }
    .about__image-box img:hover {
      transform: scale(1.2);
    }
  }
  .services {
    .card {
      border-radius: 16px;
      transition: all 0.3s ease;
    }
    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .orangeBg {
      background-color: var(--color-accent-orange) ;
    }

    .orangeBtn {
      background-color: var(--color-accent-orange);
      color: var(--color-white);
      font-weight: bold;
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      transition: all var(--transition-speed) ease;
      position: relative;
      overflow: hidden;
      box-shadow: var(--orange-shadow);
    }

    .orangeBtn:hover {
      background-color: var(--orange-hover);
      transform: translateY(-3px);
      box-shadow: var(--orange-shadow-hover);
      color: white;
    }

  }
  .ourVision {
    .video-wrapper {
      position: relative;
      top: -80px;
      video {
        width: 100%;
        height: 367.6px;
        object-fit: cover;
        display: block;
      }
    }
    .custom-play-btn {
      position: absolute;
      top: 50%;
      width: 130px;
      height: 130px;
      text-align: center;
      font-size: 50px;
    }

    .card {
      background-color: #3c3c3c;
      color: var(--color-accent-orange);
      .btn {
        width: 60%;
      }
    }
    .ourVision__numbers {
      position: relative;
      top: 80px;
      .number {
        font-size: 50px;
        font-weight: 700;
      }
      .cols:nth-child(2),
      .cols:nth-child(3) {
        border-right: #b6b3b3 solid 1px;
      }
      .cols:nth-child(2) {
        border-left: #b6b3b3 solid 1px;
      }

      .number__text {
        font-size: 20px;
      }
    }
    .vision-card {
      height: 55vh;
    }
  }

  .action {
    background-image: url(../assets/images/home/actionSectionBg.jpg);
    background-position: center;
    background-size: cover;
    /* background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.2); */
    height: 565px;
    place-content: center;
    button a:hover {
      color: var(--color-white) !important;
    }
  }
  .trusted-section {
    background-color: #f6f6f6;

    .trusted-title {
      font-size: var(--trusted-title-size);
      margin-bottom: 20px;
      font-weight: 700;
    }

    .trusted-text {
      font-size: var(--trusted-text-size);
      margin-bottom: 30px;
      line-height: var(--line-height);
    }

    .company-item {
      border-radius: 8px;
      box-shadow: var(--company-shadow);
      transition: transform var(--transition-speed) ease;
      text-align: center;
      padding: 10px;
      background-color: #fff;
    }

    .company-item img {
      height: 80px;
      width: auto;
      max-width: 100%;
      margin: 0 auto;
    }

    .company-item:hover {
      transform: translateY(-5px);
    }
  }

  .contactAndFaq {
    margin-top: 90px;
    .contact {
      background-color: #3c3c3c;
      padding: 30px;
      height: fit-content;
    }
    .faq {
      .accordion {
        .accordion-button:focus {
          box-shadow: none !important;
        }
        .accordion-item {
          outline: none !important;
          box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.2) !important;
          .accordion-header {
            height: 60px;
          }
        }

        .accordion-button:not(.collapsed) {
          background-color: var(--color-accent-orange) !important;
          color: white !important;
        }
      }
    }
  }
}

@media screen and (max-width: 1200px){
  .header__text h1{
    margin-bottom: 25px !important;
  }

  .header__text h2 {
    width: 60% !important;
    font-size: 40px !important;
    margin-bottom: 25px !important;
    line-height: 55px !important;
  }
}

@media screen and (max-width: 992px) {
  .company-item img {
    height: 100px !important;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .trusted-section .owl-carousel {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  .header__text {
    top: 15% !important;
    left: 20px !important;
  }

  .header__text h1 {
    font-size: 16px !important;
  }
  .header__text h2 {
    width: 100% !important;
    font-size: 28px !important;
    line-height: 32px !important;
  }
  .header__text p {
    font-size: 14px;
    width: 80% !important;
  }
  .carousel-control-prev,
  .carousel-control-next{
    margin-top: 60px;
  }
  .about__icons i {
    font-size: 40px !important;
  }
  .experience__years {
    border-right: none !important;
    border-bottom: #b6b3b3 solid 1px;
  }
  .experience__years h3 {
    font-size: 32px !important;
  }
  .experience__years p {
    font-size: 16px !important;
  }
  .experience__list ul li {
    font-size: 18px !important;
  }
  .company-item img {
    height: 120px !important;
    width: auto;
    max-width: 50% !important;
    margin: 0 auto;
  }
  .ourVision .card .btn {
    width: 100% !important;
  }
  .ourVision  .vision-card {
      height: 40vh !important;
    }
  .number {
    font-size: 40px !important;
  }
  .ourVision__numbers p {
    font-size: 15px !important;
    font-weight: bold;
  }
  .ourVision__numbers .cols:nth-child(2),
  .ourVision__numbers .cols:nth-child(1) {
    border-bottom: #b6b3b3 solid 1px;
  }
  .ourVision__numbers .cols:nth-child(2) {
    border-right: none !important;
  }
  .action {
    height: 400px !important;
    .action__text {
      width: 100% !important;
    }
  }
  .contactAndFaq {
    .faq__text {
      text-align: center;
    }
  }

  .quality .quality__image {
    margin-top: 35px;
  }

  .quality .quality__image .cols {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 576px) {
  .header__text {
    top: 10% !important;
    left: 35px !important;
  }
  .carousel-control-prev,
  .carousel-control-next{
    margin-block: 0 140px;
  }
  .ourVision  .vision-card {
      height: 55vh !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .video video {
    height: 100% !important;
  }
  .video .col {
    height: 296px !important;
  }
  .container {
    margin: 0 0px !important;
    max-width: 100% !important;
  }
  .quality {
    .quality__icons {
      i {
        top: 50px !important;
      }
    }
  }
}