/*
Theme Name:   Voxel (child theme2)
Theme URI:    https://getvoxel.io/
Author:       27collective
Author URI:   https://27collective.net/
Template:     voxel
Version:      1.0
Text Domain:  voxel-child
*/


@import url(custom/darkmode.css);
@import url(custom/palette.css);
@import url(custom/custom.css);
@import url(custom/fonts.css);
@import url(custom/svgs.css);
@import url(custom/buttons.css);
@import url(custom/textreveal.css);
@import url(custom/header.css);
@import url(custom/cards.css);


.link-hover a:hover{text-decoration: underline;}


/* ==== BORDERS ==== */
.bd-left-1-light { border-left: 1px solid rgba(0, 0, 0, 0.1); }
.bd-right-1-light { border-right: 1px solid rgba(0, 0, 0, 0.1); }
.bd-top-1-light { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.bd-bottom-1-light { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

/* ==== PADDINGS ==== */
.p-0 { padding: 0 !important; gap: 1rem;}
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 2rem !important; gap: 1rem;}

.pt-1 { padding-top: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
/* ...repeat for all sides and sizes */

/* ==== MARGINS ==== */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 2rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
/* ...repeat for all sides and sizes */

/* ==== DISPLAY ==== */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.block { display: block !important; }
.hidden { display: none !important; }

/* ==== RESPONSIVE ==== */
/* Small screens (640px) */
@media (min-width: 640px) {
  .sm\:p-1 { padding: 0.25rem !important; }
  .sm\:p-2 { padding: 0.5rem !important; }
  .sm\:bd-left-1-light { border-left: 1px solid rgba(0, 0, 0, 0.1); }
}

/* Medium screens (768px) */
@media (min-width: 768px) {
  .md\:p-1 { padding: 0.25rem !important; }
  .md\:p-2 { padding: 0.5rem !important; }
  .md\:bd-left-1-light { border-left: 1px solid rgba(0, 0, 0, 0.1); }
}

/* Large screens (1024px) */
@media (min-width: 1024px) {
  .lg\:p-1 { padding: 0.25rem !important; }
  .lg\:p-2 { padding: 0.5rem !important; }
  .lg\:bd-left-1-light { border-left: 1px solid rgba(0, 0, 0, 0.1); }
}

/* Extra large screens (1280px) */
@media (min-width: 1280px) {
  .xl\:p-1 { padding: 0.25rem !important; }
  .xl\:p-2 { padding: 0.5rem !important; }
  .xl\:bd-left-1-light { border-left: 1px solid rgba(0, 0, 0, 0.1); }
}


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #111116;
    height: 100vh;
    align-items: center
}

.progress {
    width: 200px;
    height: 200px;
    font-size: 30px;
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #07070c;
    text-align: center;
    line-height: 200px;
    margin: 20px
}

.progress::after {content: "%";}

.progress .title {position: relative;z-index: 100;}

.progress .overlay {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #07070c
}

.progress .left, .progress .right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 10px solid #222235;
    border-radius: 100px 0px 0px 100px;
    border-right: 0;
    transform-origin: right;
}

.progress .left {animation: load1 1s linear forwards;}

.progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right {animation: load2 .5s linear forwards 1s;}

.progress:last-of-type .right, .progress:first-of-type .right {animation: load3 .8s linear forwards 1s;}

@keyframes load1 {
    0% {transform: rotate(0deg);}

    100% {transform: rotate(180deg);}
}

@keyframes load2 {
    0% {z-index: 100;transform: rotate(180deg);}

    100% {z-index: 100;transform: rotate(270deg);}
}

@keyframes load3 {
    0% {z-index: 100;transform: rotate(180deg);}

    100% {
        z-index: 100;transform: rotate(315deg);}
}

/* Heading with gradient animation */
.headingplanu h1.elementor-heading-title {
  background: linear-gradient(to right, #c2db51 20%, #bd88f9 30%, #ec4d85 70%, #ecb615 80%, #6ab3eb 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}
@keyframes textShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}