/* ------- Barre de défilement */
::-webkit-scrollbar {
  width: 8px;
  scrollbar-width: thin;
  scrollbar-color: #888 #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

* {
  scroll-behavior: smooth
}

/* ------- Général */

body {
  background-color: #101010;
  font-family: "Oswald";
  color: #d8d8d8;
  background-image: url(../img/background.svg);
  background-attachment: scroll;
  overflow: hidden;
}

h1,
h2,
h3 {
  font-family: 'Kdam Thmor Pro';
  color: #ffb566;
  text-shadow: #292929;
  text-align: center;
}

h2 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

a,
.orange {
  color: #FFB566;
}

.section {
  max-height: 100vh;
  height: 100vh;
  max-width: 100vw;
}

/* ------- Section 1 : Presentation */
.background-intro {
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
  opacity: 1s;
  background-color: #101010;
  animation: fade 0.5s 3s forwards reverse;
}

.large-header {
  width: 100%;
  opacity: 0;
  overflow: hidden;
  z-index: 1;
  animation: fade 2s 3s forwards;
}

svg {
  opacity: 0;
  animation: fade 2s 2s ease-in forwards, translateDown 3s ease-in-out 2s forwards;
}

.arrow {
  opacity: 0;
  width: 100%;
  text-align: center;
}

.navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 25px;
  font-size: 2em;
  left: 50%;
  transform: translateX(-50%);
  animation: fade 3s 3s forwards, bounce 3s 3s infinite ease-in-out;

}

.navigation a {
  text-decoration: none;
}

.main-title {
  position: absolute;
  font-size: 3em;
  top: 10%;
  left: 50%;
  opacity: 1;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  animation: mainTitle 4s ease-in forwards;
}

.demo-1 .main-title {
  text-transform: uppercase;
  font-size: 4.2em;
  letter-spacing: 0.1em;
}

.main-title .thin {
  font-weight: 200;
}

/* ------- Section 2 : Pricing */

.pricing {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.pricing .container {
  background-color: #101010;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  flex: 1;
}

.image {
  position: relative;
  flex: 0.8;
  height: 100%;
  background: url(../img/stage2.png), linear-gradient(to bottom right, #666666 0%, #FFB566 50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 1;
}

.onscroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 0.5s ease;
}

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

.card {
  height: 100%;
  flex: 1;
  margin: 0 2em;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.information {
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
}

.sub-information {
  width: 100%;
  font-size: 0.8em;
  text-align: center;
  margin-bottom: 1em;
}

.details-service {
  height: 20%;
  width: 100%;
  text-align: center;
  margin-top: 1em;
}

.card table {
  width: 100%;
  font-size: 1.1em;
}

th {
  padding: 5px;
  border-bottom: solid #FFB566 1px;
}

th:first-of-type {
  text-align: left;
}

.card td {
  padding: 5px;
}

.card tr td:first-child {
  text-decoration: dashed;
}

tbody tr:hover {
  color: #ffce9b;
  cursor: help;
  background-color: #181818;
}

.selected {
  color: #FFB566;
  cursor: help;
}

.card tr td:last-child {
  text-align: center;
}

.card tr td {
  border-bottom: solid #FFB566 1px;
}

/* ------- Section 2 : Contact */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 150px;
  height: 10vw;
  border-top: #FFB566 solid 1px;
}

.contact p {
  padding: 0 0 10px 0;
}

@media (max-width: 1150px) {
  .image {
    display: none;
  }
}

@media (max-height: 550px) or (max-width: 550px) {
  .pricing {
    font-size: 0.8em;
  }
}

@media (max-width: 400px) and (max-height: 850px) {
  .pricing {
    display: block;
  }

  .card {
    height: 100vh;
  }
}

@keyframes translateDown {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(35px);
  }

  100% {
    transform: translateY(30px);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mainTitle {
  0% {
    opacity: 0;
    top: 50%;
  }

  25% {
    opacity: 1;
    top: 50%;
  }

  50% {
    opacity: 0;
    top: 50%;
  }

  75% {
    opacity: 0;
    top: 10%;
  }

  100% {
    opacity: 1;
    top: 10%;
  }
}

@keyframes bounce {
  0% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(10px);
  }

  100% {
    transform: translateX(-50%) translateY(0);
  }
}