* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  color: #324b64;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI,
    Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  padding: 0 1rem;
}
.header {
  width: 100%;
  overflow: hidden;
  padding: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  border-bottom: dashed 1px #262626;
  text-align: center;
}
.main-body {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.card {
  display: inline-block;
  margin: 0.8rem 0rem;
  padding: 0.2rem 0;
  text-align: center;
}
.card-body {
  background: #f5f6f9;
  width: 18rem;
  height: 8rem;
  box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.1), 0 0 0 1px #f0f2f7;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  border-radius: 4px;
}
.card-body:hover {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Main Bouncing Loader code  , Starts here */
.bouncing-loader {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #8385aa;
  margin: 3rem 0.2rem;
  animation: bouncing 0.6s infinite alternate;
}
.bouncing-loader:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bouncing {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
/* Main Bouncing Loader code , Ends here  */

/* Sound Beat Loader code  , Starts here */
.sound {
  width: 6px;
  height: 0px;
  border-radius: 10px;
  background: #7983ff;
  margin: 0px 3px;
  animation: beat 0.8s infinite;
}
.sound:nth-child(2) {
  animation-delay: 0.1s;
}
.sound:nth-child(3) {
  animation-delay: 0.2s;
}
.sound:nth-child(4) {
  animation-delay: 0.3s;
}
.sound:nth-child(5) {
  animation-delay: 0.4s;
}
.sound:nth-child(6) {
  animation-delay: 0.5s;
}
.sound:nth-child(7) {
  animation-delay: 0.6s;
}
.sound:nth-child(8) {
  animation-delay: 0.7s;
}
@keyframes beat {
  0%,
  100% {
    height: 0;
  }
  50% {
    height: 40px;
  }
}
/*Sound Beat Loader code , Ends here */

/* Main Donut spinner code  , Starts here  */
.donut-spinner {
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  border: 4px solid rgba(0, 0, 0, 0.1);
  margin: 2.5rem 1.5rem;
  border-left-color: #7983ff;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*  Main Donut spinner code, Ends here  */

/* Text Hover Underline, Starts here  */
.text-hover-underline {
  display: inline-block;
  color: #0087ca;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  margin: 2.5rem 1.5rem;
}

.text-hover-underline::after {
  content: "";
  width: 100%;
  height: 0.1rem;
  background: #0087ca;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.text-hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.text-hover-underline:active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*  Text Hover Underline, Ends here  */

/* Button Color Hover, Starts here  */
.btn-1 {
  display: inline-block;
  border: 2px solid salmon;
  padding: 15px;
  text-decoration: none;
  position: relative;
  font-size: 12px;
  letter-spacing: 1px;
  overflow: hidden;
  cursor: pointer;
  margin: 2.5rem 1.5rem;
  border-radius: 4px;
}
.btn-1 span {
  position: relative;
  color: #262626;
  z-index: 1;
  transition: 0.5s ease-in-out;
}
.btn-1:before {
  position: absolute;
  content: "";
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(187, 35, 35);
  transition: 0.5s ease-in-out;
}
.btn-1:hover:before {
  left: 0;
}
.btn-1:hover span {
  color: #fff;
}
/*  Button Color Hover, Ends here  */

/*  Button 3D Effect , Starts here  */
.btn-2 {
  transform-style: preserve-3d;
  position: relative;
  transition: transform 0.5s linear;
  letter-spacing: 2px;
  top: -32px;
  color: transparent;
  cursor: pointer;
  margin: 2.5rem 1.5rem;
}
.btn-2::before,
.btn-2::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 0;
  padding: 15px 40px;
  border: 3px solid #000;
  transition: transform 0.5s linear;
}
.btn-2::before {
  transform: translateX(-100%) rotateY(90deg);
  transform-origin: right;
  background: #000;
  color: #fff;
}
.btn-2::after {
  transform: translateX(0) rotateY(0deg);
  transform-origin: left;
  background: #fff;
  color: #000;
}
.btn-2:hover:before {
  transform: translateX(0) rotateY(0deg);
}
.btn-2:hover:after {
  transform: translateX(100%) rotateY(90deg);
}

/*  Button 3D Effect , Ends here  */

/*  Button Text Hover code  , Starts here */
.btn-3 {
  display: inline-block;
  border: 2px solid rgb(102, 248, 180);
  text-decoration: none;
  position: relative;
  font-size: 12px;
  letter-spacing: 1px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  width: 200px;
  height: 60px;
  color: #262626;
}
.btn-3::before {
  content: "Hover Over this inner Box";
  position: absolute;
  transform: translateY(-50%);
  left: 18px;
  top: 50%;
  transition: all 0.5s;
}
.btn-3:hover:before {
  top: -100%;
}
.btn-3::after {
  content: "\1F494";
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 140%;
  transition: all 0.5s;
  font-size: 20px;
}
.btn-3:hover:after {
  top: 50%;
}

/* Button Text Hover code , Ends here */

/* Progress Bar code  , Starts here   */
.progress-bar-wrapper {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: bg-change 2s linear 3s infinite;
}
.progress-bar-1 {
  height: 10px;
  width: 80%;
  position: relative;
  display: inline-block;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  animation: progress-bar-1 2s linear 3s infinite;
}

@keyframes progress-bar-1 {
  0% {
    width: 0%;
    background: rgb(224, 162, 47);
  }
  50% {
    width: 70%;
    background: rgba(67, 224, 230, 0.842);
  }
  100% {
    width: 100%;
    background: rgba(85, 86, 160, 0.767);
  }
}
@keyframes bg-change {
  0% {
    background: rgb(224, 162, 47);
  }
  50% {
    background: rgba(67, 224, 230, 0.842);
  }
  100% {
    background: rgba(85, 86, 160, 0.767);
  }
}

/*  Progress Bar  code , Ends here   */

/* Toggle Switch code  , Starts here  */
.switch-check-1 {
  width: 40px;
  height: 20px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.switch-check-1:after {
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 18px;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  transition: all 0.3s;
}
input[type="checkbox"]:checked + .switch-check-1:after {
  transform: translateX(20px);
}
input[type="checkbox"]:checked + .switch-check-1 {
  background-color: #7983ff;
}
.offscreen-checkbox-1 {
  /* actual toggle switch, out of the flow of document and positions it far away from the view,
   but does not hide it so it is accessible via keyboard and screen readers. */
  position: absolute;
  left: -9999px;
}
/* Toggle Switch code , Ends here  */

/* Search box hover code  , Starts here */
.search-box {
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  display: flex;
  align-items: center;
}
.search-txt {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  line-height: 40px;
  font-size: 12px;
  width: 0;
  transition: all 0.25s;
  color: #fff;
}
.search-btn {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  color: #e84118;
  background: #fff;
  position: relative;
  cursor: pointer;
  background: transparent;
}

.search-btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "\1F50D";
}
.search-box:hover .search-txt,
.search-box:active .search-txt {
  width: 180px;
  padding: 20px;
}

/* Search box hover code  , Ends here */