/* START COMMON CSS */
.headingOther { margin-bottom: 40px; text-align: center; display: inline-block; width: 100%; }
.headingOther h2 { color: #23262F; font-size: 42px; line-height: 56px; margin-bottom: 20px; font-weight: bold; -webkit-font-smoothing: antialiased; position: relative; z-index: 1; }
.headingOther h2 span { color: #444; }
.headingOther p { color: #777E90; font-size: 17px; line-height: 25px; margin-bottom: 0; font-weight: 300; }
.headingOtherLeft { text-align: left; }
.specialPara { color: #444; font-size: 18px; line-height: 23px; margin: 0 0 10px; }
.textWhite { color: #fff !important; }
.textCenter { text-align: center !important; }
h2 { color: #444; font-size: 30px; line-height: 35px; font-weight: 700; }
h3 { font-size: 26px; line-height: 31px; font-weight: 700; }
h4 { font-size: 18px; line-height: 23px; font-weight: 700; }
p { font-size: 15px; line-height: 20px; color: #444; }
body { background: #fff; color: #444; font-family: 'SF Pro Display'; font-weight: normal; font-size: 15px; margin: 0; padding: 0; position: relative; }
/* END COMMON CSS */



/* START lines */
.lines { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: -1; }
.line { position: absolute; width: 5px; height: 100%; top: 0; left: 50%; background: rgb(255 255 255 / 1%); overflow: hidden; }
.line::after { content: ''; display: block; position: absolute; height: 15vh; width: 100%; top: -50%; left: 0; background: linear-gradient(to bottom, rgb(255 0 0 / 0%) 0%, #00ff28  75%, #00ff28 100%); 
animation: drop 7s 0s infinite; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); z-index: -888; }
.line:nth-child(1) { margin-left: -40%; }
.line:nth-child(1)::after { animation-delay: 1s; }
.line:nth-child(3) { margin-left: 40%; }
.line:nth-child(3)::after { animation-delay: 2s; }
.line:nth-child(4) { margin-left: -20%; }
.line:nth-child(4)::after { animation-delay: 3s; }
.line:nth-child(5) { margin-left: 20%; }
.line:nth-child(5)::after { animation-delay: 4s; }
@keyframes drop {
    0% {top: -50%; }
    100% {top: 110%; }
}


/* END lines */


/* START BUTTON */
.btnTheme { background: #18c197; box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); border: none; border-radius: 3px; color: #fff; font-size: 15px; line-height: 20px;
padding: 10px 25px; text-decoration: none; transition: all 0.3s ease-in-out 0s; position: relative; }
.btnTheme:hover, .btnTheme:focus { background: #29f7c4; box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); border: none; color: #fff; }
a { text-decoration: none; }
/* END BUTTON */

@keyframes textclip {
    to { background-position: 200% center; }
}

/* START Register LOG IN FORGOT*/
.logInArea { background: #005054 url(../img/hero-square-bg.svg);  padding: 70px 0;   width: 100%;   position: relative; z-index: 1; overflow: hidden; }
.logIn { margin: 0 0 30px;width: 100%; position: relative; }
.logIn h2 { text-align: center; font-size: 36px; line-height: 40px; margin: 0 0 10px; color: #fff; 
font-weight: 600;  background-image: linear-gradient(-225deg, #ffffff 0%, #00ff28 29%, #ff1361 67%, #fff800 100%);background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 2s linear infinite;}
 
.users {  overflow: hidden;  z-index: 1; background-color: #0000006e; box-shadow: 0px 0px 60px 0px rgba(94, 92, 154, 0.12); padding: 40px; position: relative;   width: 100%; border-radius: 12px;border: 2px solid transparent;
    border-image: linear-gradient(0deg, #84e247 0, transparent);
    border-image-slice: 1; }
.users label.control-label { font-weight: 500; color: #fff; font-size: 15px; line-height: 20px; margin: 0 0 5px; }
.users .form-group { margin: 0 0 15px; position: relative; } 
.users .form-control {background: #00000030;border: 1px solid #ffffff33;border-radius: 3px;box-shadow: none;color: #fff;font-size: 15px; padding: 10px 12px; }
 .users textarea.form-control {
    height: 100px;
    padding-top: 15px;
    resize: none;
}
.users .btn {   padding: 6px 30px; font-size: 18px; line-height: 30px;  }
.users .form-control::-webkit-input-placeholder{ color: #fff; }
.users .form-control::-moz-placeholder { color: #fff; }
.users .form-control::-ms-input-placeholder { color: #fff; }
/* END Register LOG IN FORGOT */


.animate-border {
    position: relative;
    margin: auto;
    display: block;
    width: 115px;
    height: 3px;
    background: #1aa348;
    overflow: hidden;
}

.animate-border:after {
    position: absolute;
    content: "";
    width: 35px;
    height: 3px;
    left: 15px;
    bottom: 0;
    border-left: 10px solid #fff;
    border-right: 10px solid #fff;
    -webkit-animation: animborder 2s linear infinite;
    animation: animborder 2s linear infinite;
}
@-webkit-keyframes animborder {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(113px);
        transform: translateX(113px);
    }
}

@keyframes animborder {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(113px);
        transform: translateX(113px);
    }
}