/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



/* MY CODE */

:root {
  /* Colour variables */
  --black: #080808;
  --dark-gray: #1a1a1a;
  --gray: #2a2a2a;
  --light-gray: #b5b5b5;
  --white: #ffffff;
  --teal: #26c9b3;

  /* Font system */
  --base-font: 'Raleway', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --heading-font: 'Montserrat', var(--base-font);

  /* Scalable font sizes (use clamp for better cross-device scaling) */
  --fs-base: 1rem; /* 16px default */
  --fs-nav: clamp(1.25rem, 1.25rem + 1.2vw, 2.5rem); /* nav link size */
  --fs-logo: clamp(1.25rem, 1.25rem + 1.2vw, 2.5rem);
  --fs-hero-h1: clamp(1.5rem, 1.2rem + 2.4vw, 2.2rem);
  --fs-body-lg: clamp(1rem, 0.9rem + 1vw, 1.75rem);
  --fs-h1: clamp(1.5rem, 1.2rem + 2.4vw, 2.2rem);
  --fs-h2: 1.4rem;
  --fs-h3: 1.1rem;
  --fs-body: clamp(1rem, 0.9rem + 1vw, 1.75rem);
  --fs-body-sm: 0.75rem;
  --container-max: 1200px;
  --gap-lg: 4rem;
  --gap-md: 2rem;
  --gap-sm: 1rem;
}

/* Reset (kept minimal from your original reset) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--base-font);
  font-size: var(--fs-base);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: min(var(--container-max), 100% - 40px);
  margin-inline: auto;
}

/* Links */
a {
  color: var(--teal);
  text-decoration: none;
}

/* HEADER */
.site-header {
  width: 100%;
  background-color: var(--black);
  border-bottom: 1px solid var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  height: 100px;
  padding-inline: 10px;
}

/* Logo */
.logo {
  font-family: var(--heading-font);
  color: var(--white);
  font-size: var(--fs-logo);
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.dot {
  color: var(--teal);
}

/* Mobile toggle */
.mobile-nav-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 2000;
  display: block;
}

/* hamburger */
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--white);
  content: "";
  position: relative;
  transition: transform 0.2s ease;
}
.hamburger::before {
  transform: translateY(-8px);
}
.hamburger::after {
  transform: translateY(6px);
}

/* Off-canvas nav (mobile) */
.main-nav {
  position: fixed;
  inset: 0 0 0 30%;
  background: var(--black);
  padding: min(30vh, 10rem) 2rem;
  border-left: 1px solid var(--teal);
  transform: translateX(100%);
  transition: transform 0.35s ease-in-out;
  z-index: 1500;
}

/* When visible */
.main-nav[data-visible="true"] {
  transform: translateX(0);
}

/* Nav list */
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: 0;
  margin: 0;
}

.nav-list a {
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--white);
  display: inline-block;
  line-height: 1;
}

/* Tablet and up: show horizontal nav and hide mobile toggle */
@media (min-width: 768px) {
    .logo {
  font-size: 2.5rem;
  font-weight: 600;
}


  .header-wrapper {
    height: 110px;
    padding-inline: 20px;
  }

  .mobile-nav-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    transform: none;
    inset: auto;
    padding: 0;
    border-left: 0;
    background: transparent;
  }

  .nav-list {
    flex-direction: row;
    gap: 2rem;
    align-items: center;
  }
}

/* Desktop adjustments for logo and nav sizing */
@media (min-width: 1024px) {


}

/* HERO SECTION */
.hero {
  padding: 1rem 0;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  text-align: center;
  align-items: center;
}

.home-hero-grid {
  line-height: 1.5;
}

.hero-content h1 {
  font-family: var(--heading-font);
  font-size: var(--fs-h1);
  font-weight: 550;
  text-transform: uppercase;
  word-spacing: 0.2rem;
  letter-spacing: 0.08rem;
  color: var(--white);
  padding: 0.5rem;
  margin: 0;
}

.hero-content p {
  font-family: var(--base-font);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--white);
  padding: 0.25rem 0.5rem;
  margin: 0;
}

.hero-content a {
  font-family: var(--base-font);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--teal);
  font-style: italic;
  padding: 0.25rem 0.5rem;
  margin: 0;
}

