/* the + sign is used to select the sibling that comes immediately next to the element you selected.
in this case it is the div with the answer class next to the div with the active class.
this can be used for the FAQ-accordion. read more here: https://www.w3schools.com/css/css_combinators.asp */

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

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: rgb(51, 19, 80);
}

/* Hero */
.hero-video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.overlay-text {
  position: absolute;
  top: 25vw;
  margin-left: 40px;
  z-index: 1;
}
.top-text {
  color: white;
  font-size: 6vw;
  animation: glow 2s ease-in-out infinite;
  animation-direction: alternate-reverse;
}
.top-text-b {
  color: white;
  font-size: 3vw;
  margin: 2vw 0 0 50px;
  animation: glow 2s ease-in-out infinite;
  animation-direction: alternate-reverse;
}
/* Glow animation for top-text*/
@keyframes glow {
  from {
    text-shadow: 0 0 20px #a968f8;
  }
  to {
    text-shadow: 0 0 30px #f0e7ff, 0 0 10px #edb3ff;
  }
}

/* Grid for Form+accordian */
.grid {
  display: grid;
  justify-items: center;
}
/* Form */
.form-container {
  background-color: rgb(237, 199, 255);
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-bottom: 2rem;
  line-height: 2rem;
}
.form-boxes {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-bottom: 20px;
}
.form-boxes input {
  width: 300px;
  height: 30px;
  text-align: center;
  border-radius: 8px;
  border: none;
}
::placeholder {
  /* Changes placeholder text */
  color: rgb(213, 175, 216);
}
.radio-buttons,
.check-boxes {
  margin-bottom: 20px;
}
.form-boxes,
.check-boxes,
.radio-buttons label {
  color: rgb(159, 76, 197);
}
button {
  text-transform: uppercase;
  color: white;
  min-width: 200px;
  min-height: 64px;
  border: none;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 10px;
  background-color: rgb(191, 125, 245);
  cursor: pointer; /* Changes cursor over button */
}
button:hover {
  background-color: blueviolet;
}

h1,
h2,
h3 {
  font-family: "Kaushan Script", cursive;
}
h2,
h3 {
  color: blueviolet;
}
h2 {
  text-align: center;
  padding-top: 2rem;
  margin: 2rem 0;
  font-size: 2rem;
}
p {
  color: rgb(74, 19, 126);
}

/* Accordion */
.accordion {
  background-color: rgb(237, 199, 255);
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.question {
  font-size: 0.9rem;
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 2.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer; /* Changes cursor over accordion question */
  background-color: rgb(173, 135, 222);
  color: rgb(103, 45, 156);
  margin: 1rem 0;
}
.question::after {
  content: "\25BC"; /* CSS entity for triangle down */
  font-size: 1.2rem;
  position: absolute;
  right: 1rem;
}
.question.active::after {
  content: "\25B2"; /* CSS entity for triangle up */
}
.answer {
  display: none;
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.2rem;
  background-color: rgb(238, 217, 250);
}
.active {
  background-color: rgb(135, 114, 231);
}
.active + .answer {
  display: block;
}

/* Footer */
footer {
  background-color: rgb(134, 83, 201);
  font-size: 0.7rem;
  color: rgb(237, 199, 255);
  width: 100%;
  padding: 20px 0 10px 0;
  text-align: center;
}
.technigo-logo {
  margin: 8px;
  max-width: 40px;
}

/* Media query for grid 2 column form+faq for table+dekstop */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}