#hero {
  padding: clamp(2rem, 7vw, 9rem) 0;
  /* background-color: #545454; */
  position: relative;
  /* height: 800px; */

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  h3 {
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 4.5rem);
    color: #fff;
    position: relative;
    z-index: 2;
  }

  a {
    z-index: 2;
  }

  .playIcon {
    z-index: 2;
    position: absolute;
    bottom: -50px;
    height: 100px;
    width: 100px;
    left: 20px;
    border-radius: 50%;
    background-color: #f1b600;
    left: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 4px 0px #00000040;
    display: none;

    i {
      color: #545454;
      font-size: 5rem;
      padding-left: 12px;
    }
  }
}

#AiSearch {
  background-color: #ffecb8;
  padding: 50px 0;

  h4 {
    font-weight: 500;
    font-size: 32px;
    color: #545454;
  }

  form {
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #00000040;
    padding: 8px;
    display: flex;
    justify-content: space-between;

    input {
      width: 100%;
      border: none;
      outline: none;
      appearance: none;
      padding: 10px;
      padding-left: 20px;
      max-width: 500px;
    }

    button {
      width: 100%;
      text-wrap: nowrap;
    }
  }
}

#focus {
  #carouselExampleIndicators {
    margin-top: 150px;
    position: relative;

    .topBox {
      background-color: #f2ba1c;
      box-shadow: 0px 4px 10px 0px #00000047;
      position: absolute;
      top: -20px;
      left: 0;
      width: 300px;
      height: 250px;
      padding: 50px 20px;
      z-index: 9;
      display: flex;
      justify-content: space-between;
      align-items: start;
      flex-direction: column;
      @media(max-width: 991px) {
        height: 125px;
        padding: 20px;
      }

      p,
      a {
        text-decoration: none;
        color: #545454;
        font-weight: 500;
      }
    }

    .carousel-indicators {
      position: absolute;
      top: -125px;
      display: flex;
      justify-content: space-around;
      align-items: start;
      height: 40px;
      width: 100%;
      margin: 0;
      padding: 0;
      border-top: 1px solid #545454;

      button {
        text-indent: 0%;
        width: 25%;
        background-color: #545454;
        height: 0px;
        margin: 0;
        padding: 0;
        text-align: start;
        font-weight: 400;
        font-size: 24px;
        line-height: 20px;
        padding-left: 20px;
        position: relative;

        &.active {
          font-weight: 600;

          &:before {
            position: absolute;
            content: "";
            top: -10px;
            left: 0;
            height: 5px;
            width: 100%;
            background-color: #f2ba1c;
          }
        }
      }
      @media(max-width:768px){
        width: 100%;
        /* overflow: scroll; */
        top: -90px;
        button{
          width: 100%;
          text-wrap: nowrap;
          font-size: 10px;
          line-height: 15px;
          padding-left: 0;
        }
      }
    }

    .carousel-inner {
      img {
        background-color: #545454;
        height: clamp(300px, 70vh, 600px);
        width: 100%;
        object-fit: cover;
      }
    }
  }
}

#news {
  .boxes {
    padding-top: 50px;
    display: flex;
    gap: 30px;

    .box {
      width: calc(33.33% - 30px);
      box-shadow: 0px 4px 4px 0px #00000040;
      padding: 20px;

      h4 {
        font-weight: 400;
        font-size: 22px;
      }

      p {
        padding-bottom: 10px;
        border-bottom: 2px solid #545454;
      }
    }
  }
}

#kerbstoneSolutions {
  padding: 100px 0;
  background-color: #ffecb8;

  .solutions {
    position: relative;

    .card-slider {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .card {
      scroll-snap-align: start;
      width: calc(33% - 10px);
      box-shadow: 0px 4px 4px 0px #00000040;
      flex-shrink: 0;
      padding: 50px;
      border-radius: 0;
      height: 100%;
    }

    .slider-btn {
      position: absolute;
      bottom: -50px;
      background-color: #666;
      color: white;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 20px;
      z-index: 10;
    }

    .slider-btn.left {
      left: 10px;
    }

    .slider-btn.right {
      left: 60px;
    }

    .card-link {
      color: #f1b600;
      font-weight: 500;
      text-decoration: none;
    }
  }
}


#sustainability {
  h3 {
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 3rem);
  }

  img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    background-color: #353535;
    position: relative;
    
  }
}

#productServices {
  position: relative;

  .productServices {
    position: relative;

    .productServices-card-slider {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;

      &::-webkit-scrollbar {
        display: none;
      }

      .productServices-card {
        scroll-snap-align: start;
        width: 100%;
        flex-shrink: 0;
        border-radius: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          background-color: #353535;
          height: 450px;
        }
      }
    }

    .bottom {
      h3 {
        padding-top: 20px;
        font-weight: 400; 
        font-size: clamp(1.5rem, 4vw, 3rem);
      }

      p {
        padding-bottom: 5px;
        border-bottom: 1px solid #545454;
      }

    }

    .productServices-slider-btn {
      position: absolute;
      bottom: -20px;
      background-color: #666;
      color: white;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 20px;
      z-index: 10;
    }

    .productServices-slider-btn.left {
      left: 10px;
    }

    .productServices-slider-btn.right {
      left: 60px;
    }

    .fixed-btn {
      position: absolute;
      bottom: 4px;
      color: #f1b600;
      height: 100px;
      background: #fff;
      width: 20%;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      display: none;
    }
  }
}


#caseStudy {
  padding: 100px 0;
  background-color: #FFECB8;
  color: #545454;

  .main {
    display: flex;
    gap: 20px;

    .box {
      width: calc(50% - 10px);
      background-color: #fff;

      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
      }

      .content {
        padding: 20px;

        h5 {
          font-weight: 500;
          color: #000;
          font-size: 19px;
        }
        a{
          color: #f1b600;
          text-decoration: none;

        }
      }
    }
  }
}