/* Hero image rules */
.hero-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { 
    padding: 2rem 1rem; 
    }

  .hero-content h1 { 
    font-size: calc(var(--fs-hero-h1) * 1.1); 
    }
  .hero-content p, .hero-content a { font-size: calc(var(--fs-body-lg) * 1.1); }

  .hero-grid { text-align: left; align-items: start; }
}

/* Desktop: grid layout for hero */
@media (min-width: 1024px) {


  .hero {
    padding-bottom: 3rem;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items: start;
    text-align: left;
  }

  .hero-content {
    line-height: 1.9;
  }

  .hero-content img {
    margin-top: 6rem;
  }
}

/* FOOTER */
.site-footer {
  width: 100%;
  background-color: var(--black);
  border-top: 1px solid var(--white);
  color: var(--white);
  padding: 1.25rem 0;
}

.site-footer p {
  font-family: var(--base-font);
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.footer-content {
  text-align: center;
  line-height: 1.5;
  padding: 10px 0;
}

.email-link {
  color: var(--teal);
  font-family: var(--base-font);
  font-size: 1rem;
}

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 1rem;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.socials img {
  width: 22px;
  height: 22px;
  display: block;
}

/* ABOUT SECTION */

.about-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: 10px 0;
}

.about-hero h1,
.about-hero h2,
.about-hero h3,
.about-hero p {
  margin: 0.25rem 0;
  padding: 0.25rem;
}

.about-hero h1 {
  color: var(--white);
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 550;
}

.about-hero h2 {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 550;
  text-transform: uppercase;
}

.about-hero h3 {
  color: var(--teal);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-transform: uppercase;
}

.about-hero p {
  color: var(--white);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.about-hero img,
.about-section img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Fix: use px unit and sensible scaling on medium screens */
@media (min-width: 768px) {
  .about-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items: center;
  }

  .about-hero {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
  }

  .about-hero h1 { 
    font-size: 2rem; 
    }
  .about-hero h2 { 
    font-size: 1.9rem; 
    }
  .about-hero h3 { 
    font-size: 1.75rem; 
    }
  .about-hero p { 
    font-size: 1.25rem; 
    }
  .about-hero img { 
    max-width: 500px; 
    }
}

/* CONTACT SECTION */
.contact-page-section {
  padding: 3rem 0;
}

.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items: start;
  }
}

/* LEFT SIDE */
.contact-info h1 {
  color: var(--white);
  font-family: var(--base-font);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  margin-bottom: 1rem;
}

.contact-info p {
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* contact details fix: font-weight not font-size */
.contact-details {
  margin-top: 2rem;
  color: var(--white);
  font-weight: 400;
  line-height: 1.2;
}

/* FORM */
.form-wrapper {
  background: var(--black);
}

#dynamicContactForm {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.input-group label {
  color: var(--white);
  font-family: var(--base-font);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.input-group input,
.input-group textarea {
  background-color: transparent;
  border: 1px solid var(--light-gray);
  color: var(--white);
  padding: 0.75rem;
  font-family: var(--base-font);
  font-size: 0.95rem;
  resize: vertical;
}

.input-group textarea {
  min-height: 140px;
}

.input-group input:focus,
.input-group textarea:focus {
  outline: none;
  border-color: var(--teal);
}

/* BUTTON */
.btn-primary {
  background-color: var(--black);
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 0.75rem 1.5rem;
  font-family: var(--base-font);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--teal);
  color: var(--black);
}

/* FORM STATUS MESSAGE */
.form-status {
  font-family: var(--base-font);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* small accessibility helpers */
.mobile-nav-toggle:focus { outline: 2px dashed var(--teal); outline-offset: 3px; }


/* =========================
   WORKS / TEMPLATES PAGE
   ========================= */

/* Intro section */
.works-intro {
  padding: 2.5rem 0 1.5rem;
  text-align: center;
}

.works-intro h1 {
  font-family: var(--heading-font);
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  margin-bottom: 0.75rem;
}

.works-intro .lead {
  font-size: var(--fs-body);
  color: var(--light-gray);
  line-height: 1.6;
  max-width: 70ch;
  margin: 0 auto;
}

/* The responsive grid */
.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0 3rem;
}

