/* Basic reset and font */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Poppins, sans-serif; }

/* Theme variables */
:root {
  --gold: #ddd766;
  --gold-dark: #b2a24c;
  --gold-gradient: linear-gradient(180deg,#FEDB37 0%,#F7D04A 30%,#D1B464 60%,#8A6E2F 100%);
  --blue-1: #051463f7;
  --blue-radial: radial-gradient(ellipse farthest-corner at right bottom,#051463f7 0%,#051463 40%,#021030 80%), radial-gradient(ellipse farthest-corner at left top,#04206a 0%,#051463f7 60%,#021030 100%);
  --text: #f9f4db;
}

body { overflow-x: hidden; }

/* Layout containers */
.hero-header { min-height: 100vh; background: var(--blue-radial); }
.wrapper { width: 1280px; max-width: 95%; margin: 0 auto; padding: 0 20px; }

header { padding: 40px 0 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }

/* Logo */
.logo { display:inline-flex; align-items:center; text-decoration: none; color: inherit; }
.logo i { height:45px; width:45px; background:var(--gold-gradient); border-radius:50%; color:var(--blue-1); font-weight:700; font-size:1.5rem; display:inline-flex; align-items:center; justify-content:center; padding:10px; margin-right:5px; cursor:pointer; }
.logo .logo-text { font-size:24px; font-weight:500; background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Toggle button for mobile */
nav .togglebtn { width:35px; height:35px; position:absolute; top:45px; right:3%; z-index:5; cursor:pointer; display:none; }
nav .togglebtn span { display:block; background:var(--gold-gradient); width:22px; height:3px; margin:5px auto; border-radius:2px; transition:transform .25s ease, opacity .2s ease; position:relative; }

nav .navlinks { list-style:none; }
nav .navlinks li { display:inline-block; }
nav .navlinks li a { margin-right:2.5rem; background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold); font-weight:600; text-decoration: none; }

/* underline only on hover for desktop nav links */
nav .navlinks li a:hover { text-decoration: underline; }

/* Main hero */
.container { display:flex; justify-content:space-around; align-items:center; padding-top:4rem; }
.hero-pic { width:300px; height:300px; border-radius:50%; overflow:hidden; padding:15px; background:var(--gold-gradient); box-shadow:5px 7px 25px rgba(0,0,0,.5); }
.hero-pic img { width:100%; height:100%; object-fit:cover; border-radius:50%; transition:transform .5s; }
.hero-pic img:hover { transform:scale(1.2); }

.hero-text { max-width:500px; display:flex; flex-direction:column; }
.hero-text h5 { color:var(--text); font-size:14px; }
.hero-text h5 span { background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold); font-size:16px; }
.hero-text h1 { background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold); font-size:3rem; }
.hero-text p { color:var(--text); }
 
.btn-group { margin:45px 0; }
.btn-group .btn { background:var(--blue-radial); padding:12px 25px; margin-right:7px; border-radius:30px; border:2px solid transparent; box-shadow:0 10px 10px -8px rgba(0,0,0,.78); border-image-source:var(--gold-gradient); border-image-slice:1; color:transparent; background-image:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-decoration: none; }
.btn-group .btn:hover { background:var(--gold-gradient); background-size:200% 100%; color:var(--blue-1); -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:var(--blue-1); border:2px solid var(--blue-1); }
.btn.active { border-color:var(--gold); }

.hero-text .social { display:flex; gap:10px; margin-top:20px; }
.hero-text .social a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; text-decoration:none; }
.hero-text .social a i { color:#333; font-size:18px; transition:transform .5s ease, color .25s ease; }
.hero-text .social a:hover i { transform:rotate(360deg); background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold); }
.hero-text .social a:hover i.fa-github { color:#171515; }
.hero-text .social a:hover i.fa-gmail { color:#7d1507; }
.hero-text .social a:hover i.fa-phone { color:#157639; }

.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
.project-card img { width:100%; height:auto; display:block; border-radius:8px; }
.project-card { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.08); }

@media (max-width:930px) {
  nav .togglebtn { display:initial; }
  nav .togglebtn.click span { position:absolute; left:50%; top:50%; width:22px; height:3px; margin:0; transform-origin:center; transition:transform .25s ease, opacity .2s ease; }
  nav .togglebtn.click span:first-child { transform:translate(-50%,-50%) rotate(45deg); }
  nav .togglebtn.click span:nth-child(2) { transform:translate(-50%,-50%) scaleX(0); opacity:0; }
  nav .togglebtn.click span:last-child { transform:translate(-50%,-50%) rotate(-45deg); }

  nav .navlinks { position:absolute; top:150px; right:-50%; width:40%; max-height:calc(100vh - 160px); background:var(--blue-1); background-size:100% 200%; z-index:3; box-shadow:5px 13px 30px rgba(0,0,0,.12); transition:0.45s ease; padding:36px 2rem; overflow-y:auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2.25rem;}

  nav .navlinks li { display:block; }
  nav .navlinks li a { display:block; margin:0; color:var(--blue-1); font-size:1.9rem; z-index:4; text-decoration:none; padding:6px 12px; letter-spacing:.2px; font-weight:600; text-align:left; padding-left:.25rem; }

  nav .navlinks.open { right:0; border-top:6px solid transparent; border-left:6px solid transparent; border-bottom:6px solid transparent; border-right:0; border-image-source:var(--gold-gradient); border-image-slice:1; border-image-width:1; box-shadow:0 12px 26px rgba(0,0,0,.12); }

  .container, .container .hero-pic { transition:transform .45s ease; will-change:transform; }
  body.menu-open .container .hero-pic { transform:translateX(-120px); }
}

@media (max-width:768px) { .container { flex-direction:column; padding-top:2rem; } .hero-text { padding:40px 0; } }