body {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #0d000e;
    margin: 0;
  }

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

.preloader {
  background: #000;
  width: 100%;
  height: 150vh;
  z-index: 100;
  position: fixed;
  animation: backgroundAnimation 3s linear infinite;
}

.preloader h3 {
  font-family: 'Courier New', Courier, monospace;
  color: white;
  position: relative;
  text-align: center;
  /* left: 48%; */
  top: 45vh;
  width: 100%;
}

.dots::after {
  content: ''; /* Initial empty content */
  display: inline-block;
  animation: dotsAnimation 1200ms infinite steps(5); /* Animate through 5 steps */
}

/* .nav h3 {
  color: #9d4edd;
  opacity: 60%;
  position: fixed;
  margin: 15px 15px;
  transition: 500ms ease;
} */

/*  */
/*  */

/* Navigation Container */
.nav {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: transparent;
  z-index: 10;
}

/* Toggle Symbol */
.nav h3 {
  color: #9d4edd;
  opacity: 60%;
  margin: 15px;
  transition: 500ms ease;
  cursor: pointer;
}

/* Navbar (Hidden by Default) */
.navbar {
  display: none;
  opacity: 0;
  padding: 10px 20px;
  width: 100%;
  display: flex;
  justify-content: center; /* Center the links */
  gap: 25px;               /* Space between links */
  transition: opacity 500ms ease;
}

/* Navbar Links */
.navbar a {
  color: white;
  text-decoration: none;
  transition: color 500ms ease;
}

/* Hover Effect on Links */
.navbar a:hover {
  color: #9d4edd;
}

/* Show Navbar on Hover */
.nav:hover .navbar {
  display: flex;
  opacity: 1;
}


/*  */
/*  */

.container {
  width: 100%;
}

.home {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  padding-left: 10%;
}