/* 2 columns on tablets */
@media (min-width: 700px) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* 3 columns on desktop */
@media (min-width: 1100px) {
  .works-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card */
.work-card {
  background: var(--dark-gray);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  border-color: rgba(38, 201, 179, 0.6);
}

/* Image container keeps consistent aspect ratio */
.work-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* perfect for website mockups */
  background: var(--gray);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The preview image */
.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* mockup fills nicely */
  display: block;
  transition: transform 0.35s ease;
}

.work-card:hover .work-image img {
  transform: scale(1.04);
}

/* Badge */
.work-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(8, 8, 8, 0.85);
  border: 1px solid rgba(38, 201, 179, 0.6);
  color: var(--white);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

/* Content */
.work-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.work-content h3 {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  margin: 0;
}

.work-content p {
  color: var(--light-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Tags */
.work-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.work-tags li {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}

/* Button (secondary) */
.btn-secondary {
  margin-top: auto; /* pushes button to bottom */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border-radius: 10px;
  border: 1px solid var(--teal);
  color: var(--teal);
  background: transparent;
  font-family: var(--base-font);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--teal);
  color: var(--black);
  outline: none;
}

/* Optional: subtle focus ring for accessibility */
.work-card a:focus {
  outline: 2px dashed var(--teal);
  outline-offset: 3px;
}

/* Optional: animation classes if you use the JS below */
.work-card.is-hidden {
  opacity: 0;
  transform: translateY(10px);
}

.work-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}


/* ===== Small-screen robustness fixes (paste at end of styles.css) ===== */

/* 1) safer font-size clamps for very small screens */
:root {
  /* slightly lower the minimum nav/logo sizes for small screens */
  --fs-nav: clamp(1rem, 1rem + 1vw, 2.2rem);
  --fs-logo: clamp(1rem, 1rem + 1.2vw, 2.2rem);
}

/* 2) container padding so content never touches viewport edge */
.container {
  width: min(var(--container-max), 100%);
  padding-inline: 20px; /* keeps consistent gutter on tiny screens */
}

/* 3) prevent long words from forcing horizontal scroll */
.hero-content h1,
.hero-content p,
.about-hero p,
.work-content p,
.footer-content,
.contact-info p,
.btn-primary,
.btn-secondary {
  overflow-wrap: anywhere;   /* break long words/URLs */
  word-break: break-word;
}

/* 4) make hero heading and other large text wrap and hyphenate */
.hero-content h1 {
  hyphens: auto;
  line-height: 1.08;
  max-width: 100%;
}

/* 5) prevent buttons from overflowing; allow multi-line buttons */
.btn-primary,
.btn-secondary {
  white-space: normal;
  display: inline-block;
  text-align: center;
  word-break: break-word;
  padding: 0.6rem 1rem;
}

/* 6) make off-canvas mobile nav use a predictable width (avoid inset-based issues) */
.main-nav {
  /* prefer width + right positioning for small screens */
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(420px, 85%); /* at very small screens the menu will be at most 85% of viewport */
  padding: min(26vh, 7rem) 1.25rem;
  transform: translateX(110%); /* keep same hidden state behaviour */
}

/* 7) reduce header height / font sizes on small screens so nav items fit */
@media (max-width: 767px) {
  .header-wrapper {
    height: 72px;
    padding-inline: 12px;
    gap: 0.5rem;
  }

  .logo {
    font-size: var(--fs-logo);
    letter-spacing: 0.04rem;
  }

  .nav-list a {
    font-size: var(--fs-nav);
    line-height: 1.1;
  }

  /* hero spacing and typography */
  .hero {
    padding: 1rem 0;
  }

  .hero-content h1 {
    /* slightly reduce on small screens */
    font-size: calc(var(--fs-h1) * 0.95);
  }

  .hero-grid {
    gap: 1.25rem;
    text-align: left;
    align-items: flex-start;
  }

  .hero-image img { max-width: 100%; height: auto; }

  /* Make works grid 1 column on narrow phones */
  .works-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* contact layout stacks */
  .contact-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* 8) extra tiny-screen tuning */
