@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
/** Mouse Move Animation **/
*, *:hover{cursor: none !important;}
.cursor {
position: fixed;
top: 50%;
left: 10%;
display: flex;
justify-content: center;
align-items: center;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
z-index: 6;
width: 75px;
height:75px;
pointer-events: none;
}
.cursor::before, .cursor::after{
content: "";
position: absolute;
width: 1px;
height: 8px ;
top: calc( 50% - 14px );
bottom: auto;
left: auto;
right: auto;
background:rgba(255,255,255,1);
transition: all .3s cubic-bezier(0.8,0,.5,1) .1s;
z-index: 15
}
.cursor::after{
top: auto;
bottom: calc( 50% - 14px );
left: auto;
right: auto;
}
.cursor-dot{
border-radius: 50%;
aspect-ratio: 1;
width: 3px;
height: 3px;
background: rgba(255,255,255,1);
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: all .3s cubic-bezier(0.8,0,.5,1);
}
.cursor-dot:before, .cursor-dot:after{
content: "";
position: absolute;
width: 8px;
height: 1px;
top: auto;
bottom: auto;
left: -11px;
right: auto;
background:rgba(255,255,255,1);
transition: all .3s cubic-bezier(0.8,0,.5,1) .1s;
z-index: 15
}
.cursor-dot:after{
left: auto;
right: -11px;
}
.cursor.active{  
width: 75px !important;
height: 75px !important;
z-index: 5;
}
.cursor.active-dark{  
width: 75px !important;
height: 75px !important;
z-index: 5;
}
.cursor.active:after{
bottom: -2px;
height: 4px;
z-index: 161;
background: rgba(173,251,5,1);
}
.cursor.active::before{
top: -2px;
height: 4px;
background: rgba(173,251,5,1);
}
.cursor.active .cursor-dot{
width: 100%;
height: 100%;
background: rgba(173,251,5,.2); border: solid 1px rgba(173,251,5,1);}
.cursor.active .cursor-dot::after{
right: -2px;
width: 4px;
background: rgba(173,251,5,1);
}
.cursor.active .cursor-dot::before{
left:-2px;
width: 4px;
background: rgba(173,251,5,1);
}
.target{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.target.for-cta{
left: 2%;
}
form > .target{justify-content: flex-start}
.cursor.active-dark::before,.cursor.active-dark::after,.cursor.active-dark .cursor-dot,.cursor.active-dark .cursor-dot:before, .cursor.active-dark .cursor-dot:after{background:rgba(0,0,0,1);}
.cursor.active-dark .cursor-dot{mix-blend-mode: lighten;
background: rgba(0, 0, 0, 1);}
.cursor.active.active-dark .cursor-dot {background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.75)}
.navbar#mob div.container-fluid {
justify-content: flex-end;
}

#mob.navbar-light .navbar-toggler {
border: none;
outline: none;
box-shadow: none;
}

#side-menu {
background: #1d1d1d;
}

#side-menu .nav-link {
color: #fff;
transition: all ease-in .3s;
margin-left: 0;
}

#side-menu .nav-link:hover {
color: #adfb05;
margin-left: 15px;
opacity: 1;
}

#side-menu .close {
opacity: 1;
color: #fff;
box-shadow: none;
border: none;
outline: none;
}

@media (min-width: 768px) {
html, body {
overflow-y: hidden;
}
}

