* {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  max-width: 100vw;
  box-sizing: border-box;
  /*background-color: orange; /* Remove after adding landing section */
}

/* adding reveal and rotation animation */

.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active {
  transform: translateY(0px);
  opacity: 1;
}

.rotate {
  animation: rotation 10s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* Costum Scroll */

/* width */
::-webkit-scrollbar {
  width: 10px;

  background-color: rgba(0, 0, 0, 0);
}

/*Track */
::-webkit-scrollbar-track {
  background-color: rgb(230, 111, 0);
}

/*Handle */
::-webkit-scrollbar-thumb {
  background: rgb(240, 240, 240);
  border-radius: 10px;
  width: 5px;
  height: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #686868;
}

/* Nav Section Styles */

.hero-link {
  text-decoration: none;
  color: #fff;
  font-size: large;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
}

.sticky-bg {
  width: 100%;
  backdrop-filter: blur(10px);
}

nav {
  position: sticky;
  top: 0;
  z-index: 11;
}

nav a:hover {
  color: white;
  font-weight: 500;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  padding: 2% 6%;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding-right: 10px;
}

.nav-links ul li a {
  text-decoration: none;
  color: #fff;
  transition: 0.5s;
}

.nav-links ul li a:hover {
  text-decoration: none;
  color: white;
  font-weight: 500;
}

nav .fa {
  display: none;
}

/* Adding Responsiveness to Nav Section */

@media (max-width: 700px) {
  nav .fa {
    display: block;
    color: #fff;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }

  .sticky-bg {
    backdrop-filter: none;
  }

  .nav-links .hero-link {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links ul li {
    display: block;
    text-align: left;
    padding: 5px 50px;
  }

  #nav-links-sub {
    left: -200px;
    text-align: right;
    margin-top: 70px;
    position: absolute;
    height: 100vh;
    width: 30%;
    background: rgba(255, 81, 0, 0);
    backdrop-filter: blur(3px);
    transition: 1s;
  }
}

/* Landing Section Styles */

#hero-section {
  min-height: 100vh;
  max-width: 100vw;
  background-color: #fc8a05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-title {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

#title-one {
  font-size: 220px;
  color: white;
  font-weight: 900;
  letter-spacing: 30px;
  margin-right: -30px;
  position: relative;
  transition: 0.7s;
  z-index: 15;
  width: 100%;
}

#title-two {
  font-size: 220px;
  font-family: "Londrina Outline", cursive;
  color: white;
  position: relative;
  transition: 0.7s;
  z-index: 15;
}

.hero-sub-container-one {
  background-color: transparent;
}

.hero-sub-container-two {
  display: flex;
  flex: row;
  align-items: center;
}

#orange-slice-1 {
  position: absolute;
  width: 300px;
  bottom: 15%;
  z-index: 20;
}

#orange-slice-2 {
  z-index: 11;
  transition: 0.03s;
}

/* Adding Landing Section Responsiveness */

@media (min-width: 1100px) and (max-width: 1200px) {
  #orange-slice-2 {
    width: 450px;
  }

  #title-one {
    font-size: 72px;
  }

  #title-two {
    font-size: 72px;
  }
}

@media only screen and (min-width: 920px) and (max-width: 1100px) {
  #orange-slice-1  {
    width: 150px;
    bottom: 34%;
  }

  #orange-slice-2 {
    width: 250px;
  }

  #title-one {
    font-size: 48px;
  }
  #title-two {
    font-size: 48px;
  }
}

@media (max-device-width: 920px) {
  #orange-slice-1 {
    display: none;
  }

  #orange-slice-2 {
    display: none;
  }

  #title-one {
    font-size: 40px;
    margin-right: 2px;
  }

  #title-two {
    font-size: 40px;
  }
}

@media (max-width: 700px) {
  #orange-slice-1 {
    display: none;
  }

  #orange-slice-2 {
    display: none;
  }

  #title-one {
    font-size: 24px;
    margin-right: 2px;
  }

  #title-two {
    font-size: 24px;
  }
}

/* About us Section Styles */

#about-us {
  min-height: 100vh;
  max-width: 100vw;
  background-color: #000000;
  min-height: 100vh;
  background-image: url(assets/images/backdrop.png);
  background-position: center;
  background-size: cover;
}

#about-us p {
  color: white;
}

.about-us-container {
  text-align: left;
  width: 80%;
  margin: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-us-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.about-us-col {
  padding: 10px;
  flex-basis: 31%;
}

.about-us-col h3 {
  color: white;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  #about-us {
    padding: 10%;
    padding-top: 20%;
    padding-bottom: 20%;
  }
  .about-us-row {
    flex-direction: column;
  }
}

/* Product Section */

#our-products {
  min-height: 100vh;
  max-width: 100vw;
  background-color: #fc8a05;
  margin: auto;
  text-align: center;
}

.products-grid-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0px;
}

.grid-item {
  padding: 20px;
  text-align: center;
  transition: 0.5s;
}

.grid-item:hover {
  transform: translateY(-20px);
}

.grid-item img {
  width: 50%;
  transition: 1s;
}

.grid-item:hover img {
  animation: rotation 10s infinite linear;
}

.grid-item img:hover {
  cursor: pointer;
}

.grid-item p {
  font-size: 24px;
  font-weight: 500;
  color: white;
}

/* Making it responsive */

@media (max-width: 700px) {
  .products-grid-wrapper {
    padding: 10% 0;
  }
  .products-grid-container {
    grid-template-columns: auto;
  }
  .grid-item img {
    max-width: 20%;
    transition: 1s;
  }
}