* { margin:0; padding: 0; box-sizing: border-box; } 
body{ background-color: #000; font-family: "Poppins"; line-height: 1.6; color: #fff; } 
h2{ font-size: 36px; font-weight: 600; text-align: center; }
nav{ width: 100%; height:60px; padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; background: #000; position: sticky; top: 0; z-index: 100; } 
nav .logo img{ height: 132px; } 
nav ul{ list-style: none; display: flex; gap: 2rem; } 
nav ul li a{ text-decoration: none; color: #fff; font-weight: 400; font-size: 14px; transition: 0.3s; } 
nav ul li a:hover { color: #00FF00; } .hero{ text-align: center; padding: 6rem 2rem; } 
.hero h1{ font-size: 36px; padding-bottom: 14px; padding-top: 80px; font-weight: 600; } 
#p1{ font-size: 32px; font-weight: 500; padding-bottom: 14px;}
#p2{ font-size: 24px; font-weight: 400; padding-bottom: 180px; } 
.hero .socials{ display: flex; justify-content: center; gap: 20px; } 
.hero .socials img{ width: 50px; transition: 0.3s; filter: brightness(0) invert(1); } 
.hero .socials img:hover { filter: brightness(0) saturate(100%) invert(69%) sepia(95%) saturate(749%) hue-rotate(90deg) brightness(90%) contrast(92%); transform: scale(1.2); } 
/* About Section */ 
.about { padding: 5rem 10%; align-items: start; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap:6px; padding-bottom: 140px; } 
.about h2{ grid-column: 1 / -1; text-align: center; padding-top: 20px; padding-bottom: 100px; } 
.about p { width: 520px; height:201px; margin: 0 2.5rem; text-align: left; font-size: 14px; font-weight: 400; } 
.images { display: grid; grid-template-columns: max-content max-content; gap: 11px; } 
.images img {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.left img { width: 251px; height: 314px; border-radius: 35px; object-fit: cover; } 
.right { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; } 
.right img { width: 219px; height: 153px; border-radius: 35px; object-fit: cover; } 
/* projects section */ 
.projects { padding: 5rem 10%; text-align: center; } 
.projects h2 { padding-bottom: 63px; } 
.project-nav {
  margin: 0; padding-bottom: 40px;
}
.project-nav a {
  background: transparent;
  border: 2px solid #0f0;
  color: #0f0;
  padding: 8px 15px;
  margin: 5px;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.3s;
}
.project-nav a.active,
.project-nav a:hover {
  background: #0f0;
  color: #111;
}


.project-grid { display: grid; grid-template-columns: 1fr; gap: 47px; } 
.project-card { gap: 10px; display: flex; height: 300px; background: #2c2b2b; padding: 10px; border-radius: 20px; text-align: left; transition:0.3s; width: 1024px; height: 300px; margin: 20px auto; } 
.project-card:hover { transform: translateY(-6px); box-shadow: 0 0 18px rgba(0, 255, 102, 0.9); } 
.project-card img { width: 443px; height: 283px; border-radius: 20px; } 
.project-card h3 { font-size: 16px; font-weight: 600; margin-left: 10px; margin-bottom: 20px; } 
.project-card p { font-size: 14px; font-weight: 400; margin-left: 10px; margin-bottom: 20px; } 
.card-content { display: flex; flex-direction: column; } 
.project-card a{ text-decoration: none; margin-left: 10px; font-size: 14px; font-family: "Poppins"; font-weight: 400; } 
.project-card .btn { background: #00FF00; width: 500px; height: 40px; padding: 10px 60px; border-radius: 10px; cursor: pointer; margin-top: auto; } 
.project-card .btn:hover { background: #2c2b2b; box-shadow: 0 0 18px rgba(0, 255, 102, 0.9); color: #fff; } 
/* contact section */
.contact { padding-bottom: 63px; } 
.contact h2 { font-size: 2rem; text-align: center; margin-bottom: 40px; } 
.contact .container { display: flex; justify-content: center; align-items: flex-start; gap: 40px; max-width: 1000px; margin: 0 auto; } 
.container-left { flex: 1; font-size: 0.95rem; line-height: 1.6; } 
.container-left p { margin-top: 125px; font-size: 14px; font-weight: 400; margin-bottom: 20px; } 
.socials1 img:hover { transform: scale(1.2); filter: brightness(0) saturate(100%) invert(69%) sepia(95%) saturate(749%) hue-rotate(90deg) brightness(90%) contrast(92%); transform: scale(1.2); } 
.container-right { flex: 1; background: #1a1a1a; padding: 30px; border-radius: 10px; } 
.container-right form { display: flex; flex-direction: column; gap: 15px; } 
.form-row { display: flex; gap: 15px; } 
.container-right input, 
.container-right textarea { width: 100%; padding: 12px; border-radius: 6px; border: none; font-size: 1rem; } 
.container-right textarea { resize: none; height: 120px; } 
.btn-submit { padding: 12px; background: #00ff40; color: #000; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s; } 
.btn-submit:hover { background: #00cc33; } 
.form-row { display: flex; gap: 15px; } 
.container-right input, .container-right textarea { width: 100%; padding: 12px; border-radius: 6px; border: none; font-size: 1rem; } 
.container-right textarea { resize: none; height: 120px; } 
.btn-submit { padding: 12px; background: #00ff40; color: #000; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s; } 
.btn-submit:hover { background: #00cc33; }
.seo-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.blog-preview,
.blog-page,
.article-page {
  padding: 3.5rem 10%;
}
.blog-page,
.article-page {
  font-family: "Roboto", "Open Sans", Arial, sans-serif;
}
.blog-header {
  max-width: 900px;
  margin: -25px auto 36px;
  text-align: center;
}
.blog-header h1,
.article h1 {
  font-family: "Merriweather", Georgia, serif;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.blog-header p {
  max-width: 120ch;
  margin: 0 auto;
  color: #d8d8d8;
  font-size: 16px;
  line-height: 1.5;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 26px auto;
}
.blog-card {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
}
.blog-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.blog-card div {
  padding: 16px;
}
.blog-card h2,
.blog-card h3 {
  font-family: "Merriweather", Georgia, serif;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.blog-card p {
  color: #d8d8d8;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 14px;
}
.blog-date {
  color: #00ff40;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.blog-card .btn,
.blog-link {
  display: inline-block;
  background: #00ff40;
  color: #000;
  padding: 8px 13px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.blog-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.article {
  max-width: 72ch;
  margin: 0 auto;
}
.article-shell {
  width: min(72ch, 100%);
  margin: 0 auto;
}
.back-link {
  display: inline-block;
  color: #00ff40;
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 22px;
}
.back-link:hover {
  color: #fff;
}
.article-excerpt {
  color: #d8d8d8;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 24px;
}
.article-cover {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
}
.article-body {
  color: #efefef;
  font-size: 16px;
  line-height: 1.85;
}
.article-body p {
  margin-bottom: 22px;
}
.admin-body {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #0d0f10;
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px;
  background: #151817;
  border-right: 1px solid #2d332f;
}
.admin-brand {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 24px;
}
.admin-menu {
  display: grid;
  gap: 8px;
}
.admin-menu a,
.admin-logout {
  color: #dfe8e1;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.admin-menu a:hover,
.admin-logout:hover {
  background: #223127;
  color: #00ff40;
}
.admin-logout {
  display: block;
  margin-top: 40px;
}
.admin-main {
  padding: 26px;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.admin-header h1 {
  font-size: 28px;
  line-height: 1.1;
}
.admin-kicker {
  color: #00ff40;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.admin-button {
  display: inline-block;
  background: #00ff40;
  color: #000;
  border: 0;
  border-radius: 6px;
  padding: 9px 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
}
.admin-stats,
.admin-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.admin-stats article,
.admin-panel,
.admin-table,
.admin-form,
.admin-login-card {
  background: #171a19;
  border: 1px solid #303631;
  border-radius: 8px;
  padding: 16px;
}
.admin-stats span {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #00ff40;
}
.admin-panel h2 {
  font-size: 18px;
  margin-bottom: 12px;
}
.admin-row,
.admin-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #2b302c;
}
.admin-row:last-child,
.admin-table-row:last-child {
  border-bottom: 0;
}
.admin-row p,
.admin-table-row p {
  color: #cbd3ce;
  font-size: 14px;
}
.admin-row a,
.admin-table-row a {
  color: #00ff40;
  text-decoration: none;
  font-weight: 700;
}
.admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-actions form {
  margin: 0;
}
.admin-actions button {
  background: transparent;
  color: #00ff40;
  border: 1px solid #34583b;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 9px;
}
.admin-actions button:hover {
  background: #223127;
}
.admin-danger-link {
  color: #ff6b6b !important;
}
.admin-confirm {
  max-width: 560px;
  background: #171a19;
  border: 1px solid #303631;
  border-radius: 8px;
  padding: 24px;
}
.admin-confirm h1 {
  font-size: 28px;
  margin-bottom: 12px;
}
.admin-confirm p {
  color: #d8d8d8;
  margin-bottom: 18px;
}
.admin-confirm-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-danger-button {
  background: #ff4d4d;
  color: #111;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
  padding: 9px 13px;
}
.admin-form {
  max-width: 760px;
}
.admin-form label,
.admin-login-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: #edf5ef;
  font-weight: 600;
  font-size: 14px;
}
.admin-input {
  width: 100%;
  background: #0f1211;
  color: #fff;
  border: 1px solid #39413b;
  border-radius: 6px;
  padding: 9px 10px;
  font: inherit;
}
textarea.admin-input {
  resize: vertical;
}
.admin-messages,
.admin-error {
  color: #fff;
  background: #344c39;
  border: 1px solid #00ff40;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 18px;
}
.admin-login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0d0f10;
  padding: 20px;
}
.admin-login-card {
  width: min(440px, 100%);
}
.admin-login-card h1 {
  font-size: 28px;
  margin-bottom: 8px;
}
.admin-login-card p {
  color: #cbd3ce;
  margin-bottom: 24px;
}
.admin-message-card {
  border-bottom: 1px solid #2b302c;
  padding: 18px 0;
}
.admin-message-card:last-child {
  border-bottom: 0;
}
.admin-message-card h2 {
  font-size: 18px;
  margin: 12px 0 8px;
}
/* Hamburger button */
.humbuger {display: none; font-size: 28px; color: #fff; }

/* Hide links on mobile by default */
#nav-links {
  display: flex;
  gap: 2rem;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
    body {
      font-size: 14px;
      padding: 0 10px;
    }
  
    header, section, footer {
      padding: 20px 10px;
    }
    h2{font-size:30px;}
    .humbuger {
      display: block; 
    }
  
    #nav-links {
      display: none; /* hide menu by default */
      flex-direction: column;
      background: #00cc33;
      position: absolute;
      top: 60px;  /* below navbar */
      right: 0;
      width: 150px;
      padding: 10px;
      border-radius: 10px;
    }
  
    #nav-links.show {
      display: flex; 
      gap: 10px;
    }
    .hero {min-height: 80vh;}
    .hero h1{ font-size: 30px; padding-bottom: 30px; padding-top: 60px; font-weight: 600; }  
    #p1{ font-size: 20px; font-weight: 500; padding-bottom: 30px; } 
    #p2{ font-size: 18px; font-weight: 400; padding-bottom: 80px; } 
    .hero .socials{ display: flex; justify-content: center; gap: 20px; } 
    .hero .socials img{ width: 40px; transition: 0.3s; filter: brightness(0) invert(1); } 

    /* * About Section */  
    .about { padding: 2rem 5%; align-items: center; display: flex; flex-direction: column; gap:20px; } 
    .about h2{ text-align: center; padding-top: 30px; padding-bottom: 30px; font-size: 30px;} 
    .about p { margin:0 auto; width: 100%; text-align:center; font-size: 14px; font-weight: 400; } 
    .images { margin-left: 20px; width: 100%; display: grid; grid-template-columns: max-content max-content; gap: 11px; padding-top: 90px; justify-content: center;} 
    .left img { margin-top:30.5px; width: 190px; height: 250px; border-radius: 35px; object-fit: cover; } 
    .right { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; } 
    .right img { width: 190px; height: 153px; border-radius: 35px; object-fit: cover; } 

    
    /* projects section */ 
    .projects { padding: 2rem 5%; text-align: center; margin-top: 20px;} 
    .projects h2 {padding-top: 60px; padding-bottom: 63px; } 
    .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 47px; } 
    .project-card { transform: translateY(-6px); box-shadow: 0 0 18px rgba(0, 255, 102, 0.9); gap: 10px; display: flex; flex-direction: column; height: 450px; background: #2c2b2b; padding: 10px; border-radius: 20px; text-align: left; transition:0.3s; width: 100%; } 
    .project-card img { width: 100%;  border-radius: 20px; } 
    .project-card h3 { font-size: 16px; font-weight: 600; margin-left: 10px; margin-bottom: 10px; } 
    .project-card p { font-size: 14px; font-weight: 400; margin-left: 10px; margin-bottom: 40px; } 
    .project-card .btn { background: #00FF00; width: 500px; padding: 5px 60px; border-radius: 10px; cursor: pointer; margin-top: auto; } 
    .project-nav a { font-size: 12px; padding: 4px 6px; }  
    .contact h2{padding-top: 60px;} 
    .contact p{font-size: 12px;}  
    .contact .container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .container-left {
      margin-bottom: -30px;
    }
    .container-left p {
      margin-top: 20px; 
    }
    .form-row {
      flex-direction: column; /
    }
    .btn-submit {
      width: 100%; 
    } 
    .socials1 img{box-shadow: 0 0 18px rgba(0, 255, 102, 0.9);}
    .blog-preview, .blog-page, .article-page { padding: 3rem 5%; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-header h1, .article h1 { font-size: 30px; }
    .article-body { font-size: 16px; }
    .admin-body { display: block; }
    .admin-sidebar { position: static; height: auto; }
    .admin-main { padding: 22px; }
    .admin-header { align-items: flex-start; flex-direction: column; }
}