body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

/* -------------------------------
   KEYNUMBER COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-keynumber {
  .keynumber-list {
    .list-el {
      display: flex;
      justify-content: space-between;
      padding-right: 2rem;
      .el-inner {
        font-family: $Grotesk;
        .inner-number {
          font-size: 50px;
        }
        .inner-description {
          font-size: 8px;
        }
      }
    }
  }
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: 768px) {
  .cbo-keynumber {
    .keynumber-list {
      .list-el {
        .el-inner {
          .inner-number {
            font-size: 100px;
          }
          .inner-description {
            font-size: 12px;
          }
        }
      }
    }
  }
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: 1024px) {
  .cbo-keynumber {
    .keynumber-list {
      .list-el {
        .el-inner {
          .inner-number {
            font-size: 200px;
          }
          .inner-description {
            font-size: 22px;
          }
        }
      }
    }
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: $screen-lg-min) {
  .cbo-keynumber {
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-keynumber {
  }
}

/* -------------------------------
   CONTAINER COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-container {
  width: 100%;
  padding: 2.5rem 1.25rem;
  max-width: 90rem;
  position: relative;
  margin : 0 auto;
  &.container--full {
    max-width: none;
    padding: 0;
  }
  &.container--small {
    max-width: 76rem;
  }
  &.container--xsmall {
    max-width: 62rem;
  }
  &.container--padding {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  &.container--nomargin {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

.cbo-margin-container{
  margin: 2.5rem auto;
  .cbo-container{
    margin-top:0;
    margin-bottom: 0;
  }
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: $screen-sm-min) {
  .cbo-container {
    padding-left:4rem;
    padding-right:4rem;
    &.container--small {
      width:90%;
    }
    &.container--xsmall {
      width: 80%;
    }
  }
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: $screen-md-min) {
  .cbo-container {
    padding-left:4.5000rem;
    padding-right:4.5000rem;
    &.container--padding {
      padding-top: 5.5rem;
      padding-bottom: 5.5rem;
    }
    &.container--small,
    &.container--xsmall {
    }
  }

  .cbo-margin-container{
    margin:5.5625rem auto;
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: $screen-lg-min) {
  .cbo-container {
    //padding-left:6rem;
    //padding-right:6rem;
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-container {
    &.container--small {
    }
    &.container--xsmall {
    }
  }
}

.Grotesk {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.Grotesk-medium {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.Grotesk-bold {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* -------------------------------
   FOOTER COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-footer {
  .footer-list {
    .list-el {
      border-top: 1px solid #1A1A1A33;
      padding-top: 1rem;
      .el-inner {
        display: flex;
        justify-content: space-between;
        padding-right: 3rem;
        align-items: baseline;
        .inner-logo {
          .logo {
            height: auto;
            width: 22px;
          }
        }
        .inner-contact {
          font-size: 16px;
        }
        .inner-adress {
          font-size: 8px;
        }
      }
      .el-footer {
        padding-top: 2rem;
        display: flex;
        justify-content: space-between;
        .footer-copyright {
          font-size: 8px;
        }
        .footer-gotop {
          display: flex;
          gap: 0.5rem;
          font-size: 8px;
        }
      }
    }
  }
}

.footer-wrapper {
  background-color: #1A1A1A33;
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: 768px) {
  .cbo-footer {
    .footer-list {
      .list-el {
        border-top: 1px solid #1A1A1A33;
        padding-top: 2rem;
        .el-inner {
          display: flex;
          justify-content: space-between;
          padding-right: 3rem;
          align-items: baseline;
          .inner-logo {
            .logo {
              height: auto;
              width: 40px;
            }
          }
          .inner-contact {
            font-size: 32px;
          }
          .inner-adress {
            font-size: 12px;
          }
        }
        .el-footer {
          padding-top: 4rem;
          display: flex;
          justify-content: space-between;
          .footer-copyright {
            font-size: 12px;
          }
          .footer-gotop {
            display: flex;
            gap: 0.5rem;
            font-size: 12px;
          }
        }
      }
    }
  }
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: 1024px) {
  .cbo-footer {
    .footer-list {
      .list-el {
        .el-inner {
          display: flex;
          justify-content: space-between;
          padding-right: 3rem;
          align-items: baseline;
          .inner-logo {
            .logo {
              height: auto;
              width: 55px;
            }
          }
          .inner-contact {
            font-size: 40px;
          }
          .inner-adress {
            font-size: 20px;
          }
        }
        .el-footer {
          padding-top: 6rem;
          display: flex;
          justify-content: space-between;
          .footer-copyright {
            font-size: 15px;
          }
          .footer-gotop {
            display: flex;
            gap: 0.5rem;
            font-size: 15px;
          }
        }
      }
    }
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: $screen-lg-min) {
  .cbo-footer {
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-footer {
  }
}

/* -------------------------------
   ABOUT COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-about {
  .about-list {
    .list-title {
      .title-primary {
        font-size: 12px;
      }
      .title-secondary {
        font-size: 16px;
        padding-top: 1rem;
      }
    }
    .list-el {
      cursor: pointer;
      padding-top: 1rem;
      .el-inner {
        .inner-title {
          font-size: 36px;
          color: #92929299;
        }
        .inner-description {
          display: flex;
          gap: 1rem;
          font-size: 10px;
          height: 0;
          overflow: hidden;
          opacity: 0;
          transition: height 0.8s ease, opacity 0.8s ease;
          .description-details {
            padding: 1em 0;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
  }
  .list-el:hover .el-inner:hover .inner-description,
   .list-el.inner-description {
    height: auto;
    opacity: 1;
  }
  .list-el:hover .el-inner:hover .inner-title,
   .list-el.inner-title {
    color:black ;
  }
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: 768px) {
  .cbo-about {
    .about-list {
      display: flex;
      justify-content: space-between;
      gap: 3rem;
      .list-title {
        padding-top: 2rem;
        width: 33%;
        .title-primary {
          font-size: 16px;
        }
        .title-secondary {
          font-size: 24px;
          padding-top: 1rem;
        }
      }
      .list-el {
        width: 66%;
        .el-inner {
          .inner-title {
            font-size: 56px;
          }
          .inner-description {
            display: flex;
            gap: 1rem;
            font-size: 14px;
            .description-details {
              padding: 1em 0;
              display: flex;
              flex-direction: column;
            }
          }
        }
      }
    }
  }
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: 1024px) {
  .cbo-about {
    .about-list {
      display: flex;
      justify-content: space-between;
      gap: 3rem;
      .list-title {
        width: 33%;
        padding-top: 3rem;
        .title-primary {
          font-size: 16px;
        }
        .title-secondary {
          font-size: 34px;
          padding-top: 1rem;
        }
      }
      .list-el {
        width: 66%;
        padding-bottom: 2rem;
        .el-inner {
          .inner-title {
            font-size: 82px;
          }
          .inner-description {
            display: flex;
            gap: 1rem;
            font-size: 14px;
            .description-details {
              padding: 1em 0;
              display: flex;
              flex-direction: column;
            }
          }
        }
      }
    }
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: $screen-lg-min) {
  .cbo-about {
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-about {
  }
}

/* -------------------------------
   CUSTOMER COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-customer {
  padding: 1em 0;
  background: black;
  background-image: url("../../src/img/shape.svg");
  .customer-list {
    display: flex;
    align-items: center;
    justify-content: center;
    .list-el {
      display: flex;
      flex-direction: column;
      text-align: center;
      gap: 1rem;
      flex: 1;
      .el-logo {
        padding: 1rem;
        .logo {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: 768px) {
  .cbo-customer {
    padding: 2em 0;
    .customer-list {
      .list-el {
        .el-logo {
          .logo {
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: 1024px) {
  .cbo-customer {
    padding: 3em 0;
    .customer-list {
      .list-el {
        .el-logo {
          .logo {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: $screen-lg-min) {
  .cbo-customer {
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-customer {
  }
}

/* -------------------------------
   PROJECT COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-project {
  background-color: white;
  .project-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .list-el {
      width: 80%;
      .el-card {
        display: flex;
        flex-direction: column;
        padding-bottom: 2rem;
        .card-img {
          text-align: center;
          padding-bottom: 0.75rem;
          img {
            height: auto;
            width: 100%;
            border-radius: 18px;
          }
        }
        .card-description {
          display: flex;
          justify-content: space-between;
          .card-title {
            flex: 3;
            font-size: 12px;
          }
          .card-category {
            flex: 1;
            gap: 0.2rem;
            display: flex;
            flex-direction: column;
            font-size: 8px;
            color: #929292;
            align-items: flex-end;
            .category {
              padding: 0.2rem 0.4rem;
              border: 0.5px solid #929292;
              border-radius: 3px;
              text-transform: uppercase;
            }
          }
        }
      }
    }
  }
  .right {
    padding-top: 0rem;
  }
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: 768px) {
  .cbo-project {
    overflow: hidden;
    margin-top: -11rem;
    .project-list {
      display: flex;
      flex-direction: row;
      align-items: start;
      gap: 5rem;
      .list-el {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        .el-card {
          padding: 5rem 0rem;
          display: flex;
          flex-direction: column;
          gap: 2rem;
          padding-bottom: 0rem;
          .card-img {
            padding-bottom: 0rem;
            img {
              width: 100%;
              border-radius: 18px;
            }
          }
          .card-description {
            gap: 1rem;
            .card-title {
              font-size: 20px;
              flex: 3;
            }
            .card-category {
              gap: 0.3rem;
              font-size: 10px;
              .category {
                padding: 0.4rem 0.6rem
              }
            }
          }
        }
      }
    }
    .right {
      margin-top: 15rem;
    }
  }
}

.left {
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: 1024px) {
  .cbo-project {
    .project-list {
      gap: 6rem;
      padding-bottom: 7rem;
      .list-el {
        gap: 2rem;
        .el-card {
          .card-img {
            img {
            }
          }
          .card-description {
            gap: 1rem;
            .card-title {
              flex: 4;
              font-size: 30px;
            }
            .card-category {
              gap: 0.4rem;
              font-size: 12px;
              .category {
                padding: 0.6rem 0.8rem
              }
            }
          }
        }
      }
    }
  }

  .right {
    margin-top: 15rem;
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: 1200px) {
  .cbo-project {
    .project-list {
      padding-bottom: 15rem;
    }
  }

  .millet {
    width: 644px;
    height: auto;
  }

  .soltis {
    width: 528px;
    height: auto;
  }

  .pilot {
    width: 527px;
    height: auto;
  }

  .sodiaal {
    width: 645px;
    height: auto;
  }

  .times {
    width: 645px;
    height: auto;
  }

  .ffs {
    width: 527px;
    height: auto;
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-project {
  }
}

/* -------------------------------
   HEADER COMPONENT
   --
   Mobile First !
------------------------------- */