html, body {
background: -webkit-radial-gradient(circle at 5% 0% ,#474747 , #1d1d1d 45%);
background: -moz-radial-gradient(circle at 5% 0% ,#474747 , #1d1d1d 45%);
background: -o-radial-gradient(circle at 5% 0% ,#474747 , #1d1d1d 45%);
background: -ms-radial-gradient(circle at 5% 0% ,#474747 , #1d1d1d 45%);
background: radial-gradient(circle at 5% 0% ,#474747 , #1d1d1d 45%);
font-family: 'Exo';
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
height: auto;
background-attachment: fixed;
/*cursor: none;*/
overflow: clip;
}

.container-fluid {
height: 80%;
}

.row {
height: 100%;
}

section.wrapper {
height: 100vh;
}
.Custom {
position: absolute;
right: 0;
top: 0;
width: 38%;
height: 100vh;
flex-direction: column;
}

.navbar-collapse.Custom svg {
visibility: hidden;
transition: all ease-in-out 1.2s;
pointer-events:none;
z-index: 0;
}

.navbar-collapse.Custom {
z-index: 2;
}
.navbar-collapse.Custom.fired svg {
visibility: visible;
}

.Custom svg {
position: absolute;
right: 0;
top: 0;
}

.Nav-Trigger, .mag {
position: absolute;
width: 50px;
height: 50px;
right: 5%;
top: 5%;
/*cursor: pointer;*/
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.Nav-Trigger span {
width: 100%;
height: 3px;
background: rgb(173, 251, 5);
position: relative;
transition: all .25s cubic-bezier(.9, 0, .33, 1);
transform: rotate(0);
position: relative;
}

.Nav-Trigger span:nth-child(2) {
margin-top: 6px;
width: 80%;
}

.Nav-Trigger span:nth-child(3) {
margin-top: 6px;
width: 60%;
}

.Nav-Trigger:hover span {
width: 100%;
}
.Nav-Trigger.fired + ul.nav{pointer-events: auto}
.Nav-Trigger.fired span:nth-child(1) {
transform: rotate(45deg) translate(7px , 5px);
width: 100%;
background: #1d1d1d;
}

.Nav-Trigger.fired span:nth-child(2) {
transform: rotate(-45deg);
width: 100%;
background: #1d1d1d;
}

.Nav-Trigger.fired span:nth-child(3) {
width: 0;
opacity: 0;
}

.Custom .nav ul li a {
color: #fff !important;
}

img.Logo {
width: 65px;
top: 0;
position: relative;
left: 0;
z-index: 1;
}

.bg-logo {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100vh;
width: 40%;
overflow: hidden;
}

.bg-logo img {
position: absolute;
top: 56%;
left: 30%;
transform: translate(-50%, -50%);
height: 55%;
opacity: .2;
}
.navbar-brand .target{width: clamp(150px, 200px, 250px);}
.navbar-brand .mag{
    position: relative;
    display: flex;
    flex-direction: row;
    column-gap: .5rem;
    }
.logo-txt-holder{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.logo-txt-holder .logo-subtitle, .logo-txt-holder .logo-title{
    font-size: 14px;
    color: #fff;
    margin:0;
    text-align: left;
    text-transform: capitalize;
    font-weight: 300;
    line-height: 1.1;
}
.logo-txt-holder .logo-title{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
}

.navbar.navbar-light.navbar-expand-md.navigation-clean {
/*z-index: 3;*/
background: none;
padding-top: 0;
height: 20vh;
padding-bottom: 0;
}
/*.navigation-clean .navbar-collapse{pointer-events: none}*/
.Custom ul.nav {pointer-events: none;}
@media (min-width: 768px) {
.Custom ul.nav {
width: 80%;

}
}

@media (min-width: 992px) {
.Custom ul.nav {
width: 100%;
margin-top: 10px;
}
}

@media (min-width: 1200px) {
.Custom ul.nav {
width: 100%;
z-index: 5;
}
}

.Custom ul.nav li {
margin-left: 0;
width: 50%;
}
.Custom ul.nav li .tech-style:before, .Custom ul.nav li .tech-style:after{border-color: #1d1d1d}
.cust-bg:hover .button-holder:before{background: #1d1d1d}
@media (min-width: 768px) {
.Custom ul.nav li {

margin-left: 3%;
}
}

@media (min-width: 1200px) {
.Custom ul.nav li {
margin-left: 0;
margin-top: 4%;
}
}

.Custom ul.nav li a {
color: #1d1d1d !important;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: color .25s cubic-bezier(0.8,0,.5,1) .2s;
font-weight: bold;
letter-spacing: 3px;
font-size: 23px;
pointer-events: none;
}

.Custom ul.nav li a.vis {
pointer-events: visible;
}

.Custom ul.nav li:hover a, .Custom ul.nav li a:hover {
color: #fff !important;
}

.Custom ul.nav li a.nav-link.active {
color: #fff !important;
background: #1d1d1d;
}

.Custom ul.nav li a.nav-link.active:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: rgba(29,29,29,1);
transform: scaleX(1);
transform-origin: left;
transition: all .3s cubic-bezier(0.8,0,.5,1) .55s;
z-index: -1;
top: 0;
left: 0;
}

.cust-bg:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #adfb05;
transform: scaleX(0);
transform-origin: right;
transition: transform .2s cubic-bezier(0.8,0,.5,1) .3s;
z-index: -1;
top: 0;
left: 0;
}

.cust-bg:hover:before {
transform: scaleX(1);
transform-origin: left;
}

.Custom ul.nav li a:before, .Custom ul.nav li a:after {
content: "";
width: 0;
height: 100%;
position: absolute;
background: rgba(29,29,29,1);
transition: all .2s cubic-bezier(0.8,0,.5,1) .15s;
z-index: -1;
top: 0;
right: 0;
}

.Custom ul.nav li:hover a:before {
left: 0;
right: auto;
width: 100%;
background: rgba(29,29,29,1);
}

.Custom ul.nav li a:after {
transform: scaleX(.035);
background: rgba(29,29,29,0);
transition: background .3s cubic-bezier(0.8,0,.5,1);
}

.Custom ul.nav li a:hover:after {
background: rgba(29,29,29,1);
}

.Custom ul.nav li svg, .Custom ul.nav li svg rect, .View svg, .View svg rect, .cust-bg svg, .cust-bg svg rect {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
fill: transparent;
}

.Custom ul.nav li svg rect, .View svg rect, .cust-bg svg rect {
fill: transparent !important;
stroke: #fff !important;
stroke-width: 1 !important;
stroke-dasharray: 400 !important;
stroke-dashoffset: 400 !important;
transition: all 0.25s cubic-bezier(0.8,0,.5,1) 0s !important;
}

.Custom ul.nav li:hover svg rect, .View:hover svg rect, .cust-bg:hover svg rect {
stroke-dashoffset: 0 !important;
stroke-dasharray: 400 !important;
}

@media (max-width: 576px) {
.Custom ul.nav li svg {
display: none;
}
}

.Title {
text-align: left;
position: relative;
top: 20%;
width: 75%;
margin: 0 auto;
padding-left: 0;
z-index: 2;
}

@media (min-width: 576px) {
.Title {
text-align: left;
position: relative;
top: 20%;
width: 64%;
margin: 0 auto;
}
}

@media (min-width: 768px) {
.Title {
text-align: left;
position: relative;
top: 20%;
width: 65%;
margin: 0 auto;
}
}

@media (min-width: 992px) {
.Title {
text-align: left;
position: relative;
top: 20%;
width: 50%;
margin: 0 auto;
padding: 0;
}
}

@media (min-width: 1200px) {
.Title {
text-align: left;
position: relative;
top: 10%;
width: 39.5%;
margin: 0 auto;
padding: 0;
}
}

@media (min-width: 1201px) {
.Title {
width: 36%;
}
}

.Title .Mask-1, .Title .Mask-2, .Title .Mask-3 {
position: absolute;
left: 0;
top: 0;
height: 15%;
width: 95%;
z-index: 1;
background: #adfb05;
transform: scaleX(0);
transform-origin: right;
}

.Title .Mask-2 {
top: 20%;
height: 50%;
}

.Title .Mask-3 {
top: 70%;
height: 30%;
}

@keyframes mask-reveal {
0% {
transform: scaleX(0);
transform-origin: right;
}
50% {
transform: scaleX(1);
transform-origin: right;
}
75% {
transform: scaleX(1);
transform-origin: left;
}
100% {
transform: scaleX(0);
transform-origin: left;
}
}

body.intro.loaded .Title .Mask-1 {
animation: mask-reveal 1s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards 2s;
}

body.intro.loaded .Title .Mask-2 {
animation: mask-reveal 1s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards 2.5s;
}

body.intro.loaded .Title .Mask-3 {
animation: mask-reveal 1s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards 2.85s;
}

body.intro.loaded .Title p:first-of-type:before {
animation: flash .5s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards 3s;
opacity: 0;
}

body.intro.loaded .Counter-Progress {
transform: scaleX(0);
}

body.intro.loaded .Preload #Preload-Wrapper:after {
width: 100%;
left: 100%;
}

body.intro.loaded .Preload {
left: 100%;
}
/* .intro.loaded .block{transform: scaleX(0);
transform-origin: left;visibility: hidden;} */
@keyframes flash {
0% {
opacity: 0;
transform-origin: left;
transform: scaleX(1);
}
20% {
opacity: 1;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}

body.intro.loaded .Title p:nth-of-type(2):after {
width: 0;
left: -10%;
height: 5%;
top: 45%;
}

@media (min-width: 576px) {
body.intro.loaded .Title p:nth-of-type(2):after {
width: 62%;
left: -68%;
height: 5%;
top: 45%;
}
}

@media (min-width: 768px) {
body.intro.loaded .Title p:nth-of-type(2):after {
width: 120%;
left: -130%;
height: 5%;
top: 45%;
}
}

.Title p {
color: #c5c5c5;
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,.65);
letter-spacing: 4px;
width: auto;
position: relative;
padding-left: 10%;
height: 35px;
line-height: 35px;
margin-bottom: 2%;
}

.Title p:nth-of-type(2) {
color: #c5c5c5;
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,.65);
letter-spacing: 4px;
width: auto;
padding-left: 0;
position: relative;
display: flex;
flex-direction: row;
align-self: flex-end;
}

@media (min-width: 300px) {
.Title p:nth-of-type(2) {
right: 20%;
}
}

@media (min-width: 576px) {
.Title p:nth-of-type(2) {
right: -4%;
}
}

@media (min-width: 768px) {
.Title p:nth-of-type(2) {
right: 0%;
}
}

@media (min-width: 992px) {
.Title p:nth-of-type(2) {
right: 3%;
}
}

@media (min-width: 1200px) {
.Title p:nth-of-type(2) {
right: 0%;
}
}

@media (min-width: 1201px) {
.Title p:nth-of-type(2) {
right: 32%;
}
}

@media (min-width: 1280px) and (max-width:1860px) {
.Title p:nth-of-type(2) {
right: 13%;
}
}

@media (min-width: 576px) {
.Title p {
color: #c5c5c5;
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,.65);
letter-spacing: 4px;
width: auto;
position: relative;
padding-left: 10%;
}
}

@media (min-width: 768px) {
.Title p {
color: #c5c5c5;
font-size: 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.65);
letter-spacing: 4px;
width: auto;
position: relative;
padding-left: 8%;
}
}

.Title p:nth-of-type(2):after {
content: "";
position: absolute;
width: 0;
height: 10%;
left: -65%;
top: 40%;
background: rgb(173,251,5);
transition: width .5s cubic-bezier(0.8,0,.5,1) 3.85s;
}

.Title p:first-of-type:before {
content: "";
position: absolute;
width: 8%;
height: 100%;
left: 2%;
top: 0;
background: rgb(173,251,5);
}

.Title h1 {
color: #fff;
font-weight: bolder;
font-size: 35px;
letter-spacing: 5px;
margin: 15px auto;
}

@media (min-width: 576px) {
.Title h1 {
color: #fff;
font-weight: bolder;
font-size: 40px;
letter-spacing: 5px;
margin: 15px 0;
}
}

@media (min-width: 576px) {
.Title h1 {
color: #fff;
font-weight: bolder;
font-size: 65px;
letter-spacing: 5px;
margin: 15px 0;
}
}

@media (min-width: 768px) {
.Title h1 {
color: #fff;
font-weight: bolder;
font-size: 90px;
letter-spacing: 5px;
}
}

.Contacts {
position: absolute;
left: 0;
bottom: 0;
width: 60%;
height: 70%;
z-index: 3;
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
}

@media (min-width: 576px) {
.Contacts {
position: absolute;
left: 0;
bottom: 0;
width: 50%;
height: 70%;
z-index: 3;
display: flex;
justify-content: start;
align-items: center;
flex-direction: column;
}
}

@media (min-width: 992px) {
.Contacts {
position: absolute;
left: 0;
bottom: 0;
width: 25%;
height: 70%;
z-index: 3;
display: flex;
justify-content: start;
align-items: center;
flex-direction: column;
}
}

.Contacts p {
color: #888888;
font-size: 14px;
letter-spacing: 3px;
transform: rotate(90deg);
left: -10%;
position: absolute;
}

@media (min-width: 768px) {
.Contacts p {
color: #888888;
font-size: 14px;
letter-spacing: 3px;
transform: rotate(90deg);
left: -26px;
position: absolute;
}
}

@media (min-width: 992px) {
.Contacts p {
color: #888888;
font-size: 14px;
letter-spacing: 3px;
transform: rotate(90deg);
left: -25PX;
position: absolute;
}
}

@media (min-width: 1200px) {
.Contacts p {
color: #888888;
font-size: 14px;
letter-spacing: 3px;
transform: rotate(90deg);
left: 3px;
position: absolute;
}
}

.Contacts > span {
background: #adfb05;
height: 35%;
width: 2px;
position: absolute;
left: 27px;
bottom: 40%;
z-index: 0;
transform-origin: top;
transform: scaleY(1);
}

@media (min-width: 768px) {
.Contacts > span {
background: #adfb05;
height: 35%;
width: 2px;
position: absolute;
left: 30px;
bottom: 40%;
z-index: 0;
transform-origin: top;
transform: scaleY(1);
}
}

@media (min-width: 992px) {
.Contacts > span {
background: #adfb05;
height: 35%;
width: 2px;
position: absolute;
left: 31px;
bottom: 40%;
z-index: 0;
transform-origin: top;
transform: scaleY(1);
}
}

@media (min-width: 1200px) {
.Contacts > span {
background: #adfb05;
height: 35%;
width: 2px;
position: absolute;
left: 60px;
bottom: 40%;
z-index: 0;
transform-origin: top;
transform: scaleY(1);
}
}

.Contacts ul {
list-style: none;
position: absolute;
bottom: 3%;
left: -8%;
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}

@media (min-width: 768px) {
.Contacts ul {
list-style: none;
position: absolute;
bottom: 1%;
left: -4%;
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
}

@media (min-width: 992px) {
.Contacts ul {
list-style: none;
position: absolute;
bottom: 3%;
left: -6.5%;
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
}

@media (min-width: 1200px) {
.Contacts ul {
list-style: none;
position: absolute;
bottom: 3%;
left: 10px;
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
}

.Contacts ul li {
margin: 2% 0;
text-align: center;
height: 25px;
width: 90%;
overflow: hidden;
opacity: 1;
}

@media (min-width: 768px) {
.Contacts ul li {
margin: 2% 0;
text-align: center;
height: 25px;
width: 100%;
overflow: hidden;
opacity: 1;
}
}

@media (min-width: 992px) {
.Contacts ul li {
margin: 2% 0;
text-align: center;
height: 25px;
width: 85%;
overflow: hidden;
opacity: 1;
}
}

.Contacts ul li a {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
text-decoration: none;
position: relative;
}

.Contacts ul li a span {
font-size: 12px;
color: #fff;
transform: translateX(100%);
text-align: left;
padding: 0;
z-index: 0;
transition: transform .3s cubic-bezier(0.8,0,.5,1) .85s , opacity .3s linear .95s , visibility .3s cubic-bezier(0.8,0,.5,1) .99s;
opacity: 0;
visibility: hidden;
}

.Contacts ul li:hover a span {
opacity: 1;
transform: translateX(0);
visibility: visible;
}

.Contacts ul li a span:before {
content: "";
position: absolute;
right: 15%;
width: 85%;
height: 100%;
top: 0;
background: #adfb05;
z-index: 1;
transform: scaleX(0);
transform-origin: right;
}

.Contacts ul li a:before {
content: "";
position: absolute;
left: 8%;
width: 85%;
height: 100%;
top: 0;
background: #adfb05;
z-index: 1;
transform: scaleX(0);
transform-origin: left;
opacity: 0;
}

.Contacts ul li:hover a:before {
animation: social-anim 1.2s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards .3s;
}

@keyframes social-anim {
0% {
transform: scaleX(0);
opacity: 0;
transform-origin: left;
}
10% {
opacity: 1;
transform: scaleX(.1);
transform-origin: left;
}
20% {
opacity: 0;
transform: scaleX(.1);
transform-origin: left;
}
30% {
opacity: 1;
transform: scaleX(.1);
transform-origin: left;
}
35% {
opacity: 1;
transform: scaleX(.1);
transform-origin: left;
}
40% {
opacity: 1;
transform: scaleX(.1);
transform-origin: left;
}
45% {
opacity: 1;
transform: scaleX(1);
transform-origin: left;
}
50% {
opacity: 1;
transform: scaleX(1);
transform-origin: left;
}
55% {
transform: scaleX(1);
transform-origin: left;
}
60% {
transform: scaleX(1);
transform-origin: right;
}
65% {
transform-origin: right;
transform: scaleX(.1);
}
75% {
transform-origin: right;
transform: scaleX(.1);
opacity: 0;
}
80% {
transform-origin: right;
transform: scaleX(.1);
opacity: 1;
}
85% {
transform-origin: right;
transform: scaleX(.1);
opacity: 0;
}
90% {
transform-origin: right;
transform: scaleX(.1);
opacity: 1;
}
95% {
transform-origin: right;
transform: scaleX(.1);
opacity: 0;
}
100% {
transform-origin: right;
transform: scaleX(.1);
opacity: 1;
}
}

.Contacts ul li a i {
color: #fff;
width: 20px;
font-size: 18px;
transition: color .3s ease-in-out;
margin-right: 5%;
}

@media (min-width: 768px) {
.Contacts ul li a i {
width: 15px;
}
}

.Contacts ul li:hover a i {
color: #adfb05;
}

.Contacts ul li a i.fa.fa-linkedin {
font-size: 14px;
}

.Contacts ul li a i.fa.fa-envelope {
font-size: 13px;
}

.Contacts ul li a i.fa.fa-mobile {
font-size: 20px;
}

.Next-Page {
width: 70%;
height: 5%;
position: absolute;
right: 0;
bottom: 3%;
z-index: 3;
}

@media (min-width: 576px) {
.Next-Page {
width: 45%;
height: 5%;
position: absolute;
right: 0;
bottom: 3%;
}
}

@media (min-width: 768px) {
.Next-Page {
width: 35%;
height: 5%;
position: absolute;
right: 0;
bottom: 1%;
}
}

@media (min-width: 992px) {
.Next-Page {
width: 35%;
height: 5%;
position: absolute;
right: 0;
bottom: 1%;
}
}

@media (min-width: 1200px) {
.Next-Page {
width: 20%;
height: 15%;
position: absolute;
right: 1%;
bottom: 0;
}
}

.Next-Page a {
position: absolute;
width: 250px;
height: 100%;
color: #888888;
font-size: 14px;
letter-spacing: 2px;
text-decoration: none;
transition: all .3s linear .3s;
}

.Next-Page a:hover {
color: #fff;
}

.Next-Page a:after {
content: "";
position: absolute;
width: 0;
height: 1px;
left: 72.5%;
top: 50%;
z-index: 0;
background: #adfb05;
transition: all .3s cubic-bezier(0.8,0,.5,1) .3s;
}

.Next-Page a:hover:after {
width: 10%;
}

.Next-Page a:before {
content: "";
position: absolute;
width: 0;
height: 1px;
left: 5%;
top: 49%;
z-index: 0;
background: #adfb05;
transition: all .3s cubic-bezier(0.8,0,.5,1) .2s;
}

.Next-Page a:hover:before {
width: 20%;
}

.Next-Page a + i {
color: #fff;
font-size: 22px;
transform: translateX(100%);
font-weight: 100;
top: -1%;
left: auto;
right: -20%;
position: relative;
transition: all .2s cubic-bezier(0.8,0,.5,1) .35s;
}

.Projects-Gallery {
    z-index: 4;
    height: 100%;
    width: 100%;
    /* transition: all .2s linear allow-discrete ; */
}
.Projects-Gallery.z-in-dec{z-index: 1;}
.dark-style{
    background: rgba(0, 0, 0, .25);
    max-width: 1270px;
    margin: 0 auto;
    padding: 1rem;
    top: -3.5rem;
}

.Projects-Gallery.dark-style{
    padding:0rem 0 0rem 1rem;
    height: 90%;
    top: -2rem;
   transition-behavior: allow-discrete;
}

swiper-container {
      width: 100%;
      height: 100%;
      padding: 2rem;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center; 
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .swiper{padding-bottom: 2rem;}
    .nav-buttons{
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 4rem;
        bottom: -4rem;
        top: auto;

    }
.swiper-button-next, .swiper-button-prev{
    width: 50px ;
    height: 50px ;
    position: relative;
    color: #fff;

}
.swiper-button-next::after, .swiper-button-prev::after{
    font-size: 30px;
    width: 100%;
    display: flex;
    justify-content: center;}
swiper-container::part(pagination-progressbar-fill) {
  background: #adfb05 !important; /* Your desired color */
}
swiper-container::part(pagination-progressbar) {
  background: #222 !important; /* Track color (optional) */
}
.Projects-Gallery .Projects-Wrapper {
height: auto;
margin: 0 auto;
top: 0;
position: relative;
padding: .12rem;
}
@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.Projects-Wrapper:after, .Projects-Wrapper::before{
    
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: conic-gradient(from var(--angle),rgba(255,255,255,.45) 5%, transparent 30%,  
    transparent 40%, rgba(255,255,255,.45) 60%, transparent 70% ); */
    background: conic-gradient(from var(--angle),rgba(172, 250, 5,.75) 5%, transparent 30%,  
    transparent 40%, rgba(172, 250, 5,.75) 60%, transparent 70% );
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    animation: border-spin 5s linear infinite both;
    animation-play-state: paused;
    opacity: 0;
}
.Projects-Wrapper::before{
    background: conic-gradient(from var(--angle),rgba(172, 250, 5,.55) 5%, transparent 30%,  
    transparent 40%, rgba(172, 250, 5,.55) 60%, transparent 70% );
    filter:blur(.5rem);
    opacity: 0;
}
.swiper-slide:hover .Projects-Wrapper:after, 
.swiper-slide-active .Projects-Wrapper:after,
.swiper-slide-active .Projects-Wrapper:before{animation-play-state:running;opacity: 1;}
.swiper-slide-active .Projects-Wrapper:before{opacity: .5;}
@keyframes border-spin {
    from{--angle:0deg}
    to{--angle:360deg}
}
@media (min-width: 576px) {
.Projects-Gallery .Projects-Wrapper {
top: 55px;
}
}

@media (min-width: 768px) {
.Projects-Gallery .Projects-Wrapper {
height: auto;
margin: 0 auto;
}
}

@media (min-width: 992px) {
.Projects-Gallery .Projects-Wrapper {
height: auto;
margin: 0 auto;
top: 0;
position: relative;
}
}

.Next-Page a:hover + i {
transform: translateX(300%);
color: #adfb05;
}

.Projects-Gallery .Project {
height: 100%;
padding: 0;
box-shadow: 1px 3px 5px 2px rgba(0,0,0,.35);
overflow: hidden;
position: relative;
z-index: 4;
max-height: 420px;
width: 100%;
}

.Projects-Gallery .Project a.explore {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content:space-around;
z-index: 1;
text-decoration: none;
overflow: clip;
}
.Project a.explore::before
{
    content:"";
    position:absolute;
    background: rgb(23 23 23/ 100%);
    height: 100%;
    width: 100%;
    left: 0;
    right: auto;
    top: 0;
    transition: all .25s ease-in-out .1s;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 0;
}

.Project:hover a.explore::before{transform: scaleX(1);}
.card-title{
    position: relative;
    flex-basis: 75%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding-left: 1rem;
    
}
.project-title{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.project-subtitle{
    color: #fff;
    font-size: 14px;
    columns: #868686;
    font-weight: normal;
    transition: all .25s cubic-bezier(.9, 0, .33, 1);
}
.card-icon{
    position: relative;
    flex-basis: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-icon:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    right: 0;
    background: rgba(172, 250, 5,1);
    transition: all .25s cubic-bezier(.9, 0, .33, 1);
    transform-origin: right;
    transform: scale(.2 , .5);
}
.Project:hover a.explore .card-icon:after, .Project a.explore:hover .card-icon:after{
transform: scale(1 , 1);
}
.card-icon svg{
    fill: #fff;
    width: 100%;
    height: 25px;
    transition: all .25s cubic-bezier(.9, 0, .33, 1);
    z-index: 1;
}
.Project a.explore:hover .card-icon svg,
.Project:hover a.explore .card-icon svg
{
    fill: #1d1d1d;
}
.Project:hover .project-subtitle{
    color: rgba(172, 250, 5,1);
}
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal
{
    top: auto;
    bottom: 0;
    width: 98%;
}
.Projects-Wrapper{transition: opacity ease .2s, transform ease .2s;}
.swiper-wrapper:has(.swiper-slide:hover) .Projects-Wrapper:not(:hover){opacity:.35 ;transform: scale(.95);}
.swiper-slide.swiper-slide-active .Project:after, .swiper-slide:hover .Project:after{background: rgba(0, 0, 0, .25);}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    background: rgba(172, 250, 5,1) !important;
}
.Projects-Gallery .Project img {
    min-height: 420px;
/* filter: grayscale(100%); */
z-index: 0;
transition: filter .4s cubic-bezier(0.8,0,.5,1) 1s , transform .4s cubic-bezier(0.8,0,.5,1) .1s;
transform: scale(1);
width: 100%;
object-fit: cover;
}

.Projects-Gallery .Project:hover img {
transform: scale(1.02);
}

.Projects-Gallery .Project:before, .Projects-Gallery .Project:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
background: #1d1d1d;
transform: scaleX(0);
z-index: 1;
transition: all ease-in-out .2s;
}

.Projects-Gallery .Project:after {
background: rgba(0, 0, 0, .75);
transform: scaleX(1);
z-index: 0;
}


.Projects-Gallery h1, .Projects-Gallery a.View {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: bold;
width: 50%;
z-index: 6;
}
.Projects-Gallery h1 {
bottom: 23%;
opacity: 1;
width: 80%;
}

@media (min-width: 992px) {
.Projects-Gallery h1 {
bottom: 23%;
opacity: 1;
width: 50%;
}
}

.Projects-Gallery #carousel-1 .carousel-item.active h1:before, .Projects-Gallery #carousel-1 .carousel-item.active h1:after {
transform: scaleX(1);
}

.Projects-Gallery a.View {
bottom: 3%;
font-size: 18px !important;
text-decoration: none;
width: 45%;
height: 50px;
line-height: 50px;
border: solid 1px rgba(255,255,255,.1);
transition: border 0.5s ease-in-out 0s , color 0.5s cubic-bezier(0.8,0,.5,1) .1s ;
opacity: 1;
z-index: 6;
}

@media (min-width: 576px) {
.Projects-Gallery a.View {
bottom: 3%;
font-size: 18px !important;
text-decoration: none;
width: 25%;
height: 50px;
line-height: 50px;
border: solid 1px rgba(255,255,255,.1);
transition: border 0.5s ease-in-out 0s , color 0.5s cubic-bezier(0.8,0,.5,1) .1s ;
opacity: 1;
z-index: 6;
}
}

@media (min-width: 992px) {
.Projects-Gallery a.View {
bottom: 3%;
font-size: 18px !important;
text-decoration: none;
width: 15%;
height: 50px;
line-height: 50px;
border: solid 1px rgba(255,255,255,.1);
transition: border 0.5s ease-in-out 0s , color 0.5s cubic-bezier(0.8,0,.5,1) .1s ;
opacity: 1;
z-index: 6;
}
}

.Projects-Gallery a.View:hover {
border: solid 1px rgba(255,255,255,0);
color: #1d1d1d;
}

.View svg rect {
stroke: #adfb05 !important;
stroke-dashoffset: 700 !important;
stroke-dasharray: 700 !important;
width: 100%;
height: 100%;
stroke-width: 2px !important;
}

.View:hover svg rect {
stroke-dasharray: 700 !important;
}

.Projects-Gallery h1:before {
content: "";
position: absolute;
width: 25%;
height: 1px;
left: 5%;
top: 49%;
z-index: 0;
background: #adfb05;
transition: transform .3s cubic-bezier(0.52, 2, 0.27, 0.56) .5s;
transform-origin: right;
transform: scaleX(0);
}

.Projects-Gallery h1:after {
content: "";
position: absolute;
width: 25%;
height: 1px;
right: 5%;
top: 49%;
z-index: 0;
background: #adfb05;
transition: transform .3s cubic-bezier(0.52, 2, 0.27, 0.56) .5s;
transform-origin: left;
transform: scaleX(0);
}

@media (max-width: 576px) {
.Projects-Gallery h1:before, .Projects-Gallery h1:after {
width: 0;
}
}

#controls {
position: relative;
}

.Projects-Gallery .carousel-control-prev {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
left: 10%;
bottom: 3%;
top: auto;
opacity: 1;
}

@media (min-width: 576px) {
.Projects-Gallery .carousel-control-prev {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
left: 26%;
bottom: 3%;
top: auto;
opacity: 1;
}
}

@media (min-width: 768px) {
.Projects-Gallery .carousel-control-prev {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
left: 30%;
bottom: 3%;
top: auto;
opacity: 1;
}
}

@media (min-width: 992px) {
.Projects-Gallery .carousel-control-prev {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
left: 37%;
bottom: 3%;
top: auto;
opacity: 1;
}
}

.Projects-Gallery .icon.ion-ios-arrow-thin-left, .Projects-Gallery .icon.ion-ios-arrow-thin-right {
color: #adfb05;
font-size: 45px;
}

.carousel-control-next.cust-bg .icon, .carousel-control-prev.cust-bg .icon {
transition: color 0.5s cubic-bezier(0.8,0,.5,1) .1s;
}

.carousel-control-next.cust-bg:hover .icon, .carousel-control-prev.cust-bg:hover .icon {
color: #1d1d1d !important;
}

.Projects-Gallery .carousel-control-next {
z-index: 6;
width: 49px;
height: 49px;
position: absolute !important;
right: 10%;
bottom: 3%;
top: auto;
opacity: 1;
}

@media (min-width: 576px) {
.Projects-Gallery .carousel-control-next {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
right: 26%;
bottom: 3%;
top: auto;
opacity: 1;
}
}

@media (min-width: 768px) {
.Projects-Gallery .carousel-control-next {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
right: 30%;
bottom: 3%;
top: auto;
opacity: 1;
}
}

@media (min-width: 992px) {
.Projects-Gallery .carousel-control-next {
z-index: 1;
width: 49px;
height: 49px;
position: absolute !important;
right: 37%;
bottom: 3%;
top: auto;
opacity: 1;
}
}

.Projects-Gallery .carousel-indicators {
flex-direction: column;
margin: 0;
left: auto;
z-index: 0;
display: none !important;
}

@media (min-width: 768px) {
.Projects-Gallery .carousel-indicators {
flex-direction: column;
margin: 0;
left: auto;
z-index: 1;
top: 5%;
}
}

.Projects-Gallery .carousel-indicators li {
margin: 20% auto;
width: 5px;
height: 10px;
background: rgba(136,136,136,.35);
cursor: pointer;
transition: background .4s cubic-bezier(0.8,0,.5,1) .2s;
}

.Projects-Gallery .carousel-indicators li.active {
background: rgba(173,251,5,1);
opacity: 1 !important;
}

.Projects-Gallery .carousel-indicators li:before {
transform: scaleX(0);
transform-origin: right;
transition: left .3s cubic-bezier(0.52, 1.64, 0.37, 0.66) .45s,transform .3s cubic-bezier(0.52, 1.64, 0.37, 0.66) .45s , background .3s cubic-bezier(0.52, 1.64, 0.37, 0.66) .65s;
background: rgba(173,251,5,.75);
content: "";
width: 400%;
height: 100%;
position: absolute;
left: -400%;
top: 0;
}

.Projects-Gallery .carousel-indicators li.active:before {
background: rgba(173,251,5,1);
transform: scaleX(1);
left: -450%;
}

.Projects-Gallery #carousel-1 .carousel-item.active .Project img {
filter: grayscale(0);
}

.Experience, .About, .Skills {
padding-top: 0;
z-index: 1;
}

@media (min-width: 300px) {
.Experience {
margin-top: 25%;
}
}

@media (min-width: 576px) {
.Experience {
margin-top: 0;
}
}

@media (min-width: 576px) {
.Skills {
padding: 10% 0;
}
}

@media (min-width: 768px) {
.Skills {
padding: 0;
}
}

.Experience h2, .About h2 {
color: #fff;
font-weight: bold;
font-size: 25px;
position: relative;
height: 30px;
margin: 0;
}

.About p {
text-align: center;
font-size: 14px;
width: 100%;
color: #c5c5c5;
margin: 5% auto;
padding: 0%;
line-height: 2;
}

@media (min-width: 576px) {
.About p {
text-align: center;
font-size: 14px;
width: 75%;
color: #c5c5c5;
margin: 3% auto;
padding: 1%;
line-height: 2;
}
}

@media (min-width: 1441px) {
.About p {
text-align: center;
font-size: 14px;
width: 70%;
color: #c5c5c5;
margin: 3% auto;
padding: 1%;
line-height: 2;
}
}

.Experience ul, .Skills ul {
text-align: center;
font-size: 14px;
width: 100%;
color: #c5c5c5;
list-style: none;
margin: 10% auto;
padding-left: 0;
}

@media (min-width: 576px) {
.Experience ul, .Skills ul {
text-align: center;
font-size: 14px;
width: 90%;
color: #c5c5c5;
list-style: none;
margin: 3% auto;
}
.Experience ul{text-align: left;padding-left:10rem; }
}

.Experience ul li {
margin: 1% auto;
position: relative;
line-height: 1.5;
}

.Experience span.Mask, .About span.Mask {
position: absolute;
left: 15%;
width: 35%;
height: 30px;
top: 0;
background: #adfb05;
z-index: 1;
transform: scaleX(0);
transform-origin: left;
opacity: 1;
}

@media (min-width: 576px) {
.Experience span.Mask, .About span.Mask {
position: absolute;
left: 28%;
width: 35%;
height: 30px;
top: 0;
background: #adfb05;
z-index: 1;
transform: scaleX(0);
transform-origin: left;
opacity: 1;
}
}

@media (min-width: 768px) {
.Experience span.Mask, .About span.Mask {
position: absolute;
left: 22%;
width: 35%;
height: 30px;
top: 0;
background: #adfb05;
z-index: 1;
transform: scaleX(0);
transform-origin: left;
opacity: 1;
}
}

@media (min-width: 992px) {
.Experience span.Mask, .About span.Mask {
position: absolute;
left: 28%;
width: 35%;
height: 30px;
top: 0;
background: #adfb05;
z-index: 1;
transform: scaleX(0);
transform-origin: left;
opacity: 1;
}
}

.About span.Mask {
left: 23%;
}

@media (min-width: 576px) {
.About span.Mask {
left: 34%;
}
}

@media (min-width: 768px) {
.About span.Mask {
left: 30%;
}
}

@media (min-width: 992px) {
.About span.Mask {
left: 34%;
}
}

body.contact.loaded .Experience span.Mask {
animation: h-anim 1.2s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards .85s;
}

body.contact.loaded .About span.Mask {
animation: h-anim 1.2s 1 alternate cubic-bezier(0.8, 0, .5, 1) forwards 1s;
}

@keyframes h-anim {
0% {
transform: scaleX(0);
opacity: 0;
transform-origin: left;
}
10% {
opacity: 1;
transform: scaleX(.05);
transform-origin: left;
}
20% {
opacity: 0;
transform: scaleX(.05);
transform-origin: left;
}
30% {
opacity: 1;
transform: scaleX(.05);
transform-origin: left;
}
35% {
opacity: 1;
transform: scaleX(.05);
transform-origin: left;
}
40% {
opacity: 1;
transform: scaleX(.05);
transform-origin: left;
}
45% {
opacity: 1;
transform: scaleX(1);
transform-origin: left;
}
50% {
opacity: 1;
transform: scaleX(1);
transform-origin: left;
}
55% {
transform: scaleX(1);
transform-origin: left;
}
60% {
transform: scaleX(1);
}
65% {
transform: scaleX(.05);
}
75% {
transform: scaleX(.05);
opacity: 0;
}
80% {
transform: scaleX(.05);
opacity: 1;
}
85% {
transform: scaleX(.05);
opacity: 0;
}
90% {
transform: scaleX(.05);
opacity: 1;
}
95% {
transform: scaleX(.05);
opacity: 0;
}
100% {
transform: scaleX(.05);
opacity: 1;
}
}
.buttons-wrapper{
    position: relative;
    top: 1rem;
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: .5rem;
}
.Skills a, a.CV, a.Bio {
color: #fff;
font-weight: bold;
font-size: 20px;
position: relative;
height: 40px;
margin: 0;
background: rgba(173,251,5,0);
width: 192px;
text-align: center;
text-decoration: none;
line-height: 2.1;
z-index: 3;
transition: border 0.5s ease-in-out 0s , color 0.25s cubic-bezier(0.8,0,.5,1) .3s 
}
a.Bio{
    width: clamp(100px, 150px, 250px);
    font-weight: normal;
    color: #adfb05;
}
a.CV {
position: relative;
border: none;
text-transform: capitalize;
}

.Skills a.cust-bg:hover, a.CV:hover, a.Bio:hover {
color: #1d1d1d;
}

.Contact-Me button.btn svg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

.Skills a.cust-bg svg rect, a.CV svg rect, a.Bio svg rect,.Contact-Me button.btn svg rect {
stroke-dashoffset: 500 !important;
stroke-dasharray: 500 !important;
stroke: #adfb05 !important;
transition-delay: .85s !important;
}

.Skills a.cust-bg:hover svg rect, a.CV:hover svg rect, a.Bio:hover svg rect, .Contact-Me button.btn:hover svg rect {
stroke-dashoffset: 0 !important;
stroke-dasharray: 500 !important;
}

.Skills a.cust-bg .icon, a.CV .icon, a.Bio .icon {
font-size: 34px;
position: absolute;
right: 4%;
top: 0;
line-height: 1.3;
color: #fff;
transition: color 0.25s cubic-bezier(0.8,0,.5,1) .3s , top 0.25s cubic-bezier(0.8,0,.5,1) .3s;
animation: arrow-sliding .5s cubic-bezier(0.8,0,.5,1) .2s infinite alternate;
}
.Skills a.cust-bg .icon:nth-child(2) {
top: -100%;
}

.Contact-Me button.btn {
width: 140px;
height: 36px;
transition: color 0.5s cubic-bezier(0.8,0,.5,1) .1s;
color: #1d1d1d;
font-weight: bold;
position: relative;
background: rgba(173,251,5,1);
text-decoration: none;
line-height: 1.6;
z-index: 2;
border: none;
margin: 0 auto;
border-radius: 0;
font-size: 16px;
}

.Contact-Me button.btn:hover {
color: #fff;
}

.Contact-Me button.btn .icon {
right: 20%;
position: absolute;
font-size: 26px;
line-height: 1;
transition: color 0.25s cubic-bezier(0.8,0,.5,1) .3s, right 0.25s cubic-bezier(0.8,0,.5,1) .3s !important;
color: #1d1d1d;
}

.Contact-Me button.btn:hover .icon {
color: #adfb05;
right: 5%;
}

.Skills a.cust-bg:hover .icon {
top: 100%;
color: #1d1d1d;
}

.Skills a.cust-bg:hover .icon:nth-child(2) {
top: 0;
}
a.CV .icon {transition:color 0.25s cubic-bezier(0.8,0,.5,1) .3s, right 0.25s cubic-bezier(0.8,0,.5,1) .3s}
a.CV:hover .icon{right: -15%;}
a.CV .icon:nth-child(2){right: -15%;}
a.CV:hover .icon:nth-child(2){right: 4%;color:#1d1d1d}
.Bio.cust-bg:before,.CV.cust-bg:before, .Skills a.cust-bg:before {
background: #adfb05;
}
.button-txt{position: relative;z-index: 1;width: 100%;height: 100%;display:block;}
.Contact-Me button.btn.cust-bg:before {
background: #1d1d1d;
}

.Skills a.active {
background: #adfb05 !important;
}

.Skills ul {
width: 40%;
text-align: left;
}

.Skills ul li {
position: relative;
opacity: 0;
margin: 3% auto;
}

.Skills ul li:before {
content: "";
position: absolute;
left: -11%;
width: 10px;
height: 10px;
background: #adfb05;
top: 25%;
}

@keyframes arrow-sliding {
from {
transform: translateX(0);
}
to {
transform: translateX(5%);
}
}

.Contact-Me {
margin-bottom: 30%;
}

@media (min-width: 576px) {
.Contact-Me {
margin-top: -7%;
padding: 0;
margin-bottom: 0;
}
}

@media (min-width: 1200px) {
.Contact-Me {
margin-top: -4%;
padding: 0;
}
}

@media (min-width: 1280px) {
.Contact-Me {
margin-top: -60px;
padding: 0;
}
}

.Contact-Me form {
width: 100%;
/*border: solid 1px #4f4f4f;*/
padding: 1% 0%;
position: relative;
z-index: 3;
}

@media (min-width: 576px) {
.Contact-Me form {
width: 75%;
/*border: solid 1px #4f4f4f;*/
padding: .5%;
position: relative;
}
}

.Contact-Me > form > div {
position: relative;
}

.Contact-Me form > div > label {
color: #888;
text-transform: capitalize;
font-size: 14px;
position: absolute;
z-index: -1;
line-height: 35px;
padding: .5%;
top: 0;
margin: 0;
transition: top 0.3s cubic-bezier(0.8,0,.5,1) .1s , color 0.3s cubic-bezier(0.8,0,.5,1) .2s;
}

.Contact-Me form > div {
margin: 12% auto;
}

@media (min-width: 576px) {
.Contact-Me form > div {
margin: 8% auto;
}
}

.Contact-Me form > div input, .Contact-Me form > div textarea {
position: relative;
z-index: 1;
color: #fff !important;
font-size: 14px;
}

.Contact-Me form > div input:focus, .Contact-Me form > div textarea:focus {
outline: none !important;
box-shadow: none;
}

.Contact-Me form > div input:focus ~ label, .Contact-Me form > div textarea:focus ~ label, .Contact-Me form > div input:valid ~ label, .Contact-Me form > div textarea:valid ~ label {
top: -30px;
color: #adfb05;
}

.Contact-Me form > div.Name {
margin-top: 0;
}

.Contact-Me form > div svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.Contact-Me form > div svg rect {
fill: transparent !important;
stroke: #adfb05 !important;
stroke-width: 1 !important;
stroke-dasharray: 1300 !important;
stroke-dashoffset: 1300 !important;
transition: all 0.75s cubic-bezier(0.8,0,.5,1) .35s !important;
}

@media (max-width: 360px) {
.Contact-Me form {
width: 100%;
/*border: solid 1px #4f4f4f;*/
padding: 10% 5%;
position: relative;
margin-bottom: 30%;
}
}

.Contact-Me form > div textarea ~ svg rect {
stroke-dasharray: 1400 !important;
stroke-dashoffset: 1400 !important;
}

.Contact-Me form > div input:focus ~ svg rect {
stroke-dashoffset: 0 !important;
stroke-dasharray: 1300 !important;
}

.Contact-Me form > div textarea:focus ~ svg rect {
stroke-dashoffset: 0 !important;
stroke-dasharray: 1400 !important;
}
.button-holder{
overflow: clip;
position: relative;
height: 100%;
width: 100%;
}
.button-holder:before{
content: "";
width: 7px;
height: 7px;
position: absolute;
background: #adfb05;
transition: all .35s cubic-bezier(0.8,0,.5,1) .45s;
bottom: .75rem;
left: .5rem;
transform-origin: left bottom;
transform: scale(1);
}
a.Bio > .button-holder:before{
    width: 15px;
    height: 15px;
    left: 0;
}
a.cust-bg:hover .button-holder:before{transform: scale(0);}
li.nav-item .button-holder:before{
background: #1d1d1d;
transition:all .25s cubic-bezier(0.8,0,.5,1) .1s;
transform-origin: left; 
}
li.nav-item:hover .button-holder:before, li.nav-item .button-holder:has(.active):before{background: #adfb05;transform: scale(1.5);}
.tech-style{position: absolute;
width: 100%;
height: 100%;
background: transparent;
/*border: 1px solid rgba(255, 255, 255, .1);*/
top: 0;
left: 0;
}
.tech-style:before{
content:"";
position: absolute;
width: 12px;
height: 12px;
background: transparent;
border-left: solid 1px rgba(255, 255, 255, 1);
border-bottom: solid 1px rgba(255, 255, 255, 1);
bottom: -5px;
left: -5px;
transform-origin:left bottom ;
transition:all .2s cubic-bezier(0.8,0,.5,1) .45s;
}
.tech-style:after{
content:"";
position: absolute;
width: 12px;
height: 12px;
background: transparent;
border-right: solid 1px rgba(255, 255, 255, 1);
border-top: solid 1px rgba(255, 255, 255, 1);
top: -5px;
right: -5px;
transform-origin:right top ;
transition:all .2s cubic-bezier(0.8,0,.5,1) .45s;
}
a.CV:hover .tech-style:before,a.Bio:hover .tech-style:before,
.Projects-Gallery a.View:hover .tech-style:before, 
li.nav-item:hover .tech-style:before,
.cust-bg:hover .tech-style:before
{transform:translate(.3rem, -.25rem);border-color: #acfa05;}
li.nav-item .button-holder:has(.active)
a.CV:hover .tech-style:after, a.Bio:hover .tech-style:after,.Projects-Gallery a.View:hover .tech-style:after, li.nav-item:hover .tech-style:after,.cust-bg:hover .tech-style:after{transform: translate(-.25rem, .25rem);border-color: #acfa05;}
.Contact-Me input.form-control, .Contact-Me textarea.form-control {
height: 35px;
background: none;
outline: none;
border-radius: 2px;
border: none;
border-bottom: solid 1px rgba(255,255,255,.1);
z-index: initial;
}

.Contact-Me textarea.form-control {
min-height: 70px;
}

.navigation-clean .navbar-toggler {
border: none;
outline: none;
}

.navbar-toggler-icon {
background: url('../../assets/img/Nav-Trigger.svg') no-repeat center center / 100% !important;
}

.Contacts-Mob {
top: 95%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}

.Contacts-Mob ul {
display: flex;
text-align: center;
list-style: none;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
flex-direction: row;
padding: 0;
}

.Contacts-Mob ul li {
margin: 0 10%;
position: relative;
}

.Contacts-Mob ul li a {
color: #fff;
transition: all .2s ease-in-out .3s;
font-size: 18px;
position: relative;
}

.Contacts-Mob ul li a span {
position: absolute;
top: -100%;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}

.Contacts-Mob ul li:hover a {
color: #adfb05;
}

.Preload {
position: fixed;
width: 100%;
height: 100vh;
background: #000000;
left: 0;
top: 0;
z-index: 10;
text-align: center;
padding: 0;
transition: left .5s cubic-bezier(.2,.02,.9,.67) 1.5s;
}

.Preload #Preload-Wrapper {
position: relative;
width: 100%;
height: 100%;
padding: 0;
}

.Preload #Preload-Wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #adfb05;
z-index: 2;
transition: width .45s cubic-bezier(0.8,0,.5,1) 1.2s

, left .45s cubic-bezier(.2,.02,.9,.67) 1.5s;
}

.Counter-Progress {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background: #1d1d1d;
z-index: 3;
transform-origin: right;
transform: scaleX(1);
transition: transform .60s cubic-bezier(0.8,0,.5,1) .75s;
}

.Preload .preload-Logo {
width: 110px;
margin: 0 auto;
position: relative;
left: 0;
right: 0;
top: 10%;
z-index: 4;
}

.Preload .preload-Logo svg {
left: 0;
right: 0;
top: 0;
position: relative;
display: block;
width: 100%;
height: 100%;
}

.Preload h5 {
text-align: center;
color: #adfb05;
position: relative;
top: 18%;
font-size: 30px;
font-weight: 100;
letter-spacing: 7px;
z-index: 4;
}

.Preload .Counter {
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}

.Preload .Counter h2 {
color: #fff;
font-size: 80px;
font-weight: bolder;
letter-spacing: 5px;
margin-top: 30%;
z-index: 4;
}

@media (min-width: 576px) {
.Preload .Counter h2 {
color: #fff;
font-size: 93px;
font-weight: bolder;
letter-spacing: 5px;
margin: 0;
}
}

.Preload p {
position: relative;
left: 0;
right: 0;
margin: 0 auto;
top: 57%;
color: #adfb05;
letter-spacing: 5px;
text-transform: capitalize;
z-index: 4;
}

.Preload ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
position: relative;
top: 58%;
width: 50%;
justify-content: center;
z-index: 4;
}

.Preload li {
color: #fff;
font-size: 50px;
font-weight: bold;
margin: 0 .35%;
text-transform: capitalize;
}

.Preload-other {
position: fixed;
width: 100%;
height: 100vh;
background: #1d1d1d;
left: 0;
top: 0;
z-index: 10;
text-align: center;
padding: 0;
transition: left .55s cubic-bezier(0.8,0,.5,1) 1.1s;
}

.Preload-other:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #adfb05;
z-index: 11;
transition: width .40s cubic-bezier(0.8,0,.5,1) , left .55s cubic-bezier(0.52, 1.64, 0.37, 0.66)
.90s;
}

body.projects.loaded .Preload-other, body.contact.loaded .Preload-other {
left: 100%;
}

body.projects.loaded .Preload-other:before, body.contact.loaded .Preload-other:before {
width: 100%;
left: 100%;
}

@keyframes outline-anim {
0% {
stroke-dashoffset: 1900;
fill: rgba(173,251,5,0);
}
50%{fill: rgba(173,251,5,0);}
75%{fill: rgba(173,251,5,0);}
100% {
stroke-dashoffset: 0;
fill: rgba(173,251,5,1);
}
}

.STK-1 {
fill: rgba(173,251,5,1);
stroke: rgba(173,251,5,1);
stroke-width:5;
stroke-miterlimit: 10;
stroke-dasharray: 1900;
stroke-dashoffset: 0;
-webkit-animation: outline-anim .35s cubic-bezier(.2,.02,.9,.67)  alternate both  1 .2s;
-moz-animation: outline-anim .35s cubic-bezier(.2,.02,.9,.67)  alternate both  1 .2s;
-o-animation: outline-anim .35s cubic-bezier(.2,.02,.9,.67)  alternate both   1 .2s;
animation: outline-anim .35s cubic-bezier(.2,.02,.9,.67)  alternate both   1 .2s;
}


.transition{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
z-index: 15;
pointer-events: none;

}
.block, .block:nth-last-of-type(2){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;    
flex:1;
background-color: #adfb05;
transform-origin: left;
transform: scaleX(1);
will-change: transform;
}
.block:nth-last-of-type(2){background: #000000;}

.vert-title-holder{
    position: absolute;
    width: 20%;
    height: 85vh;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1rem 0 1rem 1rem;
    right: 0;
    pointer-events: none;
    mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
  top: 50%;
    transform: translate(0, -50%);
    z-index: 0;
    flex-direction: column;
    --gap: 2rem;
    gap: var(--gap);
    justify-content: space-around;
    align-items: center;
}
.stock-ticker{
    position: relative;
    /* transform: translateY(100%); */
    animation: vertical-title 30s forwards infinite linear ;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    flex-shrink: 0;
    flex-grow: 1;
}
.vert-title-holder .vert-title{
text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: rgba(29, 29, 29, 1);
    font-size: 8rem;
    font-weight: bolder;
    text-wrap: nowrap;
    /* -webkit-text-stroke: 0.1px rgba(56, 56, 56, .4); */
    text-shadow: 1.41px 1.41px rgba(56, 56, 56, .25), 2px 0 rgba(56, 56, 56, .25), 1.41px -1.41px rgba(56, 56, 56, .25),
    0 -2px rgba(56, 56, 56, .25), -1.41px -1.41px rgba(56, 56, 56, .25), -2px 0 rgba(56, 56, 56, .25),
   -1.41px 1.41px rgba(56, 56, 56, .25), 0 2px rgba(56, 56, 56, .25);
}
.grid-holder{
position: absolute;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
width: 100%;
top: 0;
left: 0;
flex-direction: column;
z-index: auto;

}
/* Grid mask container styles */
.grid-mask {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 350px;
    overflow: hidden;
    /* Ensures content doesn't spill out of mask */
}

/* Top grid mask styles */
.grid-mask.top {
    /* Modern mask, with fallback for Safari/Webkit */
    mask: url("/assets/img/sec-background-top-mask.png") no-repeat center center / 90%;
    -webkit-mask: url("/assets/img/sec-background-top-mask.png") no-repeat center center / 90%; /* Safari/WebKit */
    background: url("/assets/img/sec-background-top-mask.png") no-repeat center center / 90%;  /* Fallback visual */
    top: -2rem;
}

/* Bottom grid mask styles */
.grid-mask.bottom {
    mask: url("/assets/img/sec-background-bottom-mask.png") no-repeat 50% 100% / 90%;
    -webkit-mask: url("/assets/img/sec-background-bottom-mask.png") no-repeat 50% 100% / 90%; /* Safari/WebKit */
    background: url("/assets/img/sec-background-bottom-mask.png") no-repeat 50% 100% / 90%;  /* Fallback visual */
    bottom: -1rem;
}

.eff-block{
width: 100%;
height: 150px;
position: absolute;
background: linear-gradient(180deg, rgba(173,251,5,0), rgba(173,251,5,1), rgba(173,251,5,0));
z-index: 1;
top: 0;
left: 0;
animation: vertical-mask-slide 7s infinite cubic-bezier(.62,.62,.28,.67);
transform: translateY(-100%);

}
.grid-mask.bottom .eff-block {
animation: vertical-mask-slide 7s infinite cubic-bezier(.62,.62,.28,.67) reverse 1.5s;
}

.stripes-wrapper {
    position: absolute;
    width: 110%;
    height: 300%;
    top: 2%;
    left: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 0;
    overflow: hidden;
    flex-direction: row;
    transform-origin: top;
    transform: perspective(472px) rotateX(-60deg);
    -webkit-transform: perspective(472px) rotateX(-60deg);
    will-change: transform;
}
.stripes-wrapper.for-bottom {
    top: auto;
    bottom: -4%;
  transform-origin: bottom;
    transform: perspective(472px) rotateX(-60deg);
    -webkit-transform: perspective(472px) rotateX(60deg);
}
.stripes-wrapper.for-bottom .stripe {
    animation: stripe-anim 5s infinite cubic-bezier(.62,.62,.28,.67) reverse 4s;
    background: -webkit-linear-gradient(top, rgba(173,251,5,0), rgba(173,251,5,1));
   border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}
.stripes-wrapper .stripe {
    position: relative;
    top: 0;
    transform-origin: top;
    /* background:linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.75), rgba(255,255,255,.75)); */
    z-index: 1;
    width: 1px;
    height: 100%;
    animation: stripe-anim 5s infinite cubic-bezier(.62,.62,.28,.67) 2s;
    background: -webkit-linear-gradient(bottom, rgba(173,251,5,0), rgba(173,251,5,1));
   border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
    
}
.stripes-wrapper .stripe:nth-child(2) {
    animation-delay: .1s;
}
.stripes-wrapper .stripe:nth-child(3){
    animation-delay: .3s;
}
.stripes-wrapper .stripe:nth-child(4){
    animation-delay: .5s;
}
.stripes-wrapper .stripe:nth-child(5) {
    animation-delay: .7s;
}
.stripes-wrapper .stripe:nth-child(6) {
    animation-delay: .9s;
}
.stripes-wrapper .stripe:nth-child(7) {
    animation-delay: 1.1s;
}
.stripes-wrapper .stripe:nth-child(8) {
    animation-delay: 1.3s;
}
@keyframes stripe-anim {
0%{
transform: translateY(200%);
}
35%, to {
transform: translateY(-200%);
}
}
@keyframes vertical-mask-slide {
0%{
transform: translateY(200%);
}
33%, to {
transform: translateY(-200%);
}
}
@keyframes vertical-title {

100% {
transform: translateY(-100%);
-webkit-transform:translateY(calc(-100% - var(--gap)));
}
}

@media (min-width: 430px) and (max-width:768px) {
    .grid-holder{display: none;}
    .Projects-Gallery.dark-style{
        top: 1rem;
        min-height: 70%;
        max-width: 100%;
        justify-content: space-evenly !important;
    }
    .swiper{width: 100%;}
    .Contacts-Mob{
        position: relative;
        top: auto;
        bottom: 0;
        margin: 2rem auto;
        height: 55px;
    }
    .swiper-pagination-progressbar{
        position: relative;
        width: 92%;
        margin: 1rem auto;
    }
    .Next-Page{
        position: relative;
        display: flex !important;
        right: auto;
        left: auto;
        margin: 2rem auto;
        top: auto;
        bottom: 0;
        height: 50px;
    }
    .nav-buttons{
        position: relative;
        bottom: auto;
        margin: 1rem auto;
        height: 60px;
    }
}