.splide--area__wrapper {
  border: 2px dotted #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.cs--splide__container {
  justify-content: space-evenly;
  align-items: center;
  margin-top: 99px;
  transition: all .75s ease-in-out;
  display: flex;
}

@media screen and (max-width: 640px) {
  .cs--splide__container {
    flex-direction: column;
  }
}

.splide__arrow {
  color: green;
  background: none;
}

.splide__arrow--prev {
  font-size: 3em;
  left: 2vw;
}

.splide__arrow--next {
  font-size: 3em;
  right: 2vw;
}

.splide__pagination {
  bottom: -1.5em;
}

.splide__pagination__page.is-active {
  background-color: #adff2f;
  transition: all .5s ease-in-out;
}

.splide__pagination__page {
  background-color: green;
}

.cs--code--card__wrapper {
  background: #000;
  border: 1px solid green;
  border-radius: 2em;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
  .cs--code--card__wrapper {
    margin: 2vw 0;
  }
}

@media screen and (max-width: 640px) {
  .cs--code--card__wrapper {
    width: 300px;
    height: 300px;
    margin: 2vw 1vw;
  }
}

.cs--codeblock--icon {
  color: green;
  padding: 20px;
  font-size: 2em;
  position: absolute;
  top: 0;
  left: 0;
}

.cs--codeblock--text {
  color: green;
  padding: 5em;
  font-size: 1em;
  line-height: 2em;
}

.cs--about--card-titles {
  color: #fff;
  z-index: 4;
  -webkit-font-smoothing: subpixel-antialiased;
  font-display: swap;
  font-family: Figtree, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
}

.cs--about--card--descriptions {
  color: #fff;
  z-index: 4;
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
  font-display: swap;
  padding: 1.5em;
  font-family: Figtree, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.25rem;
}

.cs--icons {
  color: #fff;
  font-size: 2em;
}

.cs--card--icon--wrapper {
  margin: 1.5em;
  display: flex;
  position: relative;
}

.cs--circle--card__wrapper {
  background: #fff6;
  border: 2px solid #ffffff40;
  border-radius: 2em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  transition: all .7s ease-in-out;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
  .cs--circle--card__wrapper {
    margin: 2vw 0;
  }
}

@media screen and (max-width: 640px) {
  .cs--circle--card__wrapper {
    margin: 2vw 1vw;
  }
}

.cs--circle--card__wrapper:hover {
  cursor: pointer;
  border: 2px solid #003566;
  transition: all .7s ease-in-out;
  overflow: hidden;
  transform: translateY(-2px);
  box-shadow: 0 0 20px #81094d;
}

.cs--circle--card--icon--background {
  background-color: #b52678;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: clamp(1.35rem, 1.28rem + .37vw, 1.56rem);
  display: flex;
}

.cs--circle--hover--effect {
  z-index: -1;
  opacity: .8;
  background-color: #72184b;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: all .7s ease-in-out;
  position: absolute;
}

.cs--circle--card__wrapper:hover .cs--circle--hover--effect {
  opacity: .8;
  transform: scale(12);
}

.cs--double--circle--card__wrapper {
  background: #fff6;
  border: 2px solid #ffffff40;
  border-radius: 2em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  transition: all .7s ease-in-out;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
  .cs--double--circle--card__wrapper {
    margin: 2vw 0;
  }
}

@media screen and (max-width: 640px) {
  .cs--double--circle--card__wrapper {
    margin: 2vw 1vw;
  }
}

.cs--double--circle--card__wrapper:hover {
  cursor: pointer;
  border: 2px solid #003566;
  transition: all .7s ease-in-out;
  overflow: hidden;
  transform: translateY(-2px);
  box-shadow: 0 0 20px;
}

.cs--double--circle--card--icon--background {
  background-color: #a96e82;
  border-radius: 50%;
  padding: clamp(1.35rem, 1.28rem + .37vw, 1.56rem);
}

