@font-face {
  font-family: "Practice Sans"; /* Give your font a name */
  src: url("./practice-sans/PracticeSans-Regular.otf") format("otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Practice Sans"; /* Give your font a name */
  src: url("./practice-sans/PracticeSans-Bold.otf") format("otf");
  font-weight: bold;
  font-style: normal;
}

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

body {
  background-color: rgb(210, 210, 210);
  cursor: url("images/crown-cursor.png"), auto;
}

h1 {
  font-family: "Practice Sans", sans-serif;
  color: rgb(0, 0, 0);
  font-size: 0.9rem;
  font-weight: normal;
  /* letter-spacing: 2px; */
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-slide {
  display: none;
  width: 100%;
  height: 100%;
}

.carousel-slide.active {
  display: block;
}

.carousel-slide video,
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: rgb(255, 255, 255);
}

.text-footer {
  white-space: nowrap;
  font-family: "Practice Sans", sans-serif;
  font-weight: normal;
  font-size: 0.8rem;
  line-height: 20px;
  color: #efefef;
  text-align: left;
  margin: 0;
}

.top-content-blank {
  opacity: 0;
}

a {
  color: rgb(0, 0, 0); /* your green */
  text-decoration: underline;
}

footer {
  background-color: rgb(24, 24, 24);
  padding: 40px 10% 40px 10%;
  display: grid;
  /* 1fr assigns the size of each column */
  grid-template-columns: repeat(6, 1fr);
  row-gap: 24px;
  column-gap: 16px;
}

.footer-container-0,
.footer-container-2-5 {
  grid-column: span 3 / span 3;
}

.footer-container-2-5 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.footer-container-1 {
  grid-column-start: 1;
}
.footer-container-3 {
  grid-column-start: 4;
  grid-row-start: 1;
  grid-row: span 2 / span 2;
}

.footer-container-4 {
  display: flex;
  gap: 7px;
  grid-column-start: 6;
  align-items: end;
  justify-content: end;
}

.footer-container-4 a:hover img {
  filter: invert(57%) sepia(100%) saturate(600%) hue-rotate(63deg)
    brightness(150%);
}

p {
  font-family: "acumin-pro-wide", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8 rem;
  color: rgb(0, 0, 0);
  letter-spacing: 0.35px;
}

header {
  padding: 15px 10% 15px 10%;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  align-items: center;
  color: rgb(255, 253, 245);
  z-index: 99999;
  background-color: rgb(24, 24, 24);
  position: sticky;
  top: 0;
  width: 100%;
}

.logo {
  margin-top: -5px;
  padding: 8px;
}

.logo img {
  width: 120px;
}

nav ul {
  list-style: none;
  padding: 10px;
  display: flex;
  gap: 16px;
  font-family: "Practice Sans", sans-serif;
  font-weight: normal;
  letter-spacing: 0.6px;
  font-style: normal;
  font-size: 0.8rem;
  align-items: flex-start;
}

.boxcontainer {
  background-color: rgb(210, 210, 210);
  margin-top: -20px;
  display: flex;
  gap: 50px;
  padding: 70px 50% 70px 10%;
  align-items: center;
}

.boxcontainer3 {
  background-color: rgb(3, 59, 182);
  margin-top: -20px;
  display: flex;
  gap: 90px;
  padding: 80px 14% 50px 14%;
  align-items: center;
}

.boxcontainer2 {
  background-color: rgb(255, 253, 245);
  margin-top: 30px;
  display: flex;
  gap: 90px;
  padding: 120px 14% 100px 14%;
  align-items: center;
}

.boximage1 {
  display: flex;
  justify-content: center;
  /* overflow: hidden;  */
}

.boximage1 img {
  /* margin-top: -30px; */
  margin-left: 60px;
  width: 80%;
  height: auto;
  object-fit: cover;
}

.boximage-custom {
  display: flex;
  justify-content: center;
  /* overflow: hidden;  */
}

.boximage-custom img {
  margin-top: -20px;
  margin-left: 40px;
  width: 75%;
  height: auto;
  object-fit: cover;
}

.boximage2 {
  display: flex;
  justify-content: center;
  /* overflow: hidden;  */
}

.boximage2 img {
  margin-top: -30px;
  margin-left: -30px;
  width: 95%;
  height: auto;
  object-fit: cover;
}

.boximage3 {
  display: flex;
  justify-content: center;
  /* overflow: hidden;  */
}

.boximage3 img {
  /* margin-top: -70px; */
  margin-left: 30px;
  width: 95%;
  height: auto;
  object-fit: cover;
}
.boximage-qns img {
  margin-top: -30px;
  margin-left: 30px;
  width: 80%;
  height: auto;
  object-fit: cover;
}

.boxtagline {
  position: relative;
  padding: 15px 8.5%;
  display: flex;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  flex-basis: 50%;
  min-height: calc(70dvh + 50px);
  background-color: rgb(24, 24, 24);
}

.taglinetext,
.imgbox1 {
  position: relative;
  z-index: 1;
}

.imgbox1 {
  width: 660px;
  height: auto;
  display: flex;
  justify-content: center;
  /* overflow: hidden;  */
}

.imgbox1 img {
  margin-top: -30px;
  margin-left: -50px;
  width: 130%;
  height: auto;
  object-fit: cover;
}

.img-landing {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-landing img {
  margin-top: 130px;
  /* margin-left: -50px; */
  width: 80%;
  height: auto;
  object-fit: cover;
}

.taglinetext {
  margin: 180px 5% 180px 5%;
  max-width: 850px;
  text-shadow: 0px 2px 30px #000000;
}

.landing-marquee {
  position: relative;
  padding: 13px 10.5% 13px 10.5%;
  background-color: rgb(255, 253, 245);
  z-index: 99999;
}

/* about page */

.contentabout {
  max-width: 900px;
  position: relative;
  z-index: 2;
  flex: 1;
}

.boxabout {
  margin-top: 30px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  /* you can adjust the % to suit your column size */
  /* background-color: brown;
  padding: 15px 22% 15px 22%; */
}

.boxabout-middle {
  margin-top: 140px;
  margin-bottom: 30px;
  display: flex;
  /* align-items: flex-start; */
  align-items: center;
  gap: 60px;
}

.boxcontainer-cover-about {
  overflow: hidden;
  position: relative;
  background-image: url(images/background-blue.jpg);
  background-color: rgb(255, 253, 245);
  background-repeat: repeat-y;
  background-size: 110%;
  background-position: center;
  object-fit: fill;
  width: 100%;

  padding: 170px 0px 0px 0px;
  margin: -5px;
}

.buttonpage-download {
  display: flex;
  /* justify-content: center; */
  gap: 30px;
}


.boxcontainer-cover2 {
  position: relative;
  background-color: rgb(4, 78, 238);
  z-index: 999;
}

.boxcontainer-cover2 img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.boxcontainer-cover3 {
  position: relative;
  /* background-color: rgb(255, 253, 245); */
  z-index: 999;
  /* display: inline-block; */
  /* padding: 70px; */
}

.boxcontainer-cover3 img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.container1 {
  position: relative;
  height: 200vh;
}

.boxproductmain2 {
  object-fit: contain;
}

.boxcontainer-cover {
  /* Makes the container a reference point for positioning child elements */
  position: relative;
  background-image: url(images/pattern-background-blue.png);
  background-color: rgb(255, 253, 245);
  background-repeat: repeat-y;
  background-size: 110%;
  background-position: center;
  object-fit: fill;
  padding: 170px 0px;
}

.boxproductmain {
  margin-top: -80px;
  margin-bottom: -80px;
  padding: 15px 7%;
}

.boxabout-end {
  /* position: absolute; */
  margin-top: -100px;
  padding: 15px 7%;
}

.boxproducttext1 {
  /* solid bg added to header and body */
  background-color: rgb(255, 253, 245);
  padding: 7%;
  margin: 20px 1% 150px 1%;
  border-radius: 25px;
  /* box-shadow: 0px 4px 10px rgba(61, 66, 123, 0.638); */
  box-shadow: 0px 4px 10px rgba(40, 85, 183, 0.448);
  /* Offset-X, Offset-Y, Blur radius, Color */
  z-index: 999;
}

.boxabouttext {
  /* solid bg added to header and body */
  background-color: rgb(255, 253, 245);
  padding: 7%;
  margin: 20px 1% 150px 1%;
  border-radius: 25px;
  /* box-shadow: 0px 4px 10px rgba(61, 66, 123, 0.638); */
  box-shadow: 0px 4px 10px rgba(40, 85, 183, 0.448);
  /* Offset-X, Offset-Y, Blur radius, Color */
}

.boxproducttext2 {
  background-color: rgb(255, 253, 245);
  border-radius: 25px;
  /* box-shadow: 0px 4px 10px rgba(30, 40, 162, 0.25); */
  box-shadow: 0px 4px 10px rgba(40, 85, 183, 0.448);
  margin: 150px 1% 0px 1%;
  padding: 7% 7% 9% 7%;
}

.boxproducttext3 {
  /* background-color: rgb(3, 59, 182); */
  background-color: rgb(255, 253, 245);
  /* background-image: url(images/background-2.jpg);
  background-size: 100%;
  background-position: center;
  object-fit: fill; */
  border-radius: 25px;
  /* box-shadow: 0px 4px 10px rgba(30, 40, 162, 0.25); */
  box-shadow: 0px 4px 10px rgba(40, 85, 183, 0.448);
  margin: 150px 1% 0px 1%;
  padding: 7% 7% 9% 7%;
}

.maxwidth {
  max-width: 800px;
}

.maxwidth2 {
  margin: 4% 12%;
}

.maxwidth3 {
  max-width: 750px;
  margin: 30px auto;
  align-items: center;
  /* margin: 3% 8%; */
}

.boxproduct-descr {
  margin-top: 30px;
}

.boxproduct-header {
  max-width: 750px;
}

.boxproduct {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  background-color: rgb(3, 59, 182);
  box-shadow: 0px 4px 10px rgba(30, 40, 162, 0.25);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  margin: -30px 1% 0px 1%;
  padding: 11% 10%;
  gap: 130px;
}

/* reveal animation css */

.reveal {
  opacity: 0;
  transform: translateY(-70px);
  transition: 0.8s;
}

.revealanimate {
  opacity: 1;
  transform: translateY(0);
}

/* marquee */

.marquee {
  position: relative;
  width: 50vw;
  max-width: 100%;
  height: 50px;
  overflow-x: hidden;
  text-transform: uppercase;
  font-family: "Practice Sans", sans-serif;
  font-size: 2rem;
  background-color: rgb(239, 239, 239);
  display: flex;
  align-items: center;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 55s linear infinite;
}

.track2 {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 25s linear infinite;
  box-shadow: 0px 10px 6px rgba(30, 41, 162, 0.2);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


.marquee-footer {
  position: relative;
  height: 10px;
  overflow-x: hidden;
  text-transform: uppercase;
  font-family: "Practice Sans", sans-serif;
  font-weight: regular;
  font-size: 0.7rem;
  letter-spacing: 0.7px;
  font-style: normal;
  color: rgb(24, 24, 24);
  align-items: center;
}

.track-footer {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 350s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* links */

nav a:link {
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 15px;
}

nav a:visited {
  text-decoration: none;
  color: rgba(181, 181, 181, 0.519);
  background-color: rgb(255, 253, 245);
  padding: 15px;
}

nav a:hover {
  color: rgb(31, 238, 4);
  padding: 15px;
  font-family: "Practice Sans", sans-serif;
  font-weight: normal;
  cursor: pointer;
}

nav a:active {
  color: rgb(36, 36, 36);
}

/* a:hover {
 cursor: pointer;
} */

.footer-container-2 a:link,
.footer-container-3 a:link {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.footer-container-2 a:visited,
.footer-container-3 a:visited {
  text-decoration: none;
  color: rgba(181, 181, 181, 0.519);
  background-color: rgb(255, 253, 245);
}

.footer-container-2 a:hover,
.footer-container-3 a:hover {
  color: rgb(31, 238, 4);
  font-family: "Practice Sans", sans-serif;
  font-weight: normal;
  cursor: pointer;
}

.footer-container-2 a:active,
.footer-container-3 a:active {
  color: rgb(36, 36, 36);
}

.clickable-element {
  cursor: pointer;
}

.titlecontainer {
  /* hide fixed overflow contents */
  clip: rect(0, auto, auto, 0);
  /* does not work if overflow = visible */
  overflow: hidden;
  /* only works with absolute positioning */
  position: absolute;
  /* makes sure containers are full-width and height */

  height: 150vh;
  width: 100%;
  left: 0;

  /* safari hack */
  /* -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%); */
}

.container_solid {
  background: rgb(255, 253, 245);
  /* position this container at the top of its parent element */
  top: 0;
}

.container_solid2 {
  background: rgb(255, 253, 245);
  background-image: url(images/mockup-cups-blue.jpg);
  background-size: 100vw auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* position: fixed; */
  /* position this container at the top of its parent element */
  top: 0;
}

.title_wrapper {
  padding-top: 150px;
  position: fixed;
  display: block;
  margin: auto;
  width: 100%;
  /* centers the text vertically */
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.title_wrapper h1 {
  text-transform: uppercase;
  text-align: center;
  /* text-shadow: 0px 2px 30px #000000; */
}

.container_solid .title_wrapper h1 {
  /* the text background */
  background: url(images/mockup-landing.jpg);
  background-size: 100vw auto;
  background-position: center;

  /* clip the text is possible */
  text-transform: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

  /* fallback text color */
  color: black;
}

.container_solid2 .title_wrapper h1 {
  color: rgb(255, 253, 245);
  text-shadow: 0px 2px 30px #101141;
}

.container_solid .title_wrapper h1 {
  color: rgb(255, 253, 245);
  /* text-shadow: 0px 1px 15px #10114127; */
}

.container_image .title_wrapper h1 {
  color: rgb(255, 253, 245);
  text-shadow: 0px 2px 30px #101141;
}

.container_image {
  background: url(images/mockup-landing.jpg);
  background-size: 100vw auto;
  background-position: center;
  background-attachment: fixed;
  /* positions the second container below the first container */
  top: 100vh;
}

.container_image2 {
  background: url(images/mockup-cups.jpg);
  background-size: 100vw auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  top: 100vh;
}

.container_image3 {
  background: url(images/mockup-cups.jpg);
  background-size: 100vw auto;
  background-position: center;
  background-attachment: fixed;
  top: 100vh;
}

.container_image .title_wrapper h1 {
  color: white;
}

.container_image2 .title_wrapper h1 {
  color: white;
  text-shadow: 0px 2px 30px #000000;
}



@media only screen and (max-width: 480px) {
  .logo img {
    width: 100px;
  }

  footer#contact {
    grid-template-columns: 1fr;
  }

  div.footer-container-0 {
    grid-column: span 1 / span 1;
  }

  div.footer-container-2-5 {
    grid-column: span 1 / span 1;
  }
}

@media only screen and (max-width: 1150px) {
  .product-h1 {
    margin-top: 30px;
    font-size: 4rem;
  }

  .boxproductitem {
    padding: 14% 14% 0px 14%;
  }
}

@media only screen and (max-width: 1190px) {
  h4 {
    margin-top: 30px;
    font-size: 3.5rem;
  }

  .about-intro-h1 {
    margin-top: 30px;
    font-size: 4rem;
  }

  .boxproductitem {
    padding: 14% 14% 0px 14%;
  }
}

@media only screen and (max-width: 920px) {

  .product-bg {
    padding: auto 9% auto 9%;
    font-size: 10vw;
  }

  p {
    font-size: 1rem;
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
  }

  h1 {
    font-size: 4rem;
    text-align: center;
  }

  h2 {
    font-size: 3rem;
    text-align: center;
  }

  .blue-h2 {
    font-size: 3rem;
    text-align: center;
  }

  h3 {
    margin-top: 10px;
    font-size: 3rem;
    text-align: center;
  }

  .h3-blue {
    margin-top: -30px;
    font-size: 3rem;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
  }

  .h3-black {
    margin-top: 30px;
    font-size: 3rem;
    text-align: center;
  }

  .product-h1 {
    margin-top: 30px;
    font-size: 3rem;
  }

  h4 {
    font-size: 4rem;
    text-align: center;
  }

  .content {
    max-width: 900px;
    text-align: center;
  }

  .content {
    margin-top: -20px;
    max-width: 900px;
    text-align: center;
  }

  .boxtagline {
    flex-wrap: wrap;
    justify-content: center;
  }

  .boximage-speedy {
    display: flex;
    justify-content: center;
    margin-top: -40px;
  }

  .boximage-speedy img {
    margin: 0 auto;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .boximage1 img {
    width: 150%;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .boximage2 img {
    width: 160%;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .boximage3 img {
    width: 190%;
    margin-left: 0px;
    margin-top: -15px;
    height: auto;
    object-fit: cover;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .boxtagline img {
    /* margin-top: -130px; */
    margin-bottom: 70px;
  }

  .boxusp {
    text-align: center;
  }

  footer {
    text-align: center;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }

  .footer-container-0 {
    grid-column: span 2 / span 2;
  }

  .footer-container-2-5 {
    grid-column: span 2 / span 2;
  }

  .footer-container-3,
  .footer-container-4 {
    grid-column-start: auto;
  }

  /* nav {
    margin-top: 15px;
    flex-direction: column;
  }


  .nav ul li {
    text-align: center;
  }

  .nav.active {

    clip-path: polygon(0 0, 100% 0, 100% 100%, 1% 100%);
  } */

  header {
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-between;
  }

  .hamicon {
    display: block;
  }

  .hamicon img {
    width: 40px;
    height: auto;
    /* aspect-ratio: 105 / 67; */
    object-fit: contain;
  }

  header {
    display: flex;
    flex-direction: column;
  }

  nav.navbar {
    padding-inline: 0;
  }

  nav.navbar a {
    padding-inline: 6px;
  }

  nav {
    /* nav {
      margin-bottom: 15px;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
    } */

    /* position: absolute; */
    /* top: 100%; */
    /* background-color: rgb(255, 253, 245); */
    /* goes across the entire screen */
    /* width: 250px; */
    padding: 10px;
    width: 100%;
    left: auto;
    right: 0;

    /* clip-path: polygon(0 0, 100% 0, 92% 0, 0 0); */
  }

  nav ul {
    padding-inline: 0;
    flex-direction: wrap;
    gap: 8px;
    display: flex;
  }

  nav ul li {
    margin: 0 auto;
    text-align: center;
    justify-content: space-between;
    align-items: center;
  }

  nav.active {
    /* script is talking to navbar active */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

  .about-section {
    padding-right: 10%;
    text-align: left;
  }

  .about-section h1,
  .about-section p {
    text-align: left;
    margin: 0;
  }

  .about-section h1 {
    font-size: 0.9rem;
  }

  .boxabout {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .boxabout-middle {
    margin-top: 100px;
    flex-wrap: wrap-reverse;
    justify-content: center;
    margin-bottom: 140px;
  }

  .boxcontainer {
    margin-top: 15px;
    flex-wrap: wrap;
  }

  .boxcontainer3 {
    flex-wrap: wrap;
  }

  .boxcontainer-dl {
    flex-wrap: wrap;
  }

  .boxcontainer-dl img {
    margin-top: -30px;
    width: 120%;
  }

  .boxcontainer2 {
    flex-wrap: wrap-reverse;
    padding: 100px 14% 100px 14%;
  }

  .boxcontainer2-dl {
    flex-wrap: wrap-reverse;
    padding: 50px 14% 100px 14%;
  }

  .boxcontainer2-dl img {
    margin-top: -30px;
  }

  .boxcontainer2 img {
    margin-top: -30px;
  }

  .contentabout {
    margin-top: 10px;
    margin-bottom: -20px;
  }

  .contentabout h4 {
    font-size: 3rem;
  }

  /* .boxproduct-header {
    margin-bottom: 30px;
  } */

  .buttonpage-download {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 70px;
    margin-bottom: 30px;
  }

  .download-button-dl {
    margin-top: 5px;
    margin-bottom: -10px;
    max-width: 250px;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    color: rgb(4, 78, 238);
  }

  .download-button {
    margin-top: -20px;
    font-size: 1rem;
  }

  .about-intro-h1 {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 3rem;
  }

  .about-intro-h1-boxend {
    margin-top: 230px;
    font-size: 3rem;
  }

  .about-intro-h1-white {
    font-size: 3rem;
  }

  .black-text {
    font-size: 1rem;
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
    margin-bottom: 30px;
  }

  .black-text2 {
    margin-top: -10px;
    font-size: 1rem;
  }

  .black-text3 {
    color: rgb(26, 26, 26);
    font-size: 1rem;
  }

  .black-text-descr {
    margin-top: 15px;
  }

  .boxleft {
    flex-basis: 100%;
    /* you can adjust the % to suit your column size */
  }

  .boxright {
    display: flex;
    margin: 0 auto;
    margin-bottom: -50px;
  }

  /* responsive product page */

  .boxproductmain .boxproductmain3 {
    padding: 15px 18% 15px 18%;
  }

  .boxproductmain2 {
    padding: 15px 14% 15px 14%;
  }

  .boxproduct {
    padding: 30px 30px 60px 30px;
    display: flex;
    gap: 20px;
    flex-direction: column;
  }

  .boxproductitem {
    padding: 14% 14% 0px 14%;
  }

  .boxproduct-descr {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .black-text-descr {
    text-align: center;
  }

  .learnmore-button {
    margin: 50px auto 50px auto;
  }

  .download-button {
    /* align and justify content is for flex
    align-items: center; */
    margin: 80px auto 50px auto;
  }

  .download-button-about {
    margin-top: 0px;
    max-width: 250px;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    color: rgb(4, 78, 238);
  }

  .about-download {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 70px;
    margin-top: 70px;
    margin-bottom: 30px;
  }

  .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 20px;
    overflow-x: hidden;
    text-transform: uppercase;
    font-family: "Practice Sans", sans-serif;
    font-size: 7rem;
    background-color: rgb(255, 253, 245);
    /* color: rgb(38, 38, 133); */

    /* Center content vertically */
    display: flex;
    align-items: center;
  }

  .track {
    font-size: 0.5rem;
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 16s linear infinite;
  }

  .track2 {
    font-size: 3rem;
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 15s linear infinite;
    box-shadow: 0px 10px 6px rgba(30, 41, 162, 0.2);
  }

  .boxcontainer-cover-about {
    width: 100%;
    position: relative;
    background-image: url(images/background-blue.jpg);
    background-repeat: repeat-y;
    background-size: 110%;
    background-position: center;
    object-fit: fill;
  }

  .imgbox1 img {
    margin-top: -130px;
    margin-left: -50px;
    width: 80%;
    height: auto;
    object-fit: cover;
  }

  .boximage-custom {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .boximage-custom img {
    margin-top: -20px;
    margin-left: -10px;
    width: 90%;
    height: auto;
  }

  .boxproducttext1 {
    padding: 10%;
  }

  .titlecontainer .container_solid {
    clip: rect(0, auto, auto, 0);
    overflow: hidden;
    position: absolute;
    /* IDKKKKKK */
    height: 100vh;
    width: 100%;
    left: 0;
  }

  .container_solid {
    background: rgb(255, 253, 245);
    top: 0;
  }

  .product-h1-download {
    /* justify-content: center;
    align-items: center;
    max-width: 500px; */
    margin-top: 70px;
    font-size: 3rem;
  }

  .download-dl .h1-download {
    padding-top: 12%;
    font-size: 3rem;
  }
}

.interactive {
  background: white;
  iframe {
    background: white;
    width: 100%;
    padding-inline: calc(10% - 24px);
  }
}