@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");
body {
  margin: 0;
  padding: 0;
  color: white;
  font-family: "Poppins", sans-serif;
}
a {
  text-decoration: none;
}
.h-100 {
  height: 100%;
}
a:hover {
  opacity: 0.9;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0 0 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #151515;
}
/********************************/
/********** Typography **********/
/********************************/
.text-small {
  font-size: 24px !important;
}
.text-medium {
  font-size: 30px !important;
}
.text-large {
  font-size: 48px !important;
}
.text-xlarge {
  font-size: 64px !important;
}
.text-xxlarge {
  font-size: 80px !important;
}
.text-larger {
  font-size: 96px !important;
}
/********************************/
/********** colors: BG **********/
/********************************/
.text-primary {
  color: #b74bd9 !important;
}
.text-white {
  color: #fff !important;
}
.text-black {
  color: #000 !important;
}
.bg-primary {
  background-color: #b74bd9 !important;
}
.bg-white {
  background-color: #fff !important;
}
.bg-black {
  background-color: #000 !important;
}
/*************************************/
/********** Margin: Padding **********/
/*************************************/
.mt-0 {
  margin-top: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.mr-5 {
  margin-right: 5px !important;
}
.mb-5 {
  margin-bottom: 5px !important;
}
.ml-5 {
  margin-left: 5px !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.mr-10 {
  margin-right: 10px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.ml-10 {
  margin-left: 10px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mr-15 {
  margin-right: 15px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.ml-15 {
  margin-left: 15px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mr-20 {
  margin-right: 20px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.ml-20 {
  margin-left: 20px !important;
}
.m-0 {
  margin: 0 !important;
}
.m-10 {
  margin: 10px !important;
}
.m-15 {
  margin: 15px !important;
}
.m-20 {
  margin: 20px !important;
}
.ml-auto,
.mx-auto {
  margin-left: auto !important;
}
.mr-auto,
.mx-auto {
  margin-right: auto !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.pr-5 {
  padding-right: 5px !important;
}
.pl-5 {
  padding-left: 5px !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.pr-10 {
  padding-right: 10px !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
.pl-10 {
  padding-left: 10px !important;
}
.pt-15 {
  padding-top: 15px !important;
}
.pr-15 {
  padding-right: 15px !important;
}
.pb-15 {
  padding-bottom: 15px !important;
}
.pl-15 {
  padding-left: 15px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pr-20 {
  padding-right: 20px !important;
}
.pb-20 {
  padding-bottom: 20px !important;
}
.pl-20 {
  padding-left: 20px !important;
}
.p-0 {
  padding: 0 !important;
}
.p-10 {
  padding: 10px !important;
}
.p-15 {
  padding: 15px !important;
}
.p-20 {
  padding: 20px !important;
}
/*****************************/
/********** buttons ***********/
/*****************************/
.btn {
  display: inline-block;
  padding: 11px 50px;
  border-radius: 64px;
  font-size: 16px;
  letter-spacing: 5px;
  font-weight: 600;
}
.btn-primary,
a.btn-primary {
  color: #b74bd9;
  border: 2px solid #b74bd9;
  background-color: #000;
  transition: 0.3s ease;
}
.btn-primary:hover,
a.btn-primary:hover {
  transform: scale(1.09);
  border: 2px solid #b74bd9;
  background-color: #b74bd9;
  color: black;
  box-shadow: 0 0 20px #b74bd9;
}
.btn-primary-outline,
a.btn-primary-outline {
  color: #000;
  border: 2px solid #b74bd9;
  background-color: #b74bd9;
  transition: 0.3s ease;
}
.btn-primary-outline:hover,
a.btn-primary-outline:hover {
  transform: scale(1.09);
  border: 2px solid #b74bd9;
  background-color: #b74bd9;
  color: black;
  box-shadow: 0 0 100px #b74bd9;
}
.btn-secondary {
  background-color: #6a49f2 !important;
  border: 1px solid #6a49f2 !important;
  color: #fff !important;
}
/*************************************/
/********** common classes ***********/
/*************************************/
section {
  padding: 50px 0;
}