@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap');

@font-face {
  font-family: "Montserrat";
  src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf') format("truetype");
}
@font-face {
  font-family: "Montserrat";
  src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format("truetype");
}
body{
  font-family:"Montserrat", sans-serif;
}

      :root {
        --qubex-black: #020202;
        --qubex-white: #FEFDFC;
        --qubex-purple: #6A60E4;
        --qubex-baige: #EFECE8;
      }


      @media only screen and (min-width: 767px) {
        .preloader img {
          min-width: 7vw;
          max-width: 7vw;
        }

        .logo {
          min-width: 7.7vw;
          max-width: 7.7vw;
        }

        h1 {
          font-size: 10vw;
        }

        h2 {
          font-size: 5.5vw;
        }

        h3 {
          font-size: 3.5vw;
        }

        h4 {
          font-size: 2vw;
        }

        h5 {
          font-size: 2vw;
        }

        p {
          font-size: 1.2vw;
        }

        .hero-p {
          font-size: 1.4vw;
        }

        .p-small {
          font-size: 1.1vw;
          line-height: 1.5;
        }

        .small-heading h2 {
          font-size: 3vw;
        }

        .h2-bigger {
          font-size: 9vw;
        }

        .big-bullet {
          font-size: 15vw;
        }

        .bigger-h4 {
          font-size: 2.5vw;
        }

        .testimonials-headline {
          font-size: 1.8vw;
        }

        .testimonials-sub {
          font-size: 1vw;
        }

        .testimonials-brand {
          font-size: 1vw;
        }

        .slider-bullet-space img {
          height: 8vw;
          width: 40%;
        }

        .kubernetes-big {
          font-size: 25vw;
        }

        .logos-strip img {
          min-height: 3.5vw;
          max-height: 3.5vw;
        }

        .hashtag h3 {
          font-size: 2.5vw;
        }

        .h5-small {
          font-size: 1.8vw;
        }

        .h2-cta {
          font-size: 10vw;
        }

        .nav-cta-btn {
          font-size: 1vw;
          padding: 1vw 2vw;
        }

        .cta-btn {
          font-size: 1.2vw;
          padding: 1.4vw 2.5vw;
        }
      }

      @media only screen and (max-width: 767px) {
        .preloader img {
          min-width: 16vw;
          max-width: 16vw;
        }

        .logo {
          min-width: 26vw;
          max-width: 26vw;
        }

        h1 {
          font-size: 22vw;
        }

        h2 {
          font-size: 13vw;
        }

        h3 {
          font-size: 8vw;
        }

        h4 {
          font-size: 7.5vw;
        }

        h5 {
          font-size: 7.5vw;
        }

        p {
          font-size: 4vw;
        }

        .p-small {
          font-size: 3.7vw;
          line-height: 1.5;
        }

        .small-heading h2 {
          font-size: 8vw;
        }

        .h2-bigger {
          font-size: 18vw;
        }

        .big-bullet {
          font-size: 45vw;
        }

        .testimonials-headline {
          font-size: 6vw;
        }

        .testimonials-sub {
          font-size: 3.5vw;
        }

        .slider-bullet-space img {
          height: 25vw;
          width: 50%;
        }

        .kubernetes-big {
          font-size: 60vw;
        }

        .bigger-h4 {
          font-size: 3vw;
        }

        .logos-strip img {
          min-height: 6vw;
          max-height: 6vw;
        }

        .hashtag h3 {
          font-size: 7vw;
        }

        .h5-small {
          font-size: 4vw;
        }

        .h2-cta {
          font-size: 15vw;
        }

        .nav-cta-btn {
          font-size: 3.2vw;
          padding: 3vw 5.5vw;
        }

        .cta-btn {
          font-size: 4.5vw;
          padding: 5vw 9vw;
        }

        .footer-logo {
          min-width: 15vw;
          max-width: 15vw;
        }

        .hero h1 {
          margin-top: 20vw;
        }

        .logo {
          top: 4vw;
          left: 5vw;
        }
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      p {
        cursor: default;
      }

      h1,
      h2,
      h3 {
        font-family:"Montserrat", sans-serif;
        font-weight: normal;
        line-height: 1;
      }

      h4 {
        font-weight: normal;
        line-height: 1.3;
        letter-spacing: -0.2vw;
        text-transform: uppercase;
      }

      h5 {
        font-weight: normal;
        line-height: 1.3;
        letter-spacing: -0.05vw;
        /*text-transform: uppercase;*/
      }

      p {
        letter-spacing: -0.03vw;
        line-height: 1.5;
      }

      .black {
        color: #020202;
      }
      
      .black1 {
        color: #020202;
        font-size: 40px;
      }
      

      .orange {
        color: #a55b15;
      }

      .purple {
        /* color: #6A60E4; */
        color: #a55b15;
        font-size:35px;
        font-weight:bold;
      }

      .purple-grey {
        /*color: #9A9ABB;*/
        color:#000000c7;
      }

      .white-bg {
        background-color: #FEFDFC;
      }


      img {

        -drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }


      body {
        margin: 0;
        padding: 0;
        color: #F2EEEB;
        /* background: #020202; */
      font-family:"Montserrat", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
      }

      .container {
        overflow-x: hidden;
      }

      ::-webkit-scrollbar {
        -ms-overflow-style: none;
        display: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -ms-overflow-style: -ms-autohiding-scrollbar;
      }

      .large {
        height: 300vh;
      }

      .text-rotate {
        position: relative;
      }

      .split-parent {
        overflow: hidden;
      }

      .prple {
        background-color: blueviolet;
      }

      .wrapper {
        z-index: 999;
        position: absolute;
        bottom: 0;
        transform: scale(1);
      }

      .boxes {
        position: absolute;
        top: 0;
      }

      .boxes:nth-of-type(2) {
        margin-top: -7vw;
        margin-left: 0vw;
        z-index: 20;
      }

      .boxes:nth-of-type(3) {
        margin-top: -14vw;
        margin-left: 0vw;
        z-index: 20;
      }

      .box,
      .boxdefault {
        min-width: 10vw;
        max-width: 10vw;
        height: 10vw;
        color: rgba(255, 255, 255, 0.3);
        background: url(../img/processs.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .other,
      .otherdefault {
        min-width: 10vw;
        max-width: 10vw;
        height: 10vw;
        color: rgba(255, 255, 255, 0.3);
        background: url(https://assets.website-files.com/645b37f57889fc0605df47da/645b5ed6dcc49a5d61145fa6_CUBE.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .mainbox {
        min-width: 9vw;
        max-width: 10vw;
        height: 10vw;
        color: rgba(255, 255, 255, 0.3);
        /* background: url(https://assets.website-files.com/645b37f57889fc0605df47da/645b5ed6f3497763a3c2a986_blackbox.svg); */
        background:url(../img/guhbk.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;

      }

      .yellowbox {
        min-width: 9vw;
        max-width: 10vw;
        height: 10vw;
        color: rgba(255, 255, 255, 0.3);
        background: url(https://assets.website-files.com/645b37f57889fc0605df47da/645b5ed61425094e2583ceb2_yellowbox.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .greybox {
        min-width: 10vw;
        max-width: 10vw;
        height: 10vw;
        color: rgba(255, 255, 255, 0.3);
        background: url(https://assets.website-files.com/645b37f57889fc0605df47da/64660eca3f55a96db4f4583d_box-grey.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .group {
        position: relative;
        display: flex;
        flex-flow: row wrap;
      }

      .group:nth-of-type(1) {
        z-index: 10;
        bottom: 0;
      }

      .group:nth-of-type(2) {
        z-index: -2;
        bottom: 13vw;
        left: -7vw;
      }

      .group:nth-of-type(3) {
        z-index: -3;
        bottom: 26vw;
        left: -14vw;
      }

      .group:nth-child(1) .box:nth-of-type(2),
      .group:nth-child(2) .box:nth-of-type(2),
      .group:nth-child(3) .box:nth-of-type(2),
      .group:nth-child(1) .other:nth-of-type(2),
      .group:nth-child(2) .other:nth-of-type(2),
      .group:nth-child(3) .other:nth-of-type(2),
      .group:nth-child(1) .mainbox:nth-of-type(2),
      .group:nth-child(2) .mainbox:nth-of-type(2),
      .group:nth-child(3) .mainbox:nth-of-type(2),
      .group:nth-child(1) .yellowbox:nth-of-type(2),
      .group:nth-child(2) .yellowbox:nth-of-type(2),
      .group:nth-child(3) .yellowbox:nth-of-type(2) {
        position: relative;
        bottom: 3vw;
        left: -3vw;
        z-index: -1;
      }

      .group:nth-child(1) .box:nth-of-type(3),
      .group:nth-child(2) .box:nth-of-type(3),
      .group:nth-child(3) .box:nth-of-type(3),
      .group:nth-child(1) .other:nth-of-type(3),
      .group:nth-child(2) .other:nth-of-type(3),
      .group:nth-child(3) .other:nth-of-type(3),
      .group:nth-child(1) .mainbox:nth-of-type(3),
      .group:nth-child(2) .mainbox:nth-of-type(3),
      .group:nth-child(3) .mainbox:nth-of-type(3),
      .group:nth-child(1) .mainbox:nth-of-type(3),
      .group:nth-child(2) .yellowbox:nth-of-type(3),
      .group:nth-child(3) .yellowbox:nth-of-type(3) {
        position: relative;
        bottom: 6vw;
        left: -6vw;
        z-index: -2;
      }

      .big-bullet {
        font-weight: normal;
        line-height: 1;
        color: #6A60E4;
      }

      .kubernetes-big {
        font-weight: normal;
        line-height: 1;
      }

      .testimonial {
        border-radius: 3vw;
      }

      .testimonial-img {
        background-color: var(--qubex-black);
        border-radius: 2vw;
      }

      .testimonial img {
        width: 20%;
      }

      .testimonials-headline {
        color: var(--qubex-black);
        line-height: 1.1;
        letter-spacing: 0.01vw;
      }

      .testimonials-sub {
        font-weight: 700;
        text-transform: uppercase;
      }

      .testimonials-brand {
        color: #747491;
      }

      .slider-bullet-space {
        background-color: var(--qubex-baige);
        border-radius: 3vw;
      }

      .hashtag {
        border: 1px solid white;
        padding: 1vw 2vw;
        transform: rotate(-30deg);
        border-radius: 10vw;
      }

      .hashtag img {
        min-width: 3vw;
        max-width: 3vw;
        position: relative;
        left: -0.5vw;
      }

      .difference-shape {
        background-color: #F9F6F3;
        border-radius: 30vw;
      }

      .wrapper-qubex {
        transform: scale(0.4);
      }

      .compare-container {
        transform: scale(1);
      }

      @media only screen and (max-width: 650px) {
        .difference-shape {
          height: auto !important;
          padding: 18vw 0vw !important;
        }

        .second-shape {
          height: 15vw !important;
          overflow: hidden;
        }

        .wrapper-qubex {
          transform: scale(0.7);
        }

        .compare-container {
          transform: scale(1);
        }
      }
/* 
      .difference-shape {
        height: 25vw;
      } */

      .difference-shape .secondshape {
        display: none;
      }

      .change-shape {
        margin-top: -3vw;
      }

      .second-shape {
        height: 25vw;
        overflow: hidden;
      }

      .shape-1,
      .shape-2,
      .shape-3,
      .shape-4 {
        min-width: 15vw;
        max-width: 15vw;
      }

      .slider .p-small {
        text-align: left;
      }

      .slider-bullets {
        overflow: visisble !important;
      }
      
       .hero-head{
        color: #000;
        font-size: 35px;
        margin-left: 10%;
        font-weight: normal;  
      }
      
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  background: #7ca9c8a1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width:100%;
}
footer img{
  width:12%;
}

footer .footer-top {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
  padding-top: 20px;
  text-align:center;
}

footer .navbar-brand {
  color: #fff;
font-size:30px;
}
footer h2 {
  color: #243763;
    padding: 20px;
    font-size: 25px;
}
footer p {
  color: #243763;
}
footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #5777ba;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}



.navigation{
  position: relative;
  top: 86% !important;
  z-index: 9999;
  position: fixed;
}
.banner-icon {
  background-color: #dee2e6;
  padding: 0px;
  margin-top: 30px;
  border-top-right-radius: 50px;
  width: 100%;
  border: 1px solid #adb5bd;
}
.banner-icon .list-home{
  margin-left: -40px;
}
.list-home p{
   margin-top:30px;
   font-size:16px;
   color:#243763;
}
.banner-icon .banner-home {
  position: absolute;
  cursor: pointer;
  height: 53px;
  width: 53px;
  border-radius: 50%;
  border: 3px solid #adb5bd;
  background-color: #dee2e6;
  margin-top: -45px;
  padding: 2px;
}
.banner-icon ul{
  list-style-type: none;
  right: 30px;
  position: relative;
  }
  .banner-icon ul li{
    display: inline-block;
    margin: 0 10px;
  }
  .banner-icon ul li img{
    width: 35px;
    margin-top: 15px;
  }




.services {
  position: relative;
  right: 2rem;
  top: 86% !important;
  z-index: 9999;
  position: fixed;
}
.button {
  color: #E3DFE9;
  font-size: 18px;
  background: #dee2e6;
  border-radius: 50%;
  padding: 10px 3px;
  width: 70px;
  height: 70px;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  margin-bottom: -70px;
  border: 2px solid #adb5bd;
  margin-left:140px;
}

.button:hover {
  color: #DBD7E0;
  transform: translateY(3px);
}
.button img {
  width: 79%;
  margin-left: 6px;
}
.dropdown {
  position: relative;
  color: #E3DFE9;
  font-size: 15px;
  background: white;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
  display: block;
  cursor: pointer;
  width: 235px;
  transform: scale(0.01);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  transform-origin: center top;
  overflow: hidden;
  margin-top: -300px;
}

.dropdown.open {
  transform: scale(1);
  opacity: 1;
  box-shadow: 3px 3px 30px rgba(118, 96, 168, 0.15);
}

.dropdown a {
  position: relative;
  color: #6C6185;
  text-decoration: none;
  display: block;
  padding: 12.5px 30px;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
  overflow: hidden;
}

.dropdown a.clicked {
  padding-left: 35px;
  color: #987CD9;
}

.dropdown a:hover {
  color: #987CD9;
  padding-left: 35px;
}

span {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0px;
  position: absolute;
  background: #987CD9;
  transition: width 0.4s ease;
  border-radius: 1px;
}

span.clicked {
  width: 5px;
} 

.navbar-logo{
  position:absolute;
  margin-left:50px;
  margin-top: 10px;
}
.navbar-brand img {
    width: 35%;
}

.mobile .js-img{
  width:50%;
}

@media (max-width: 390px){
.navbar-logo{
  margin-left:unset;
}
  .navigation {
    margin-left: -27px;
    top: 88%;
  }
    .banner-icon{
      margin-left:26px;
      width:90%;
  }
  
  .banner-icon ul {
    right: 25px;
  }
  
  .banner-icon ul li {
    margin: 0px 5px;
  }
  .banner-icon ul li img {
    width: 23px;
  }
  .banner-icon .banner-home {
    height: 45px;
    width: 45px;
    padding: 2px;
  }
  .list-home p {
    font-size: 14px;
    margin-top: 30px;
  }
  footer img {
    width: 30%;
}
  .services {
    top: 80% !important;
  }
  .button {
    padding: 6px 0px;
    width: 50px;
    height: 50px;
  }
  .dropdown {
    font-size: 15px;
    width: 200px;
    margin-top: -290px;
  }
  .hero-head {
    font-size: 26px;
    margin-left: unset !important;
}
.black1 {
  color: #020202;
  font-size: 25px;
}
.mobile .js-img{
   width:60%;
}
.p-small.purple-grey{
  width:130%;
}
.hero-panel {
  overflow: hidden;
}
.navbar-brand img {
    /*
    width: 25%;
    margin-left: 20px;
    margin-top: 20px; */
    width: 24%;
    margin-left: 15px;
}
.h1.deskstop{
  font-size: 32px !important;
}
.container.hero-visual.mobile.visible {
  margin-top: 72vw;
}
.h2-2.desktop.mobile {
 font-size:30px !important;
}
.h2-2.h2-bigger{
  font-size: 28px !important;
}
}
@media (min-width: 391px) and (max-width: 900px) {
  .navigation {
    margin-left: -27px;
    top: 89% !important;
  }
    .banner-icon{
      margin-left:26px;
      width:90%;
  }
  .banner-icon ul {
    right: 25px;
  }
  .banner-icon ul li {
    margin: 0px 5px;
  }
  .banner-icon ul li img {
    width: 23px;
  }
  .banner-icon .banner-home {
    height: 45px;
    width: 45px;
    padding: 2px;
  }
  .list-home p {
    font-size: 14px;
  }
  .services {
    top: 80% !important;
}
.button {
  margin-right: -235px;
}
.black1 {
  color: #020202;
  font-size: 25px;
}
.hero-head {
  font-size: 25px;
  margin-left: unset;
}
 footer img {
    width: 30%;
}
.navbar-brand img {
    width: 38%;
}
}