@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

body{
  font-family: "Parkinsans", sans-serif;
  font-optical-sizing: auto;
  color: white !important;
}
.border{ border: solid 2px #d6d6d65a !important; }
.banner{ background: var(--bs-gray-dark); }
.banner .rounded-pill{ cursor: pointer; }
.logo-wrapper{ width: 250px; height: 220px;}
.heading{ font-size: 3rem}
.card {
  border-radius: 1.5rem;
  color: #ffffff;
  border: solid 2px #d6d6d65a !important;
  background: var(--bs-gray-dark);
}
.card .card-title{ font-size: 2rem; }
.card i{ font-size: 6rem; }

.progress-container{ max-width: 800px; }
.progress-heading{ font-size: 4rem; }
.progress-container .step-circle {
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
  top: -23px;
  padding-top: 2px;
  width: 2.4rem;
  height: 2.4rem;  
  font-weight: bold;
  font-size: 1.3rem;   
  cursor: pointer;
  background-color: #3e4347;
  border-radius: 50%;
  border: 2px solid #fff;
}.progress-container .step-circle.active{
  background-color: #007bff;
}.progress-container .step-circle:hover {
  background-color: #6c757d;
  color: #fff;
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}
.progress{ height: 5px; }
.progress-container .card {
  background: var(--bs-gray-dark);
  color: white;
  display: none;    
  height: 300px;
  max-height: 400px;
  transition: opacity 0.3s ease-in-out;
}.progress-container .card.active { 
  display: block; 
}.progress-container .card-title{ 
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.2; 
}.progress-container .card-body{
  font-size: 1.2rem; 
}