/* 
    WEBSITE STYLESHEET

    This file controls the visual design of the whole website.

    Main structure:
    1. Global settings
    2. Navigation
    3. Hero
    4. Buttons
    5. General sections
    6. Services
    7. Projects
    8. About and certifications
    9. Contact
    10. Footer
    11. Projects page
    12. Responsive rules
    13. Accessibility

    Important:
    - Do not rename classes unless the same class is changed in HTML.
    - Use existing variables from :root for colours.
    - Keep responsive rules near the bottom of the file.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

/* 
    DESIGN VARIABLES

    These variables define the main colour system.

    Change colours here if the website colour palette needs to be adjusted.
    The rest of the CSS uses these variables.
*/

:root {
  --bg: #050b12;
  --bg-soft: #08121d;
  --section: #0b1623;
  --card: #101d2b;

  --border: rgba(255, 255, 255, 0.08);

  --text: #f4f7fb;
  --muted: #aeb9c7;

  --accent: #c9962e;
  --accent-secondary: #b87333;
  --accent-soft: rgba(201, 150, 46, 0.12);
  --accent-secondary-soft: rgba(184, 115, 51, 0.14);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* NAVBAR */

.navbar {
  height: 94px;
  padding: 22px 5%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;

  background: rgba(5, 11, 18, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;

  background: transparent;
  padding: 0;
  border-radius: 0;
}

.logo img {
  height: 85px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.12));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.nav-links a:hover {
  color: white;
}

.nav-links a[aria-current="page"] {
  color: white;
  font-weight: 700;
}

.nav-phone {
  padding: 13px 22px;
  border-radius: 3px;

  background: var(--accent);
  color: #06111c;

  font-weight: 800;
  font-size: 15px;
}

/* HERO */

.hero {
  min-height: 100vh;
  padding: 170px 5% 120px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(5, 11, 18, 0.98) 0%,
      rgba(5, 11, 18, 0.82) 43%,
      rgba(5, 11, 18, 0.45) 100%
    ),
    url("images/hero.jpg");

  background-size: cover;
  background-position: center right;
}

.hero-content {
  max-width: 760px;
}

.eyebrow {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(201, 150, 46, 0.15);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(52px, 6.8vw, 96px);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -4px;
  margin-bottom: 32px;
}

.hero-text {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 21px;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 42px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 24px;
  min-width: 150px;

  border-radius: 3px;

  font-size: 15px;
  font-weight: 700;
  transition: 0.2s ease;
}

.primary {
  background: var(--accent);
  color: #06111c;
}

.primary:hover {
  background: var(--accent-secondary);
}

.secondary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
}

.secondary:hover {
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
  background: var(--accent-secondary-soft);
}

/* INFO STRIP */

.info-strip {
  display: flex;
  justify-content: center;
  gap: 54px;
  flex-wrap: wrap;

  padding: 26px 5%;

  background: #07111b;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  color: rgba(255, 255, 255, 0.58);

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* GENERAL SECTIONS */

.section {
  padding: 105px 5%;
}

.section-header {
  margin-bottom: 46px;
}

.section-intro {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
}

.section-header h2,
.about-section h2,
.contact-section h2 {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -2px;
}

.split {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}

.text-link {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  transition: 0.2s ease;
}

.text-link:hover {
  color: var(--accent-secondary);
}

/* SERVICES */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.service-card {
  min-height: 280px;
  padding: 42px;

  background: linear-gradient(
    180deg,
    rgba(16, 29, 43, 0.96),
    rgba(9, 20, 32, 0.96)
  );
  border: 1px solid var(--border);
  border-radius: 4px;

  transition: 0.2s ease;
}

.service-card:hover {
  border-color: rgba(201, 150, 46, 0.55);
  background: linear-gradient(
    180deg,
    rgba(16, 29, 43, 0.98),
    rgba(14, 24, 36, 0.98)
  );
  transform: translateY(-3px);
}

.service-card h3 {
  font-size: 26px;
  font-weight: 750;
  margin-bottom: 16px;
}

.service-card p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

/* PROJECTS */

.projects-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.project-card {
  background: #07111b;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.project-card img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.project-card div {
  padding: 26px;
}

.project-card h3 {
  font-size: 23px;
  font-weight: 750;
  margin-bottom: 10px;
}

.project-card p {
  color: var(--muted);
  font-size: 16px;
}

/* ABOUT */

.about-section {
  padding: 110px 5%;

  display: grid;
  grid-template-columns: 1fr 1.5fr 240px;
  gap: 60px;
  align-items: start;

  background: linear-gradient(90deg, rgba(5, 11, 18, 1), rgba(8, 18, 29, 1));
}

.about-text p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* CONTACT */

.contact-section {
  margin: 0 5% 70px;
  padding: 46px;

  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 70px;
  align-items: center;

  background: #0c1a28;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.contact-section h2 {
  font-size: clamp(30px, 3vw, 42px);
  margin-bottom: 16px;
}

.contact-section p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.contact-details {
  background: rgba(5, 11, 18, 0.55);
  padding: 34px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.contact-details p {
  margin-bottom: 16px;
}

.contact-details strong {
  color: white;
}

.contact-details .btn {
  margin-top: 12px;
}

/* FOOTER */

.footer {
  padding: 34px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #040911;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.footer img {
  width: 180px;
  height: auto;
  max-width: 180px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
}

/* 
    PROJECTS PAGE

    These styles control projects.html.

    Each project uses:
    - .portfolio-project for the full project section
    - .project-info for text and bullet points
    - .project-gallery for images
*/

.page-hero {
  padding: 180px 5% 90px;
  background:
    linear-gradient(90deg, rgba(5, 11, 18, 0.96), rgba(5, 11, 18, 0.78)),
    url("images/hero.jpg");

  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  max-width: 900px;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 0.98;
  letter-spacing: -3px;
  margin-bottom: 28px;
}

.page-hero p {
  max-width: 760px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.6;
}

.portfolio-page {
  background: var(--bg);
}

.portfolio-project {
  padding: 100px 5%;
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 70px;
  align-items: start;
  border-bottom: 1px solid var(--border);
}

.project-info {
  position: sticky;
  top: 130px;
}

.project-info h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 24px;
}

.project-info p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 26px;
}

