html {
  scroll-behavior: smooth;
}
.project-card{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.project-card:hover{
    box-shadow: 0px 0px 18px #b74bff;
}


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:#020b24;
  color:white;
  overflow-x:hidden;
}

/* BACKGROUND */

body::before{
  content:"";
  position:fixed;
  width:100%;
  height:100%;
  background:
  radial-gradient(circle at top left,#183b8f33,transparent 30%),
  radial-gradient(circle at bottom right,#7b2ff733,transparent 30%);
  z-index:-2;
}

/* STARS */

.stars{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
  overflow:hidden;
}

.stars span{
  position:absolute;
  width:3px;
  height:3px;
  background:white;
  border-radius:50%;
  animation:blink 3s infinite;
  opacity:0.5;
}

@keyframes blink{

  0%,100%{
    opacity:0.2;
  }

  50%{
    opacity:1;
  }

}

/* NAVBAR */

nav{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  position:fixed;
  top:0;
  left:0;
  backdrop-filter:blur(10px);
  z-index:1000;
}

.logo{
  font-size:35px;
  font-weight:700;
  background:linear-gradient(to right,#5c7cff,#b74bff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

nav ul{
  display:flex;
  gap:40px;
  list-style:none;
}

nav ul li a{
  color:#cfcfcf;
  text-decoration:none;
  transition:0.3s;
}

nav ul li a:hover{
  color:#b74bff;
  font-size: larger;
  font-weight: bold;
}

/* HERO SECTION */

.hero{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:120px 10%;
  gap:50px;
}

.hero-text{
  width:55%;
}

.hello{
  color:#b74bff;
  letter-spacing:3px;
  margin-bottom:20px;
  font-size:14px;
}

.hero-text h1{
  font-size:80px;
  line-height:90px;
  margin-bottom:20px;
}

.hero-text h1 span{
  background:linear-gradient(to right,#5c7cff,#b74bff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* TYPING TEXT */

.typing{
  font-size:40px;
  color:#b74bff;
  font-weight:500;
  min-height:60px;
  margin-bottom:30px;
}

.typing span{
  border-right:3px solid #4d84ff;
  padding-right:5px;
  animation:cursor 0.8s infinite;
}

@keyframes cursor{

  50%{
    border-color:transparent;
  }

}

.hero-text p{
  color:#bdbdbd;
  line-height:35px;
  font-size:20px;
  margin-bottom:40px;
}

/* BUTTONS */

.btns{
  display:flex;
  gap:20px;
}

.btn{
  padding:18px 40px;
  border-radius:12px;
  text-decoration:none;
  font-size:20px;
  font-weight:600;
  transition:0.4s;
}

.primary-btn{
  background:#b74bff;
  color:white;
  box-shadow:0 0 10px #b74bff;
}

.primary-btn:hover{
  transform:translateY(-5px);
  background-color: #020b24;
  color: #b74bff;
  border: 1px solid #b74bff;
}

.secondary-btn{
  border:2px solid #b74bff;
  color:#b74bff;
}

.secondary-btn:hover{
  background:#b74bff;
  color:white;
}

/* IMAGE */

.hero-image{
  width:45%;
  display:flex;
  justify-content:center;
  position:relative;
}

.circle{
  width:500px;
  height:500px;
  border-radius:50%;
  background:radial-gradient(circle,#6f42ff,#1c103f);
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:
  0 0 20px #b74bff,
  0 0 50px #4d84ff;
  overflow:hidden;
}

.circle img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* RESPONSIVE */

@media(max-width:1000px){

  .hero{
    flex-direction:column-reverse;
    text-align:center;
  }

  .hero-text{
    width:100%;
  }

  .hero-image{
    width:100%;
  }

  .hero-text h1{
    font-size:60px;
    line-height:70px;
  }

  .typing{
    font-size:30px;
  }

  .circle{
    width:350px;
    height:350px;
  }

  nav ul{
    display:none;
  }

  .btns{
    justify-content:center;
  }

}
/* ABOUT SECTION */

.about{
  width:100%;
  padding:120px 10%;
}

.about-title{
  text-align:center;
  margin-bottom:70px;
}

.about-title p{
  color:#b74bff;
  letter-spacing:5px;
  margin-bottom:15px;
}

.about-title h1{
  font-size:70px;
}

.line{
  width:120px;
  height:4px;
  background:#b74bff;
  margin:20px auto;
  border-radius:10px;
  box-shadow:0 0 15px #b74bff;
}

/* CONTAINER */

.about-container{
  display:flex;
  gap:30px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:nowrap;
}

/* CARD */

.about-card{
  background:#08122f;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:25px;
  padding:35px;
  transition:0.4s;
}

.about-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 15px #b74bff;
}

/* LEFT CARD */

.left-card{
  width:380px;
}

.profile-box{
  display:flex;
  align-items:center;
  gap:15px;
  background:#121c3d;
  padding:20px;
  border-radius:20px;
  margin-bottom:40px;
}

.profile-img{
  width:55px;
  height:55px;
  border-radius:50%;
  background:linear-gradient(to right,#5c7cff,#b74bff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

.profile-box h3{
  font-size:25px;
}

.profile-box p{
  color:#9fa7c2;
}

.left-card h2{
  font-size:50px;
  line-height:65px;
  margin-bottom:30px;
}

.left-card h2 span{
  color:#b74bff;
}

.about-text{
  color:#b9c1d9;
  line-height:35px;
  font-size:19px;
  margin-bottom:50px;
}

.stats{
  display:flex;
  gap:40px;
}

.stats h3{
  color:#b74bff;
  font-size:45px;
}

.stats p{
  color:#9fa7c2;
}

/* CODE CARD */

.code-card{
  width:420px;
  background:#060d20;
  overflow:auto;
}

.top-dots{
  display:flex;
  gap:10px;
  margin-bottom:30px;
}

.top-dots span{
  width:15px;
  height:15px;
  border-radius:50%;
}

.red{
  background:#ff4d4d;
}

.yellow{
  background:#ffc107;
}

.green{
  background:#00c853;
}

.code-card pre{
  color:#d6e2ff;
  line-height:40px;
  font-size:20px;
  white-space:pre-wrap;
}

/* RIGHT CARD */

.right-card{
  width:380px;
}

.right-card h2{
  font-size:55px;
  margin-bottom:40px;
}

.right-card h2 span{
  color:#b74bff;
}

.right-card p{
  color:#c2c8dd;
  line-height:40px;
  font-size:22px;
  margin-bottom:35px;
}

.small-line{
  width:100px;
  height:3px;
  background:linear-gradient(to right,#4d84ff,#b74bff);
  border-radius:10px;
}

/* RESPONSIVE */
@media(max-width:1200px){

  .about-container{
    flex-direction:column;
    align-items:center;
  }

  .left-card,
  .right-card,
  .code-card{
    width:100%;
  }

}


@media(max-width:768px){

  .about-title h1{
    font-size:50px;
  }

  .left-card h2,
  .right-card h2{
    font-size:40px;
    line-height:55px;
  }

  .stats{
    flex-direction:column;
  }

}
/* SKILLS SECTION */

.skills{
  width:100%;
  padding:120px 10%;
}

/* TITLE */

.skills-title{
  text-align:center;
  margin-bottom:70px;
}

.skills-title p{
  color:#b74bff;
  letter-spacing:5px;
  margin-bottom:15px;
}

.skills-title h1{
  font-size:75px;
  margin-bottom:20px;
}

.skills-title span{
  color:#b8c1d9;
  font-size:25px;
  line-height:40px;
}

.skills-line{
  width:130px;
  height:4px;
  background:#b74bff;
  margin:30px auto;
  border-radius:10px;
  box-shadow:0 0 20px #b74bff;
}

/* CONTAINER */

.skills-container{
  display:flex;
  gap:30px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:nowrap;
}

/* CARD */

.skills-card{
  width:380px;
  background:#08122f;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:25px;
  padding:35px;
  transition:0.4s;
}

.skills-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 15px #b74bff;
}

/* HEADING */

.card-heading{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:40px;
}

.icon{
  width:60px;
  height:60px;
  border-radius:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:28px;
}

.frontend-icon{
  background:#10233d;
}

.tools-icon{
  background:#251a39;
}

.backend-icon{
  background:#102c1d;
}

.card-heading h2{
  font-size:35px;
}

/* SKILL */

.skill{
  margin-bottom:35px;
}

.skill-info{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}

.skill-info p{
  font-size:24px;
}

.skill-info span{
  color:goldenrod;
}

/* PROGRESS */

.progress{
  width:100%;
  height:10px;
  background:#1c2442;
  border-radius:20px;
  overflow:hidden;
}

.progress-bar{
  height:100%;
  border-radius:20px;
}

/* COLORS & WIDTH */

.html{
  width:95%;
  background:linear-gradient(to right,#4d84ff,#ff6b6b);
}

.css{
  width:92%;
  background:linear-gradient(to right,#00c6ff,#0072ff);
}

.js{
  width:88%;
  background:linear-gradient(to right,#ffe259,#ffa751);
}

.react{
  width:82%;
  background:linear-gradient(to right,#00f2fe,#4facfe);
}

.uiux{
  width:85%;
  background:linear-gradient(to right,#c471f5,#fa71cd);
}

.mongo{
  width:75%;
  background:linear-gradient(to right,#11998e,#38ef7d);
}

.sql{
  width:80%;
  background:linear-gradient(to right,#396afc,#2948ff);
}

.python{
  width:65%;
  background:linear-gradient(to right,#4facfe,#00f2fe);
}

.blender{
  width:78%;
  background:linear-gradient(to right,#ff9966,#ff5e62);
}

.git{
  width:82%;
  background:linear-gradient(to right,#fc466b,#3f5efb);
}

.node{
  width:70%;
  background:linear-gradient(to right,#56ab2f,#a8e063);
}

.express{
  width:68%;
  background:linear-gradient(to right,#4776e6,#8e54e9);
}

.mern{
  width:75%;
  background:linear-gradient(to right,#11998e,#38ef7d);
}

.responsive{
  width:92%;
  background:linear-gradient(to right,#00c6ff,#0072ff);
}

.creative{
  width:95%;
  background:linear-gradient(to right,#fc466b,#3f5efb);
}

/* RESPONSIVE */

@media(max-width:1200px){

  .skills-container{
    flex-direction:column;
    align-items:center;
  }

  .skills-card{
    width:100%;
  }

}

@media(max-width:768px){

  .skills-title h1{
    font-size:50px;
  }

  .skills-title span{
    font-size:20px;
  }

  .card-heading h2{
    font-size:28px;
  }

}



/* ===== Latest Works ===== */

body{
  background:#020817;
  font-family: 'Poppins', sans-serif;
  color:white;
}

.latest-works{
  padding:100px 10%;
  position:relative;
}

.section-header{
  text-align:center;
  margin-bottom:80px;
}

.subtitle{
  color:#b74bff;
  letter-spacing:4px;
  font-size:14px;
}

.section-header h2{
  font-size:60px;
  margin-top:10px;
}

.line{
  width:120px;
  height:4px;
  background:#b74bff;
  margin:20px auto;
  border-radius:20px;
}

/* Timeline */

.timeline{
  position:relative;
}

.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  background:#b74bff;
  transform:translateX(-50%);
}

.timeline-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:120px;
  position:relative;
}

.timeline-item::before{
  content:"";
  position:absolute;
  left:50%;
  width:18px;
  height:18px;
  background:#b74bff;
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 0 20px white;
}

.timeline-item.left{
  flex-direction:row;
}

.timeline-item.right{
  flex-direction:row-reverse;
}

.project-card{
  width:45%;
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:25px;
  overflow:hidden;
  padding:200px;
}

.project-card img{
  width:100%;
  border-radius:20px;
  object-fit:cover;
}

.content{
  width:40%;
}

.content h3{
  font-size:42px;
  color:#b74bff;
  margin-bottom:10px;
}

.content h4{
  color:#b74bff;
  font-size:24px;
  margin-bottom:10px;
}

.date{
  color:#94a3b8;
  font-size:14px;
  display:block;
  margin-bottom:20px;
}

.content p{
  line-height:1.8;
  color:#cbd5e1;
  margin-bottom:25px;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:25px;
}

.tags span{
  border:1px solid #b74bff;
  color:#b74bff;
  padding:8px 14px;
  border-radius:12px;
  font-size:14px;
}

.buttons{
  display:flex;
  gap:20px;
}

.buttons a{
  color:goldenrod;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.buttons a:hover{
  color:#fff;
}

/* Responsive */

@media(max-width:900px){

  .timeline::before{
    left:20px;
  }

  .timeline-item,
  .timeline-item.right,
  .timeline-item.left{
    flex-direction:column;
    align-items:flex-start;
    padding-left:60px;
  }

  .timeline-item::before{
    left:20px;
  }

  .project-card,
  .content{
    width:100%;
  }

  .content{
    margin-top:30px;
  }

  .section-header h2{
    font-size:42px;
  }

  .content h3{
    font-size:32px;
  }
}


/* ================= FAQ SECTION ================= */

body{
  background:#020817;
  font-family:'Poppins',sans-serif;
  color:white;
}

.faq-section{
  padding:100px 10%;
}

.faq-header{
  text-align:center;
  margin-bottom:60px;
}

.faq-header span{
  color:#b74bff;
  letter-spacing:4px;
  font-size:14px;
}

.faq-header h2{
  font-size:65px;
  margin-top:10px;
  font-weight:700;
}

.faq-header p{
  color:#94a3b8;
  margin-top:15px;
  font-size:22px;
}

.underline{
  width:120px;
  height:4px;
  background:#b74bff;
  margin:25px auto;
  border-radius:20px;
  box-shadow: 0px 0px 8px #b74bff;
}

/* FAQ BOX */

.faq-container{
  max-width:1000px;
  margin:auto;
  background:rgba(10,20,50,0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  overflow:hidden;
  backdrop-filter:blur(14px);
}

.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.faq-question{
  width:100%;
  background:none;
  border:none;
  outline:none;
  color:white;
  font-size:24px;
  padding:30px 35px;
  display:flex;
  align-items:center;
  gap:25px;
  cursor:pointer;
  transition:0.3s;
  position:relative;
  text-align:left;
}

.faq-question:hover{
  background:rgba(255,255,255,0.03);
}

.faq-question span{
  color:#b74bff;
  font-weight:700;
  min-width:20px;
}

.faq-question::after{
  content:"+";
  position:absolute;
  right:35px;
  font-size:28px;
  color:#94a3b8;
  transition:0.3s;
}

.faq-item.active .faq-question::after{
  transform:rotate(45deg);
  color:#b74bff;
}

/* ANSWER */

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
}

.faq-answer p{
  padding:0 35px 30px 80px;
  color:#cbd5e1;
  line-height:1.8;
  font-size:18px;
}

/* RESPONSIVE */

@media(max-width:768px){

  .faq-header h2{
    font-size:42px;
  }

  .faq-header p{
    font-size:16px;
  }

  .faq-question{
    font-size:18px;
    padding:25px 20px;
  }

  .faq-answer p{
    padding:0 20px 25px 55px;
    font-size:15px;
  }

}




/* ================= CONTACT SECTION ================= */

body{
  background:#020817;
  font-family:'Poppins',sans-serif;
  color:white;
}

/* SECTION */

.contact-section{
  padding:100px 10%;
}

.contact-header{
  text-align:center;
  margin-bottom:80px;
}

.contact-header span{
  color:#b74bff;
  letter-spacing:4px;
  font-size:14px;
}

.contact-header h2{
  font-size:70px;
  margin-top:10px;
}

.contact-header p{
  color:#94a3b8;
  font-size:22px;
  margin-top:15px;
}

.underline{
  width:120px;
  height:4px;
  background:#b74bff;
  margin:25px auto;
  border-radius:20px;
  box-shadow: 0px 0px 14px #b74bff;
}

/* WRAPPER */

.contact-wrapper{
  display:flex;
  gap:60px;
  align-items:center;
  justify-content:space-between;
}

/* LEFT */

.contact-left{
  flex:1;
}

.contact-left h3{
  font-size:48px;
  margin-bottom:20px;
}

.contact-left p{
  color:#94a3b8;
  line-height:1.8;
  font-size:20px;
  margin-bottom:40px;
}

/* INFO BOX */

.info-box{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:35px;
  width:100%;
}

.info-item{
  display:flex;
  gap:20px;
  margin-bottom:30px;
}

.info-item:last-child{
  margin-bottom:0;
}

.info-item i{
  font-size:22px;
  color:#b74bff;
}

.info-item span{
  color:#94a3b8;
  font-size:15px;
}

.info-item h4{
  font-size:22px;
  margin-top:5px;
}

/* RIGHT */

.contact-right{
  flex:1;
}

.coming-box{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  padding:60px 40px;
  text-align:center;
}

.coming-box h3{
  font-size:36px;
  margin-bottom:20px;
}

.coming-box p{
  color:#94a3b8;
  line-height:1.8;
  font-size:18px;
}

/* ================= FOOTER ================= */

.footer{
  padding:50px 10%;
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:30px;
}

/* LOGO */

.footer-logo h2{
  width:70px;
  height:70px;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#a855f7);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

/* SOCIAL */

.footer-links h3{
  margin-bottom:20px;
  font-size:24px;
}

.social-icons{
  display:flex;
  gap:18px;
}

.social-icons a{
  width:55px;
  height:55px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);

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

  color:white;
  text-decoration:none;
  font-size:22px;

  transition:0.3s;
}

.social-icons a:hover{
  transform:translateY(-5px);
  background:linear-gradient(135deg,#2563eb,#a855f7);
}

/* FOOTER BOTTOM */

.footer-bottom{
  margin-top:50px;
  text-align:center;
}

.footer-bottom p{
  color:#94a3b8;
  font-size:18px;
}

.heart{
  color:#b74bff;
  font-size:22px;
}

/* ================= SCROLL BUTTON ================= */

#topBtn{
  position:fixed;
  bottom:30px;
  right:30px;

  width:55px;
  height:55px;

  border:none;
  border-radius:50%;

  background:linear-gradient(135deg,#2563eb,#b74bff);

  color:white;
  font-size:22px;
  cursor:pointer;

  box-shadow:0 0 20px rgba(168,85,247,0.5);

  transition:0.3s;
}

#topBtn:hover{
  transform:translateY(-5px);
}

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

@media(max-width:900px){

  .contact-wrapper{
    flex-direction:column;
  }

  .contact-header h2{
    font-size:45px;
  }

  .contact-header p{
    font-size:16px;
  }

  .contact-left h3{
    font-size:34px;
  }

  .footer-top{
    flex-direction:column;
    text-align:center;
  }

  
}



/* ================= EXTRA MOBILE RESPONSIVE FIX ================= */

@media (max-width: 768px) {

  /* NAVBAR */
  nav {
    padding: 15px 5%;
  }

  nav ul {
    display: none; /* already hidden but reinforced */
  }

  .logo {
    font-size: 28px;
  }

  /* HERO */
  .hero {
    padding: 100px 5%;
    gap: 30px;
  }

  .hero-text h1 {
    font-size: 40px;
    line-height: 50px;
  }

  .typing {
    font-size: 22px;
  }

  .hero-text p {
    font-size: 16px;
    line-height: 28px;
  }

  .btns {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .circle {
    width: 250px;
    height: 250px;
  }

  /* SECTIONS */
  section {
    padding: 80px 5% !important;
  }

  /* PROJECTS */
  .project-card {
    padding: 80px !important;
  }

  /* FAQ */
  .faq-header h2 {
    font-size: 32px;
  }

  .faq-question {
    font-size: 16px;
    padding: 20px;
  }

  /* CONTACT */
  .contact-header h2 {
    font-size: 32px;
  }

  .contact-left h3 {
    font-size: 28px;
  }

  .info-item h4 {
    font-size: 16px;
  }

  /* FOOTER */
  .footer-bottom p {
    font-size: 14px;
  }

}

/* VERY SMALL PHONES */
@media (max-width: 480px) {

  .hero-text h1 {
    font-size: 32px;
  }

  .typing {
    font-size: 18px;
  }

  .circle {
    width: 200px;
    height: 200px;
  }

  .about-title h1,
  .skills-title h1 {
    font-size: 28px;
  }

  .section-header h2 {
    font-size: 28px;
  }

}


/* ================= MOBILE NAV FIX ================= */

.menu-toggle{
  display:none;
}

/* MOBILE VIEW */
@media (max-width: 768px){

  /* show hamburger icon */
  .menu-toggle{
    display:block;
    font-size:30px;
    cursor:pointer;
    color:white;
    position:absolute;
    right:10%;
    top:20px;
    z-index:1100;
  }

  /* NAV MENU */
  nav ul{
    display:none; /* hidden by default */
    flex-direction:column;
    gap:20px;
    position:absolute;
    top:70px;
    right:10%;
    background:#08122f;
    padding:20px;
    border-radius:15px;
    width:180px;
    box-shadow:0 0 15px rgba(183,75,255,0.3);
    z-index:1000;
  }

  /* when active class added */
  nav ul.active{
    display:flex;
  }

  nav ul li a{
    font-size:18px;
  }
}
@media (max-width: 768px){

  .menu-toggle{
    display:block;
    font-size:30px;
    cursor:pointer;
    color:white;
    position:absolute;
    right:10%;
    top:20px;
    z-index:1100;
  }

  nav ul{
    display:none;
    flex-direction:column;
    gap:20px;
    position:absolute;
    top:70px;
    right:10%;
    background:#08122f;
    padding:20px;
    border-radius:15px;
    width:180px;
    box-shadow:0 0 15px rgba(183,75,255,0.3);
  }

  nav ul.active{
    display:flex;
  }
}