:root {
  --primary: #2866b2;
  --light: #f5f7fa;
  --gray: #eee;
  --border: #ccc;
  --font-main: 'Segoe UI', 'Arial', sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url('hero-bg.png') center top/cover no-repeat fixed, var(--light);
  color: #222;
  font-family: var(--font-main);
  line-height: 1.6;
}
.site-wrapper {
  flex: 1 0 auto;
}

header {
  background: transparent;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 10;
}
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 0.6em 1em;
  background: url('nav-devtools-bg.png') center center/cover no-repeat, #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(80,110,140,0.03);
  border-radius: 0 0 14px 14px;
  min-height: 74px;
}
nav .logo {
  font-weight: bold;
  font-size: 1.2em;
  color: var(--primary);
  margin-right: auto;
  letter-spacing: 1px;
  z-index: 2;
}
nav a {
  text-decoration: none;
  color: #222;
  margin: 0 0.8em;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  padding: 0.2em 0.6em;
  border-bottom: 2px solid transparent;
  border-radius: 5px 5px 0 0;
  background: rgba(255,255,255,0.94);
  z-index: 2;
  position: relative;
}
nav a.active, nav a:hover {
  color: var(--primary);
  background: var(--gray);
  border-bottom: 2.5px solid var(--primary);
}

.container {
  max-width: 980px;
  margin: 2em auto;
  padding: 1em;
  background: rgba(255,255,255,0.87);
  border-radius: 10px;
  box-shadow: 0 3px 16px rgba(80,110,140,0.06);
}

/* Tab Content with extra-dimmed Circuit Overlay */
.tab-content {
  display: none;
  padding: 40px 18px 20px 18px;
  background:
    linear-gradient(rgba(255,255,255,0.93), rgba(245,247,250,0.98)),
    url('circuit-overlay.png') center center/cover no-repeat;
  max-width: 900px;
  margin: 0 auto 40px auto;
  min-height: 250px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 2px 8px rgba(80,110,140,0.08);
  animation: none;
}
.tab-content.active {
  display: block;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px);}
  to   { opacity: 1; transform: none;}
}

section h2 {
  color: var(--primary);
  margin-bottom: 0.4em;
  font-size: 1.3em;
  font-weight: 700;
  border-left: 5px solid var(--primary);
  padding-left: 0.6em;
}
section {
  margin-bottom: 60px;
}