.cbo-header {
  position: relative;
  height: 100vh;
  background: white;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 15;
    .header-logo {
      img {
        height: auto;
        width: 34px;
      }
    }
    .header-cta {
      display: flex;
      .cta-contact {
        padding: 0.4rem 1.4rem;
        background: #1A1A1A;
        border-radius: 1rem;
        color: white;
        font-size: 8px;
        display: flex;
        align-items: center;
      }
      .cta-img {
        background: #1A1A1A;
        padding: 0.6rem;
        border-radius: 99%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          height: auto;
          width: 8px;
        }
      }
    }
  }
}

.text-block {
  font-size: 22px;
  text-align: center;
  padding: 0 1.25rem;
  margin: 2.5rem auto;
  max-width: 90rem;
  margin-top: -10rem;
  position: relative;
  z-index: 10;
}

.video {
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: sticky;
  top: 0;
  z-index: 11;
}

.row {
  display: flex;
  justify-content: flex-end;
  animation: float 7s infinite;
  z-index: 10;
}

.right-row {
  margin-top: -20rem;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-50px);
  }

  100% {
    transform: translateY(0);
  }
}

#play-pause-button {
  position: fixed;
  bottom: 1rem;
  right: 1.2rem;
  cursor: pointer;
  width: 20px;
  height: auto;
  background: black;
  padding: 0.7rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  z-index: 99999999;
}

