/* ---- General ---- */
:root{
    --bg: #0f0617;
    --panel: #1a0b2e;
    --accent: #a259ff;
    --muted: #bcbcbc;
  }
  *{box-sizing:border-box}
  body{
    font-family: "Plus Jakarta Sans", sans-serif;
    background: var(--bg);
    color: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* Navbar */
  .navbar{
    background: transparent;
    transition: background 0.4s ease, padding 0.25s ease;
  }
  .navbar.scrolled{
    background-color: rgba(15,6,23,0.9);
    backdrop-filter: blur(6px);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .navbar-brand img.logo{height:44px}
  .nav-link{
    color: var(--muted) !important;
    font-weight:700;
    font-size:16px;
    
  }

  .nav-link:hover, .nav-link.active{ color: var(--accent) !important; }
  .navbar-toggler{ border: none; }
  
  /* Toggler icon */
  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .navbar-nav{
    margin-left: 70px;
  }
  
  /* ---- Hero ---- */

  .hero{
    display:flex;
    gap:15rem;
    align-items:center;
    padding-top: 70px;
    min-height:100vh;
  }
  .hero-img img.main-img{ max-width:60vw; display:block; ; }
  @media (max-width: 768px) {
    .hero-img img.main-img {
      max-width: 20vw; /* أو 100% لو عاوزها تاخد العرض كله */
    }
  }
  .hero-title{ max-width:740px; }
  
  .hello-text{ display:flex; align-items:center; gap:.9rem; margin-bottom:.4rem; color:var(--muted); }
  .hello-text .name{ color:var(--accent); font-weight:700; }
  
  .main-heading{ font-size:2.4rem; line-height:1.05; margin: .4rem 0 0; font-weight:800; color:#fff; }
  .highlight{ color: var(--accent); text-shadow: 0 8px 40px rgba(162,89,255,0.18); }
  
  .sub, .up { color:var(--muted); margin-top:.6rem; }
  
  /* Buttons */
  .btn{
    border-radius:12px;
    padding: .6rem 1rem;
    font-weight:700;
  }
  .btn-primary{
    background: linear-gradient(90deg, var(--accent), #7a4bff);
    border: none;
    box-shadow: 0 8px 30px rgba(162,89,255,0.18);
  }
  .btn-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,0.08);
    background:transparent;
  }
  
  /* Social */
  .social .social-icon{
    display:inline-block;
    margin-left:.7rem;
    color:var(--muted);
    font-weight:700;
    text-decoration:none;
    transition: color .25s, transform .25s;
  }
  .social .social-icon:hover{ color:var(--accent); transform: translateY(-3px); }
  
  /* ---- Sections ---- */
  .section-title{
    font-family: "Preahvihear";
    font-size:2.2rem;
    color:var(--accent);
    margin-bottom:.6rem;
  }
  
  .about-text{ color:var(--muted); line-height:1.8; font-size:1rem; }
  .about-list li{ color:var(--muted); margin-top:.4rem; list-style:none; ;}
  .about-list li a{text-decoration: none; color: var(--accent);direction: rtl;}
  /* small about card */
  .about-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:12px;
    padding:1.2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display:inline-block;
  }
  
  /* ---- Skills ---- */
  .skill h5{ color:#fff; margin-bottom:.6rem; }
  .custom-progress{ height:12px; background: rgba(255,255,255,0.04); border-radius:999px; overflow:hidden; }
  .custom-progress .progress-bar{
    background: linear-gradient(90deg,var(--accent), #7a4bff);
    box-shadow: 0 8px 30px rgba(162,89,255,0.12);
    font-weight:700;
    color:#fff;
    text-align:right;
    padding-right:10px;
  }
  
  /* ---- Projects ---- */
  .project-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:12px;
    padding:1.25rem;
    transition: transform .35s, box-shadow .35s;
    box-shadow: 0 8px 30px rgba(162,89,255,0.06);
  }
  .project-card:hover{ transform: translateY(-10px); box-shadow: 0 18px 60px rgba(162,89,255,0.18); }
  .project-thumb{
    height:140px;
    border-radius:8px;
    background: linear-gradient(135deg, rgba(162,89,255,0.12), rgba(32,10,60,0.4));
    margin-bottom:.8rem;
  }
  .project-card img{
    width: 100%;
  }
  
  /* ---- Contact ---- */
  .contact-list .link{ color:var(--muted); text-decoration:none; }
  .contact-form .form-control{
    background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:#fff;
  }
  .contact-form .btn{ min-width:140px; }
  
  /* Footer */
  .footer{
    background: #0c0413;
    border-top:1px solid rgba(162,89,255,0.08);
    margin-top:3rem;
  }
  
  /* ---- Animations: Fade-in / slide ---- */
  .fade-in, .fade-in-left, .fade-in-right { opacity:0; transform: translateY(20px); transition: all .7s cubic-bezier(.2,.9,.3,1); }
  .fade-in-left { transform: translateX(-20px); }
  .fade-in-right { transform: translateX(20px); }
  .visible { opacity:1; transform: translateY(0) translateX(0); }
  
  /* typing placeholder style */
  .up .typed{ color:var(--accent); font-weight:800; margin-left:.25rem; }
  
  /* responsive adjustments */
  @media (max-width: 992px){
    .hero{ flex-direction:column; gap:1.6rem; padding-top:4.5rem}
    .hero-img img.main-img{ width:260px }
    .main-heading{ font-size:1.9rem }
  }