body{
    --tw-bg-opacity: 1;
    background-color: rgb(15 7 21 / var(--tw-bg-opacity, 1));
    font-family: 'Sora', sans-serif;
    color: #ddd;
    overflow-x: hidden;
}

:root{
    --primary-color: #8750f7;
    --primary-color-light: #140c1c;
    --secondary-color: #2a1454;
    --russo: "Russo One", sans-serif;
}

.btn{
    --bs-btn-bg: #8750f7
    --bs-btn-color: #fff;
    --bs-btn-border-color: #8750f7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8750f7;
    --bs-btn-hover-border-color: #8750f7;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8750f7;
    --bs-btn-active-border-color: #8750f7;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8750f7;
    --bs-btn-disabled-border-color: #140c1c;
}

h1,h2,h3,h4,h5,h6{
    font-weight: 700;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--secondary-color);
}

.text-justify{
    text-align: justify;
}

.scrollbar-track{
    background-color: var(--secondary-color) !important;
}

.scrollbar-thumb{
    background-color: var(--primary-color) !important;   
}

.preloader {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: transparent;
    z-index: 99999999999999;
}

.nav{
    font-family: 'Sora', sans-serif;
    text-transform: capitalize;
    color: #fff;
}

.navbar, .navbar .container{
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s;
}

.navbar-nav{
    column-gap: 2.8125rem;
    color: #fff;
}

.nav-link{
    color: #fff;

}

.nav-link:after{
    content: "";
    background-image: linear-gradient(260deg, #2a1454, #8750f7);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .5s;
    bottom: 25px;
    position: absolute;
    height: .125rem;
    width: 0%;
right: 0;
}

.nav-link:hover:after{
    left: 0;
}

.nav-item:hover .nav-link:after{
    width: 100%;

}

.scrolled .navbar{

    background: rgba( 5, 7, 9, 0.01 ) !important;
    backdrop-filter: blur(10px);
    background: none;
    padding-bottom: 0 !important;
}

.scrolled .navbar .container{
    box-shadow: 0 0 30px rgba(135, 80, 247, .2);
    backdrop-filter: blur(10px);
    background: rgba( 5, 7, 9, 0.9 ) !important;
    padding: 0 40px !important;
    border-radius: 100px;
}

.landing{
    width:100vw;
    height: 100vh;
    overflow: hidden;
}
.landing:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background-image: linear-gradient(260deg, rgb(135, 80, 247), rgba(115, 67, 210, 0));
    width: 20.125rem;
    height: 19.25rem;
    margin-top: -5%;
    z-index: -1;
    margin-right: -5%;
    filter: blur(150px);
}

.sub-headline{
    color: rgb(221 221 221);
    font-weight: 700;
    font-size: 36px;
}

.headline{
    background-image: linear-gradient(90deg, rgb(135, 80, 247) 0px, rgb(255, 255, 255));
    font-size: 4.5625rem;
    color: transparent;
    background-clip: text;
}
.headline span{
    color: inherit  !important;
}

.btn-text-primary{
    color: var(--primary-color)
}

.btn-text-primary:hover{
    color: #ddd;
}

.text-body-color{
    color: rgba(221,221,221)
}

/* HTML: <div class="loader"></div> */
.loader {
    width: fit-content;
    font-weight: bold;
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    background: radial-gradient(circle closest-side,#FFF 94%,#FFF0) right/calc(200% - 1em) 100%;
    animation: l24 1s infinite alternate linear;
    z-index: 999999;
    transition: all .3s;
  }
  .loader::before {
    content: "Loading...";
    line-height: 1em;
    color: #FFF0;
    background: inherit;
    background-image: radial-gradient(circle closest-side,#000 94%,#FFF);
    -webkit-background-clip:text;
            background-clip:text;
  }
  
  @keyframes l24{
    100%{background-position: left}
  }

  #loader-wrapper .loader-section.section-left {
    left: 0;
  }
  
  #loader-wrapper .loader-section.section-right {
    right: 0;
  }

  .loaded .loader{
    opacity: 0;
  }
  
  /* Loaded styles */
  .loaded #loader-wrapper .loader-section.section-left {
    transform: translateX(-100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  .loaded #loader-wrapper .loader-section.section-right {
    transform: translateX(100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  .loaded #loader {
    opacity: 0;
    transition: all 0.3s ease-out;
  }
  
  .loaded #loader-wrapper {
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.3s 1s ease-out;
  }

  #loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background-color: #140c1c;
    z-index: 999999;
  }

.preloader{
    z-index: 999999;
}


.cursor-pointer{
    cursor: pointer;
}

@keyframes stroke{0%{stroke-dashoffset:25%;stroke-dasharray:0 50%;stroke-width:1}to{stroke-dashoffset:100%;stroke-dasharray:100% 0;stroke-width:1}}

