/*
Theme Name: Mujeeb Awan Portfolio
Theme URI: https://mujeebawan.online
Author: Mujeeb Awan
Description: Modern portfolio theme showcasing WordPress theme development, niche sites, and freelance services. Dark hero with animated particles, portfolio showcase, services, case studies, and contact section.
Version: 1.0
Requires at least: 5.8
Tested up to: 6.5
License: GNU General Public License v2 or later
Tags: portfolio, agency, business, dark, custom-menu, featured-images
Text Domain: mujeeb-portfolio
*/

:root{
  --navy:#141B2C;
  --navy-2:#1B2436;
  --teal:#2CB6C4;
  --teal-dark:#1E93A0;
  --grey:#5B6270;
  --ink:#26303F;
  --light-bg:#E9F7F8;
  --light-bg-2:#F3FBFB;
  --white:#FFFFFF;
  --line:#DCEEEF;
  --font-head:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
  --pink:#FF6B9D;
  --gold:#FFB900;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--ink); background:var(--white); overflow-x:hidden;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
@media (max-width:700px){ .wrap{padding:0 20px;} }

/* ---------- side rail ---------- */
.side-brand{
  position:fixed; left:0; top:0; height:100vh; width:34px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.side-brand span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:0.04em;
  color:var(--navy);
}
.contact-cta{
  position:fixed; left:0; bottom:60px; z-index:60;
  background:var(--teal); color:#fff; padding:14px 8px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:12px; font-weight:600; letter-spacing:0.05em;
  border-radius:0 8px 8px 0; pointer-events:auto; cursor:pointer;
}
@media (max-width:700px){ .side-brand,.contact-cta{display:none;} }

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1200px; margin:0 auto; padding:20px 40px 20px 74px;
  display:flex; justify-content:center; gap:56px;
}
nav a{
  font-family:var(--font-head); font-size:13px; font-weight:600; letter-spacing:0.06em;
  color:var(--teal-dark); text-transform:uppercase; padding-bottom:6px; border-bottom:2px solid transparent;
  transition:all 0.3s ease;
}
nav a.active{color:var(--navy); border-color:var(--navy);}
nav a:hover{color:var(--navy);}
@media (max-width:700px){ nav{gap:20px; flex-wrap:wrap; padding-left:40px; font-size:11px;} }

/* ---------- hero ---------- */
.hero{
  background:var(--navy); position:relative; overflow:hidden;
  padding:90px 40px 60px 74px; text-align:center;
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(480px 320px at 22% 30%, rgba(44,182,196,0.18), transparent 65%),
    radial-gradient(420px 300px at 78% 65%, rgba(44,182,196,0.12), transparent 65%);
}
.hero-particles{position:absolute; inset:0; z-index:0; pointer-events:none;}
.p-dot{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--teal); opacity:0.55;
  animation:drift linear infinite;
}
@keyframes drift{
  from{ transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:0.6;}
  90%{opacity:0.6;}
  to{ transform:translateY(-140px) translateX(20px); opacity:0;}
}
.hero-inner{position:relative; z-index:2; max-width:900px; margin:0 auto;}
.hero-title{
  font-family:var(--font-head); font-weight:800; font-size:clamp(48px,9vw,96px);
  color:var(--white); line-height:1.1; margin-bottom:20px;
}
.hero-subtitle{
  font-size:clamp(18px,3vw,28px); color:#B0BEC5; font-weight:400; margin-bottom:40px;
}
.hero-cta{
  display:inline-flex; gap:16px;
}
.btn{
  font-family:var(--font-head); font-weight:600; font-size:14px; letter-spacing:0.06em;
  padding:16px 32px; border-radius:8px; transition:all 0.3s ease;
  text-transform:uppercase; cursor:pointer;
}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:var(--teal-dark); transform:translateY(-2px);}
.btn-white{background:var(--white); color:var(--navy);}
.btn-white:hover{background:var(--light-bg-2);}
@media (max-width:700px){ .hero{padding:60px 40px 40px 40px;} .hero-cta{flex-direction:column;} }

