html, body {
  margin: 0;
  padding: 0;               /* reset */
  background-color: #f8f9fa;/* same bg on both */
}

body {
  padding-top: 1px;         /* trap any collapsed top margin */
  padding-bottom: 1px;      /* trap any collapsed bottom margin */
}

header, footer {
  width: 100vw;          /* full viewport width */
  margin: 0;             /* cancel any auto-centering */
  padding: 20px 0;       /* as before */
  background: #005792;   /* your blue */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;    /* if you’re also using negative margins elsewhere */
  left: 50%;             /* shift back into place */
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
}
@media (max-width: 600px) {
  .container {
    width: 90%;           /* full‐bleed on small screens */
    padding: 0 10px;       /* small side padding */
    margin: 0 auto;        /* center if it ever shrinks */
    
    /* if you want to center child elements too: */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;    /* for text/content */
  }

  /* Optional: if you have block-level children you want to limit */
  .container > * {
    max-width: 100%;       /* ensure they don’t overflow */
  }
}
/* CSS */
.phone-container {
  /* replicate your original vertical offset */
  top: -75px;
  
  /* right‑align its contents and keep them on one line */
  display: flex;               
  justify-content: flex-end;   /* pushes everything to the right */
  align-items: center;         /* vertical centering */
  white-space: nowrap; 
  /* if you need it to flow inline with other text: */
  /* display: inline-flex; */
}

.phone {
  margin: 0;       /* remove default h1 margins */
}

.phoneimg {
  width: 40px;
  height: 40px;
  margin-left: 0.5rem;  /* space between text and icon */
}
@media screen and (max-width: 480px) {
  .phone-container {
    display: flex;            /* still flex, but allow wrap */
    flex-wrap: wrap;          /* allow items to move to the next line */
    justify-content: center;  /* center on narrow viewports */
    margin-top: -30px;            /* reset if negative pushes it off-screen */
    gap: 0.25rem;             /* tighter spacing */
  }

  .phone {
    margin: 0;
    /* shrink text for small screens */
    font-size: 1rem;          
    line-height: 1.2;
  }

  .phoneimg {
    /* shrink icon proportionally */
    width: 24px;
    height: 24px;
  }
}

/* Header */
header {
    background: #005792;
    color: #fff;
    padding: 20px 0;         /* unified padding */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
    font-size: 2rem;
    font-weight:100px;
    margin: 0;
}
  .nav-links {
  position: static;
  top: 10px;
  margin-top: -65px;}
  @media (max-width: 600px) {
  .nav-links {
    margin-top: -20px;
    gap: 30px;
    position: static;         /* let it flow in the normal document */
    top: auto;                /* reset the fixed positioning */
    display: flex;            /* enable flexbox */
    flex-direction: row;      /* lay items out in a row */
    flex-wrap: nowrap;        /* prevent wrapping to the next line */
    justify-content: space-around; /* spread them evenly */
    align-items: center;      /* vertically center if they’re taller */
    width: 100%;              /* fill the screen width */
    padding: 0px 0;          /* some vertical breathing room */
    z-index: 9999;             /* keep it on top if needed */
  }

  .nav-links a {
    flex: 1;                  /* make all links share available space */
    text-align: center;
    /* adjust padding/margins as needed */
  }
}
    nav {
      margin-top: 5px;
    }

    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 20px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      font-size: 1rem;
      transition: color 0.3s;
    }

    nav a:hover {
      color: #ffdd57;
    }

    /* new dropdown styles */
    nav ul > li {
      position: relative;       /* anchor for the dropdown */
    }

    nav ul li ul {
      position: absolute;
      top: 100%;                /* directly below the parent li */
      left: 0;
      background: #333;
      padding: 0.5rem 0;
      list-style: none;
      display: none;            /* hide by default */
      min-width: 150px;
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      z-index: 999999;
    }

    nav ul li:hover > ul,
    nav ul li:focus-within > ul {
      display: block;           /* show on hover/focus */
    }

    nav ul li ul li {
      margin: 0;
    }

    nav ul li ul li a {
      display: block;
      padding: 0.5rem 1rem;
      font-weight: normal;
      white-space: nowrap;
    }

    nav ul li ul li a:hover {
      background: #444;
    }
    /* Hero */
    .hero { display: flex; flex-wrap: wrap; align-items: center; margin: 40px 0; }
    .hero .hero-text { flex: 1 1 400px; padding-right: 20px; }
    .hero-photo {
    width: 100%;
    height: auto;
    max-width: 450px;
    }
    .hero h1 {       font-family: 'Oswald', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 3rem;
      letter-spacing: 0.1em;
      color: #4a8bda;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
      margin: 1em 0; }
    @media (max-width: 600px) {
  /* Center all sections’ contents */
  body,
  section,
  .features,
  .specs,
  .gallery {
    text-align: center;
    padding-left: 1rem;       /* small side padding for breathing room */
    padding-right: 1rem;
  }

  /* Stack and center the hero */
  .hero {
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
  }
  .hero .hero-text,
  .hero .hero-img {flex: 0 0 90%; 
    max-width: 90%;
  }
  .hero .hero-text {
    margin-bottom: 20px;
  }
.hero-title {
  font-size: clamp(1.5rem, 8vw, 3rem) !important;
}

  .specsdesc{
    font-size: 30px;
    text-align: center;
  }

  /* Center lists */
  .features ul {
    margin: 0 auto;           /* center the UL itself */
    display: inline-block;    /* shrink‑to‑fit so bullets stay inward */
    text-align: left;         /* keep bullets on the left within the list */
  }

  /* Center tables */
  table {
    margin: 20px auto;        /* auto‑side margins to center */
    width: 100%;              /* still full‑width on mobile */
  }

  /* Center gallery grid & images */
  .gallery-images {
    justify-items: center;    /* center grid cells if their content is narrower */
  }
  .gallery-images img {
    margin: 0 auto;           /* center each image if it’s not full width */
  }
}
    /* Sections */
    section { margin-bottom: 60px; }
    h2 {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 3rem;
      letter-spacing: 0.1em;
      color: #4a8bda;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
      margin: 1em 0; }
    .features ul { list-style: disc inside; }

    /* Specs Table */
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { border: 1px solid #ccc; padding: 12px; text-align: left; }
    th { background: #4a8bda; }

/* Gallery section */
.gallery {
  padding: 20px;
}

/* Grid for the images */
.gallery-images {
  display: grid;
  /* each column is at least 200px, and will expand to fill available space */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Make sure each image fills its cell, but keeps its aspect ratio */
.gallery-images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;  /* if you want center‑cropping for mismatched aspect ratios */
}

    /* CTA Button */
    .btn { display: inline-block; background: #ee9b00; color: #fff; padding: 12px 24px; border-radius: 4px; transition: background 0.3s; }
    .btn:hover { background: #ca6702; }

    /* Footer */
    footer p { text-align: center; }
    /* lightbox overlay */
#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* the image itself */
#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* close button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  user-select: none;
}

/* nav container spans entire overlay */
.lightbox-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* so only arrows are clickable */
}

/* arrows */
.lightbox-prev,
.lightbox-next {
  pointer-events: auto;
  color: #fff;
  font-size: 3rem;
  padding: 0 20px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.lightbox-prev:hover,
.lightbox-next:hover {
  color: #ffdd57;
}
  .logo {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  text-decoration: none;
}
.logo:hover {
  /* optional hover */
  color: #ffdd57;
}