@media (max-width: 420px) {
  .header-wrapper { height: 64px; padding-inline: 10px; }
  .logo { font-size: 1.05rem; }
  .nav-list a { font-size: 0.95rem; }
  .hero-content h1 { font-size: 1.25rem; }
  .about-hero img { max-width: 100%; }
  .input-group input, .input-group textarea { font-size: 0.95rem; padding: 0.65rem; }
  .work-badge { top: 10px; left: 10px; padding: .25rem .45rem; font-size: .7rem; }
}

/* 9) accessibility: ensure focus outlines remain readable */
a:focus, button:focus, .work-card a:focus {
  outline: 3px dashed rgba(38,201,179,0.18);
  outline-offset: 3px;
}

.footer-social {
  display: flex; /* Align items in a row */
  justify-content: center; /* Center them horizontally */
  gap: 20px; /* Space between icons */
  padding: 1rem 0; /* Top and bottom padding to balance the size */
}

.footer-social a {
  display: inline-block;
}

.footer-social img {
  width: 32px; /* Adjust size as needed */
  height: 32px; /* Same as width for square icons */
  transition: transform 0.2s ease, opacity 0.2s ease; /* Smooth hover effect */
}

.footer-social img:hover {
  transform: scale(1.2); /* Slightly enlarge on hover */
  opacity: 0.8; /* Fade the icon for a hover effect */
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 1rem 0;
}

.footer-social a {
  display: inline-block;
}

.footer-social img {
  width: 50px;
  height: 50px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social img:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* Ensure header appears responsive and aligned */

/* Header alignment + max width */
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: 1rem;
}

/* Hamburger menu */
.mobile-nav-toggle {
  background: none;
  border: none;
  display: block;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 2000;
}

.mobile-nav-toggle .hamburger {
  width: 24px;
  height: 2px;
  background-color: var(--white);
  position: relative;
}

.mobile-nav-toggle .hamburger::before,
.mobile-nav-toggle .hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: var(--white);
}

.mobile-nav-toggle .hamburger::before {
  top: -8px;
}

.mobile-nav-toggle .hamburger::after {
  top: 8px;
}

/* Default hidden mobile menu behavior */
.main-nav {
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  background: var(--black);
  width: 75%;
  transition: right 0.3s ease;
  padding: 2rem 1rem;
  z-index: 1500;
}

.main-nav[data-visible="true"] {
  right: 0;
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
  .header-wrapper {
    flex-wrap: wrap;
    height: auto;
    padding: 0.8rem 1rem;
  }

  .logo {
    font-size: var(--fs-logo);
    text-align: center;
    margin-bottom: 0.5rem;
    flex: 1 0 100%;
  }

  .main-nav {
    border-left: none;
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .nav-list {
    flex-direction: column;
    gap: 1rem;
  }

  /* Adjust hero section spacing for smaller screens */
  .hero-content h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-grid {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .hero {
    padding: 1rem;
  }
}

/* Styles for form status after submission */
.contact-page-section .form-status {
  margin-top: 1rem; /* Add some space above the message text */
  font-size: 1rem;
  color: #ffffff; /* Default color */
  text-align: left;
}

.contact-page-section .form-status.success {
  color: var(--teal); /* Green for a successful submission */
}

.contact-page-section .form-status.error {
  color: #ff6b6b; /* Red for an error message */
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column; /* This ensures the menu items are displayed in a column */
  gap: var(--gap-md); /* This sets space between the menu items */
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .nav-list {
    flex-direction: row; /* Horizontal layout for desktop */
    gap: 2rem; /* Adjust the space between items for larger screens */
  }
}


/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Arial', sans-serif;
}

/* 404 Page Not Found Styles */
.not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%; /* Full height for full-page centering */
  background-color: #080808; /* Dark background */
  color: #fff;
}

.content {
  padding: 2rem;
}

.content h1 {
  font-size: 10rem;
  font-weight: bold;
  margin: 0;
  color: var(--teal, #26c9b3); /* Default to teal, customizable */
}

.content h2 {
  font-size: 2rem;
  margin: 1rem 0;
  color: #fff;
}

.content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #b5b5b5;
}

/* Button styling */
.btn-home {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: #080808;
  background-color: var(--teal, #26c9b3);
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-home:hover {
  background-color: #1aaba0; /* Slightly darker teal on hover */
  color: #fff;
}