@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap');
@import "font-awesome.min.css";

:root{ 
 --myclr:#ef6d27;
 --myclr2:#0a0c0c;
}

a{ text-decoration:none; }

*{
   box-sizing: border-box;
   font-family: 'Cabin';
}

body {
    font-family: Cabin;
    background: #e8e8e8;
    padding: 0;
    margin: 0;
    font-size: 14px;
    background-image: url(../img/office.jpg);
    background-size: 110%;
}

html{ scroll-behavior: smooth; }
img{ max-width: 100%; max-height: 100%; }

/*intro page*/
.maincontent_1 {
    width: 100%;
    text-align: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

.sufee-login {width: 100%;display: grid;grid-row-gap: 35px;}

.titleTop {
    background: var(--myclr);
    color: #fff;
    padding: 12px 0px;
    font-size: 15px;
    border-radius: 34px;
    position: absolute;
    top: 15px;
    left: 0;
    margin: 0 15px;
    right: 0;
}

.hslogo img {border-radius: 15px;}

ul.optionsList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-row-gap: 16px;
}

ul.optionsList li {
    font-size: 17px;
    font-weight: 500;
}

.countinoueBtn {
    background: #414141;
    color: #fff;
    padding: 12px 0px;
    font-size: 15px;
    border-radius: 10px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-decoration: none;
    display: flex;
    justify-content: center;
    column-gap: 10px;
    align-items: center;
    margin: 0 15px;
}

ul.optionsList li:first-child {
    color: var(--myclr);
}

.countinoueBtn:hover {
    background: var(--myclr);
}


/*intro page*/

.animate__bounce{animation: 1s linear bounce; animation-delay:1s; }
@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1); animation-timing-function:cubic-bezier(.215,.61,.355,1); -webkit-transform:translateZ(0); transform:translateZ(0) } 40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06); animation-timing-function:cubic-bezier(.755,.05,.855,.06); -webkit-transform:translate3d(0,-30px,0) scaleY(1.1); transform:translate3d(0,-30px,0) scaleY(1.1) } 70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06); animation-timing-function:cubic-bezier(.755,.05,.855,.06); -webkit-transform:translate3d(0,-15px,0) scaleY(1.05); transform:translate3d(0,-15px,0) scaleY(1.05) } 80%{-webkit-transform:translateZ(0) scaleY(.95); transform:translateZ(0) scaleY(.95); -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1); transition-timing-function:cubic-bezier(.215,.61,.355,1) } 90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02); transform:translate3d(0,-4px,0) scaleY(1.02) } }


/* Confirm Popup  */
.confirm_created_main {  line-height: 23px; width: 100%; height: 100%; position: fixed; background: #000000ad; top: 0; left: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;  }

.confirm_created_main .confirm_created_box {
    background: #fff;
    padding: 20px 15px;
    text-align: center;
    border: 1px dashed #008000;
    box-shadow: -3px 6px 8px #000000b0;
    outline: 6px solid white;
    background-image: url(../img/wave-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 90%;
    border-radius: 4px;
}

.confirm_created_main .confirm_created_box p {
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    margin-bottom: 15px;
}

.confirm_created_main .confirm_created_box img {height:auto; width:auto; display:table; margin:0 auto; }
.confirm_created_box.red {border-color: red; }
.confirm_created_main .confirm_created_box.red p {color: red; }

/*  Pure css loader */
.loader-01 {display: inline-block; width: 1em; height: 1em; color: inherit; vertical-align: middle; pointer-events: none; }
.loader-01 {border: 0.2em dotted currentcolor; border-radius: 50%; -webkit-animation: 1s loader-01 linear infinite; animation: 1s loader-01 linear infinite; }
@-webkit-keyframes loader-01 {0% {transform: rotate(0deg); } 100% {transform: rotate(360deg); } }
@keyframes loader-01 {0% {transform: rotate(0deg); } 100% {transform: rotate(360deg); } }

/* Confirm Popup  */


/* Login Page  */
.sufee-login.loginPage {
    grid-row-gap: 45px;
    /* margin-top: 30px; */
}

p.loginSubTitle {
    margin: 0;
    color: var(--myclr);
    font-weight: 500;
}

.iconhold{ 
position: relative;
width: 100%;
}

.iconinput{ 
  position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

form.loginform input {
    width: 100%;
    padding: 12px 11px;
    border-radius: 3px;
    border: 1px solid #ef6d27;
    font-family: 'Cabin' !important;
    text-transform: uppercase;
}

input:focus {
    border: 0;
    box-shadow: none;
    outline: 0;
}

form.loginform .countinoueBtn {
    position: unset;
    width: 100%;
    border: 0;
    background: #616161;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0;
    margin-top: 25px !important;
}

.mt-15 {
    margin-top: 15px !important;
}
/* Login Page  */


/* shine Animation  */
.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2;
}
.shine:hover::before, .shine:focus::before {
  -webkit-animation: shine 0.85s;
          animation: shine 0.85s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
/* shine Animation  */


/* Loader 4  */
.loader_box {
    color: #fff;
}

.loader-04 {
  border: 1px solid currentcolor;
  border-radius: 50%;
  -webkit-animation: 1s loader-04 linear infinite;
  animation: 1s loader-04 linear infinite;
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
}
.loader-04:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -0.2em;
  left: 50%;
  border: 5px solid currentcolor;
  border-radius: 50%;
}

@-webkit-keyframes loader-04 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-04 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Loader 4  */


.varifyBtns {
    display: flex;
    justify-content: space-between;
}

.varifyBtns a {
    background: var(--myclr);
    color: #fff;
    padding: 0 8px;
    border-radius: 25px;
}

a#backBtn {
    background: #666666;
}

a#nextBtn {
    background: #10ab10;
}