:root{

    --bg-1: #141b3d;
    --bg-2: #111733;
    --bg-3: #ffffff0d;
    --bg-4: #182258;
    --primary: #6d4aff;
    --secondary: #8a6eff;
    --accent: #c2b3ff;
    --white: #fff;

    --large-txt: 1rem;
    --normal-txt: .7rem;
    --small-txt: .6rem;
    /* --bg-1: #28104e;
    --bg-2: #0202023d;
    --bg-3: #ffffff0d;
    --primary: #6237a0;
    --secondary: #9754cb;
    --accent: #deacfa;
    --white: #fff; */

}

*{
    font-family: ExpoArabic;
}
html {
    font-size: calc(15px + 0.390625vw);
}

a{ text-decoration: none; }

/* font size */
.large-txt{
    font-size: var(--large-txt);
}
.normal-txt{
    font-size: var(--normal-txt);
}
.small-txt{
    font-size: var(--small-txt);
}
.tooltip{
    font-size: .7rem;
 }

/* fonts */
.monotxt{ font-family: Monotxt; }

/* neon */
.neon{
    text-shadow: 
    0 0 5px var(--primary),
    0 0 10px var(--primary),
    0 0 20px var(--primary),
    0 0 40px var(--primary),
    0 0 80px var(--primary);    
}


/* text colors */
.white-txt{ color: var(--white); }
.secondary-txt{ color: var(--secondary);}
.primary-txt{ color: var(--primary);}

/* bg colors */
.bg-1{ background-color: var(--bg-1); }
.bg-2{ background-color: var(--bg-2); }
.bg-3{ background-color: var(--bg-3); }
.bg-4{ background-color: var(--bg-4); }
.white-bg{ background-color: var(--white); }
.secondary-bg{ background-color: var(--secondary);}
.primary-bg{ background-color: var(--primary);}
.accent-bg{ background-color: var(--accent);}

/* hover colors */
.secondary-txt-hover:hover{ color: var(--secondary); }
.primary-txt-hover:hover{ color: var(--primary); }
.white-txt-hover:hover{ color: var(--white); }

.primary-bg-hover:hover{ background: var(--primary); }


/* image placeholder */
.image-container {
    position:relative;
    width: 100%;
    height: 100%;
  }
  
  .image-container img {
    width: 100%;
    height: auto;
  }
  
  .curtain {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJ3aGl0ZSI+CiAgPHBhdGggZD0iTTAgNCBMMCAyOCBMMzIgMjggTDMyIDQgeiBNNCAyNCBMMTAgMTAgTDE1IDE4IEwxOCAxNCBMMjQgMjR6IE0yNSA3IEE0IDQgMCAwIDEgMjUgMTUgQTQgNCAwIDAgMSAyNSA3Ij48L3BhdGg+Cjwvc3ZnPg==") no-repeat center hsl(0, 0%, 80%);
      background-size: calc(100%/3);
    overflow:hidden;
    z-index:20;
  }
  
  
  .shine {
      width: 100%;
      height: 100%;
      transition: 0.3s;
      background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%);
      background-size: 400% 400%;
      -webkit-animation: shine 1.3s infinite;
      animation: shine 1.3s infinite;
      opacity:0.8;
  }
  
  @-webkit-keyframes shine {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: -135% 0%;
    }
  }
  @keyframes shine {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: -135% 0%;
    }
  }
  

  /* brands colors */
  .whatsapp-c{ color: #25d366; }
  .telegram-c{ color: #24a1de; }
  .phone-c{ color: #8ab9ff; }

/* container */
.content{
    width: 75%;
    margin: auto;
    
}
@media screen and (max-width: 758px){
    .content{
        width: 100%;
    }
}

/* disabled button*/
button:disabled {
    cursor: default;
}

/* label badge */
.warning-label{
    color: #FF9F43;
    background: #ff9f4340;
    border-radius: 8px;
}
.danger-label{
    color: #EA5455;
    background: #ea545547;
    border-radius: 8px;
}
.success-label{
    color: #28C76F;
    background: #28c76f3b;
    border-radius: 8px;
}