.home h1 {
  /* font-size: 45pt; */
  font-size: 3rem;
  background: linear-gradient(90deg, #9d4edd, #3a0ca3);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: fixed;
  transition: transform 0.8s ease-out;
}

.home h1.load {
  transform: translateX(20px);
}

.about {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10%;
  background-color: rgb(255, 255, 255);
  height: 100vh;
  min-height: 500px;
  flex-direction: column;
}


.about h2 {
  /* font-size: 45pt; */
  font-size: 3rem;
  /* color: #000000; */
  background: linear-gradient(90deg, #9d4edd, #3a0ca3);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about p {
  /* font-size: 17pt; */
  font-size: 1.3rem;
  max-width: 700px;
  color: #000000;
  /* font-weight: 320; */
  font-weight: 400;
  z-index: 10;
}

.about a {
  color: #000;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
.about a:visited {
  color: #000;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}


.certs {
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 10%;
  height: 100vh;
}

.certs h2 {
  /* font-size: 45pt; */
  font-size: 3rem;
  color: white;
  padding-right: 7%;
}

.certs p {
  padding-top: 30px;
  /* font-size: 14pt; */
  font-size: 1rem;
}

.certs a {
  color: white;
}

.certs a:visited {
  color: #c7c7c7;
}

.cert-box {
  width: 65%;
  height: 100%;
  background-color: rgba(113, 0, 243, 0);
  flex-direction: column;
  position: relative;
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
}

/* Hide images by default (we'll display one at a time) */
.cert-images {
  display: flex;
  justify-content: center;
  
  transition: transform 0.5s ease-in-out; /* Smooth transition for sliding effect */
}

.cert-image {
  width: 90%;
  height: auto;
  object-fit: contain; /* Ensure the images cover the container area */
  display: none; /* Initially hide all images */
}

/* Display one image at a time */
.cert-images img.active {
  display: flex;
  border-radius: 15px;
  position: absolute;
  margin: 5%;
  transition: 1000ms ease;
}

.cert-images img.active:hover {
  transform: scale(1.01);
}

/* Style for Next and Previous Arrows */
.prev, .next {
  position: absolute;
  top: 50%;
  opacity: 20%;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
  transition: background-color 0.3s;
  transition: opacity 100ms ease;
}

.prev {
  /* left: 530px; */
  left: 0;
}

.next {
  /* right: 90px; */
  right: 0;
}

.prev:hover, .next:hover {
  opacity: 1;
}



.portfolio {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10%;
  background-color: white;
  height: 100vh;
  flex-direction: column;
}


.portfolio h2 {
  font-size: 3.5rem;
  /* color: #000000; */
  background: linear-gradient(90deg, #9d4edd, #3a0ca3);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.portfolio p {
  font-size: 1.5rem;
  max-width: 600px;
  color: #000000;
  font-weight: 320;
}

.portfolio-content {
  display: flex;
  width: 80%;
  max-width: 1200px;
}

.portfolio-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically centers the text */
  text-align: left;
}

.projectList {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Aligns projects to the right */
}

.project {
  width: 300px;   
  background: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 25px;
  transition: 1000ms ease;
  z-index: 10;
}

.project p {
  font-size: 1rem;
}

.project:hover  {
  transform: scale(1.05);
}

.project a {
  display: inline-block;
  width: 100%;
  height: 100%;
  /* padding: 10px 10px 0px 10px; */
  /* margin-top: 30px; */
  text-decoration: none;
}
.project a:visited {
  text-decoration: none;
}



.viewAllBtn {
  display: flex;
  margin-top: 40px;
  margin-right: 70px;
  padding: 10px 20px;
  color: #9d4edd;
  text-decoration: none;
  font-weight: bold;
  opacity: 50%;
  transition: 800ms ease;
}

.viewAllBtn:hover {
  transform: scale(1.05);
  opacity: 1;
}

.learning {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-left: 10%; */
  height: 120vh;
  flex-direction: column;
}

.learning h2 {
  /* font-size: 45pt; */
  font-size: 3rem;
  color: white;
}

.learning p {
  text-align: center;
  font-size: 1.1rem;
  max-width: 500px;
  color: white;
}

.skills {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.skill {
  width: calc(33.33% - 20px);
  background: #e7e7e7;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: 1000ms ease;
}

.skill:hover {
  transform: scale(1.05);
}

.skill img {
  max-width: 150px;
  border-radius: 15px;
}

.contact {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10%;
  background-color: white;
  height: 100vh;
  flex-direction: column;
}


.contact h2 {
  font-size: 3.5rem;
  color: #000000;
}

.contact p {
  font-size: 1.4rem;
  max-width: 600px;
  color: #000000;
  font-weight: 320;
}

.contact .socials {
  font-size: 1.1rem;
  
}

.contact a {
  color: #000;
}
.contact a:visited {
  color: #000;
}

.certs p {
  color: white;
}

/* Scroll Dots Container */
.scroll-dots {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  padding-right: 10px;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

/* Each Dot */
.scroll-dots .dot {
  width: 10px;
  height: 10px;
  background-color: #9d4edd;
  opacity: 0.3; /* Default low opacity */
  border-radius: 50%;
  transition: opacity 500ms ease, transform 500ms ease;
}

.scroll-dots .dot:hover {
  cursor: pointer;
}

/* Active Dot */
.scroll-dots .dot.active {
  opacity: 1; /* Fully visible */
  background-color: rgb(226, 146, 255);
  transform: scale(1.3); /* Slightly larger for emphasis */
}


@keyframes dotsAnimation {
    0% { content: '...'; }          /* No dots */
    20% { content: '....'; }        /* 1 dot */
    40% { content: '.....'; }       /* 2 dots */
    60% { content: ''; }      /* 3 dots */
    80% { content: '.'; }     /* 4 dots */
    100% { content: '..'; }   /* 5 dots */
}
    
@keyframes backgroundAnimation {
    0%  {background-color: #000}
    50%  {background-color: #0d000e}
    100%  {background-color: #000;}
  }
  
@media (max-width: 768px) {  /* For tablets */


  .home {
    padding-left: 0;
  }
  
  .home h1 {
    font-size: 28pt;
    text-align: center;
    line-height: 120vw;
    padding: 0 10px;
  }
  .navbar {
    flex-direction: column; /* Stack navbar links vertically */
  }
  /* .project {
    padding: 10px;
  } */

  .about h2 {
    font-size: 35pt;
  }

  .about p {
    font-size: 12pt;
    max-width: 85%;
  }

  .scroll-dots {
    right: 10px;
  }

  .certs {
    flex-direction: column;
    padding-left: 0;
  }

  .certs h2 {
    font-size: 30pt;
    margin-top: 60%;
    text-align: center;
  }
  
  .certs p {
    padding: 10px 0 10px 0;
    font-size: 11pt;
    text-align: center;
  }

  .cert-box {
    width: 80%;
  }

  .prev, .next {
    top: 55%;
  }

  .portfolio {
    height: 140vh;
  }

  .portfolio h2 {
    font-size: 35pt;
  }
  
  .portfolio p {
    font-size: 13pt;
  }

  .portfolio-content {
    flex-direction: column;
  }

  .project {
    width: 80%;
  }

  .project h3 {
    font-size: 15pt;
  }

  .project p {
    font-size: 12pt;
  }

  .projectList {
    margin-top: 30px;
  }


  .skill {
    width: 30%;
  }

  .skill img {
    max-width: 70%;
  }

  .learning h3 {
    font-size: 13pt;
  }

  .learning h2 {
    font-size: 30pt;
    text-align: center;
  }

  .learning p {
    font-size: 11pt;
    max-width: 75%;
  }

  .contact h2 {
    font-size: 35pt;
  }

  .contact p {
    font-size: 13pt;
    max-width: 80%;
  }

  .contact .socials {
    font-size: 13pt;
  }


}


@media (max-width: 480px) {  /* For smartphones */
  
  /* body {
    margin: 0;
  } */

  .home {
    padding-left: 0;
  }
  
  .home h1 {
    font-size: 28pt;
    text-align: center;
    line-height: 120vw;
    padding: 0 10px;
  }
  .navbar {
    flex-direction: column; /* Stack navbar links vertically */
  }
  /* .project {
    padding: 10px;
  } */

  .about h2 {
    font-size: 35pt;
  }

  .about p {
    font-size: 12pt;
    max-width: 85%;
  }

  .scroll-dots {
    right: 10px;
  }

  .certs {
    flex-direction: column;
    padding-left: 0;
  }

  .certs h2 {
    font-size: 30pt;
    margin-top: 60%;
    text-align: center;
  }
  
  .certs p {
    padding: 10px 0 10px 0;
    font-size: 11pt;
    text-align: center;
  }

  .cert-box {
    width: 80%;
  }

  .prev, .next {
    top: 55%;
  }

  .portfolio {
    height: 140vh;
  }

  .portfolio h2 {
    font-size: 35pt;
  }
  
  .portfolio p {
    font-size: 13pt;
  }

  .portfolio-content {
    flex-direction: column;
  }

  .project {
    width: 80%;
  }

  .project h3 {
    font-size: 15pt;
  }

  .project p {
    font-size: 12pt;
  }

  .projectList {
    margin-top: 30px;
  }

  .viewAllBtn {
    margin-right: 30px;
  }

  .skill {
    width: 30%;
  }

  .skill img {
    max-width: 70%;
  }

  .learning h3 {
    font-size: 13pt;
  }

  .learning h2 {
    font-size: 30pt;
    text-align: center;
  }

  .learning p {
    font-size: 11pt;
    max-width: 75%;
  }

  .contact h2 {
    font-size: 35pt;
  }

  .contact p {
    font-size: 13pt;
    max-width: 80%;
  }

  .contact .socials {
    font-size: 13pt;
  }

}