@import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');


/* CSS Variables for Theme Colors and Fonts */
:root {
  --primary-color: #3498db;
  --secondary-color: #cc2eb7;
  --background-color: #2b2b2b;
  --text-color: #ffffff;
  --font-family: "Roboto Mono", monospace;
}


.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #00ddeb, #5b42f3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #00ddeb, 0 0 20px #5b42f3, 0 0 30px #af40ff;
}

.skils-tit{
  margin-bottom: 2rem;
}
.cursor-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #00ddeb, #5b42f3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease-out;
}



.loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  
  text-align: center;
  z-index: 9999;
  transition: opacity 5s ease, visibility 3s ease;
}

.loader-text {
  font-size: 5rem;
  background: linear-gradient(90deg, #af40ff, #5b42f3, #00ddeb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Jersey 15", sans-serif;
  font-weight: 300;
}

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
  width: 100%;
}



body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents scrollbars */
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* Behind your main content but visible */
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(10vw);
    opacity: 0;
  }
}



/* Header */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: transparent;
  z-index: 10;
}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  margin: 1rem;
}

header nav ul li {
  margin-right: 2rem;
}

header nav ul li a {
  color: var(--text-color);
  font-family: "Jersey 15", sans-serif;
  font-size: 1.3rem;
  text-decoration: none;
  padding: 1rem 0.5rem;
  transition: all 0.3s ease;
}

header nav ul li a:hover {
  color: var(--primary-color);
  text-shadow: 0 0 5px var(--primary-color),
               0 0 10px var(--primary-color),
               0 0 20px var(--primary-color),
               0 0 40px var(--primary-color);
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}

.corner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 30rem;
  z-index: 0;
}

.hero-text {
  position: absolute;
  color: var(--text-color);
  font-family: "Jersey 15", sans-serif;
  font-size: 5rem;
  text-align: left;
  left: 13rem;
  top: 12rem;
}

.hero-text p {
  margin: 0;
  padding: 0;
}

/* Button */
button {
  align-items: center;
  background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  border: 0;
  border-radius: 25px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  color: #ffffff;
  display: flex;
  font-size: 18px;
  justify-content: center;
  line-height: 1em;
  min-width: 140px;
  padding: 3px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 2.5rem;
}

button a {
  background-color: var(--background-color);
  padding: 16px 24px;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: 300ms;
}

button:hover a {
  background: none;
}

button:active {
  transform: scale(0.9);
}

/* Robot / Spline Viewer */
.robot {
  position: absolute;
  width: 65rem;
  height: 50rem;
  right: -12%;
  overflow: visible;
}

/* Socials */
.socials-container {
  position: absolute;
  left: 7rem;
  top: 30rem;
}

.socials-container a {
  text-decoration: none;
  display: block;
  padding: 1rem 0;
}

.socials-container a svg {
  width: 3rem;
  height: 3rem;
}

.socials-container a:hover svg path {
  fill: var(--accent-color);
}

.circle-scroll {
  position: absolute;
  bottom: 2rem;
  width: 20rem;
  height: 20rem;
  top: 50rem;
  right: -10%;
  will-change: transform;
  transition: transform 0.1s linear;
  pointer-events: none;
  z-index: 1;
}

.left{
  position: absolute;
  bottom: 2rem;
  width: 20rem;
  height: 20rem;
  top: 95rem;
  left: -10%;
  will-change: transform;
  transition: transform 0.1s linear;
  z-index: 10;
}




/* About Me */
.aboutme {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20rem;
  align-items: center;
  justify-content: center;
  padding: 6rem;
  text-align: center;
  background: linear-gradient(-45deg, #3498db, #cc2eb7, #00ddeb, #af40ff);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;

  
}



@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.aboutme p {
  font-size: 1.5rem;
  color: var(--text-color);
  max-width: 800px;
  line-height: 1.5;
  font-family: var(--font-family);
}
* h1 {
  font-size: 4rem;
  color: var(--text-color);
  margin-bottom: 1rem;
}

.aboutme .small-text{
  font-size: 1rem;
  font-style: italic;
}

.hero .small-text{
  font-size: 1rem;
  font-style: normal;
  margin-top: 1rem;
  font-family: var(--font-family);
}

.Skills {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 6rem;
  color: var(--text-color);
  
}


.skills-box{
    width: 100%;
    height: 90vh;
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
}


.Designer{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: start;
    top: 25%;
    left: 10%;
    max-width: 400px;
}

.skills-box h1{
    font-size: 50px;
    display: flex;
    align-items: center;
}

.skills-box p{
    line-height: 23px;
}


.coder{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: start;
    top: 25%;
    right: 10%;
    max-width: 400px;
    margin-bottom: 3rem;
}

.skills-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 4rem;
}

