/* Redesigned & Optimized CSS for Freelancer Aowal
   - Fixes: scrolling, sizing bugs (min-width -> min-height), accessibility, responsive tweaks
   - Added: smooth transitions, focus states, better mobile nav, compact utilities
*/

:root{
  --bg-color: #0f1720; /* slightly darker for contrast */
  --second-bg-color: #16202a;
  --card-bg: rgba(255,255,255,0.02);
  --text-color: #e6eef6;
  --muted: #a8b3bf;
  --main-color: #00e5ff;
  --glass: rgba(255,255,255,0.04);
  --radius-lg: 1.6rem;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html{
  font-size:62.5%;
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:linear-gradient(180deg,var(--bg-color), #081018 80%);
  color:var(--text-color);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; /* allow scrolling */
}

/* Layout helpers */
.section-pad{
  padding:10rem 9% 6rem;
}

section{
  min-height:60vh; /* corrected */
  padding:8rem 9% 6rem;
}

/* Header */
.header{
  position:fixed;
  inset:0 0 auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.8rem 9%;
  z-index:120;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(10,14,18,0.6), rgba(10,14,18,0.3));
  border-bottom:1px solid rgba(255,255,255,0.02);
}

.header.sticky{
  transform:translateY(-.2rem);
  box-shadow:0 6px 20px rgba(2,6,10,0.6);
}

.logo{
  font-size:2.4rem;
  font-weight:700;
  color:var(--main-color) !important;
  letter-spacing:0.2px;
}

/* Nav */
.navbar{
  display:flex;
  gap:2.4rem;
  align-items:center;
}

.navbar a{
  color:var(--muted);
  font-size:1.6rem;
  padding:.6rem 1rem;
  border-radius:.8rem;
  transition:all .25s ease;
}

.navbar a:hover,
.navbar a.active{
  color:var(--main-color);
  background:transparent;
}

#menu-icon{ display:none; font-size:3.4rem; color:var(--text-color); cursor:pointer; }

/* Home */
.home{
  display:flex;
  gap:4rem;
  align-items:center;
  justify-content:space-between;
  padding-top:7rem;
}

.home-content h3{ font-size:3.2rem; font-weight:600; color:var(--muted); }
.home-content h1{ font-size:5.2rem; line-height:1.05; margin:1.2rem 0; }
.home-content p{ font-size:1.6rem; color:var(--muted); max-width:70rem; margin-top:1.6rem; }

.multiple-text{ color:var(--main-color); font-weight:700; }

.home-img img{ width:34vw; max-width:36rem; border-radius:1rem; box-shadow:0 18px 50px rgba(0,0,0,0.6); animation:float 6s ease-in-out infinite; }

@keyframes float{ 0%{transform:translateY(0)} 50%{transform:translateY(-1.8rem)} 100%{transform:translateY(0)} }

/* Social */
.social-media{ margin-top:2.6rem; display:flex; gap:1rem; }
.social-media a{ width:4rem; height:4rem; display:inline-grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,0.06); color:var(--main-color); transition:all .3s ease; background:transparent; }
.social-media a:hover{ background:var(--main-color); color:#081018; transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,229,255,0.12); }

.btn{
  display:inline-block; padding:1.1rem 2.6rem; border-radius:4rem; background:linear-gradient(90deg,var(--main-color), #4ff9ff); color:#001017; font-weight:700; margin-top:1.8rem; box-shadow:0 8px 30px rgba(0,229,255,0.08); transition:transform .22s ease, box-shadow .22s ease; text-decoration:none;
}
.btn:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(0,229,255,0.12); }

/* About */
.about{ display:flex; gap:4rem; align-items:center; padding:6rem 9% 6rem; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-top:1px solid rgba(255,255,255,0.02); }
.about-img img{ width:40vw; max-width:42rem; border-radius:1.2rem; }

.heading{ font-size:4.8rem; text-align:center; margin-bottom:2.5rem; }

/* Services */
.services-container{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; }
.services-box{ flex:1 1 28rem; background:var(--card-bg); padding:2.6rem; border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,0.03); text-align:center; transition:transform .28s ease, box-shadow .28s ease; }
.services-box:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,0.6); }
.services-box i{ font-size:5rem; color:var(--main-color); margin-bottom:1.2rem; }
.services-box h3{ font-size:2rem; margin-bottom:.6rem; }
.services-box p{ color:var(--muted); font-size:1.5rem; }

