/*index page*/
  *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif
      }
  
  body{
      background:#0f172a;
      color:#e5e7eb
      }
  
      /* ================= HEADER ================= */

header{
  position: sticky;
  top: 0;
  background: #020617;
  padding: 18px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

/* Logo */
header h1{
  color: #38bdf8;
}

.logo{
  text-decoration: none;   /* underline remove */
}

.logo h1{
  color: #38bdf8;
  margin: 0;
}

/* Desktop Nav */
nav a{
  color: #e5e7eb;
  margin-left: 22px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

nav a:hover{
  color: #38bdf8;
}

/* Hamburger hidden on desktop */
.menu-toggle{
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}



  .hero{
      min-height:90vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:0 8%
        }
  
  .hero h2{
      font-size:3rem;
      margin-bottom:15px
      }
  
  .hero span{
      color:#38bdf8
    }
  
  .hero p{
      max-width:650px;
      margin:auto;
      margin-bottom:25px;
      color:#cbd5e1
        }
        
  .btn{
      background:#38bdf8;
      color:#020617;
      padding:12px 26px;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
      display:inline-block
         }

  section{
      padding:40px 7%
        }
  
  .title{
      font-size:2rem;
      margin-bottom:40px;
      color:#38bdf8;
      text-align:center
      }

  .about{
      display:grid;
      grid-template-columns:1fr 2fr;
      gap:40px;
      align-items:center
      }
      
  .about img{
      width:100%;
      border-radius:20px
      }
      
  .about p{
      color:#cbd5e1;
      line-height:1.7
      }

  .skills{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:20px
      }
      
  .skill{
      background:#020617;
      padding:22px;
      border-radius:16px;
      text-align:center;
      box-shadow:0 10px 30px rgba(0,0,0,.4)
      }

  .projects{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:25px
      }
      
  .card{
      background:#020617;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 10px 30px rgba(0,0,0,.4)
      }
      
  .card img{
      width:100%;
      height:170px;
      object-fit:cover
      }
      
  .card-content{
      padding:18px
      }
      
  .card-content h3{
      margin-bottom:8px
      }
      
  .card-content p{
      color:#cbd5e1;
      font-size:.95rem
      }

  .contact{
      text-align:center
      }
      
  .contact a{
      display:inline-block;
      margin:10px;
      color:#38bdf8;
      text-decoration:none
      }
  
  .hero{
  /*min-height:100vh;*/
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#0f172a;
  color:#fff;
    }
    
    .hero-content{
      max-width:600px;
    }
    
    .profile-img{
      width:279px;
      height:278px;
      border-radius:50%;
      object-fit:cover;
      border:4px solid #38bdf8;
      margin-bottom:70px;
      /*margin-top: -60px;*/
      box-shadow:0 0 30px rgba(56,189,248,.5);
      
    }
    
    #typing{
      font-size:2.5rem;
      color:#38bdf8;
      min-height:60px;
      margin-top: -40px;
    }
    
    .btn{
      display:inline-block;
      margin-top:20px;
      padding:12px 28px;
      background:#38bdf8;
      color:#020617;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
    }


  footer{text-align:center;padding:25px;background:#020617;color:#94a3b8}

  @media(max-width:800px){
    .hero h2{font-size:2.2rem}
    .about{grid-template-columns:1fr}
  }
  
  .hero-buttons {
  display: flex;
  justify-content: space-between; /* left center right */
  align-items: center;
  margin-top: 20px;
    }
    
    .btn {
      padding: 12px 28px;
      background: #38bdf8;
      color: #020617;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: 0.3s;
    }
    
    .btn:hover {
      background: #0ea5e9;
      transform: translateY(-2px);
    }
    .btn1:hover {
      background: #0ea5e9;
      transform: translateY(-2px);
    }
    
    @media (max-width: 768px) {
      .hero-buttons {
        flex-direction: column;
        gap: 12px;
      }
    }
    
       .parent-class {
      text-align: center;
    }
    .btn1{
      display:inline-block;
      margin-top:20px;
      padding:12px 28px;
      background:#38bdf8;
      color:#020617;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
    }
    .projects1{
      
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:25px;
    }
    
    .card1{
      background:#020617;
      border-radius:18px;
      overflow:hidden;
      cursor:pointer;
      transition:.3s;
    }
    
    .card1 img{
      width:100%;
      height:170px;
      object-fit:cover;
    }
    
    .card-content1{
      padding:18px;
    }
    
    /* ⭐ POPUP CARD */
    .card1.active{
      position:fixed;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%) scale(1.2);
      width:70vw;
      max-width:900px;
      z-index:1001;
      box-shadow:0 40px 120px rgba(0,0,0,.9);
    }
    
    .card1.active img{
      height:350px;
    }
    
    /* ⭐ BLUR BACKGROUND */
    .overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.75);
      backdrop-filter:blur(8px);
      opacity:0;
      pointer-events:none;
      transition:.3s;
      z-index:1000;
    }
    
    .overlay.show{
      opacity:1;
      pointer-events:auto;
    }

   .about-section {
      padding: 100px 20px;
      /*background: #020617;*/
      color: white;
    }
    
    /* Layout */
    .about-container {
      max-width: 1100px;
      margin: auto;
      display: flex;
      align-items: center;
      gap: 60px;
      /*flex-wrap: wrap;*/
    }
    
    /* ===== Image ===== */
    .about-image img {
      width: 346px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(56, 189, 248, 0.3);
      animation: float 4s ease-in-out infinite;
      transition: transform 0.4s;
    }
    
    .about-image img:hover {
      transform: scale(1.05) rotate(-2deg);
    }
    
    /* Floating animation */
    @keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }
    
    /* ===== Text ===== */
    .about-content h2 {
      font-size: 40px;
      margin-bottom: 20px;
      background: linear-gradient(90deg, #38bdf8, #9333ea);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .about-content p {
      line-height: 1.7;
      color: #cbd5e1;
      margin-bottom: 18px;
      transition: 0.3s;
    }
    
    .about-content p:hover {
      color: #ffffff;
    }
    
    /* ===== Skills Tags ===== */
    
    
    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .about-container {
        flex-direction: column;
        text-align: center;
      }
    }
    
       .skills{
  max-width:1353px;
  margin:auto;
    }
    
    .skill{
      margin:22px 0;
    }
    
    .skill span{
      font-weight:600;
      display:block;
      margin-bottom:6px;
    }
    
    .bar{
      width:100%;
      height:12px;
      background:#1e293b;
      border-radius:20px;
      overflow:hidden;
    }
    
    .bar div{
      height:100%;
      width:0;
      background:linear-gradient(90deg,#38bdf8,#0ea5e9);
      border-radius:20px;
      transition:width 1.8s ease;
    }
    
       .contact-email a {
      position: relative;
      color: #d1d5db;
      text-decoration: none;
      font-size: 20px;
      transition: color 0.3s ease;
    }
    
    /* Animated line */
    .contact-email a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #38bdf8, #9333ea);
      transition: width 0.4s ease;
    }
    
    /* Hover effect */
    .contact-email a:hover {
      color: #38bdf8;
    }
    
    .contact-email a:hover::after {
      width: 100%;
    }
        .contact-section {
      text-align: center;
      padding: 100px 20px;
      /*background: radial-gradient(circle at top, #2d1b4e, #020617);*/
      color: #fff;
    }
    
    .contact-title {
      font-size: 48px;
      font-weight: 700;
      background: #38bdf8;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 20px;
    }
    
    .contact-email {
      font-size: 20px;
      color: #d1d5db;
      margin-bottom: 40px;
    }
    
    .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 40px;
    }
    
    .social-icons a {
      width: 60px;
      height: 60px;
      background: #42444999;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      color: white;
      font-size: 24px;
      text-decoration: none;
      transition: 0.3s;
    }
    
    .social-icons a:hover {
      background: #38bdf8;
      transform: translateY(-5px);
    }
    
    .footer-text {
      color: #9ca3af;
      font-size: 16px;
    }
    
    .footer-text span {
      color: #38bdf8;
      font-weight: 600;
    }