.slider-track {
  display: flex;
  width: calc(200px * 14); /* Adjust depending on slides count */
  animation: scrollSlider 30s linear infinite;
}

.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--font-family);
}

.slide span {
  font-size: 3rem; /* Adjust or use image sizes */
  margin-bottom: 0.5rem;
}

.slide svg {
  width: 3.5rem; /* Adjust or use image sizes */
  height: 3.5rem; /* Adjust or use image sizes */
}
.slide p {
  font-size: 1rem;
  color: #ccc;
}

@keyframes scrollSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.skills-slider {
  overflow-x: auto;
  cursor: grab;
}

.skills-slider.active {
  cursor: grabbing;
}

.skills-slider::-webkit-scrollbar {
  display: none; /* optional: hide scrollbar */
}

.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.contact-me {
  width: 100%;
  padding: 6rem;
  background-color: #1e1e1e;
  text-align: center;
}

.contact-me form {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.contact-me input,
.contact-me textarea {
  padding: 1rem;
  margin: 0.5rem 0;
  border: none;
  border-radius: 10px;
  font-family: var(--font-family);
}

.contact-me button {
  padding: 1rem;
  border: none;
  border-radius: 25px;
  background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.3s;
}

.contact-me button:hover {
  opacity: 0.9;
}

.Degrees-Certifications {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 6rem;
  color: var(--text-color);
}

.education{
  margin-top: 2rem;
  width: 100%;
  display: flex;
  flex-direction: start;
  position: relative;
  align-items: center;
  justify-content: center;

}

.logo-uni {
  width: 300px;
  height: 300px;
  margin-right: 2rem;
}

.edutext{
  margin: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  width: 50%;
}

.edutext span {
  font-weight: bold;
  background: linear-gradient(90deg, #af40ff, #5b42f3, #00ddeb);
  font-size: 1.3rem;
}


.projects {
  margin-top: 3rem;
  width: 100%;
  padding: 4rem 0;
  color: #fff;
  text-align: center;
  overflow-x: hidden;
}



.projects h1 {
 
  margin-bottom: 4rem;
}
.projects-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 60px; /* Space for arrows */
}

.projects-slider {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  padding: 20px 0;
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  width: 31.25rem;
  margin: 0 15px;
  font-size: 0.9rem;
  line-height: 1.6;
  background: #333;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px #5b42f3;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0.6;
  flex-shrink: 0;
  margin: 2rem;
}

.project-card.active {
  transform: scale(1.1);
  opacity: 1;
}

.arrow {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}


.project-image {
  max-width: 27rem;
  margin: 2rem;
}

.project-app{
  margin-top: 1rem;
  max-width: 20rem;

}

.projects-slider :nth-child(2) {
  padding-bottom: 0;
}



.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}



.end{
  width: 100%;
  text-align: center;
  background-color: #1e1e1e;
  padding-bottom: 2rem;
}






@media (max-width: 1100px) {
  .hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 text-align: center;

 left: 0rem;

}
  .robot {
    position: relative;
  top: 9rem;
  right: 0;
  left: 1rem;
}

.aboutme{
  margin-top: 47rem;
}


.circle-scroll {
  top: 70rem;
  right: -15%;
}

.left {
  top: 115rem;
  left: -15%;
}

.Designer{
    left: 5%;
    max-width: 300px;
}
.coder{
    right: 5%;
    max-width: 300px;
}
.skills-slider{
  margin-top: 9rem;
}



}



