/* Buttons */
.dark-trans-btn {
  background-color: transparent;
  font-family: "poppins", "serif";
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #161616;
  padding: 16px 45px;
  border: 1.5px solid #161616;
  border-radius: 0px;
  transition: 0.3s ease;
  position: relative;
  width: max-content;
  z-index: 1;
}

.dark-trans-btn:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: left center;
  z-index: -1;
  background-color: #161616;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.dark-trans-btn:hover::before {
  transform-origin: left center;
  transform: scale(1);
}

.dark-trans-btn a {
  color: #161616;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.dark-trans-btn:hover a {
  color: white;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.dark-trans-btn {
  color: #161616;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.dark-trans-btn:hover {
  color: white;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Light Btn */

.light-trans-btn {
  background-color: transparent;
  font-family: "Gozel-Book", "sans-serif";
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: white;
  padding: 16px 45px;
  border: 1.5px solid white;
  border-radius: 0px;
  transition: 0.3s ease;
  position: relative;
  z-index: 1;
}

.light-trans-btn:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: left center;
  z-index: -1;
  background-color: white;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.light-trans-btn:hover::before {
  transform-origin: left center;
  transform: scale(1);
}

.light-trans-btn a {
  color: white;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.light-trans-btn:hover a {
  color: #161616;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.light-trans-btn {
  color: white;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.light-trans-btn:hover {
  color: #161616;
  transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Light Btn end */