/* style.css */
* {margin:0; padding:0; box-sizing:border-box; font-family: 'Poppins', sans-serif;}
body {background-color:#0a0a0a; color:#fff; overflow-x:hidden;}
a {text-decoration:none; color:inherit;}

/* HEADER & NAVBAR */
header {
  position:sticky; top:0; width:100%; 
  background: rgba(17, 17, 17, 0.95); backdrop-filter: blur(10px);
  display:flex; justify-content:space-between; align-items:center; 
  padding:15px 50px; z-index:1000;
  border-bottom: 1px solid rgba(0, 255, 0, 0.1);
}
header .logo img {height:45px; object-fit: contain;}
.nav-links {list-style:none; display:flex; gap:25px;}
.nav-links li a {font-size: 15px; transition:0.3s; font-weight: 500;}
.nav-links li a:hover {color:#0f0; text-shadow:0 0 8px #0f0;}
.hire-btn {padding:10px 25px; background:linear-gradient(45deg,#0f0,#00ffcc); color: #000; font-weight: bold; border-radius:50px; transition:0.3s;}
.hire-btn:hover {box-shadow:0 0 15px #0f0, 0 0 30px #00ffcc; transform: scale(1.05);}
.menu-toggle {display: none; color: #0f0; font-size: 28px; cursor: pointer;} /* Hidden on PC */

/* HERO */
#hero {position:relative; height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; padding: 0 20px;}
#hero-video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:0.3;}
.hero-content {z-index: 1;}
.profile-img {width: 140px; height: 140px; border-radius: 50%; border: 3px solid #0f0; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); margin-bottom: 20px; object-fit: cover;}
.hero-content h1 {font-size:3rem; margin-bottom:10px;}
.name-highlight {color:#0f0; text-shadow:0 0 20px #0f0;}
.btn-glow {display:inline-block; padding:12px 30px; margin-top:30px; border:none; border-radius:50px; background:linear-gradient(45deg,#0f0,#00ffcc); color:#000; font-weight:600; cursor:pointer; transition:0.3s;}
.btn-glow:hover {box-shadow:0 0 20px #0f0,0 0 40px #00ffcc; transform: scale(1.05);}
.typing-text {font-size:1.5rem; margin-top:10px; color:#0f0; height: 35px;}

/* SECTIONS */
section {padding:80px 50px;}
section h2 {font-size:2.5rem; margin-bottom:40px; text-align:center; color:#0f0; text-shadow:0 0 10px #0f0;}
section p {line-height:1.7; margin-bottom:20px; text-align: center; max-width: 900px; margin-left: auto; margin-right: auto;}
.achievements {display:flex; flex-wrap:wrap; justify-content:center; gap:20px; list-style:none; margin-top:30px;}
.achievements li {background:rgba(255,255,255,0.05); padding:10px 20px; border-radius:10px; color:#0f0; border: 1px solid rgba(0,255,0,0.2); text-align: center;}

/* CARDS */
.expertise-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; justify-items: center;}
.card {background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); padding:30px; border-radius:20px; width:100%; max-width: 350px; transition:0.3s; text-align: center; border: 1px solid rgba(255,255,255,0.1);}
.card:hover {border-color: #0f0; box-shadow:0 0 20px rgba(0, 255, 0, 0.3); transform:translateY(-10px);}
.card-icon {font-size: 40px; color: #0f0; margin-bottom: 20px; filter: drop-shadow(0 0 10px #0f0);}
.card h3 {color:#fff; margin-bottom:15px;}
.card p {font-size:0.95rem; color: #ccc;}

/* PORTFOLIO */
.portfolio-filters {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom:40px;}
.filter-btn {padding:10px 25px; border:1px solid #0f0; border-radius:50px; background:transparent; color:#0f0; cursor:pointer; transition:0.3s;}
.filter-btn:hover, .filter-btn.active {background:linear-gradient(45deg,#0f0,#00ffcc); color:#000; box-shadow:0 0 15px rgba(0,255,0,0.5);}
.portfolio-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:25px;}
.portfolio-item {border-radius:15px; overflow: hidden; transition:0.3s; position: relative;}
.portfolio-item img, .portfolio-item video {width:100%; height:250px; object-fit: cover; display: block; transition:0.3s;}
.portfolio-item img:hover, .portfolio-item video:hover {transform:scale(1.05); box-shadow:0 0 20px #0f0;}

/* TEXT CARDS FOR E-COMMERCE LINKS */
.text-card {background: rgba(20,20,20,0.8); border: 1px solid rgba(0,255,0,0.3); padding: 30px 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 250px;}
.text-card:hover {border-color: #0f0; box-shadow:0 0 20px rgba(0,255,0,0.4); transform: scale(1.02);}
.platform-icon {font-size: 50px; color: #0f0; margin-bottom: 15px; filter: drop-shadow(0 0 8px #0f0);}
.text-card a {display: inline-block; background: rgba(0,255,0,0.1); color: #0f0; padding: 5px 15px; border-radius: 20px; margin: 5px 0; font-size: 14px; border: 1px solid rgba(0,255,0,0.3); transition: 0.3s;}
.text-card a:hover {background: #0f0; color: #000;}

/* CONTACT */
.glass-form {background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); padding:30px; border-radius:20px; display:flex; flex-direction:column; gap:15px; max-width:600px; margin:0 auto; border: 1px solid rgba(0,255,0,0.1);}
.glass-form input, .glass-form textarea {padding:15px; border-radius:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.5); color:#fff; font-size: 1rem; width: 100%;}
.glass-form input:focus, .glass-form textarea:focus {border-color: #0f0; outline: none;}
.social-links {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top:40px;}
.social-links a {display: inline-block; color:#0f0; font-size: 20px; background: rgba(0,255,0,0.1); width: 45px; height: 45px; line-height: 45px; border-radius: 50%; transition:0.3s; border: 1px solid rgba(0,255,0,0.3); text-align: center;}
.social-links a:hover {background: #0f0; color: #000; box-shadow:0 0 15px #0f0;}

/* =========================================
   RESPONSIVE DESIGN (PC, Tablet, Mobile)
========================================= */

/* TABLET (Max-width 1024px) */
@media (max-width: 1024px) {
  header {padding: 15px 30px;}
  section {padding: 60px 30px;}
  .hero-content h1 {font-size: 2.5rem;}
  .portfolio-grid {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
}

/* MOBILE & SMALL TABLET (Max-width 768px) */
@media (max-width: 768px) {
  header {padding: 15px 20px;}
  .hire-btn {display: none;} /* Hidden on mobile to save space, User can use Hero button */
  .menu-toggle {display: block;} 
  
  /* Mobile Menu Styling */
  .nav-links {
    position: absolute;
    top: 70px; /* Below header */
    left: 0;
    width: 100%;
    background: rgba(17, 17, 17, 0.98);
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
    gap: 20px;
    display: none; /* Hidden by default */
    border-bottom: 2px solid #0f0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  }
  .nav-links.active {display: flex;} /* Activated via JavaScript */
  
  .hero-content h1 {font-size: 2rem;}
  .typing-text {font-size: 1.2rem; height: auto; min-height: 30px;}
  .profile-img {width: 120px; height: 120px;}
  
  section h2 {font-size: 2rem;}
  .card {max-width: 100%;}
}

/* SMALL MOBILE (Max-width 480px) */
@media (max-width: 480px) {
  section {padding: 50px 15px;}
  .hero-content h1 {font-size: 1.7rem;}
  .typing-text {font-size: 1rem;}
  .btn-glow {padding: 10px 20px; font-size: 0.9rem;}
  
  .portfolio-filters {flex-direction: column;}
  .filter-btn {width: 100%;}
  .portfolio-grid {grid-template-columns: 1fr;}
  
  .glass-form {padding: 20px;}
  .social-links a {width: 40px; height: 40px; line-height: 40px; font-size: 18px;}
}