* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
}

.wide-container {
   position: relative;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px 20px;
}

body {
   background: #00000013;
   position: relative;
}


/* HEADER */

header {
   padding: 25px 0;
}

header .header_container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

header .header_container .logo {
   display: flex;
   justify-content: flex-start;
   gap: 10px;
   align-items: center;
}
header .header_container .logo img {
   display: block;
   width: 100%;
   max-width: 50px;
}

header .header_container .logo h2 {
   font-size: 30px;
   font-family: "Montserrat", sans-serif;
   font-weight: 700;
}
/* END OF HEADER */

/* CONTAINER */
.container {
   height: 100%;
   min-height: calc(100vh - 90px);
   display: flex;
   justify-content: center;
   align-items: center;
   /* animation: disappear 0.3s linear 10.7s forwards; */
}

#container.visible {
   height: 100%;
   min-height: calc(100vh - 90px);
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: visible;
}
/* END OF CONTAINER */

/* BOX */
.box {
   background: #fff;
   box-shadow: 0 4px 18px #0000001f;
   border: 1px solid rgba(0, 0, 0, .075);
   border-radius: 16px;
   padding: 60px;
}

.box h1 {
   text-align: center;
   font-size: 2rem;
}

.box p {
   text-align: center;
   color: rgb(47, 55, 79);
   font-weight: 400;
   font-size: 15px;
}

.box .steps {
   position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 55px 0;
   width: 100%;
   max-width: 1000px;
   padding: 40px 20px;
}

.box .steps .progress-bar {
   position: absolute;
   width:65%;
   height: 10px;
   margin: 0 auto;
   top: 58px;
   background: rgba(0, 0, 0, .075);
}

.box .steps .progress-bar::before {
   position: absolute;
   content: '';
   width: 0%;
   height: 100%;
   background: #10539f;
   left: 0;
}


.box .steps .progress-bar::after {
   position: absolute;
   content: '';
   width: 0%;
   height: 100%;
   background: #10539f;
   left: 0;
}

@keyframes first-half {
   from {
      width: 0%;
   }

   to {
      width: 50%;
   }
}

@keyframes second-half {
   from {
      width: 0%;
   }

   to {
      width: 100%;
   }
}


.box .steps .step {
   text-align: center;
   width: 200px;
}

.box .steps .step span {
   background: #fff;
   border: 2px solid rgba(0, 0, 0, .25);
   color: #000;
   height: 42px;
   width: 42px;
   font-size: 20px;
   font-weight: 600;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto 8px;
   border-radius: 50vmax;
   position: relative;
   z-index: 999;
}

.box .steps .step:nth-child(3) p {
   color: #2f374f;
} 

.box .steps .step:nth-child(4) p {
/* Intentionally left blank for JS-triggered animation */
}


@keyframes grow-text {
   from {
      color: #2f374f;
      font-weight: 400;
   }
   to {
      color: #409aff;
      font-weight: 600;
   }
}

/* JS-triggered animation classes */


@keyframes done-text {
   from {
      color: #409aff;
      font-weight: 600;
   }
   to {
      color: #2f374f;
      font-weight: 400;
   }
}

.box .steps .step:nth-child(2) span {
   background: #409aff;
   color: #fff;
   border: 2px solid #409aff;
   transform: scale(1.2);
}

.box .steps .step:nth-child(3) span {
   background: #fff;
   color: #000;
   border: 1px solid rgba(0, 0, 0, .25);
   transform: scale(1);
}


.box .steps .step:nth-child(4) span {
   background: #fff;
   color: #000;
   border: 1px solid rgba(0, 0, 0, .25);
   transform: scale(1);
}

@keyframes shrink-1 {
   from {
      transform: scale(1.2);
      background: #409aff;
      border: 2px solid #409aff;
   }
   to {
      transform: scale(1);
      background: #10539f;
      border: 2px solid rgba(0, 0, 0, .25);
      color:#fff;
   }
}

@keyframes grow-1 {
   from {
      transform: scale(1);
      background: #fff;
      border: 2px solid #409aff;
   }
   to {
      transform: scale(1.2);
      background: #409aff;
      color: #fff;
      border: 1px solid #409aff;
   }
}

.box .steps .step p {
   height: 40px;
}

.box p a {
   color: rgb(47, 55, 79);
}

.overlay {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgb(0, 0, 0, 0.6);
   z-index: 9999;
   /* animation: appear 0.1s linear 11s forwards; */
   visibility: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
}

