@import url('https://fonts.googleapis.com/css2?family=Limelight&family=Outfit:wght@100..900&display=swap');
html, body{
    background-color: #d1f1e0;
    font-family: "Outfit", sans-serif;
}
header .container{
    background-color: #ffffff;
    border-radius: 25px;
    margin-top: 30px;
}
a{
    color: #74e678;
    text-decoration: none;
}
h1, h2, h3, h4, h5{
    font-family: "Limelight", sans-serif;
}
.button {
    text-decoration: none;
	pointer-events: auto;
	cursor: pointer;
	background: #baf4bc;
	border: none;
	padding: 1.5rem 3rem;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	position: relative;
	display: inline-block;
}

.button::before,
.button::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.button--calypso {
	overflow: hidden;
	font-size: 1.15rem;
	border-radius: 0.85rem;
	color: #fff;
}

.button--calypso span {
	display: block;
	position: relative;
	mix-blend-mode: difference;
	z-index: 10;
}

.button--calypso:hover span {
	animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleUpInitial {
	to {
		transform: translate3d(0,-105%,0) scale3d(1,2,1);
		opacity: 0;
	}
}

@keyframes MoveScaleUpEnd {
	from {
		transform: translate3d(0,100%,0) scale3d(1,2,1);
		opacity: 0;
	}
	to {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

.button--calypso::before {
	content: '';
	background: #000;
	width: 120%;
	height: 0;
	padding-bottom: 120%;
	top: -110%;
	left: -10%;
	border-radius: 50%;
	transform: translate3d(0,68%,0) scale3d(0,0,0);
}

.button--calypso:hover::before {
	transform: translate3d(0,0,0) scale3d(1,1,1);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso::after {
	content: '';
	background: #000;
	transform: translate3d(0,-101%,0);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso:hover::after {
	transform: translate3d(0,0,0);
	transition-duration: 0.05s;
	transition-delay: 0.4s;
	transition-timing-function: linear;
}
footer{
    background-color: #000000;
    color: #ffffff;
}
.copyright p{
    font-size: 13px;
}
.slides-nav {
    z-index: 99;
    position: absolute;
    right: 0%;
    display: flex;
    align-items: center;
    height: 100%;
    color: #111;
  }
  @media (min-width: 54em) {
    .slides-nav {
      right: 2%;
    }
  }
  .slides-nav__nav {
    position: relative;
    right: 0;
    display: block;
    font-size: 1em;
    transform: rotate(90deg);
    transform-origin: center;
  }
  .slides-nav button {
    position: relative;
    display: inline-block;
    transform: rotate(270deg);
    padding: 0.35em;
    margin: 0;
    font-family: "Space Mono", monospace;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    border: 0;
    overflow-x: hidden;
    transition: color 0.5s ease;
  }
  .slides-nav button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 1px;
    width: 0;
    background: #111;
    transition: width 0.4s ease;
  }
  .slides-nav button svg:hover {
    fill: #74e678;
  }
  .slides-nav button:focus {
    outline: 0;
  }
  .is-sliding .slides-nav {
    pointer-events: none;
  }
  
  .slides {
    position: relative;
    display: block;
    height: 100vh;
    width: 100%;
    background: transparent;
    transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
  }
  .is-sliding .slides {
    background: #ededed;
    transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
  }
  
  .slide {
    z-index: -1;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100vh;
    transition: z-index 1s ease;
  }
  .slide.is-active {
    z-index: 19;
    transition: z-index 1s ease;
  }
  .slide__content {
    border-radius: 30px;
    position: relative;
    margin: 0 auto;
    height: 95%;
    width: 95%;
    top: 2.5%;
  }
  @media (min-width: 54em) {
    .slide__content {
      height: 80%;
      width: 80%;
      top: 10%;
    }
  }
  .slide__header {
    z-index: 9;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    transform: translateX(0%);
  }
  @media (min-width: 54em) {
    .slide__header {
      transform: translateX(-5%);
    }
  }
  .slide__title {
    font-family: Montserrat, helvetica;
    font-size: 2.5em;
    font-weight: 700;
    color: #111;
    background-color: #ffffffab;
    padding: 10px;
    border-radius: 20px;
    overflow-y: hidden;
  }
  @media (min-width: 54em) {
    .slide__title {
      font-size: 5em;
    }
  }
  .slide__title .title-line {
    display: block;
    overflow-y: hidden;
  }
  .slide__title .title-line span {
    display: inline-block;
    transform: translate3d(0, 140%, 0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.8s ease;
  }
  .slide__title .title-line span:nth-child(1) {
    transition-delay: 0.15s;
  }
  .slide__title .title-line span:nth-child(2) {
    transition-delay: 0.3s;
  }
  .is-active .slide__title .title-line span {
    transform: translate3d(0, 0%, 0);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
  }
  .is-active .slide__title .title-line:nth-of-type(2n) span {
    transition-delay: 0.2s;
  }
  .slide__figure {
    z-index: 7;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .is-sliding .slide__figure {
    transform: scale(0.8);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .slide__img {
    position: relative;
    display: block;
    background-size: cover;
    background-position: 50%;
    -webkit-backface-visibility: hidden;
    height: 0%;
    width: 100%;
    border-radius: 30px;
    filter: grayscale(0%);
    transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
  }
  .is-active .slide__img {
    height: 100%;
    opacity: 1;
    transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
  }
  .is-sliding .slide__img {
    filter: grayscale(100%);
  }
  form{
    background-color: #ffffff;
    border-radius: 30px;
    padding: 20px;
    max-width: 600px;
    width: 100%;
    margin: auto;
  }
  #tnx{
    display: none;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 20px;
    max-width: 600px;
    width: 100%;
    margin: auto;
  }
  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
 }
  .close-button{
     color: #ffffff;
     margin-left: auto;
     display: block;
     background-color: transparent;
  }
  .dropdown-menu {
    padding: 10px;
    border-radius: 8px;
    min-width: auto;
  }
  .dropdown-item {
    display: flex;
    align-items: center;
    padding: 5px;
    transition: transform 0.2s ease;
  }
  .dropdown-item:hover {
    transform: scale(1.1);
  }
  .btn:hover, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: #d1f1e0;
  }