/* ---------- featured work ---------- */
.featured-work{
  padding:80px 40px; background:var(--light-bg-2);
}
.sec-head{
  text-align:center; margin-bottom:60px;
}
.sec-head h2{
  font-family:var(--font-head); font-weight:800; font-size:clamp(32px,5vw,56px);
  color:var(--navy); margin-bottom:16px;
}
.sec-head .rule{
  height:2px; width:60px; background:var(--teal);
  margin:0 auto 20px;
}
.sec-head p{
  color:var(--grey); font-size:16px; max-width:600px; margin:0 auto;
}
.work-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:32px; margin-bottom:40px;
}
.work-card{
  background:#fff; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); transition:all 0.3s ease;
  cursor:pointer;
}
.work-card:hover{
  border-color:var(--teal); transform:translateY(-8px);
  box-shadow:0 16px 32px rgba(44,182,196,0.12);
}
.work-card-img{
  width:100%; height:200px; object-fit:cover; background:#f0f0f0;
}
.work-card-body{padding:24px;}
.work-card-tag{
  display:inline-block; background:var(--light-bg); color:var(--teal-dark);
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:4px;
  margin-bottom:12px; text-transform:uppercase; letter-spacing:0.04em;
}
.work-card h3{
  font-family:var(--font-head); color:var(--navy); font-size:18px;
  font-weight:700; margin-bottom:8px;
}
.work-card p{
  color:var(--grey); font-size:14px; line-height:1.6;
}
@media (max-width:700px){ .featured-work{padding:60px 40px;} .work-grid{gap:20px;} }

/* ---------- services ---------- */
.services{
  padding:80px 40px;
}
.service-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
}
.svc{
  padding:32px; background:#fff; border-radius:12px;
  border:1px solid var(--line); display:flex; gap:20px;
  animation:fadeInUp 0.6s ease forwards;
  opacity:0;
}
.svc.from-left{animation-delay:0s;}
.svc.from-right{animation-delay:0.2s;}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
.svc-icon{
  font-size:32px; color:var(--teal); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.svc h4{
  font-family:var(--font-head); color:var(--navy); font-size:16px;
  font-weight:700; margin-bottom:8px;
}
.svc p{
  color:var(--grey); font-size:14px; line-height:1.6;
}
@media (max-width:700px){ .services{padding:60px 40px;} .service-grid{gap:20px;} .svc{padding:20px;} }

/* ---------- skills/tech ---------- */
.skills{
  padding:80px 40px; background:var(--light-bg-2);
}
.tech-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:20px; margin-top:40px;
}
.tech-item{
  background:#fff; padding:20px; border-radius:8px;
  border:1px solid var(--line); text-align:center;
  font-family:var(--font-head); font-weight:600; color:var(--navy);
  font-size:14px; transition:all 0.3s ease;
}
.tech-item:hover{
  border-color:var(--teal); background:var(--light-bg);
  transform:translateY(-4px);
}
@media (max-width:700px){ .skills{padding:60px 40px;} .tech-grid{gap:16px;} }

/* ---------- stats ---------- */
.stats{
  padding:80px 40px;
}
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:40px;
}
.stat-card{
  background:var(--light-bg); padding:40px; border-radius:12px;
  text-align:center;
}
.stat-card .ic{
  font-size:48px; display:block; margin-bottom:16px; color:var(--teal);
}
.stat-card b{
  display:block; font-family:var(--font-head); color:var(--navy);
  font-size:16px; font-weight:700; margin-bottom:12px;
}
.stat-card .num{
  font-family:var(--font-head); font-size:clamp(32px,5vw,56px);
  font-weight:800; color:var(--teal); margin-bottom:8px;
}
.stat-card .cap{
  color:var(--grey); font-size:14px;
}
@media (max-width:700px){ .stats{padding:60px 40px;} .stats-grid{gap:20px;} .stat-card{padding:24px;} }

