*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body{

  background:
  radial-gradient(circle at top left,#111827 0%,#050816 45%),
  #050816;

  color:white;

  font-family:'Inter',sans-serif;

  overflow-x:hidden;
}

/* BACKGROUND */

body::before{

  content:'';

  position:fixed;

  width:100%;
  height:100%;

  background-image:
  radial-gradient(rgba(139,92,246,.15) 1px, transparent 1px);

  background-size:40px 40px;

  opacity:.35;

  z-index:-1;
}

/* CURSOR GLOW */

.cursor-glow{

  width:250px;
  height:250px;

  background:rgba(139,92,246,.15);

  position:fixed;

  border-radius:50%;

  filter:blur(80px);

  pointer-events:none;

  transform:translate(-50%,-50%);

  z-index:-1;
}

/* NAVBAR */

nav{

  width:92%;

  position:fixed;

  top:20px;
  left:50%;

  transform:translateX(-50%);

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 40px;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:20px;

  backdrop-filter:blur(16px);

  z-index:1000;
}

/* LOGO */

.logo{

  font-size:32px;

  font-family:'Space Grotesk',sans-serif;

  font-weight:700;

  letter-spacing:2px;

  padding:10px 18px;

  border-radius:14px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(139,92,246,.4);

  box-shadow:
  0 0 20px rgba(139,92,246,.35);

  cursor:pointer;

  transition:.4s;
}

.logo span{

  color:#8b5cf6;
}

.logo:hover{

  transform:translateY(-4px);

  box-shadow:
  0 0 25px #8b5cf6,
  0 0 60px rgba(59,130,246,.5);
}

/* NAV LINKS */

nav ul{

  display:flex;

  gap:40px;

  list-style:none;
}

nav a{

  text-decoration:none;

  color:#d1d5db;

  font-size:16px;

  position:relative;

  transition:.3s;
}

nav a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:#8b5cf6;

  transition:.4s;
}

nav a:hover{

  color:white;
}

nav a:hover::after{

  width:100%;
}

/* SOCIAL BAR */

.social-bar{

  position:fixed;

  right:25px;
  top:50%;

  transform:translateY(-50%);

  display:flex;
  flex-direction:column;

  gap:20px;

  z-index:1000;
}

.social-bar a{

  width:55px;
  height:55px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:18px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

  color:white;

  font-size:22px;

  transition:.4s;
}

.social-bar a:hover{

  transform:translateY(-5px);

  color:#8b5cf6;

  border-color:#8b5cf6;

  box-shadow:
  0 0 30px rgba(139,92,246,.35);
}

/* HERO */

.hero{

  min-height:100vh;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:160px 8% 80px;
}

.hero-left{

  max-width:650px;

  z-index:10;
}

.small-text{

  color:#8b5cf6;

  font-size:22px;

  margin-bottom:15px;
}

/* NAME */

.hero-left h2{

  font-size:105px;

  font-family:'Space Grotesk',sans-serif;

  line-height:1;

  margin-bottom:20px;

  background:
  linear-gradient(
  to right,
  #ffffff,
  #c084fc,
  #60a5fa
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

/* TYPING */

.typing{

  color:#60a5fa;

  border-right:3px solid #8b5cf6;

  padding-right:6px;

  animation:blink .8s infinite;
}

@keyframes blink{

  50%{
    border-color:transparent;
  }
}

.hero-left h3{

  font-size:30px;

  margin-bottom:25px;

  min-height:50px;
}

/* DESCRIPTION */

.desc{

  color:#bcbcbc;

  font-size:18px;

  line-height:1.8;

  max-width:600px;
}

/* BUTTONS */

.buttons{

  margin-top:40px;

  display:flex;

  gap:20px;
}

button{

  padding:16px 36px;

  border:none;

  border-radius:14px;

  background:
  linear-gradient(135deg,#8b5cf6,#3b82f6);

  color:white;

  font-size:16px;
  font-weight:600;

  cursor:pointer;

  transition:.4s;
}

button:hover{

  transform:translateY(-6px);

  box-shadow:
  0 0 25px #8b5cf6,
  0 0 60px rgba(59,130,246,.8);
}

.outline{

  background:transparent;

  border:2px solid #8b5cf6;
}

/* STATS */

.stats{

  margin-top:50px;

  display:flex;

  gap:25px;
}

.card{

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  padding:22px 28px;

  border-radius:20px;

  backdrop-filter:blur(12px);

  transition:.4s;
}

.card:hover{

  transform:translateY(-10px);

  border-color:#8b5cf6;

  box-shadow:
  0 0 30px rgba(139,92,246,.4);
}

.card h4{

  font-size:28px;

  color:#8b5cf6;

  margin-bottom:8px;
}

/* RIGHT */

.hero-right{

  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;
}

.glow-circle{

  width:520px;
  height:520px;

  border-radius:50%;

  background:
  radial-gradient(circle,
  rgba(139,92,246,.9),
  rgba(59,130,246,.7),
  transparent);

  filter:blur(70px);

  animation:glow 5s ease-in-out infinite;
}

.profile-img{

  position:absolute;

  width:420px;
  height:500px;

  object-fit:cover;
  object-position:center top;

  border-radius:35px;

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
  0 0 60px rgba(139,92,246,.7),
  0 0 160px rgba(59,130,246,.35);

  transition:.5s;

  animation:float 4s ease-in-out infinite;
}

.profile-img:hover{

  transform:scale(1.04);
}

/* ANIMATION */

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-18px);
  }

  100%{
    transform:translateY(0px);
  }
}

