/* font-family::start */
@font-face {
  font-family: Quicksand-Bold;
  src: url(../fonts/quicksand/Quicksand-Bold.ttf);
}
@font-face {
  font-family: Quicksand-Light;
  src: url(../fonts/quicksand/Quicksand-Light.ttf);
}
@font-face {
  font-family: Quicksand-Medium;
  src: url(../fonts/quicksand/Quicksand-Medium.ttf);
}
@font-face {
  font-family: Quicksand-Regular;
  src: url(../fonts/quicksand/Quicksand-Regular.ttf);
}
@font-face {
  font-family: Quicksand-SemiBold;
  src: url(../fonts/quicksand/Quicksand-SemiBold.ttf);
}
/* font-family::End */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  color: var(--dark-color);
  font-weight: 400;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Quicksand-Regular;
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  zoom: 1;
}

ul {
  list-style: none;
  display: flex;
}

.row-center {
  vertical-align: middle;
  align-items: center;
}

html {
  font-size: 16px;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  font-family: Quicksand-Regular;
  background-color: var(--main-white);
}

a,
ul,
li,
tr,
td {
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
  font-family: Quicksand-Regular;
}

.modal-open {
  padding: 0 !important;
}
a,
a:hover,
a:focus {
  text-decoration: none;
  color: inherit;
}

/* 2) Heading */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  color: var(--text-gray);
  font-weight: 800;
  font-family: Quicksand-Bold;
}

h1 {
  font-size: 2.5em;
  line-height: 1.25em;
  font-family: Quicksand-Bold;
}

h2 {
  font-size: 1.6667em;
  line-height: 1.25em;
  font-family: Quicksand-Bold;
}

h3 {
  font-size: 1.5em;
  line-height: 1.2222em;
  font-family: Quicksand-Bold;
}

h4 {
  font-size: 1.3333em;
  line-height: 1.25em;
  font-family: Quicksand-Bold;
}

h5 {
  font-size: 1.1666em;
  line-height: 1.1428em;
  font-family: Quicksand-Bold;
}

h6 {
  font-family: Quicksand-Bold;
  font-size: 1em;
}

p {
  font-size: 1.25em;
  line-height: 1.1428em;
  color: var(--text-gray);
  font-weight: 400;
  line-height: 25px;
  font-family: Quicksand-Bold;
}

img {
  width: 100%;
  vertical-align: middle;
  border-style: none;
}
.card
{
  border: none;
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 90%;
  }
  .modal-lg,
  .modal-xl {
    max-width: 60%;
  }
}

.modal-content {
  background-color: transparent;
  border: none;
}

.btn:focus {
  box-shadow: none;
}

.transition {
  transition: all 0.3s ease-in-out;
}

button:focus {
  outline: none !important;
}