/* Portfolio */
.portfolio-container{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.portfolio-box{ position:relative; border-radius:1.2rem; overflow:hidden; background:var(--glass); border:1px solid rgba(255,255,255,0.03); }
.portfolio-box img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.portfolio-box:hover img{ transform:scale(1.08); }
.portfolio-layer{ position:absolute; inset:auto 0 0 0; padding:2.4rem; display:flex; flex-direction:column; gap:.6rem; align-items:center; background:linear-gradient(180deg, transparent 0%, rgba(3,11,14,0.75) 60%); transform:translateY(100%); transition:transform .45s ease; }
.portfolio-box:hover .portfolio-layer{ transform:translateY(0); }
.portfolio-layer h4{ font-size:2.4rem; color:var(--text-color); }
.portfolio-layer p{ color:var(--muted); font-size:1.4rem; }
.portfolio-layer a{ width:4.8rem; height:4.8rem; display:grid; place-items:center; background:var(--main-color); color:#001017; border-radius:50%; margin-top:.6rem; }

/* Contact */
.contact form{ max-width:76rem; margin:0 auto; display:flex; flex-direction:column; gap:1.2rem; }
.input-box{ display:flex; gap:1.2rem; }
.input-box input, textarea{ width:100%; padding:1.4rem; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--text-color); border-radius:.8rem; font-size:1.5rem; }
.input-box input:focus, textarea:focus{ outline:2px solid rgba(0,229,255,0.12); border-color:var(--main-color); }
textarea{ min-height:14rem; resize:vertical; }

/* Footer */
.footer{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:2.4rem 9%; border-top:1px solid rgba(255,255,255,0.02); }
.footer p{ color:var(--muted); font-size:1.4rem; }
.footer-iconTap a{ padding:.8rem; border-radius:.8rem; display:inline-grid; place-items:center; }

/* Utility */
.center{ display:grid; place-items:center; }

/* Responsive */
@media (max-width:1100px){ html{ font-size:55%; } .home-img img{ width:40vw; } .about-img img{ width:46vw; } }

@media (max-width:900px){ .about{ flex-direction:column-reverse; } .portfolio-container{ grid-template-columns:repeat(2,1fr); } }

@media (max-width:700px){ #menu-icon{ display:block; } .navbar{ position:absolute; inset:auto 0 0 0; background:linear-gradient(180deg, rgba(10,14,18,0.95), rgba(10,14,18,0.98)); display:none; flex-direction:column; padding:2.4rem 4%; gap:1.6rem; border-top:1px solid rgba(255,255,255,0.02); }
.navbar.active{ display:flex; animation:fadeIn .25s ease both; }

.home{ flex-direction:column; text-align:center; gap:2.4rem; }
.home-img img{ width:70vw; }
.services-container{ flex-direction:column; }
.contact form{ width:100%; }
}

@media (max-width:420px){ html{ font-size:50%; } .home-content h1{ font-size:4.2rem; } }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* Accessibility tweaks */
a:focus, button:focus, input:focus, textarea:focus{ box-shadow:0 0 0 3px rgba(0,229,255,0.08); }

/* Small touch: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }
/* === Custom Adjustments by Request === */

/* Remove underline everywhere */
a { text-decoration: none !important; }

/* Remove background behind home image (force transparent) */
.home-img img {
    background: transparent !important;
    box-shadow: none !important;
}

/* Colored section headings */
.heading,
.about-content h2,
.services h2,
.portfolio h2,
.contact h2 {
    color: var(--main-color) !important;
}

/* Your name heading color */
.home-content h1 {
    color: var(--main-color) !important;
}

/* Footer copyright link clickable */
.footer-text a {
    color: var(--main-color);
    text-decoration: none;
    font-weight: 600;
}
.footer-text a:hover {
    text-shadow: 0 0 .6rem var(--main-color);
}