/* ---------- about ---------- */
.about{
  padding:80px 40px;
}
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.about h2{
  font-family:var(--font-head); font-weight:800; color:var(--navy);
  font-size:clamp(32px,5vw,48px); margin-bottom:16px;
}
.about .rule{
  height:2px; width:60px; background:var(--teal); margin:0 0 20px;
}
.about p{
  color:var(--grey); font-size:16px; line-height:1.8; margin-bottom:20px;
}
.about-actions{
  display:flex; gap:16px;
}
.btn-navy{
  background:var(--navy); color:#fff; padding:16px 32px;
  border-radius:8px; font-family:var(--font-head); font-weight:600;
  font-size:14px; transition:all 0.3s ease; cursor:pointer;
}
.btn-navy:hover{background:var(--navy-2); transform:translateY(-2px);}
.btn-line{
  background:transparent; color:var(--navy); padding:16px 32px;
  border:2px solid var(--navy); border-radius:8px;
  font-family:var(--font-head); font-weight:600; font-size:14px;
  transition:all 0.3s ease; cursor:pointer;
}
.btn-line:hover{background:var(--light-bg-2);}
.about-art{
  position:relative; height:400px;
}
.card-bg{
  position:absolute; inset:0; background:var(--light-bg);
  border-radius:12px; opacity:0.5;
}
.card-front{
  position:absolute; inset:12px; background:var(--white);
  border-radius:8px; border:2px solid var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.brandmark{
  font-family:var(--font-head); font-size:clamp(32px,6vw,56px);
  font-weight:800;
}
.brandmark .b1{color:var(--navy);}
.brandmark .b2{color:var(--teal);}
@media (max-width:700px){ 
  .about{padding:60px 40px;} 
  .about-grid{grid-template-columns:1fr; gap:40px;} 
  .about-art{height:300px;} 
  .about-actions{flex-direction:column;}
}

/* ---------- testimonials ---------- */
.testi{
  padding:80px 40px; background:var(--light-bg-2);
}
.testi-card{
  background:#fff; padding:48px 40px; border-radius:12px;
  border-left:4px solid var(--teal); max-width:700px; margin:40px auto;
  position:relative;
}
.testi-avatar{
  font-size:48px; text-align:center; margin-bottom:16px;
}
.testi-quote-mark{
  font-size:56px; color:var(--teal); font-family:var(--font-head);
  font-weight:800; position:absolute; top:16px; left:20px; opacity:0.2;
}
.testi-text{
  color:var(--grey); font-size:18px; line-height:1.8;
  margin-bottom:20px; font-style:italic;
}
.testi-name{
  font-family:var(--font-head); color:var(--navy); font-weight:700;
  font-size:16px; margin-bottom:4px;
}
.testi-role{
  color:var(--teal-dark); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.testi-nav{
  display:flex; justify-content:center; align-items:center; gap:24px;
  margin-top:40px;
}
.arrow-btn{
  width:48px; height:48px; border:2px solid var(--teal);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--teal); cursor:pointer; transition:all 0.3s ease;
}
.arrow-btn:hover{background:var(--teal); color:#fff;}
.dots{
  display:flex; gap:12px;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--line); cursor:pointer; transition:all 0.3s ease;
}
.dot.active{background:var(--teal); width:30px; border-radius:5px;}
@media (max-width:700px){ .testi{padding:60px 40px;} .testi-card{padding:32px 24px;} }

/* ---------- contact section ---------- */
.contact{
  padding:80px 40px; background:var(--navy); position:relative; overflow:hidden;
}
.contact-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(480px 320px at 80% 50%, rgba(44,182,196,0.12), transparent 65%);
}
.contact-inner{
  position:relative; z-index:2; max-width:600px; margin:0 auto;
  text-align:center;
}
.contact h2{
  font-family:var(--font-head); color:#fff; font-size:clamp(32px,5vw,48px);
  font-weight:800; margin-bottom:16px;
}
.contact p{
  color:#B0BEC5; font-size:16px; margin-bottom:40px;
}
.contact-form{
  display:flex; flex-direction:column; gap:16px;
}
.contact-form input,
.contact-form textarea{
  background:rgba(255,255,255,0.05); border:1px solid rgba(44,182,196,0.3);
  color:#fff; padding:14px 18px; border-radius:8px;
  font-family:var(--font-body); font-size:14px; outline:none;
  transition:all 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,0.5);
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--teal); background:rgba(44,182,196,0.05);
}
.contact-form textarea{
  resize:vertical; min-height:120px;
}
.contact-submit{
  background:var(--teal); color:#fff; padding:16px 32px;
  border-radius:8px; font-family:var(--font-head); font-weight:600;
  font-size:14px; cursor:pointer; transition:all 0.3s ease;
  text-transform:uppercase; letter-spacing:0.06em;
}
.contact-submit:hover{
  background:var(--teal-dark); transform:translateY(-2px);
}
@media (max-width:700px){ .contact{padding:60px 40px;} }

/* ---------- footer ---------- */
footer{
  background:var(--navy-2); color:#fff; padding:40px;
  text-align:center; font-size:13px;
}
footer a{color:var(--teal); transition:color 0.3s ease;}
footer a:hover{color:#fff;}