styles.css

.model-viewer-container {
  /* Set the display property to inline-block for inline layout with block-level box properties */


  /* Set the width of the container */
  width: 33%;
  /* Adjust the width as needed */

  /* Add margin to create spacing around the container */
  margin: 10px;
  /* Add spacing between the containers */
}



/* Apply basic styles to the button with the class 'transparent-button' */

.transparent-button {
  /* Set the background color of the button to transparent */
  background-color: white;

  /* Set the text color of the button */
  color: rgb(89, 255, 0);
  /* Set the text color */

  /* Add a border to the button with a 2px width and the specified color */
  border: 2px solid rgb(89, 255, 0);
  /* Set the border color */

  /* Set the cursor to a pointer to indicate interactivity */
  cursor: pointer;

  /* Add a smooth transition effect for background color and text color changes */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Add a smooth transition effect */

  /* Apply the 'rainbow' animation with a duration of 3s and infinite repeat */
  animation: rainbow 3s infinite;
  /* Add rainbow animation */
  /* Add rainbow animation */
}


/* Define a keyframe animation named 'rainbow' */

@keyframes rainbow {

  /* Keyframe at 0% */
  0% {
    /* Set the color and border color to red */
    color: red;
    border-color: red;
  }

  /* Keyframe at 16.666% */
  16.666% {
    /* Set the color and border color to orange */
    color: orange;
    border-color: orange;
  }

  /* Keyframe at 33.333% */
  33.333% {
    /* Set the color and border color to yellow */
    color: yellow;
    border-color: yellow;
  }

  /* Keyframe at 50% */
  50% {
    /* Set the color and border color to green */
    color: green;
    border-color: green;
  }

  /* Keyframe at 66.666% */
  66.666% {
    /* Set the color and border color to blue */
    color: blue;
    border-color: blue;
  }

  /* Keyframe at 83.333% */
  83.333% {
    /* Set the color and border color to indigo */
    color: indigo;
    border-color: indigo;
  }

  /* Keyframe at 100% */
  100% {
    /* Set the color and border color to violet */
    color: violet;
    border-color: violet;
  }
}

/* Change the background color and text color on hover for elements with the class 'transparent-button' */

.transparent-button:hover {
  /* Set the background color to white on hover */
  background-color: #ffffff;
  /* Set the background color on hover */

  /* Set the text color to black on hover */
  color: #000000;
  /* Set the text color on hover */
}

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}


/* Reset some default styling */

body {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.3);
  background: #ffffff url(broken_noise_@2X.png) repeat;
  position: relative;
}

/* Center the model containers on the page */
.model-container {
  display: inline-block;
  margin: 20px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 300px;
  /* Add a maximum width to control container width */
  height: 400px;
  /* Set a fixed height for the container */
  overflow: auto;
  /* Add scrollbars if content overflows the container */
}





/* Style the h1 elements within the containers */
.model-container h1 {
  font-size: 18px;
  margin: 10px 0;
}

/* Style the paragraph text within the containers */
.model-container p {
  font-size: 14px;
  /* Adjust the font size as needed */
  margin: 10px 0;
  word-wrap: break-word;
  /* Wrap text within the container */
}

/* Style the <model-viewer> elements */
model-viewer {
  width: 50%;
  /* Adjust the width to fit your layout */
  height: 300px;
  /* Adjust the height to fit your layout */
}




#goToPageButton {
  background-color: #0074d9;
  /* Button background color */
  color: #fff;
  /* Text color */
  padding: 10px 20px;
  /* Padding around the text */
  border: none;
  /* Remove button border */
  border-radius: 5px;
  /* Rounded corners */
  cursor: pointer;
  /* Show pointer cursor on hover */
  font-size: 16px;
  /* Font size */
}

#goToPageButton:hover {
  background-color: #0056b3;
  /* Change background color on hover */
}


.fh5co-nav {
  /* position: fixed; */
  width: 100%;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 1001;
  top: 0;
  padding: 14px 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 480px) {
  .fh5co-nav {
    position: absolute;
  }
}

.fh5co-nav.scrolled {
  background: #000 url(../images/broken_noise.png) repeat;
  top: -82px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .fh5co-nav.scrolled {
    background: #000 url(../images/broken_noise.png) repeat;
  }
}

@media screen and (max-width: 480px) {
  .fh5co-nav.scrolled {
    background: transparent;
  }
}

.fh5co-nav #fh5co-logo {
  font-size: 32px;
  margin: 0;
  margin-top: -3%;
  margin-bottom: 2%;
  padding: 0;
  font-weight: 700;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #fff !important;
}

.scrolled .fh5co-nav #fh5co-logo {
  color: #000 !important;
}

.fh5co-nav #fh5co-logo a {
  font-size: 42px;
  color: #fff !important;
}

.scrolled .fh5co-nav #fh5co-logo a {
  color: #000 !important;
}