ul { padding-left: 24px; }
hr { border: none; border-top: 1px solid #eee; margin: 12px 0 24px;}
.key-skills {
  margin-top: 0.3em;
  font-weight: 600;
}
.key-skills span {
  display: inline-block;
  background: var(--gray);
  color: #333;
  border-radius: 3px;
  padding: 0.2em 0.7em;
  margin: 0 0.3em 0.3em 0;
  font-size: 1em;
}

/* Projects Carousel */
.projects-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2em 0 1.5em 0;
  gap: 1.2em;
}
.carousel-slide {
  min-width: 260px;
  max-width: 440px;
  min-height: 340px;
  background: rgba(255,255,255,0.85);
  border-radius: 14px;
  box-shadow: 0 3px 16px rgba(80,110,140,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2em 1.5em;
  text-align: center;
  transition: box-shadow 0.18s;
}
.carousel-site-preview {
  position: relative;
  width: 360px;
  height: 220px;
  border: 1.5px solid #e4e9f3;
  border-radius: 9px;
  margin-bottom: 1em;
  box-shadow: 0 3px 18px rgba(40,102,178,0.11);
  background: #fafbfc;
  overflow: hidden;
}

.carousel-site-preview iframe {
  /* Show a zoomed-out (tiny) preview of the site! */
  width: 3600px;     /* 10x container width */
  height: 2200px;    /* 10x container height */
  transform: scale(0.1);
  transform-origin: top left;
  border: none;
  pointer-events: none;   /* no interaction, preview only */
  background: white;
  /* Hide scrollbars in most browsers: */
  overflow: hidden;
  /* Don't break layout when loading fails: */
  display: block;
}

.carousel-site-logo {
  width: 72px; height: 72px; border-radius: 10px;
  object-fit: cover; box-shadow: 0 3px 12px rgba(40,102,178,0.12);
  margin-bottom: 0.8em;
}
.carousel-site-title {
  font-size: 1.2em; font-weight: 700; color: var(--primary);
  margin-bottom: 0.2em;
}
.carousel-site-desc {
  font-size: 1em; color: #333;
  margin-bottom: 1em;
}
.carousel-site-link {
  background: var(--primary);
  color: #fff; font-weight: 600; text-decoration: none;
  border-radius: 6px; padding: 0.5em 1.2em;
  font-size: 1em; transition: background 0.15s;
}
.carousel-site-link:hover { background: #1a417b; }

.services {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  margin-top: 1em;
  margin-bottom: 1em;
}
.service-card {
  flex: 1 1 200px;
  background: var(--light);
  border: 1px solid var(--gray);
  border-radius: 8px;
  padding: 1.2em 1em;
  text-align: center;
  box-shadow: 0 2px 8px rgba(80,110,140,0.03);
}
.service-card img {
  width: 44px;
  height: 44px;
  margin-bottom: 0.7em;
  background: var(--gray);
  border-radius: 5px;
}

/* Certifications Grid */
.cert-grid {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  margin: 1.2em 0;
  justify-content: flex-start;
}
.cert-card {
  background: var(--light);
  border: 1px solid var(--gray);
  border-radius: 8px;
  padding: 1.2em 1em;
  text-align: center;
  width: 180px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(80,110,140,0.03);
  transition: box-shadow 0.2s, transform 0.2s;
  outline: none;
}
.cert-card:focus, .cert-card:hover {
  box-shadow: 0 4px 16px rgba(40,102,178,0.13);
  transform: translateY(-4px) scale(1.04);
}
.cert-card img {
  width: 54px;
  height: 54px;
  margin-bottom: 0.5em;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
}
.cert-title { font-weight: 600; font-size: 1em; margin-bottom: 0.2em;}
.cert-meta { color: #888; font-size: 0.95em; }

.exp-contact-row {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
}
.experience {
  flex: 2 1 320px;
}
.contact-form {
  flex: 1 1 240px;
  background: var(--light);
  border-radius: 7px;
  padding: 1em;
  border: 1px solid var(--gray);
  box-shadow: 0 2px 8px rgba(80,110,140,0.02);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 0.7em;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 1em;
}
.contact-form button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.7em 1.3em;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.2s;
}
.contact-form button:hover {
  background: #285ba6;
}

.socials {
  margin-top: 0.7em;
  display: flex;
  gap: 1em;
}
.socials a {
  color: var(--primary);
  font-size: 1.3em;
  text-decoration: none;
}

footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 1.3em 0 0.7em;
  text-align: center;
  color: #666;
  font-size: 0.95em;
  margin-top: 2em;
}

.hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2em;
  margin-bottom: 2em;
  min-height: 340px;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(40, 102, 178, 0.08);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.82), rgba(245,247,250,0.95)),
    url('circuit-overlay.png') center center/cover no-repeat,
    rgba(14, 38, 58, 0.60);
  opacity: 0.97;
  z-index: 1;
}
.hero > * {
  position: relative;
  z-index: 2;
}
.hero-photo {
  box-shadow: 0 4px 24px rgba(40,102,178,0.18);
}

@media (max-width: 820px) {
  .hero { flex-direction: column; text-align: center; }
  .hero-content { align-items: center; }
  .services, .certs-row, .cert-grid, .exp-contact-row { flex-direction: column; }
  nav { flex-wrap: wrap; height: auto; min-height: 54px;}
  nav a { margin-right: 0.5em; font-size: 0.95em; }
  .container, .tab-content { padding: 1em 0.5em; }
  .cert-card { width: 100%; margin-bottom: 1em; }
  .carousel-slide { min-width: 97vw; max-width: 99vw; }
  .carousel-site-preview { height: 120px; }
}

.popup-modal {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(40, 102, 178, 0.24);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.5s;
}
.popup-content {
  background: #fff;
  border-radius: 14px;
  padding: 2.2em 2em 1.5em;
  box-shadow: 0 12px 48px rgba(40,102,178,0.18);
  text-align: center;
  max-width: 350px;
  width: 90%;
  position: relative;
  animation: scaleUp 0.3s;
}
.popup-content img {
  margin: 0 auto;
  display: block;
  max-height: 220px;
  object-fit: contain;
}
.popup-close {
  position: absolute; top: 12px; right: 18px;
  font-size: 1.7em; color: #2866b2;
  cursor: pointer; font-weight: bold;
}
@keyframes scaleUp {
  from {transform: scale(0.85);} to {transform: scale(1);}
}