/* all-colors-root::start */
:root {
  --main-white: #ffff;
  --main-black: #000;
  --dark-color: #3f3d56;
  --thm-dark: #2f363e;
  --text-gray:#A5A5A5;
  --the-color-primary: #24ADB8;
  --the-color-secondary: #00bfa6;
  --the-color-tertiary: #41d5b6;
  --text-gradient: linear-gradient(to top right, #21b0bd, #00bfa6);
  --light:#DEF7F4;
}
.form-control:focus {
  color: #495057;
  background-color: #fff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--light);
}
/* all-colors-root::start */

/*Title-Typography::start */
.main-heading {
  font-size: calc(48px + (50 - 48) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Bold;
  color: var(--dark-color);
}
.main-heading-gradient {
  font-size: calc(48px + (50 - 48) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Bold;
  background-image: var(--text-gradient) ;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.second-heading {
  font-size: calc(22px + (24- 22) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Bold;
  color: var(--dark-color);
}
.small-text-gray {
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Regular;
  color: var(--text-gray);
}
.small-text-dark {
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Medium;
  color: var(--thm-dark);
}
.small-text-gradient {
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Medium;
  color: var(--the-color-primary);
  background-image: var(--text-gradient) ;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
/* .small-text-color {
  font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Regular;
  color: var(--the-color-primary);
} */
.form-label {
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-SemiBold;
  color: var(--thm-dark);
  margin-bottom: 15px;
}
.form-input
{
  background-color: var(--light);
  border-radius: 5px;
  border: none;
  min-height: 50px;
  cursor: pointer;

}
/*Title-Typography::End */

/* Buttons-css::start */
.button-border {
  position: relative;
  border: 2px solid transparent;
  background: var(--main-white);
  background-clip: padding-box;
  border-radius: 5px;
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Medium;
  color: var(--the-color-primary);
  padding: 10px 15px;
}
.button-border::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: var(--text-gradient);
  z-index: -1;
  border-radius: 5px;
}
.button-border:hover {
  color: var(--main-white);
  background-color: var(--text-gradient);
}

.button-fill {
  padding: 10px 15px;
  font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-family: Quicksand-Medium;
  color: var(--main-white);
  cursor: pointer;
  background-image: linear-gradient(to right, var(--the-color-primary), var(--the-color-secondary), var(--the-color-secondary), var(--the-color-tertiary));
  box-shadow: 0 1px 2px 0 var(--the-color-secondary);
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 5px;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button-fill:hover {
  background-position: 100% 0;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  color: var(--main-white);
}
/* Buttons-css::start */


/* margin-class::start */
.section-margin
{
  margin-top: 100px;
}
.content-margin
{
  margin-top: 50px;
}
/* margin-class::End */

/* Login-page-css::start */

/* login-image-section-css::start */
.login-main
{
  background-image: url(../images/login/login-shape.png);
  height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: left;
  display:flex;
  align-items: center;
}
.login-main::after
{
  content: "";
  background-image: url(../images/login/login.png);
  background-size: cover;
  position: absolute;
  bottom: 0%;
  left: 0px;
  justify-content: center;
  width: 100%;
  background-size: contain;
  height:400px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
.login-image-sm
{
  display: none;
}
.login-text
{
  position: absolute;
  top: calc(100% - 80%);
  left:10%;


}
/* login-image-section-css::End*/

/* login-form-section-css::start */

.form-content
{
  margin-top: 10px;
}
.outer-card
{
  width: 100%;
  background-image: var(--text-gradient);
  padding: 30px;
  border-radius: 10px;
}
.form-card
{
  height: 85vh;
  width: 100%;
  border-radius: 10px;
  position: relative;
}

.form-logo img
{
  width: auto;
}
.form-card .card-header,
.form-card .card-footer
{
  background-color:transparent;
  border-bottom: none;
  border-top: none;
  z-index: 55;
}
.form-card .card-body
{
  position: relative;
  z-index: 55;
}
.input-icon-main
{
  position: relative;
}
.input-icon-main input
{
  padding-left: 50px;
}
.form-container .second-heading
{
  margin-bottom:10px;
  margin-top:10px;
}
.from-group-main
{
  margin-top:10px;
}
.input-icon
{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-btn .btn
{
  width: 100%;
  margin-top:30px;
}
.forgot-link
{
  text-align: end;
  z-index: 6;
}
.form-card::after
{
  content: "";
  position: absolute;
  background-image: url(../images/login/circle-shape.png);
  background-repeat: no-repeat;
  border-radius: 10px;
  top: -15px;
  left: 0;
  right: 0;
  bottom: 0px;
  width: 100%;
  background-position: bottom;
  background-size: contain;

}

/* login-form-section-css::End */
/* Login-page-css::End */





.form-wizard {
  position: relative;
  /* display: table; */
  margin: 0 auto;
  /* max-width: 540px; */
}

.steps {
  /* margin: 40px 0; */
  overflow: hidden;
}
.steps ul {
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.steps ul li {
  float: left;
  color: #fff;
  padding: 0 15px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out 0;
  -moz-transition: all 0.4s ease-in-out 0;
  -ms-transition: all 0.4s ease-in-out 0;
  -otransition: all 0.4s ease-in-out 0;
  transition: all 0.4s ease-in-out 0;
}
.steps ul li:hover, .steps ul li.active {
  color: #fb8200;
}
.steps ul li:hover span, .steps ul li.active span {
  background-image:var(--text-gradient);
  color:var(--main-white);
}
.steps ul li:hover::after, .steps ul li.active::after {
  background-image:var(--text-gradient);
  width: 100%;
}
.steps ul li::before, .steps ul li::after {
  content: "";
  position: absolute;
  left: -50%;
  top: 19px;
  width: 100%;
  height: 3px;
  background:var(--text-gray);
  transition: all 0.4s ease-in-out 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.steps ul li::after {
  width: 0;
}
.steps ul li span {
  display: block;
  margin: 0 auto 15px;
  width: 35px;
  height: 35px;
  text-align: center;
  background:var(--text-gray);
  line-height: 35px;
  color: var(--main-white) !important;
  position: relative;
  z-index: 1;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius:5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.steps ul li:first-child::before, .steps ul li:first-child::after {
  display: none;
}

.form-container {
  clear: both;
  display: none;
}
.form-container.active {
  display: block;
}
.form-group {
  margin-bottom:0px;
}

.form-title {
  margin-bottom: 30px;
  padding-bottom: 15px;
  position: relative;
}
.form-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  height: 2px;
  background: #fb8200;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -otransform: translateX(-50%);
  transform: translateX(-50%);
}

.form-card .card-body {
  max-height: calc(85vh - 118px);
  overflow-y: auto;
}

@media(max-width: 991px) {
  .form-card .card-body {
    max-height: inherit;
  }
}