/*
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/default.css);
@import url(custom/background-transitions.css);
@import url(custom/custom.css);
@import url(custom/svgs.css);
@import url(custom/buttons.css);
@import url(custom/textreveal.css);
@import url(custom/header.css);
@import url(custom/rotating-text.css);
/* @import url(custom/cards.css); */


.transparency{
  background-color: var(--color-primary--transparency-40);
}

/* Border shine effect for .effect button */
.effect {
  position: relative;
  border: 2px solid #FF2975;
  overflow: hidden;
}

.effect::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, transparent 40%, #FF2975 50%, transparent 60%);
  opacity: 0.7;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.effect:hover::before {
  transform: rotate(20deg);
  opacity: 1;
}

.light{
  background-color:var(--color-white-type);
}

.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
    color: var(--color-black-type);
}

.light .login-section .ts-filter {
  border: 1px solid var(--color-primary--tint-60)!important;
  border-radius: .375rem;
  background: var(--color-primary--tint-90)!important;
}
.light .login-section .ts-btn-2 {
  background-color: var(--color-primary--shade-10)!important;
  color: var(--color-white-type)!important;
}
.light .login-section .ts-btn-2:hover {
  background-color: var(--color-primary--shade-30)!important;
  color: var(--color-white-type)!important;
}
.light .login-section .ts-btn-1 {
  background-color: transparent!important;
  color: var(--color-primary--shade-90)!important;
  border: 1px solid var(--color-primary--shade-80)!important;
}
.light .login-section .ts-btn-1:hover {
  background-color: var(--color-primary--shade-80)!important;
  color: var(--color-primary--tint-10)!important;
}
.light .login-section .ts-form .ts-filter,
.light .login-section .ts-form input,
.light .login-section .ts-form textarea {
  color: var(--color-primary--shade-90)!important;
}


.dark{
  background-color:var(--color-black-type)
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: var(--color-white-type);
}



.lightcolor{
  background-color:var(--color-primary--tint-90)
}

.lightcolor h1,
.lightcolor h2,
.lightcolor h3,
.lightcolor h4,
.lightcolor h5,
.lightcolor h6 {
    color: var(--color-primary--shade-90);
}

.darkcolor{
  background-color:var(--color-primary--shade-90)
}

.darkcolor,
.darkcolor h2,
.darkcolor h3,
.darkcolor h4,
.darkcolor h5,
.darkcolor h6 {
    color: var(--color-primary--tint-90);
}

.darkcolor p{
  color: var(--color-primary--tint-70)
}

.darkcolor .login-section .ts-filter {
  border: 1px solid var(--color-primary--shade-60)!important;
  border-radius: .375rem;
  background: var(--color-primary--shade-90)!important;
}
.darkcolor .login-section .ts-btn-2 {
  background-color: var(--color-primary--tint-10)!important;
  color: var(--color-primary--tint-90)!important;
}
.darkcolor .login-section .ts-btn-1 {
  background-color: transparent!important;
  color: var(--color-primary--tint-90)!important;
  border: 1px solid var(--color-primary--tint-80)!important;
}
.darkcolor .login-section .ts-btn-1:hover {
  background-color: var(--color-primary--tint-80)!important;
  color: var(--color-primary--tint-90)!important;
}
.darkcolor .login-section .ts-form .ts-filter,
.darkcolor .login-section .ts-form input,
.darkcolor .login-section .ts-form textarea {
  color: var(--color-primary--tint-90)!important;
}


h1 {
  font-family: var(--font-primary);
  line-height: 0.9;
}

h1.concept{
  font-family: var(--font-primary);
  font-size: 3.0rem;
  color: var(--color-primary--shade-90);
}

@media (max-width: 640px) {
  h1.concept {
    font-size: 2.1rem;
  }
}

h1.concept strong{
  font-weight: 900!important;
}



h1.elementor-heading-title{
    font-family: var(--font-primary)!important;
}


h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  line-height: 1.15;
  font-weight:900!important;
}

h2.text-light{
    color:var(--color-white-type)!important;
    background-color: none!important;
}

.text-light{
      color:var(--color-white-type)!important;
}

h2.big{
    color:var(--color-white-type)!important;
    font-size: 2.5rem;
    background-color: none!important;
}


h3 {
  font-family: var(--font-secondary);
  font-size: 1.2rem;
  line-height: 1.2;
}

h4 {
  font-family: var(--font-secondary);
  font-size: 1.0rem;
  line-height: 1.25;
}

h5 {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 500;
}

h6 {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}

p a {
    color: var(--color-primary)!important;
}

p a:hover {
    color: var(--color-primary--tint-40)!important;
    text-decoration: underline;
}

p, .text{
    font-family: var(--font-secondary);
}

blockquote {
  font-family: var(--font-tertiary);
}

button {
  font-family: var(--font-tertiary);
}

.black{color:var(--color-black-type)}

.color{color:var(--color-primary);}
.color-sec{color: var(--color-secondary);}
.color-ter{color: var(--color-tertiary);}


/* Border gradient utility */
.bd-bt-gradient {
  position: relative;
  border: 0;
  z-index: 1;
}
.bd-bt-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding-bottom: 10px;
  background: linear-gradient(90deg, var(--color-primary--tint-90), var(--color-primary--tint-10));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}