@keyframes pulsate{
    0%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.05)}
    to{transform:translate(-50%,-50%) scale(1)}
}


.intro_text svg {
    font-family: var(--russo);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 46%;
    top: 55%;
    transform: translate(-50%, -50%) scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    animation: pulsate 3s ease-in-out infinite alternate;
}

.intro_text svg text {
    animation: stroke 4s;
    text-transform: uppercase;
    stroke-width: 1.2;
    stroke: var(--secondary-color);
    fill: transparent;
    font-size: 240px;
    display: inline-block;
    opacity: .7;
}

.landing img{
    width: auto;
    height: auto;
    max-width: 100%;
}

.landing-img:after{
    content: '';
    background-image: linear-gradient(260deg, #8750f7, rgba(115, 67, 210, 0));
    width: 13.75rem;
    border-radius: 50%;
    height: 13.75rem;
    z-index: -1;
    margin-right: -5%;
    position: absolute;
    left: 0;
    bottom: 0;
    filter: blur(150px)
}

.default-padding{
    padding-top: 80px;
    padding-bottom: 80px;
}

.mx-text{
    max-width: 720px;
}


.heading-primary{
    background-image: linear-gradient(90deg, #8750f7 0, #fff);
    color: transparent;
    background-clip: text;
}


#main-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@-webkit-keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
.paginacontainer {
  height: 3000px;
}

/* #Progress
================================================== */

.progress-wrap {
	position: fixed;
	right: 30px;
	bottom: 30px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset 0 0 0 2px rgba(135,80,247,.5);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	font-family: bootstrap-icons!important;
	content: '\F145';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--primary-color); /* --- Pijl kleur --- */
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
	font-family: bootstrap-icons!important;
	content: '\F145';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background: var(--primary-color); /* --- Pijl hover kleur --- */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--primary-color); /* --- Lijn progres kleur --- */
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.bg-dark-color{
    background-color: rgb(5 7 9)
}

.portfolio-row::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 35%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--primary-color);
    background: -o-linear-gradient(190deg, var(--primary-color) 0, rgba(115, 67, 210, 0) 100%);
    background: linear-gradient(260deg, var(--primary-color) 0, rgba(115, 67, 210, 0) 100%);
    -webkit-filter: blur(150px);
    filter: blur(150px);
}

.portfolio-item{
    background-color: rgb(20 12 28);
    border-radius: 10px;
    padding: 2.25rem;
    padding-bottom: 0;
    display: flex;
        align-items: flex-end;
        height: 100%;
}

.portfolio-item img{
    max-width: 100%;
    height: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.portfolio-box{
    bottom: 1.25rem;
    left: 0px;
    transition-duration: .3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    opacity: 0;
    transform: translateY(1.25rem);
}

.portfolio-box .desc{
    font-size: 14px;
}

.portfolio-box i{
    top: 50%;
    font-size: 1.55rem;
    line-height: 1.75rem;
    right: 20px;
    transition-duration: .3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transform: translateY(-50%) rotate(-360deg);
}

.bg-gradient-primary {
    background-image: linear-gradient(260deg, rgb(42, 20, 84), rgb(135, 80, 247));
    border-radius: 15px;
    padding: 1.25rem;
    padding-right: 3.125rem;
    color: #fff;
    text-decoration: none;
}

.portfolio-item:hover .portfolio-box{
    opacity: 1;
    transform: translateY(0);

}

.portfolio-item:hover .portfolio-box i{
    opacity: 1;
    transform: translateY(-50%);

}

.service-card{
    height: 100%;
    border: 1px solid rgba(135,80,247,1);
    transition:  all .3s ease;
}

.service-card i{
    transition:  all .3s ease;
    color: #8750f7;
}

.service-card:hover{
    background-color: rgb(135 80 247);
    border-color: #fff;
}

.service-card:hover i{
    color: #fff;
}

.skill-card{
    transition: all .3s ease;
    max-width: 180px;
}

.skill-card-img{
    background-color: rgb(20 12 28 / 1);
    border-radius: 15px;
    transition: all .3s ease;
}

.skill-card-img img{
    transition: all .3s ease;
    filter: grayscale(90%);
}

.skill-card-img img{
    width: 60px;
    max-width: 100%;
    height: auto;
}

.skill-card:hover .skill-card-img{
    background-color:  rgb(42 20 84);
    border: 1px solid rgb(135 80 247);
}

.skill-card:hover .skill-card-img img{
    filter: grayscale(0);
    transform: scale(1.1,1.1);
}

.text-primary-color {
    --tw-text-opacity: 1;
    color: rgb(135 80 247 / var(--tw-text-opacity, 1));
}