@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@100;200;300;400;500;600;700;800;900&display=swap");

body {
  background-color: #ffffd7;
  overflow: hidden;
}

.content2 {
  position: absolute;
  z-index: 100;
  margin-left: 10vw;
  top: 15vh;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2s;
}

.content2 h1 {
  color: rgb(66, 66, 66);
}

.content2 p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  margin-top: 0vh;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

#line2 {
  width: 98%;
  margin-top: -3.2vh;
  height: 0.15vh;
  background-color: rgb(66, 66, 66);
  display: block;
}

.leadingtext {
  font-family: Helvetica, sans-serif;
  font-size: 4vh;
  margin-top: -10vh;
  margin-left: 10%;
  text-transform: capitalize;

  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2s;
}
.bottomimg {
  position: absolute;
  bottom: 0vh;
  height: 55vh;
  width: 100vw;
  left: 0vw;
    background-image: url("/tunnel5.png");


  background-size: cover;
  background-repeat: no-repeat;
  filter: opacity(50%);
  z-index: -10;

  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2s;
}

@keyframes circleslide {
  from {
    transform: translateX(5vw);

    opacity: 0;
  }
  to {
    transform: translate(0vw, 25vh);
    opacity: 1;
  }
}

@keyframes circleslide2 {
  from {
    transform: translateX(0vw);
    opacity: 0;
  }
  to {
    transform: translate(0vw, -15vh);

    opacity: 1;
  }
}

.growanim1 {
  position: absolute;
  top: -20vh;
  right: -2vw;
  transition: all 0.2s cubic-bezier(0.42, 0, 0, 1.5);
}

.growanim1:hover {
  transform: scale(1.1);
}

.growanim2 {
  position: absolute;
  top: 70vh;
  left: -3vw;
  transition: all 0.2s cubic-bezier(0.42, 0, 0, 1.5);
}

.growanim2:hover {
  transform: scale(1.1);
}

.circle1 {
  /* position: absolute; */
  /* top: -20vh;
  right: -2vw; */
  transform: translate(-50%, -50%);
  animation: circleslide 1s ease forwards;
  animation-delay: 1.8s;
    z-index: 100;

}
.circle2 {
  /* position: absolute;
  top: 70vh;
  left: -3vw; */
  transform: translate(-50%, -50%);
  animation: circleslide2 1s ease forwards;
  animation-delay: 1.8s;
  opacity: 0;
  z-index: 100;
}
.outercircle {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: #b7ce5e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middlecircle {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  background-color: #ffffd7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.innercircle {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  background-color: #b7ce5e;
}

#custom-loader--about {
  color: #b7ce5e;
}

.dropdown {
  position: relative;
  z-index: 100;

  animation: slideInLeft 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 2s;
  transition: 0.2s ease;
}

/* Style the dropdown button */
.dropbtn {
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  left: 20vw;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
  animation-delay: 1s;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  text-decoration: underline;
}

.entries {
  background-color: #ffffff;

  display: none;

  height: 30vh;
  width: 30vw;
  right: 10vw;
  bottom: -35vh;
  position: absolute;
  text-transform: none;

  border-radius: 5vh;

  overflow: scroll;
}

.entries p {
  padding-left: 5vh;
  padding-right: 3vh;
  padding-top: 1vh;
  font-size: 2.3vh;
  font-family: Helvetica, sans-serif;
  font-weight: 100;
  margin-top: -5vh;
  position: absolute;
}

.entries h4 {
  padding-left: 5vh;
  padding-top: 1vh;

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #f5f5a5;
  color: rgb(66, 66, 66);
}