:root {
  --primary: #4a2f7c;
  --alternate: #6c41b0;
  --secondary: #f0f0f0;
}
/* Reset some default styles */
body,
h1,
h2,
p {
  margin: 0;
  padding: 0;
}

footer {
  display: flex;
  justify-content: space-between;
  background-color: var(--primary);
  color: white;
  text-align: center;
  padding: 12px;
}
#sitemap-link {
  color: var(--primary);
  text-decoration: none;
}

body {
  font-family: Arial, sans-serif;
}

.banner {
  background-color: var(--alternate);
  justify-content: space-between;
  align-items: center;
}
.nscale-con {
  padding: 20px;
  display: grid;
  grid-template-columns: 160px auto;
  gap: 84px;
  font-size: large;
  color: white;
  max-width: fit-content;
  margin: auto;
}
.nscale-con img {
  padding: 8px;
  height: 120px;
}
.nscale-con .copy {
  font-size: 170%;
}
.nscale-con .date {
  font-size: large;
  padding-top: 16px;
}
.nscale-con .content {
  margin: auto;
}
.nowrap {
  white-space: nowrap;
}
/* Style the header */
header {
  background-color: var(--primary);
  color: white;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo {
  height: 50px;
  max-width: min-content;
  padding: 16px;
}

header h1 {
  font-size: 24px;
}

nav ul {
  list-style-type: none;
}

nav li {
  display: inline;
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.label-with-space {
  margin-top: 12px;
}

/* Style the product section */
#product {
  background-color: #fff;
  text-align: center;
  padding: 32px 12px;
}

/* Style the order section */
#order {
  background-color: #fff;
  text-align: center;
  padding: 0px 12px;
}

/* Style the video section */
#video {
  background-color: #fff;
  text-align: center;
  padding: 30px 0;
}

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

/* Style the contact section */
#contact {
  background-color: #f0f0f0;
  text-align: center;
  padding: 50px 0;
}

.products {
  display: flex;
  align-items: top;
  justify-content: end;
  gap: 12px;
  margin: auto;
  max-width: 80vw;
}

/* .videos {
  display: flex;
  align-items: start;
  justify-content: end;
  gap: 24px;
  padding: 18px;
  margin: auto;
  max-width: 80vw;
} */

.videos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 24px;
  padding: 18px;
  margin: auto;
  max-width: 80vw;
}

.top-video {
  width: 100%;
  display: flex;
  justify-content: center;
}

.side-by-side {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.card {
  margin: 10px;
}

.youtube-video {
  width: 100%;
  max-width: 560px;
  height: 315px;
}


.shipping {
  display: flex;
  align-items: start;
  justify-content: end;
  gap: 24px;
  padding: 18px;
  margin: auto;
  max-width: 80vw;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card .description {
  padding: 16px 60px;
  font-size: 15px;
}
.card .description div {
  padding-top: 10px;
}
.command-stn {
  width: 50%;
  padding: 20px;
}

.motor-shield {
  width: 50%;
  vertical-align: top;
  padding: 20px;
}

.wifi-shield {
  width: 100%;
  padding: 20px;
}

.dcc-connector {
  width: 30%;
  padding: 50px;
}

.image-row {
  display: grid;
  grid-template-columns: auto auto;
}

address {
  padding: 12px;
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
  .products,
  .videos {
    flex-direction: column; /* Stack items vertically on small screens */
  }

  .card {
    width: 100%; /* Make the cards full width on small screens */
  }

  .command-stn,
  .motor-shield {
    width: 80%; /* Make the images full width on small screens */
  }

  .nscale-con {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}