.fh5co-nav #fh5co-logo a span {
  color: #ea272d;
}

@media screen and (max-width: 768px) {
  .fh5co-nav .menu-1 {
    display: none;
  }
}

.fh5co-nav ul {
  padding: 0;
  margin: -40px 0 0 0;
}

.fh5co-nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
}

.fh5co-nav ul li>a {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}

.fh5co-nav ul li a {
  padding: 30px 15px;
  color: rgb(0, 0, 0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

.scrolled .fh5co-nav ul li a {
  color: rgba(0, 0, 0, 0.7);
}

.fh5co-nav ul li a:hover,
.fh5co-nav ul li a:focus,
.fh5co-nav ul li a:active {
  color: #ea272d;
}

.scrolled .fh5co-nav ul li a:hover,
.scrolled .fh5co-nav ul li a:focus,
.scrolled .fh5co-nav ul li a:active {
  color: black;
}

/* .fh5co-nav ul li.has-dropdown {
  position: relative;
}

.fh5co-nav ul li.has-dropdown .dropdown {
  width: 140px;
  -webkit-box-shadow: 0px 14px 16px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 16px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 16px -9px rgba(0, 0, 0, 0.75);
  z-index: 1002;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
  background: #ea272d;
  padding: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}

.fh5co-nav ul li.has-dropdown .dropdown:before {
  bottom: 100%;
  left: 40px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #ea272d;
  border-width: 8px;
  margin-left: -8px;
}

.fh5co-nav ul li.has-dropdown .dropdown li {
  display: block;
  margin-bottom: 7px;
}

.fh5co-nav ul li.has-dropdown .dropdown li:last-child {
  margin-bottom: 0;
}

.fh5co-nav ul li.has-dropdown .dropdown li a {
  font-size: 17px;
  padding: 2px 0;
  display: block;
  color: white;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.fh5co-nav ul li.has-dropdown .dropdown li a:hover {
  color: #fff;
}

.fh5co-nav ul li.has-dropdown:hover a,
.fh5co-nav ul li.has-dropdown:focus a {
  color: #fff;
}

.scrolled .fh5co-nav ul li.has-dropdown:hover a,
.scrolled .fh5co-nav ul li.has-dropdown:focus a {
  color: rgba(0, 0, 0, 0.7);
} */

.fh5co-nav ul li.active>a {
  color: #ffffff;
  position: relative;
}

.scrolled .fh5co-nav ul li.active>a {
  color: rgba(0, 0, 0, 0.7);
}

.fh5co-nav ul li.active>a:after {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  content: '';
  width: 30px;
  height: 2px;
  background: #ea272d;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .fh5co-nav .menu-1 {
    display: none;
  }
}

h3 {
  color: #000;
  padding: 1%;
}

#fh5co-footer {
 /* padding: 2em 0; */
 padding-top: 1em;
 padding-left: 0em;
 padding-bottom: 0em;
 padding-right: 0em;
 clear: both;
}

.container{
  text-align: left;
}

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

  #fh5co-footer {
    padding: 3em 0;

  }
}

#fh5co-footer .fh5co-footer-links {
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 768px) {
  #fh5co-footer .fh5co-footer-links {
    margin-bottom: 30px;
  }
}

#fh5co-footer .fh5co-footer-links li {
  padding: 0;
  margin: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.5);
}

#fh5co-footer .fh5co-footer-links li a {
  color: rgba(0, 0, 0);
  text-decoration: none;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;

}

#fh5co-footer .fh5co-footer-links li a:hover {
  text-decoration: none;
  color: #ea272d;
}

#fh5co-footer .fh5co-widget {
  margin-bottom: 30px;
  margin-left: 70px;

}

@media screen and (max-width: 768px) {
  #fh5co-footer .fh5co-widget {
    text-align: left;
  }
}

#fh5co-footer .fh5co-widget h4 {
  color: #000000;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: 1px;
}

#fh5co-footer .copyright .block {
  display: block;
}

.contact-info {
  margin-bottom: 4em;
  padding: 0;
}

.contact-info li {
  list-style: none;
  margin: 0 0 20px 0;
  position: relative;
  padding-left: 40px;
  color: #fff;
}

.contact-info li i {
  position: absolute;
  top: .3em;
  left: 0;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.3);
}

.contact-info li a {
  color: #fff;
}



.fh5co-social-icons {
  margin: 0;
  padding: 0;
}

.fh5co-social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
}

.fh5co-social-icons li a {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
  color: #ea272d;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
}

.fh5co-social-icons li a i {
  font-size: 20px;
}


.fh5co-section {
  padding: 7em 0;
}

@media screen and (max-width: 480px) {
  .fh5co-section {
    padding: 3em 0;
  }
}

.fh5co-section p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  line-height: 1.5;
}






/* .nav-btn {
  flex: 3;
  display: flex;
}

.nav-links {
  flex: 2;
} */