@keyframes glow{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }
}

/* TERMINAL */

.terminal{

  padding:50px 8%;
}

.terminal-box{

  max-width:900px;

  margin:auto;

  background:#0b1220;

  border:1px solid rgba(139,92,246,.3);

  border-radius:24px;

  padding:40px;

  font-family:monospace;

  line-height:2.2;

  color:#60a5fa;

  box-shadow:
  0 0 40px rgba(139,92,246,.2);
}

/* SECTION TITLE */

.section-title{

  font-size:55px;

  text-align:center;

  margin-bottom:70px;

  font-family:'Space Grotesk',sans-serif;

  background:
  linear-gradient(to right,#ffffff,#8b5cf6);

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

/* PROJECTS */

.projects{

  padding:120px 8%;
}

.project-container{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:35px;
}

.project-card{

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  border-radius:30px;

  padding:35px;

  backdrop-filter:blur(15px);

  transition:.5s;
}

.project-card:hover{

  transform:translateY(-12px);

  border-color:#8b5cf6;

  box-shadow:
  0 0 40px rgba(139,92,246,.3);
}

.project-content h3{

  font-size:30px;

  margin-bottom:18px;

  color:#8b5cf6;
}

.project-content p{

  color:#c7c7c7;

  line-height:1.8;

  margin-bottom:25px;
}

/* TAGS */

.tags{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-bottom:30px;
}

.tags span{

  padding:10px 18px;

  border-radius:30px;

  background:rgba(139,92,246,.15);

  border:1px solid rgba(139,92,246,.3);

  font-size:14px;
}

/* SKILLS */

.skills{

  padding:120px 8%;
}

.skills-container{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(170px,1fr));

  gap:25px;
}

.skill-card{

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  border-radius:24px;

  padding:30px 20px;

  text-align:center;

  backdrop-filter:blur(15px);

  transition:.4s;
}

.skill-card:hover{

  transform:
  translateY(-10px)
  scale(1.03);

  border-color:#8b5cf6;

  box-shadow:
  0 0 35px rgba(139,92,246,.35);
}

.skill-card img{

  width:65px;
  height:65px;

  margin-bottom:18px;
}

/* ABOUT */

.about{

  padding:120px 8%;
}

.about-box{

  max-width:900px;

  margin:auto;

  padding:50px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  border-radius:30px;

  backdrop-filter:blur(15px);
}

.about-box p{

  text-align:center;

  line-height:2;

  color:#d1d1d1;

  font-size:20px;
}

/* CONTACT */

.contact{

  padding:120px 8%;
}

.contact-container{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:30px;
}

.contact-card{

  width:220px;

  padding:35px;

  border-radius:24px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  text-decoration:none;

  color:white;

  text-align:center;

  transition:.4s;
}

.contact-card:hover{

  transform:translateY(-10px);

  border-color:#8b5cf6;

  box-shadow:
  0 0 35px rgba(139,92,246,.3);
}

.contact-card i{

  font-size:40px;

  margin-bottom:20px;

  color:#8b5cf6;
}

/* FOOTER */

footer{

  padding:40px;

  text-align:center;

  border-top:
  1px solid rgba(255,255,255,.08);

  color:#9ca3af;
}

/* REVEAL */

.reveal{

  opacity:0;

  transform:translateY(60px);

  transition:1s;
}

.reveal.active{

  opacity:1;

  transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width:1100px){

  .hero{

    flex-direction:column-reverse;

    text-align:center;

    gap:70px;
  }

  .stats{

    justify-content:center;
  }

  .buttons{

    justify-content:center;
  }

  .hero-left h2{

    font-size:70px;
  }
}

@media(max-width:700px){

  nav{

    width:95%;

    flex-direction:column;

    gap:20px;

    padding:20px;
  }

  nav ul{

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;
  }

  .hero-left h2{

    font-size:52px;
  }

  .profile-img{

    width:260px;
    height:320px;
  }

  .glow-circle{

    width:300px;
    height:300px;
  }

  .social-bar{

    display:none;
  }

}
.social-bar{

  position:fixed;

  right:25px;
  top:50%;

  transform:translateY(-50%);

  display:flex;
  flex-direction:column;

  gap:20px;

  z-index:1000;
}

.social-bar a{

  width:58px;
  height:58px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:18px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(12px);

  transition:.4s;
}

/* SOCIAL BAR */

.social-bar{

  position:fixed;

  right:25px;
  top:50%;

  transform:translateY(-50%);

  display:flex;
  flex-direction:column;

  gap:20px;

  z-index:1000;
}

.social-bar a{

  width:58px;
  height:58px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:18px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(12px);

  transition:.4s;
}

.social-bar a:hover{

  transform:
  translateY(-6px)
  scale(1.05);

  border-color:#8b5cf6;

  box-shadow:
  0 0 35px rgba(139,92,246,.35);
}

.social-bar img{

  width:28px;
  height:28px;

  object-fit:contain;
}

/* CONTACT SECTION */

.contact{

  padding:120px 8%;
}

.contact-container{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:30px;
}

.contact-card{

  width:220px;

  padding:35px;

  border-radius:24px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  text-decoration:none;

  color:white;

  text-align:center;

  transition:.4s;

  backdrop-filter:blur(15px);
}

.contact-card:hover{

  transform:translateY(-10px);

  border-color:#8b5cf6;

  box-shadow:
  0 0 35px rgba(139,92,246,.3);
}

.contact-card i{

  font-size:40px;

  margin-bottom:20px;

  color:#8b5cf6;
}

.contact-card p{

  font-size:18px;

  font-weight:600;
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media(max-width:1200px){

  .hero{

    gap:60px;
  }

  .hero-left h2{

    font-size:82px;
  }

  .profile-img{

    width:360px;
    height:430px;
  }

}

/* TABLET */

@media(max-width:992px){

  nav{

    width:95%;

    padding:18px 25px;
  }

  nav ul{

    gap:25px;
  }

  .hero{

    flex-direction:column-reverse;

    justify-content:center;

    text-align:center;

    gap:80px;

    padding:
    180px 8% 100px;
  }

  .hero-left{

    max-width:100%;
  }

  .hero-left h2{

    font-size:70px;
  }

  .hero-left h3{

    font-size:24px;
  }

  .buttons{

    justify-content:center;
  }

  .stats{

    justify-content:center;

    flex-wrap:wrap;
  }

  .hero-right{

    width:100%;
  }

  .profile-img{

    width:320px;
    height:390px;
  }

  .glow-circle{

    width:380px;
    height:380px;
  }

  .social-bar{

    display:none;
  }

  .section-title{

    font-size:44px;
  }

}

/* MOBILE */

@media(max-width:768px){

  nav{

    flex-direction:column;

    gap:18px;

    padding:18px;
  }

  nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;
  }

  nav a{

    font-size:15px;
  }

  .hero{

    padding:
    180px 6% 80px;
  }

  .hero-left h2{

    font-size:54px;
  }

  .hero-left h3{

    font-size:20px;

    min-height:70px;
  }

  .small-text{

    font-size:18px;
  }

  .desc{

    font-size:16px;

    line-height:1.7;
  }

  .buttons{

    flex-direction:column;

    width:100%;
  }

  button{

    width:100%;
  }

  .stats{

    flex-direction:column;

    align-items:center;
  }

  .card{

    width:100%;

    max-width:320px;
  }

  .profile-img{

    width:250px;
    height:310px;
  }

  .glow-circle{

    width:280px;
    height:280px;
  }

  .project-container{

    grid-template-columns:1fr;
  }

  .project-card{

    padding:28px;
  }

  .project-content h3{

    font-size:24px;
  }

  .skills-container{

    grid-template-columns:
    repeat(2,1fr);
  }

  .skill-card{

    padding:25px 15px;
  }

  .skill-card img{

    width:50px;
    height:50px;
  }

  .about-box{

    padding:35px 25px;
  }

  .about-box p{

    font-size:17px;

    line-height:1.9;
  }

  .terminal-box{

    padding:25px;

    font-size:14px;
  }

  .contact-container{

    flex-direction:column;

    align-items:center;
  }

  .contact-card{

    width:100%;

    max-width:320px;
  }

}

/* SMALL MOBILE */

@media(max-width:480px){

  .hero-left h2{

    font-size:42px;
  }

  .hero-left h3{

    font-size:18px;
  }

  .section-title{

    font-size:34px;
  }

  .skills-container{

    grid-template-columns:1fr;
  }

  .profile-img{

    width:220px;
    height:280px;
  }

  .glow-circle{

    width:240px;
    height:240px;
  }

  .logo{

    font-size:24px;

    padding:8px 14px;
  }

}