@media (max-width: 857px) {
   .skills-box{
    align-items: center;
    flex-direction: column;
   }
   .Designer{
    
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    left: 0;
    max-width: 30rem;
    text-align: center;
    margin-top: 9rem;
}

.skills-box h1{
  background: linear-gradient(90deg, #af40ff, #5b42f3, #00ddeb);
    font-size: 50px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.skills-box p{
    line-height: 23px;
}


.coder{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    top: 0;
    right: 0;
    max-width: 30rem;
    margin-top: 2rem;
}




.education{

  flex-direction: column-reverse;


}


.edutext{
  margin: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  width: 100%;
}

.logo-uni{
  margin-right: 0rem;
}



.left{
  top: 120rem;
}
}


@media (max-width:775px){

  nav ul {
    display: none !important;
    flex-direction: column;
    background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
    border-radius: 20px;
    position: absolute;
    top: 100%;
    right: 0;
    width: 16rem;
    padding: 1rem;
  }


  nav ul li {
    margin: 1rem 0;
    font-size: 2rem;

  }
  nav ul.show {
    display: flex !important;
  }

  .menu-toggle {
    display: block;
  }

  .Degrees-Certifications h1{
    text-align: center;
    width: 100%;
  }


  /* Socials */
.socials-container {
  display: flex;
  position: relative;
  left: 0rem;
  top: 0rem;
  margin-top: 12rem;
}

.socials-container a {
  text-decoration: none;
  display: block;
  padding: 1rem;
}

.socials-container a svg {
  width: 3rem;
  height: 3rem;
}

.socials-container a:hover svg path {
  fill: var(--accent-color);
}

  .robot {
  position: relative;
  top: -6%;
  right: 0rem;
  left: 1rem;
}

.circle-scroll {
  width: 15rem;
  height: 15rem;
  top: 75rem;
}

.left{

  width: 15rem;
  height: 15rem;
  top: 120rem;
  
}

.aboutme p {
  font-size: 1rem;
  color: var(--text-color);
  max-width: 800px;
  line-height: 1.5;
  font-family: var(--font-family);
  margin-top: 4rem;
}



}


@media (max-width:596px){
.hero-text {

 font-size: 3.5rem;

}



.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: min-content;
  width: 31.25rem;
  margin: 0 15px;
  font-size: 0.9rem;
  line-height: 1.6;
  background: #333;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px #5b42f3;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0.6;
  flex-shrink: 0;
  margin: 2rem;
}

.arrow {
  font-size: 2rem;
  
}

.left-arrow {
  left: 0rem;
}

.right-arrow {
  right: 0rem;
}


.project-image {
  max-width: 20rem;
  margin: 2rem;
}

.project-app{
  margin-top: 1rem;
  max-width: 13rem;

}
.Skills h1{
  margin-bottom: 2rem;
}
.slider-track{
position: relative;
 margin-top: 10rem;
}


.edutext{

  margin: 2rem;
  font-size: 1rem !important;
  line-height: 1.5;
  width: 100%;
}

.skils-tit{
  top: 0;
  position: relative;
}

.Designer{
  position: relative;
  top: 3rem;
}
.coder{
  position: relative;
  top: 3rem;
}
}


@media (max-width:440px){
  .hero-text {

 font-size: 3rem;

}
.hero .small-text{
  font-size: 0.7rem;
  font-style: normal;
  margin-top: 1rem;
  font-family: var(--font-family);
}

.aboutme{
  margin-top: 35rem;
}


.circle-scroll {
  width: 13rem;
  height: 13rem;
  top: 63rem;
}




.aboutme p {
  font-size: 0.8rem;
  color: var(--text-color);
  max-width: 100%;
  line-height: 1.5;
  font-family: var(--font-family);
  margin-top: 0rem;
}

.left{
width: 13rem;
  height: 13rem;
  top: 105rem;
  
}


* h1 {
  font-size: 3rem;
  margin-bottom: 1rem;

}

.projects {
  padding: 0rem;
  
  width: 100%;
  max-width: 440px;
  margin: 3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.projects-wrapper {
  position: relative;
  width: 31rem;
  padding: 0 0px;
}

.projects-slider {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  /* Hide scrollbars */
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-left: 2.6rem;
  margin-right: 2.6rem;

}

.projects-slider::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0px;
  box-sizing: border-box;
  min-width: 10rem;
  max-width: 24rem;

  transition: none;
  opacity: 1;
  flex-shrink: 0;
  margin: 0 2.6rem;


}

.project-card.active {
  transform: none;
}


.project-image {
  max-width: 20rem;
  height: auto;
  margin: 1rem;
  object-fit: contain;
}

.project-app{
  max-width: 20rem;
  height: auto;
  object-fit: contain;

}

.arrow {
  display: none; /* Hide arrows on mobile */
}

.Skills {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  
}

.skils-tit{
   margin-bottom: 5rem;

}


.skills-box{
    width: 100%;
    height: max-content;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: center;
}


.Designer{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0%;
    left: 0%;
    max-width: max-content;
    margin: 3rem 0;
}

.skills-box h1{
    font-size: 50px;
    display: flex;
    align-items: center;
    text-align: center;
}

.skills-box p{
    line-height: 23px;
}


.coder{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0%;
    right: 0%;
    max-width: max-content;
    margin-bottom: 0rem;
}

.skills-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0rem;
}





.slide p {
  font-size: 1rem;
  color: #ffffff;
}



.loader-text {
  font-size: 2rem;
  
}

.Degrees-Certifications {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--text-color);
}

.education{
  margin-top: 2rem;
  width: 100%;
  display: flex;
  flex-direction: start;
  position: relative;
  align-items: center;
  justify-content: center;

}

.logo-uni {
  width: 270px;
  height: 270px;
  margin-right: 0rem;
  margin-bottom: 2rem;
}

.edutext{
  margin: àrem;
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
}

.edutext span {
  font-weight: bold;
  background: linear-gradient(90deg, #af40ff, #5b42f3, #00ddeb);
  font-size: 1rem;
}


.contact-me {
  width: 100%;
  padding: 1rem;
  background-color: #1e1e1e;
  text-align: center;
}



}