/* white-btn-css-start */
a.white-btn {
  background: white;
  display: flex;
  height: 65px;
  border-radius: 100px;
  width: fit-content;
  align-items: center;
  margin: 0 0 0 auto;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

a.white-btn .btn-wrap {
  display: flex;
  gap: 20px;
  padding: 0 7px 0 30px;
  align-items: center;
  position: relative;
  z-index: 9;
}

a.white-btn .btn-wrap span {
  color: #0a0a0e;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
}

a.white-btn .btn-wrap .btn-icon {
  background: #C4202C;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  transition: 0.3s all ease-in-out;
  position: relative;
}

a.white-btn .btn-wrap::after {
  content: "";
  position: absolute;
  right: 7px;
  background: #C4202C;
  z-index: -1;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  transition: 0.3s all ease-in-out;
}

a.white-btn:hover .btn-wrap::after {
  width: 94%;
  transition: 0.3s all ease-in-out;
}

a.white-btn:hover .btn-wrap span {
  color: white;
  transition: 0.3s all ease-in-out;
}

a.white-btn:hover .btn-wrap .btn-icon img {
  transform: translate(50px, 0px);
  transition: 0.3s all ease-in-out;
}

a.white-btn .btn-wrap .btn-icon img {
  transition: 0.3s all ease-in-out;
}

a.white-btn .btn-wrap .btn-icon::before {
  content: url(../images/white-arrow.svg);
  position: absolute;
  transform: translate(-50px, 0px);
  transition: 0.3s all ease-in-out;
  height: 15px;
}

a.white-btn:hover .btn-wrap .btn-icon::before {
  transform: translate(0px, 0px);
  transition: 0.3s all ease-in-out;
}
/* white-btn-css-end */



/* black-btn-css-start */
a.black-btn {
  background: black;
  display: flex;
  height: 65px;
  border-radius: 100px;
  width: fit-content;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
    cursor: pointer;
}

a.black-btn .btn-wrap {
  display: flex;
  gap: 20px;
  padding: 0 7px 0 30px;
  align-items: center;
  position: relative;
  z-index: 9;
}

a.black-btn .btn-wrap span {
  color: #fff;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
}

a.black-btn .btn-wrap .btn-icon {
  background: #C4202C;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  transition: 0.3s all ease-in-out;
  position: relative;
}

a.black-btn .btn-wrap::after {
  content: "";
  position: absolute;
  right: 7px;
  background: #C4202C;
  z-index: -1;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  transition: 0.3s all ease-in-out;
}

a.black-btn:hover .btn-wrap::after {
  width: 94%;
  transition: 0.3s all ease-in-out;
}

a.black-btn:hover .btn-wrap span {
  color: white;
  transition: 0.3s all ease-in-out;
}

a.black-btn:hover .btn-wrap .btn-icon img {
  transform: translate(50px, 0px);
  transition: 0.3s all ease-in-out;
}

a.black-btn .btn-wrap .btn-icon img {
  transition: 0.3s all ease-in-out;
}

a.black-btn .btn-wrap .btn-icon::before {
  content: url(../images/white-arrow.svg);
  position: absolute;
  transform: translate(-50px, 0px);
  transition: 0.3s all ease-in-out;
  height: 15px;
}

a.black-btn:hover .btn-wrap .btn-icon::before {
  transform: translate(0px, 0px);
  transition: 0.3s all ease-in-out;
}
/* black-btn-css-end */

/* red-btn-css-start */
a.red-btn {
  background: #C4202C;
  display: flex;
  height: 65px;
  border-radius: 100px;
  width: fit-content;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
    cursor: pointer;
}

a.red-btn .btn-wrap {
  display: flex;
  gap: 20px;
  padding: 0 7px 0 30px;
  align-items: center;
  position: relative;
  z-index: 9;
}

a.red-btn .btn-wrap span {
  color: #fff;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
}

a.red-btn .btn-wrap .btn-icon {
  background: #000;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  transition: 0.3s all ease-in-out;
  position: relative;
}

a.red-btn .btn-wrap::after {
  content: "";
  position: absolute;
  right: 7px;
  background: #000;
  z-index: -1;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  transition: 0.3s all ease-in-out;
}

a.red-btn:hover .btn-wrap::after {
  width: 94%;
  transition: 0.3s all ease-in-out;
}

a.red-btn:hover .btn-wrap span {
  color: white;
  transition: 0.3s all ease-in-out;
}

a.red-btn:hover .btn-wrap .btn-icon img {
  transform: translate(50px, 0px);
  transition: 0.3s all ease-in-out;
}

a.red-btn .btn-wrap .btn-icon img {
  transition: 0.3s all ease-in-out;
}

a.red-btn .btn-wrap .btn-icon::before {
  content: url(../images/white-arrow.svg);
  position: absolute;
  transform: translate(-50px, 0px);
  transition: 0.3s all ease-in-out;
  height: 15px;
}

a.red-btn:hover .btn-wrap .btn-icon::before {
  transform: translate(0px, 0px);
  transition: 0.3s all ease-in-out;
}
/* red-btn-css-end */