@font-face {
  font-family: 'Gegola';
  src: url('/fonts/Gegola.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  
}


.titlename{
  size-adjust: inherit;
}
.intro-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.intro {
  position: relative;
  max-width: 800px;
  width: 100%;
}

.heading-name {
  font-family: 'Gegola', sans-serif;
  font-size: clamp(2rem, 6vw, 4rem); 
  color: #e2aac6;
  margin: 0 0 20px 0;
  white-space: normal; 
}


.summary-and-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2vw; 
  margin-top: 20px;
}






.intro-text {
  font-family: 'Gegola', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: #e2aac6;
  margin: 0;
  line-height: 1.5;
}




.social-inline a img {
  width: 6vw;  
  max-width: 40px;   
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.project-card a:hover{
  color:#FF2D95;
  
  
}

.project-card a {
  text-decoration: none;
}


.social-inline a:hover img {
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px #FF2D95);
}


.view-more-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 25px;
  font-size: 1rem;
  font-weight: bold;
  color: #e2aac6;
  border: 2px solid #e2aac6;
  border-radius: 12px;
  margin-top: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}


.view-more-box:hover {
  color: #FF2D95;
  border-color: #FF2D95;
  transform: translateY(-5px);
}


@media (max-width: 768px) {
  .heading-name {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
  }
  .intro-text {
    font-size: clamp(0.9rem, 3vw, 1rem);
  }
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
 background: rgba(0,0,0,0.7);
  padding: 8px 0;
  text-align: center;
  transition: all 0.3s ease;
  z-index: 1000;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

nav ul li a {
  color: #e2aac6;
  text-decoration: none;
  font-weight: bold;
}


nav ul li a:hover {
  color: #FF2D95;
}



.hidden-nav {
  transform: translateY(-100%);
  opacity: 0;
}

.show-nav {
  transform: translateY(0);
  opacity: 1;
}

.tech-icons {
  display: flex;
  flex-wrap: wrap;          
  justify-content: center;  
  gap: 1.5rem;
  margin-top: 30px;
}

.tech-icons img {
  width: 10vw;            
  max-width: 10vh;
  height: auto;             
  transition: transform 0.2s ease;
}

.tech-icons img:hover {
  transform: scale(1.4);    
}



html {
  scroll-behavior: smooth;
}

.social-inline {
  display: flex;
  gap: 0.9vw;   
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.social-inline a {
  font-size: initial; 
}

.social-inline a img {
  display: block; 
  width: 6vw;
  max-width: 40px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}


.about-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh; 
  padding: 60px 10%;
  color: #fff; 
}

.about-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.about-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1000px;
}



#projects,
#about {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 60px 10%;
  color: #fff; 
  text-align: center; 
}


#projects h2,
#about h2 {
  font-size: 2rem;
  margin-bottom: 1rem; 
  text-align: center;
}


.project-details,
.about-me {
  max-width: 800px; 
  line-height: 1.7;
  font-size: 1.1rem;
  margin: 0 auto 2rem auto;
}

.tech-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tech-icons img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}



.tech-icons img:hover {
  transform: scale(1.1);
}





.flashing-logo{
  position: absolute;
  top: -24px;
  left: 10px;
  z-index: 900;
}
.flashing-logo img{
  width: 170px;
  height: auto;
}



.intro::before,
.intro::after {
  content: "";
  position: absolute;
  width: 60px;   /* horizontal length of corner line */
  height: 60px;  /* vertical length of corner line */
  border: 1px solid #e2aac6;
}

.intro::before {  
  top:-20px;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.intro::after {   
  bottom: 15px;
  right: -30px;
  border-left: none;
  border-top: none;
}

.project-timeline {
  display: flex;
  flex-direction: column;
  gap: 30px; 
}

.project-card h3 {
  margin-top: 0;
  font-size: larger;
}




a{
  color:#e2aac6 ;
}





/* gradient background*/
body {
  margin: 0;
  color: #fff;
  background-color: #000;
  padding: 0;
  font-family: 'Gegola', sans-serif;

}

  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: blur(196px);
    z-index: -10;
  }

  .gradient {
    position: absolute;
    border-radius: 100%;
    opacity: 1;
    mix-blend-mode: screen;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
  }

  
.gradient-1 {
background: rgb(31, 5, 5) none repeat scroll 0% 0% / auto padding-box border-box;
width: 700px;
height: 700px;
animation-duration: 8s;
opacity: 1;
left: 60%;
top: 40%;
z-index: -2;
animation-name: animation-gradient-1;
}
.gradient-2 {
background: rgb(78, 95, 78) none repeat scroll 0% 0% / auto padding-box border-box;
width: 600px;
height: 600px;
animation-duration: 8s;
opacity: 1;
left: 40%;
top: 60%;
z-index: -1;
animation-name: animation-gradient-2;
}
.gradient-3 {
background: rgb(255, 0, 76) none repeat scroll 0% 0% / auto padding-box border-box;
width: 500px;
height: 500px;
animation-duration: 8s;
opacity: 1;
left: 50%;
top: 50%;
z-index: -3;
animation-name: animation-gradient-3;
}

  @keyframes animation-gradient-1 {
    0% {
      transform: translateY(-50%) translateX(-50%) rotate(-20deg) translateX(20%);
    }
    25% {
      transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg)
        rotate(80deg) translateX(30%);
    }
    50% {
      transform: translateY(-50%) translateX(-50%) rotate(180deg) translateX(25%);
    }
    75% {
      transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg)
        rotate(240deg) translateX(15%);
    }
    100% {
      transform: translateY(-50%) translateX(-50%) rotate(340deg) translateX(20%);
    }
  }
  
  @keyframes animation-gradient-2 {
    0% {
      transform: translateY(-50%) translateX(-50%) rotate(40deg) translateX(-20%);
    }
    25% {
      transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg)
        rotate(110deg) translateX(-5%);
    }
    50% {
      transform: translateY(-50%) translateX(-50%) rotate(210deg) translateX(-35%);
    }
    75% {
      transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg)
        rotate(300deg) translateX(-10%);
    }
    100% {
      transform: translateY(-50%) translateX(-50%) rotate(400deg) translateX(-20%);
    }
  }
  
  @keyframes animation-gradient-3 {
    0% {
      transform: translateY(-50%) translateX(-50%) translateX(-15%)
        translateY(10%);
    }
    20% {
      transform: translateY(-50%) translateX(-50%) translateX(20%)
        translateY(-30%);
    }
    40% {
      transform: translateY(-50%) translateX(-50%) translateX(-25%)
        translateY(-15%);
    }
    60% {
      transform: translateY(-50%) translateX(-50%) translateX(30%) translateY(20%);
    }
    80% {
      transform: translateY(-50%) translateX(-50%) translateX(5%) translateY(35%);
    }
    100% {
      transform: translateY(-50%) translateX(-50%) translateX(-15%)
        translateY(10%);
    }
}