.overlay .overlay-box .box-steps {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 25px;
   margin-bottom: 15px;
}

.overlay .overlay-box .box-steps .step {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

.overlay .overlay-box .box-steps .step:nth-last-child(n+2) {
   opacity: 0.5;
}

.overlay .overlay-box .box-steps .step span {
   border-radius: 50vmax;
   height: 35px;
   width: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #b6dcfa;
}

.overlay .overlay-box .box-steps .step span img {
   width: 15px;
}

.overlay .overlay-box .box-steps .step p {
   color: #fff;
}

.overlay .overlay-box .box-text {
   background: #4e504f;
   padding: 20px 15px;
   border-radius: 15px;
   text-align: center;
}

.overlay .overlay-box .box-text p {
   color: #fff;
}


.overlay .overlay-box .box-text p a {
   color: #fff;
}

@keyframes appear {
   from {
      visibility: hidden;
   }
   to {
      visibility: visible;
   }
}

@keyframes disappear {
   from {
      visibility: visible;
   }
   to {
      visibility: hidden;
   }
}

.overlay button {
   position: absolute;
   right: 50px;
   top: 50px;
   background: none;
   outline: none;
   border: none;
   color: #fff;
   font-size: 25px;
   cursor: pointer;
   font-family: "Quicksand", sans-serif;
}

.arrows {
   width: 100%;
   height: 100%;
   position: absolute;
}

.arrows .first-arrow {
   background: url(arrow-top.png);
   background-repeat: no-repeat;
   background-size: contain;
   width: 220px;
   padding: 15px;
   display: flex;
   align-items: center;
   position: absolute;
   right: 23vw;
   top: 30px;
   /* animation: leftandright 1.3s linear infinite, appear 0.5s linear 2s forwards, disappear 0.5s linear 5s forwards; */
   visibility: hidden;
}

@keyframes leftandright {
   0% {
      right: 23vw;
   }
   50% {
      right: 28vw;
   }

   100% {
      right: 23vw;
   }
}

.arrows .first-arrow img {
   width: 15px;
   margin: 0 2px;
}

.arrows .first-arrow p {
   font-size: 16px;
   color: #fff;
   position: relative;
   left: 15px;
   top: -3px;
}

.arrows .second-arrow {
   background: url(arrow-right.png);
   background-repeat: no-repeat;
   background-size: contain;
   width: 280px;
   padding: 25px;
   position: absolute;
   right: 1vw;
   top: 30px;
   /* animation: upanddown 1.3s linear infinite, appear 0.5s linear 5.5s forwards, disappear 0.5s linear 10s forwards; */
   visibility: hidden;
}

.arrows .second-arrow img {
   width: 15px;
   margin: 0 2px;
}

.arrows .second-arrow b {
   color: #fff;
   font-size: 14px;
}

.arrows .second-arrow p {
   font-size: 14px;
   color: #fff;
}

@keyframes upanddown {
   0% {
      top: 30px;
   }
   50% {
      top: 40px;
   }

   100% {
      top: 30px;
   }
}

/* END OF BOX */

/* FOOTER */

footer {
   padding: 25px 0;
}

footer .menu {
   text-align: center;
}
footer .menu a {
   text-align: center;
   color: rgb(47, 55, 79);
   font-size: 13px;
   text-decoration: none;
}

footer .menu a:hover {
   text-decoration: underline;
}
/* END OF FOOTER */

.grow-text-animate {
   animation: grow-text 0.5s linear forwards;
}
.done-text-animate {
   animation: done-text 0.5s linear forwards;
}
/* JS-triggered progress bar animations */
.progress-bar.progress-bar-before-first-half::before {
   animation: first-half 0.5s linear forwards;
}
.progress-bar.progress-bar-after-second-half::after {
   animation: second-half 0.5s linear forwards;
}
.grow-1-animate {
   animation: grow-1 0.5s linear forwards;
}
.shrink-1-animate {
   animation: shrink-1 0.5s linear forwards;
}
.first-arrow-animate {
   animation: leftandright 1.3s linear infinite, appear 0.5s linear forwards
}
.second-arrow-animate {
   animation: upanddown 1.3s linear infinite, appear 0.5s linear forwards
}
.animate-appear {
   animation: appear 0.1s linear forwards;
}
.animate-disappear {
   animation: disappear 0.5s linear forwards;
}
.container-disappear {
   animation: disappear 0.3s linear forwards;
}