rubix/src/index.css

@font-face {
  font-family: "Mona Sans";
  src: url("Mona-Sans.woff2") format("woff2 supports variations"),
    url("Mona-Sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

.rubix_title_font {
  font-family: "Mona Sans";
}

.rubix-text-heading {
  font-size: 60px !important;
  font-family: "Mona Sans";
  color: #fff;
}
.rubix-text-subheading {
  font-size: 25px !important;
}
.rubix-text-title {
  font-size: 38px !important;
  color: #fff;
}

.rubix-text-large {
  font-size: 22px !important;
  font-family: "Poppins" !important;
  color: #fff !important;
}
.rubix-text-medium {
  font-size: 20px !important;
  font-family: "Poppins" !important;
  color: #fff !important;
}
.rubix-text-small {
  font-size: 17px !important;
  font-family: "Poppins" !important;
  color: #fff !important;
}

.rubix-section-title {
  font-size: 22px !important;
  font-family: "Mona Sans" !important;
  color: #fff !important;
}

.link {
  color: #ffff;
}

.link:hover {
  color: #de858e;
}

.swiper-button-prev,
.swiper-button-next {
  color: #de858e;
}
span.swiper-pagination-bullet {
  background: #de858e;
  width: 35px;
  height: 3px;
  border-radius: 0;
}
.team-slider .swiper-button-next:after {
  position: absolute;
  top: 185px;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 18px;
  color: #000;
  font-weight: 700;
  right: 110px;
  background-image: radial-gradient(
    circle,
    #ffffff,
    #eee2f2,
    #e7c3dc,
    #e5a3ba,
    #de858e
  );
}
.team-slider .swiper-button-prev:after {
  position: absolute;
  top: 185px;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 18px;
  color: #000;
  font-weight: 700;
  left: 110px;
  background-image: radial-gradient(
    circle,
    #ffffff,
    #eee2f2,
    #e7c3dc,
    #e5a3ba,
    #de858e
  );
}

.swiper-pagination {
  top: 90% !important;
}

.swiper-pagination-bullet {
  background: #383838;
}

.swiper-pagination-bullet-active {
  background: #fff;
}
/* html {
  font-family: "Mona Sans";
} */

.rubix-text-heading-2 {
  font-size: 40px !important;
  font-family: "Mona Sans";
  color: #fff;
}

.rubix-text-xsmall {
  font-size: 15px !important;
  font-family: "Poppins" !important;
  color: #fff !important;
}

.rubix-fw-100 {
  font-weight: 100 !important;
}

.rubix-fw-200 {
  font-weight: 200 !important;
}

.rubix-fw-300 {
  font-weight: 300 !important;
}

.rubix-fw-400 {
  font-weight: 400 !important;
}

.rubix-fw-500 {
  font-weight: 500 !important;
}

.rubix-fw-600 {
  font-weight: 600 !important;
}

.rubix-fw-700 {
  font-weight: 700 !important;
}

.rubix-fw-800 {
  font-weight: 800 !important;
}

.rubix-fw-900 {
  font-weight: 900 !important;
}

.react-tel-input .form-control {
  margin-top: 10px !important;
  margin-bottom: 5px !important;
}

.react-tel-input .flag-dropdown {
  background-color: #de858e;
  border: none;
}

.tabspagination .swiper-pagination {
  top: 94% !important;
}

.tabspagination .swiper-button-prev:after,
.swiper-button-next:after {
  font-weight: bolder;
  font-size: xx-large;
}

.tabspagination .swiper-button-next {
  left: 98%;
}

.tabspagination .swiper-button-prev {
  right: 98%;
}

.blog-post .rubix-text-small h1 {
  font-size: 2em;
}

.usecases .rubix-text-small h1 {
  font-size: 2em;
}

@media only screen and (max-width: 820px) {
  .tabspagination .swiper-button-next {
    left: auto;
  }
}

@media only screen and (max-width: 600px) {
  .tabspagination .swiper-button-prev,
  .tabspagination .swiper-button-next {
    display: none;
  }
  .tabspagination .swiper-pagination {
    top: 97% !important;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 30px;
    font-weight: bolder;
  }

  .swiper-pagination-bullets {
    height: fit-content !important;
  }

  .swiper-pagination {
    top: 90% !important;
  }

  .subnet-mobile .swiper-pagination {
    top: 94% !important;
  }

  .swiper-button-next {
    right: 0px;
  }

  .swiper-button-prev {
    left: 0px;
  }
  .team-slider .swiper-button-prev {
    left: 28px;
  }
  .team-slider .swiper-button-next {
    right: 28px;
  }
  .fade-in {
    opacity: 1;
    transition: opacity 0.9s ease-in-out;
    -webkit-transition: opacity 0.9s ease-in-out;
    -moz-transition: opacity 0.9s ease-in-out;
    -ms-transition: opacity 0.9s ease-in-out;
    -o-transition: opacity 0.9s ease-in-out;
  }

  .fade-out {
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    -webkit-transition: opacity 0.9s ease-in-out;
    -moz-transition: opacity 0.9s ease-in-out;
    -ms-transition: opacity 0.9s ease-in-out;
    -o-transition: opacity 0.9s ease-in-out;
  }
  .rubix-text-small {
    font-size: 14px !important;
  }

  .iframeContainer {
    width: 85%;
    height: 85%;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
  }

  .mobile-subnet .swiper-button-next {
    right: 0px;
  }
  .mobile-subnet .swiper-button-prev {
    left: 0px;
  }
}

@media only screen and (max-width: 375px) {
  .team-slider .swiper-button-prev:after {
    left: 70px;
  }
  .team-slider .swiper-button-next:after {
    right: 70px;
  }
}