:root{
  --primary-color: #2d2c41;
  --overlay: #8e2de2;
  --menu-speed: 0.75s;
}

html {
  scroll-behavior: smooth;
}



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Bebas Neue", cursive;
}

.header {
  padding: 3% 5% 3% 5%;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23ecf0f1' fill-opacity='0.4' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
}

.header-title {
  padding: 0;
  margin: 0;
  font-family: "Bebas Neue", cursive;
  font-size: 4rem;
}

.header-line {
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
}
p{
  font-family: "Open Sans", sans-serif;
}

.site-btn-1 {
  background-image: linear-gradient(to right, #8e2de2, #4a00e0);
  padding: 2% 4%;
  text-decoration: none !important;
  color: white;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.site-btn-1:hover {
  color: #4a00e0;
  background-color: white;
  background-image: none;
  border: solid #4a00e0 1px;
}

.title {
  font-family: "Montserrat", sans-serif;
}

.service-card {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: linear 0.2s;
  -webkit-transition: linear 0.2s;
  -moz-transition: linear 0.2s;
  -ms-transition: linear 0.2s;
  -o-transition: linear 0.2s;
}

.service-figure {
  min-height: 150px;
}

.service-card:hover {
  /* background: linear-gradient(to right, #8e2de2, #4a00e0); */
  background-color: #8e2de2;
  color: white;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(189, 195, 199, 1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(189, 195, 199, 1);
  box-shadow: 0px 0px 20px 0px rgba(189, 195, 199, 1);
}
.sm {
  margin: 0;
  width: 50px;
  height: 5px;
 
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.sm-seperator{
  background-image: linear-gradient(to right, #8e2de2, #4a00e0);
}

.sm-seperator-white {
  background-color: #ffffff;
}

.how-it-works {
  padding: 90px 0; 
  background-color: #2d2c41;

 
}

.cliped-section{
  padding: 90px 0;
  clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
}

.sec-how-it-works{
  background-image: linear-gradient(to bottom, #fff, #dfe8f2)
}

.title {
  font-family: "Montserrat", sans-serif;
}
.title-bg{
  font-size: 3rem;
}


.img-fit {
  max-width: 100%;
}

.description-box {
  background-color: #ffffff;
  padding: 20px 10px 50px 15px;
  width: 100%;
  -webkit-border-top-left-radius: 60px;
  -webkit-border-bottom-right-radius: 60px;
  -moz-border-radius-topleft: 60px;
  -moz-border-radius-bottomright: 60px;
  border-top-left-radius: 60px;
  border-bottom-right-radius: 60px;


}

.description {
  font-family: "Montserrat", sans-serif;
  margin: 10px 0;
}

.number {
  font-family: "Bebas Neue", cursive;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.number-1{
  background-color: #8d2de2a2
}
.number-2{
  background-color: #590d82b6;
  
}
.number-3{
  background-color: #b61aae8f;
  
}

.number-4{
  background-color: #f25d9ba2;
  
}

.number-5{
  background-color: #8d2de2a2;
  
}

.number-6{
  background-color: #590d82b6;
  background-color: #590d82
}

.hr-number{
  margin: 0;
  width: 50px;
  height: 5px;
 
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.hr-1{
  background-color: #8d2de2a2;
}


.hr-2{
  background-color: #590d82b6;
}


.hr-3{
  background-color: #b61aae8f;
}


.hr-4{
  background-color: #f25d9ba2;
}


.hr-5{
  background-color: #8d2de2a2;
}


.hr-6{
  background-color: #590d82b6;
}

.process-icon {
  width: 100px;
  height: 100px;
}



.about-us {
  background-color: #dfe8f2;
  /* clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%); */
  height: 500px;
}


.sec-contact-us{
  background-image: linear-gradient(to bottom, #dfe8f2, #dfe8f2);
}
.contact-us{ 
  
  background-color: #2d2c41;
}

.sec-email-us{
  background-color: #dfe8f2;
}

.email-body{
  background-color: #fff;
  box-shadow: 0 28px 38px 0 rgba(18,16,25,.16);
  padding: 10% 10%;
  margin-top: -140px;
}


.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 100%;
}

.form__field {
  font-family: "Open Sans", sans-serif;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #000;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.form__field::placeholder {
  color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
  font-size: 1.3rem;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  font-family: "Open Sans", sans-serif;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 400;
  border-width: 3px;
  border-image: linear-gradient(to right,#8e2de2, #4a00e0);
  border-image-slice: 1;
}
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #8e2de2;
  font-weight: 700;
}

/* reset input */
.form__field:required, .form__field:invalid {
  box-shadow: none;
}


@media (max-width: 767.98px) { 

  .how-it-works {
    padding: 90px 0;
    clip-path: polygon(0 0%, 100% 2%, 100% 100%, 0 98%);
  }

  .process-icon {
  display: flex;
  margin: auto;
  }

  .email-body{
  margin-top: 50px;
  }
 }