@charset "UTF-8";

/*
Theme Name: Cubiko Site V2
Theme URI: https://cubiko.co/
Author: Cubiko Dev Team
Author URI: https://cubiko.co/
Description: Cubiko Site V2 is a blank canvas for Cubiko Marketing Team
Requires PHP: 5.6
Version: 2.0.1
Text Domain: cubikositev2
Tags: Cubiko, Marketing

Cubiko Site V2 WordPress Theme, (C) 2022 WordPress.org
*/

/* .logo {
    height: 90px;
} */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");

body {
    font-size: 1rem;
    font-family: "Quicksand", "Nunito", sans-serif;
    /* background-color: #312783; */
    /* color: #ccc; */
}

/* ---- reset ---- */
canvas {
    display: block;
    vertical-align: bottom;
}

.cbk-navbar {
    background-color: #312783;
}

.btn-outline-primary {
    border: 1px solid #e6017e;
}
.btn-outline-primary:hover {
    border: 1px solid #e6017e;
}

/* ---- particles.js container ---- */
.hero-container {
    position: relative;
    height: 100vh;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #312783;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.hero-text {
    position: absolute;
    top: 80%;
    margin-top: 45%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 300px; /* Need a specific value to work */
    text-align: left;
}
.hero-text h1 {
    font-size: 2.3rem;
    font-family: "Quicksand", "Nunito", sans-serif;
    /* text-transform: uppercase; */
    font-weight: 500;
    color: #fff;
}
.hero-text h1 span {
    color: #e6017e;
}
.hero-text a {
    font-size: 18px;
	margin-top: 40px;
    color: #fff;
	background-color: #e6017e;
}
.hero-text a:hover {
    filter: drop-shadow(0 0 15px #e6017e) drop-shadow(0 0 50px #e6017e) contrast(2) brightness(2);
}

.cbk-background-1 {
  background-color: #e5e5f7;
  opacity: 0.8;
  background: repeating-linear-gradient( -45deg, #efeaea, #efeaea 5px, #e5e5f7 5px, #e5e5f7 25px );
}

.cbk-background-2 {
  background-color: #ffffff;
opacity: 0.6;
background: linear-gradient(135deg, #f8f9ff55 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(225deg, #f8f9ff 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(315deg, #f8f9ff55 25%, transparent 25%) 0px 0/ 30px 30px, linear-gradient(45deg, #f8f9ff 25%, #ffffff 25%) 0px 0/ 30px 30px;
}

/* .cbk-section {
    padding-top: 30px;
    padding-bottom: 30px;
  } */
  
  /* .cbk-section-alt {
    background-color: rgb(239, 191, 191);
    height: 100vh;
    color: #312783;
  } */

.cbk-links-footer {
  margin: 0;
  padding: 0;
}

.cbk-links-footer li {
  list-style: none;
}

.cbk-links-footer li a {
  color: #fff;
}

.cbk-links-footer li a:hover {
  color: #e6017e;
}

/* EFFECTS */

/* Gradient Scroll Bar */
/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #1f2937;
}

/* Handle */
::-webkit-scrollbar-thumb {
  /* background: linear-gradient(rgb(230, 1, 126), rgb(49, 39, 131)); */
  background: linear-gradient(rgb(230, 1, 126), rgb(230, 1, 126));
}


/* Handle */
.cbk-neon-button {
  color: #e6017e;
}
.cbk-neon-button:hover {
  filter: drop-shadow(0 0 15px #e6017e) drop-shadow(0 0 50px #e6017e) contrast(2) brightness(2);
  background-color: transparent;
}

.cbk-button-1 {
border-color: #e6017e;
background-color: #e60176;
}

.cbk-button-1:hover {
filter: drop-shadow(0 0 15px #e6017e) drop-shadow(0 0 50px #e6017e) contrast(2) brightness(2);
}

/*
 * Blog
*/

h2.title-blog-list a {
	color: #e6017e;
}

h2.title-blog-list a:hover {
	color: #312783;
}

article.post-item-list {
	margin-bottom: 40px;
}

article.post-item-list .time {
	font-weight: bold;
	color: #312783;
}

article a.link-read-more-list {
	color: #312783;
}

article a.link-read-more-list {
	color: #e6017e;
}

article.post-item-list .meta-info a {
	color: #e6017e;
}

article.post-item-list .meta-info a:hover {
	color: #312783;
}

/* Typing */

.wrapper-typing {
  display: flex;
}

.wrapper-typing .dynamic-txts {
  margin: 0;
  padding: 0;
  line-height: 50px;
  height: 50px;
  overflow: hidden;
  /* background-color: aqua; */
}

.dynamic-txts li {
  list-style: none;
  position: relative;
  top: 0;
  color: #e6017e;
  font-weight: 600;
  animation: slide 20s steps(5) infinite;
}

@keyframes slide {
  100% {
      top: -250px;
  }
}

.dynamic-txts li::after {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #312783;
  border-left: 2px solid #e6017e;
  animation: typing 4s steps(13) infinite;
}

@keyframes typing {
  40%, 60% {
      left: calc(100%);
  }
  100% {
      left: 0;
  }
}


/* Responsive */
@media (min-width: 768px) {
    /* .cbk-navbar {
      background-color: transparent;
    } */
    .hero-text {
      top: 33%;
      margin-top: 15%;
      width: 768px;
    }
    .hero-text h1 {
      font-size: 4rem;
    }
    .cbk-marki-container {
      width: 65%;
    }
    .circle {
      height: 18px;
      width: 18px;
      border-radius: 24px;
      background-color: black;
      filter: drop-shadow(0 0 20px #e6017e) contrast(1) brightness(1);
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      margin-top: 5px;
      margin-left: 5px;
      z-index: 99999999; /* so that it stays on top of all other elements */
    }

    .grid-container-acc {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      color: #fff;
      /* grid-template-rows: repeat(3, 100px); */
      grid-gap: 10px;
    }

    .grid-container-acc .grid-item-acc {
      /* border-color: 1px solid red; */
      /* display: flex; */
      /* justify-content: center; */
      /* align-items: center; */
      /* font-size: 1.5em; */
    }

    .grid-container-acc .grid-item-acc-1 {
      order: 2;
      /* width: 20%; */
      border-color: 1px solid red;
    }

    .grid-container-acc .grid-item-acc-2 {
      order: 1;
      grid-column-start: 1;
      grid-column-end: 3;
      /* width: 80%; */
      border-color: 1px solid red;
    }

    /* Typing */
    .wrapper-typing .dynamic-txts {
      margin: 0;
      padding: 0;
      line-height: 75px;
      height: 75px;
      overflow: hidden;
      /* background-color: aqua; */
    }

    @keyframes slide {
      100% {
          top: -375px;
      }
    }
}