/* .btn {
  display: inline-block;
  padding: .5rem 1.3rem;
  font-size: .8rem;
  border: 2px solid #fff;
  border-radius: 2rem;
  line-height: 1;
  margin: 0 .2rem;
  transition: .3s;
  text-transform: uppercase;
} */



.nav-links>ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-link {
  position: relative;
}

.nav-link>a {
  line-height: 3rem;
  color: #fff;
  padding: 0 .10rem;
  letter-spacing: 1px;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .5s;
}

.nav-link>a>i {
  margin-left: .2rem;
}

.nav-link:hover>a {
  transform: scale(1.1);
}

#documentation , #video{
  padding: 10px 6px;
  
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 11rem;
  
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: .5s;
}

.dropdown ul {
  position: relative;
}

.dropdown-link>a {
  display: flex;
  background-color: #fff;
  color: #000000;
  padding: 0rem 1rem;
  font-size: 0rem;
  align-items: center;
  justify-content: space-between; 
   transition: .3s;
}

.dropdown-link:hover>a {
  background-color: #e1e1e1;
  color: #fff;
}

.dropdown-link:not(:nth-last-child(2)) {
  border-bottom: 1px solid #efefef;
}

.dropdown-link i {
  transform: rotate(-90deg);
}

.arrow {
  position: absolute;
  width: 11px;
  height: 11px;
  top: -5.5px;
  left: 32px;
  background-color: #fff;
  transform: rotate(45deg);
  cursor: pointer;
  transition: .3s;
  z-index: -1;
}

.dropdown-link:first-child:hover~.arrow {
  background-color: #000000;
}

.dropdown-link {
  position: relative;
}

.dropdown.second {
  top: 0;
  left: 100%;
  padding-left: .8rem;
  cursor: pointer;
  transform: translateX(10px);
}

.dropdown.second .arrow {
  top: 10px;
  left: -5.5px;
}

.nav-link:hover>.dropdown,
.dropdown-link:hover>.dropdown {
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: auto;
}





#check {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  z-index: 90000;
  cursor: pointer;
  opacity: 0;
  display: none;
}



@keyframes animation {
  from {
      opacity: 0;
      transform: translateY(15px);
  }

  to {
      opacity: 1;
      transform: translateY(0px);
  }
}

@media (max-width: 920px) {


  #check {
      display: block;
  }

  .nav-btn {
      position: fixed;
      height: calc(100vh - 3rem);
      top: 3rem;
      left: 0;
      width: 100%;
      background-color: #69bde7;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      overflow-x: hidden;
      overflow-y: auto;
      transform: translateX(100%);
      transition: .65s;
  }

  #check:checked~.nav-btn {
      transform: translateX(0);
  }

  #check:checked~.nav-btn .nav-link,
  #check:checked~.nav-btn .log-sign {
      animation: animation .5s ease forwards var(--i);
  }

  .nav-links {
      flex: initial;
      width: 100%;
  }

  .nav-links>ul {
      flex-direction: column;
  }

  .nav-link {
      width: 100%;
      opacity: 0;
      transform: translateY(15px);
  }

  .nav-link>a {
      line-height: 1;
      padding: 1.6rem 2rem;
  }

  .nav-link:hover>a {
      transform: scale(1);
      background-color: #50a9d6;
  }

  .dropdown,
  .dropdown.second {
      position: initial;
      top: initial;
      left: initial;
      transform: initial;
      opacity: 1;
      pointer-events: auto;
      width: 100%;
      padding: 0;
      background-color: #3183ac;
      display: none;
  }

  .nav-link:hover>.dropdown,
  .dropdown-link:hover>.dropdown {
      display: block;
  }

  .nav-link:hover>a>i,
  .dropdown-link:hover>a>i {
      transform: rotate(360deg);
  }

  .dropdown-link>a {
      background-color: transparent;
      color: #fff;
      padding: 1.2rem 2rem;
      line-height: 1;
  }

  .dropdown.second .dropdown-link>a {
      padding: 1.2rem 2rem 1.2rem 3rem;
  }

  .dropdown.second .dropdown.second .dropdown-link>a {
      padding: 1.2rem 2rem 1.2rem 4rem;
  }

  .dropdown-link:not(:nth-last-child(2)) {
      border-bottom: none;
  }

  .arrow {
      z-index: 1;
      background-color: #69bde7;
      left: 10%;
      transform: scale(1.1) rotate(45deg);
      transition: .5s;
  }

  .nav-link:hover .arrow {
      background-color: #50a9d6;
  }

  .dropdown .dropdown .arrow {
      display: none;
  }

  .dropdown-link:hover>a {
      background-color: #3a91bd;
  }

  .dropdown-link:first-child:hover~.arrow {
      background-color: #50a9d6;
  }

  .nav-link>a>i {
      font-size: 1.1rem;
      transform: rotate(-90deg);
      transition: .7s;
  }

  .dropdown i {
      font-size: 1rem;
      transition: .7s;
  }


}