button {
  all: unset;
}

a {
  text-decoration: none;
  color: black;
}

/* -------------------------------
   SMALL SCREENS
------------------------------- */

@media (min-width: 768px) {
  .cbo-header {
    .header {
      .header-logo {
        img {
          width: 42px;
        }
      }
      .header-cta {
        .cta-contact {
          padding: 0.6rem 1.6rem;
          font-size: 12px;
        }
        .cta-img {
          padding: 0.8rem;
          img {
            width: 12px;
          }
        }
      }
    }
  }

  .block-title {
    padding-left: 16rem;
  }

  .text-block {
    font-size: 28px;
    text-align: left;
    padding: 0 1.25rem;
    margin: 2.5rem auto;
    max-width: 90rem;
    margin-top: -25rem;
  }
}

/* -------------------------------
   MEDIUM SCREENS
------------------------------- */

@media (min-width: 1024px) {
  .cbo-header {
    .header {
      .header-logo {
        img {
          height: auto;
          width: 55px;
        }
      }
      .header-cta {
        display: flex;
        .cta-contact {
          padding: 0.6rem 1.8rem;
          border-radius: 1rem;
          font-size: 16px;
        }
        .cta-img {
          padding: 1rem;
          border-radius: 99%;
          display: flex;
          img {
            height: auto;
            width: 12px;
          }
        }
      }
    }
  }

  .block-title {
    padding-left: 20rem;
  }

  .text-block {
    font-size: 56px;
    text-align: left;
    padding: 0 1.25rem;
    margin: 2.5rem auto;
    max-width: 90rem;
    margin-top: -25rem
  }
}

/* -------------------------------
   LARGE SCREENS
------------------------------- */

@media (min-width: 1025px) {
  .cbo-header {
    .text-bloc {
      font-size: 56px;
      text-align: left;
      padding: 0 1.25rem;
      margin: 2.5rem auto;
      max-width: 90rem;
      margin-top: -22rem;
      position: absolute;
      display: block;
    }
    .header {
      padding : 2.5rem 2rem;
    }
  }
}

/* -------------------------------
   EXTRA LARGE SCREENS
------------------------------- */

@media (min-width: $screen-xl-min) {
  .cbo-header {
  }
}