.project-info ul {
  list-style: none;
}

.project-info li {
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--border);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.project-gallery img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.project-gallery img:first-child {
  grid-column: span 2;
  height: 460px;
}

/* CONTACT BUTTONS */

.contact-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* CERTIFICATIONS */

.certifications {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

  gap: 14px;

  width: 100%;
}

.certification-item {
  min-height: 92px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.certification-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 115px;
  max-height: 58px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.certifications-note {
  grid-column: 1 / -1;
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ABOUT SECTION UPDATE */

.about-section {
  grid-template-columns: 0.9fr 1.2fr 1fr;
}

/* 
    RESPONSIVE RULES

    These rules control how the website adapts to tablets and mobile screens.

    Breakpoints:
    - 1100px: tablet / small laptop layout
    - 900px: portfolio project layout changes
    - 700px: mobile layout

    Keep all mobile layout changes here.
*/

/* RESPONSIVE */

@media (max-width: 1100px) {
  .navbar {
    height: auto;
    padding: 18px 5%;
    flex-wrap: wrap;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .services-grid,
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-section,
  .contact-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .portfolio-project {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 76px 5%;
  }

  .project-info {
    position: static;
  }

  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-gallery img,
  .project-gallery img:first-child {
    grid-column: span 1;
    height: 260px;
  }
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .navbar {
    position: static;
    height: auto;
    padding: 18px 5%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .logo img {
    height: 70px;
    width: auto;
  }

  .nav-links {
    order: 2;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .nav-phone {
    order: 3;
    width: 100%;
    text-align: center;
  }

  .hero,
  .page-hero {
    padding: 70px 5%;
    min-height: auto;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 42px;
    line-height: 1.02;
    letter-spacing: -1.6px;
  }

  .hero-text,
  .page-hero p {
    font-size: 17px;
    line-height: 1.6;
  }

  .hero-buttons,
  .contact-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn,
  .contact-actions .btn {
    width: 100%;
  }

  .info-strip {
  display: none;
  }

  .section {
    padding: 76px 5%;
  }

  .services-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card img {
    height: 240px;
  }

  .split {
    flex-direction: column;
    align-items: start;
  }

  .about-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 70px 5%;
    width: 100%;
  }

  .about-section > div,
  .about-text,
  .certifications {
    width: 100%;
    max-width: 100%;
  }

  .certifications {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .certification-item {
    min-height: 100px;
    padding: 12px;
  }

  .certification-item img {
    max-width: 100px;
    max-height: 80px;
  }

  .contact-section {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0 5% 50px;
    padding: 28px;
  }

  .contact-details {
    padding: 24px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ACCESSIBILITY */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus {
  left: 20px;
  top: 20px;
  z-index: 9999;

  padding: 12px 18px;

  background: var(--accent);
  color: #06111c;

  font-weight: 700;
}