/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, ul {
  margin: 0;
  padding: 0;
}

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

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

/* Sticky navigation */
.sticky-nav {
  background: linear-gradient(to bottom, #f0f0f0, #a0a0a0);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.14),
    0 8px 16px rgba(0, 0, 0, 0.16); /* Realistic shadow */
  border-bottom: 1px solid #959595;
}

.sticky-nav nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.sticky-nav nav ul li {
  margin: 0 2px;
}

.sticky-nav nav ul li a {
  display: block;
  padding: 8px 12px;
  background: linear-gradient(to bottom, #a0a0a0, #f0f0f0);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.4);
  color: #333; /* Text color for better readability */
  font-weight: bold;
  text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.6);
  transition: background 0.3s, box-shadow 0.3s;

  /* Responsive font size with min, max, and scaling factor */
  font-size: clamp(10px, calc(2px + 2.5vw), 16px);
}

.sticky-nav nav ul li a:hover {
  background: linear-gradient(to bottom, #b0b0b0, #e0e0e0);
}

/* Style for the current page button */
.sticky-nav nav ul li a.active {
  background: linear-gradient(to bottom, rgba(76, 175, 80, 0.9), rgba(67, 160, 71, 0.9)); /* Green gradient background with transparency */
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.4); /* Inner shadow for a glassy appearance */
  color: #fff; /* White text color for better contrast */
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4); /* Text shadow for better readability */
}

/* Style for the current page button on hover */
.sticky-nav nav ul li a.active:hover {
  background: linear-gradient(to bottom, rgba(102, 187, 106, 0.9), rgba(56, 142, 60, 0.9)); /* Lighter green gradient background on hover */
}

/* Rule for the SVG home icon */
.sticky-nav nav ul li a[href="index.html"] svg {
  width: calc(11px + 1vw); /* Adjust the width of the home icon */
}

/* Styles for Product Specs sections */
.vid-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.vid-border {
  padding: 3.3%;
  border: 2px solid #AAA;
  border-radius: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1),
              0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

video {
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 600px) {
video {
  max-width: 100%;
  height: auto;
  }
}
@media screen and (max-width: 600px) {
video {
  max-width: 100%;
  height: auto;
  }
}

/* Flexbox Layout for Product Specs + Video */
/* https://www.w3schools.com/css/css3_flexbox_responsive.asp */

* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-direction: row;
  text-align: center;
}
.flex-item-left {
  padding: 0.5%; /* was: 10px */
  flex: 50%;
}
.flex-item-right {
  padding: 0.5%; /* was: 10px */
  flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 972px) { /* was: 972px */
  .flex-container {
    flex-direction: column;
  }
}
.imgwrap {
  width: 100%; /* or whatever you choose */
  margin: auto;
  padding: 1.4%;
}
.imgwrap img {
  display: block;
  width: 100%;
  max-width: 972px; /* actual image width */
  height: auto; /* maintain aspect ratio */
  margin: auto; /* optional centering of image */
  padding: 2.43%;
  border: 2px solid #AAA;
  border-radius: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1),
              0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

.section-spacing {
  margin-top: 40px;
  margin-bottom: 40px;
}
/* Smaller screen sizes */
@media screen and (max-width: 767px) {
  .section-spacing {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}