.cs--first--circle--hover--effect {
  z-index: -1;
  opacity: .6;
  background-color: #751637;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: all .7s ease-in-out;
  position: absolute;
}

.cs--second--circle--hover--effect {
  z-index: -1;
  opacity: .6;
  background-color: #90435d;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: all .9s ease-in-out;
  position: absolute;
}

.cs--double--circle--card__wrapper:hover .cs--first--circle--hover--effect, .cs--double--circle--card__wrapper:hover .cs--second--circle--hover--effect {
  opacity: .8;
  transform: scale(12);
}

.cs--square--card__wrapper {
  background: #fff6;
  border: 2px solid #ffffff40;
  border-radius: 2em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  padding: 20px;
  transition: all .7s ease-in-out;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
  .cs--square--card__wrapper {
    margin: 2vw 0;
  }
}

@media screen and (max-width: 640px) {
  .cs--square--card__wrapper {
    margin: 2vw 1vw;
  }
}

.cs--square--card__wrapper:hover {
  cursor: pointer;
  border: 2px solid #003566;
  transition: all .7s ease-in-out;
  overflow: hidden;
  transform: translateY(-2px);
  box-shadow: 0 0 20px;
}

.cs--square--card--icon--background {
  background-color: #bb8fd5;
  border-radius: 1em;
  padding: clamp(1.35rem, 1.28rem + .37vw, 1.56rem);
}

.cs--square--hover--effect {
  z-index: -1;
  opacity: .6;
  background-color: #541675;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  transition: all .7s ease-in-out;
  position: absolute;
}

.cs--square--card__wrapper:hover .cs--square--hover--effect {
  opacity: .8;
  border-radius: 2em;
  transform: scale(12);
}

.cs--icon--only--card__wrapper {
  background: #fff6;
  border: 2px solid #ffffff40;
  border-radius: 2em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  padding: 20px;
  transition: all .7s ease-in-out;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
  .cs--icon--only--card__wrapper {
    margin: 2vw 0;
  }
}

@media screen and (max-width: 640px) {
  .cs--icon--only--card__wrapper {
    margin: 2vw 1vw;
  }
}

.cs--icon--only--card__wrapper:hover {
  cursor: pointer;
  border: 2px solid #003566;
  transition: all .7s ease-in-out;
  overflow: hidden;
  transform: translateY(-2px);
  box-shadow: 0 0 20px;
}

.cs--icon--only--card--icon--background {
  background-color: #bb8fd5;
  border-radius: 50%;
  padding: clamp(1.35rem, 1.28rem + .37vw, 1.56rem);
}

.cs--icon--only--hover--effect {
  z-index: -1;
  opacity: .6;
  background-color: #541675;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: all .7s ease-in-out;
  position: absolute;
}

.cs--icon--only--card__wrapper:hover .cs--icon--only--hover--effect {
  opacity: .8;
  transform: scale(12);
}

.cs--icon--only--card__wrapper:hover .cs--icon--only--card--icon--wrapper {
  transform: translateY(0);
}

.cs--icon--only--card__wrapper:hover .cs--text--fade--in {
  opacity: 1;
}

.cs--icon--only--card--icon--wrapper {
  transition: all .7s ease-in-out;
  display: flex;
  position: relative;
  transform: translateY(85%);
}

.cs--text--fade--in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.he--cc--copyright__wrapper {
  text-align: center;
  width: 99%;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
}

.he--cc--copyrighttext {
  text-align: center;
  color: #0caa3b;
  font-family: articulat-cf, sans-serif;
}

.he--cc--copyrightlink {
  color: #9affb8;
  pointer-events: all;
  font-family: articulat-cf, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: all .777s;
  display: inline-block;
  position: relative;
}

.he--cc--copyrightlink:visited {
  color: #9affb8;
}

.he--cc--copyrightlink:hover, .cc--cc--copyrightlink:active {
  color: #53d57a;
}