/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

html, body {
  background-color: #000;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  padding: 0;
}


 /* Circle Loader */
 .profile-main-loader{
  left: 50% !important;
  margin-left:-100px;
  position: fixed !important;
  top: 50% !important;
  margin-top: -100px;
  width: 45px;
  z-index: 9000 !important;
}

.profile-main-loader .loader {
position: relative;
margin: 0px auto;
width: 200px;
height:200px;
}
.profile-main-loader .loader:before {
content: '';
display: block;
padding-top: 100%;
}

.circular-loader {
-webkit-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
height: 100%;
-webkit-transform-origin: center center;
    -ms-transform-origin: center center;
        transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: auto;
}

.loader-path {
stroke-dasharray: 150,200;
stroke-dashoffset: -10;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}

@-webkit-keyframes rotate {
100% {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}

@keyframes rotate {
100% {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}
@-webkit-keyframes dash {
0% {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
}
50% {
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35;
}
100% {
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124;
}
}
@keyframes dash {
0% {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
}
50% {
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35;
}
100% {
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124;
}
}
@-webkit-keyframes color {
0% {
  stroke: #70c542;
}
40% {
  stroke: #70c542;
}
66% {
  stroke: #70c542;
}
80%, 90% {
  stroke: #70c542;
}
}
@keyframes color {
0% {
  stroke: #ffffff;
}
40% {
  stroke: #ffffff;
}
66% {
  stroke: #ffffff;
}
80%, 90% {
  stroke: #ffffff;
}
}



/* OVER things  */

.veletta {
  background-color: rgb(20,24,32);
  position: absolute;
  top: -1px;
  right: -1px;
  width: 30%;
  height: 100%;
  height: 50px;
}
.veletta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 0;
  height: 0;
  border-bottom: 50px solid transparent;
  border-right: 50px solid rgb(20,24,32);
}
.veletta-dark{
  background-color: #0E1116;
}
.veletta-dark::before {
  border-right: 50px solid #0E1116;
}
.veletta-both.veletta-dark::after {
  border-right: 50px solid #0E1116!important;
}
.veletta-blue::after {
  border-right: 50px solid rgb(40,136,253)!important;
}
.veletta-both.veletta-blue::after {
  border-right: 50px solid rgb(40,136,253)!important;
}
.veletta-both{
  right: 100px;
}
.veletta-full{
  width: 70%;
  right: -30%!important;
}
.veletta-both::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid #181D26;
}

@media (max-width: 768px) {
  .veletta {
    display: none;
  }
  .text-title-md{
    font-size: 18px!important;
  }
}

/* Icons */

.active{
  color : #fff!important;
}
.sidebar-icon {
  fill: #8A99AF;
  width: 18px;
}

.sidebar a:hover .sidebar-icon, .active .sidebar-icon{
  fill: #fff;
  margin-left: 5px;
}

.profile-bar .active {
  border-bottom: 2px solid #fff;
}

/* .upgrade-pro-btn{
  border-radius: 80px;
  border: 1px solid #78A8FF!important;
  background: var(--gradient-shiny-button, linear-gradient(89deg, #5200DE 0%, #016FFF 100%));
  transition: all 0.3s ease;  
  cursor: pointer;
  box-shadow: 0px 0px 9.78px 2.445px rgba(255, 255, 255, 0.03) inset, 0px 51.344px 14.181px 0px rgba(27, 29, 28, 0.00), 0px 32.762px 13.203px 0px rgba(27, 29, 28, 0.03), 0px 18.581px 11.247px 0px rgba(27, 29, 28, 0.11), 0px 8.313px 8.313px 0px rgba(27, 29, 28, 0.18), 0px 1.956px 4.401px 0px rgba(27, 29, 28, 0.21);
}

.upgrade-pro-btn:hover{
  background: var(--gradient-shiny-button-hover, linear-gradient(89deg, #5200DE 0%, #016FFF 100%));
  transform: scale(0.98);
  cursor: pointer;
} */

.upgrade-pro-btn{
  background: linear-gradient(89.12deg, #FF6200 0%, #FFAF01 100%);
  border-radius: 80px;
  border: 1px solid #FF6200!important;
  transition: all 0.3s ease;
  cursor: pointer;
  color: #fff;
}

.pro-text{
  background: linear-gradient(89.12deg, #FF6200 0%, #FFAF01 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pro-text:hover{
  transform: translateX(5px);
}
.pro-text svg{
  margin-top: 2px;
}

.js-overlay {
  display: none !important;
}

.js-overlay--open {
  display: flex !important;
}

.turbo-progress-bar {
  background-color: #016FFF;
}




.bg-linear-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}

/* linear-gradient(88.83deg, #1C1F24 0.25%, #32363D 99.75%); */
.bg-gray-gradient{
  background: linear-gradient(88.83deg, #1C1F24 0.25%, #32363D 99.75%);
}
.bg-trasparent-to-black{
  background: linear-gradient(90deg, rgba(28, 31, 36, 0) 0%, rgb(7, 7, 8) 100%);
}
.bg-black-to-transparent{
  background: linear-gradient(90deg, rgb(7, 7, 8) 0%, rgba(28, 31, 36, 0) 100%);
}

@media screen and (max-width: 768px) {
  .bg-trasparent-to-black {
    background: linear-gradient(90deg, rgb(7, 7, 8) 0%,  rgba(28, 31, 36, 0.6) 100%);
  }
  .bg-black-to-transparent{
    background: linear-gradient(90deg, rgb(7, 7, 8) 0%, rgba(28, 31, 36, 0.6) 100%);
  }
  
}



/*  Pricing */
.background-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle at 50% 50%, rgba(50, 50, 70, 0.15), transparent 70%);
  z-index: -1;
}

.card-wrapper {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(45, 45, 55, 0.2), rgba(35, 35, 45, 0.1));
  padding: 1px;
  margin-bottom: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(50, 50, 70, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card {
  border-radius: 18px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-header {
  padding: 1.25rem;
  border-bottom: 1px solid rgba(75, 75, 85, 0.3);
}

.card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-list {
  flex: 1;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #141416;
  transition: 0.4s;
  border-radius: 20px;
  border: 1px solid #2f2f33;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 1px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked+.slider:before {
  transform: translateX(20px);
}

.check-green {
  color: #10b981;
  margin-right: 10px;
  font-size: 22px;
}
.check-red {
  color: #ef4444;
  margin-right: 10px;
  font-size: 22px;
}

.btn-get-started {
  width: 100%;
  display: block;
  text-align: center;
  padding: 10px 0;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

#card-errors {
  color: #000!important;
}