/*--- Charan ----*/
.forgot-password{color: #fff;font-weight: 300;font-size: 12px;}
* {box-sizing: border-box;font-family: 'Montserrat', sans-serif;}
.login-container {position: relative;width: 100%;background-color: #fff;
min-height: 100vh;overflow: hidden;}
.forms-container {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.signin-signup {position: absolute;top: 50%;transform: translate(-50%, -50%);
left: 75%;width: 50%;transition: 1s 0.7s ease-in-out;display: grid;
grid-template-columns: 1fr;z-index: 5;}
form {display: flex;align-items: center;justify-content: center;
flex-direction: column;padding: 0rem 5rem;transition: all 0.2s 0.7s;
overflow: hidden;grid-column: 1 / 2;grid-row: 1 / 2;}
form.sign-up-form {opacity: 0;z-index: 1;}
form.sign-in-form {z-index: 2;}
.title {font-size: 2.2rem;color: #444;margin-bottom: 10px;font-weight: 600;}
.input-field {max-width: 380px;width: 100%;background-color: #f0f0f0;
margin: 10px 0;height: 55px;border-radius: 5px;display: grid;
grid-template-columns: 15% 85%;padding: 0 0.4rem;position: relative;}
.input-field i {text-align: center;line-height: 55px;color: #acacac;
transition: 0.5s;font-size: 1.1rem;}
.input-field input {background: none;outline: none;border: none;line-height: 1;
font-weight: 600;font-size: 1.1rem;color: #333;padding: 0px;}
.input-field input::placeholder {color: #aaa;font-weight: 500;}
.btn {width: 50%;background-color: #F86F03;border: none;outline: none;height: 49px;
border-radius: 4px;color: #fff;text-transform: uppercase;font-weight: 600;
margin: 10px 0;cursor: pointer;transition: 0.5s;padding: 0px;letter-spacing: 1px;}
.btn:hover {background-color: #f98c39;}
.panels-container {position: absolute;height: 100%;width: 100%;top: 0;left: 0;
display: grid;grid-template-columns: repeat(2, 1fr);background: #f9f9f9;}
.login-container:before {content: "";position: absolute;height: 2000px;
width: 2000px;top: -10%;right: 45%;transform: translateY(-50%);
background-image: linear-gradient(-45deg, #F86F03 0%, #FFA41B 100%);
transition: 1.8s ease-in-out;border-radius: 50%;z-index: 6;}
.image {width: 100%;transition: transform 1.1s ease-in-out;transition-delay: 0.4s;}
.panel {display: flex;flex-direction: column;align-items: flex-end;
justify-content: space-around;text-align: center;z-index: 6;}
.left-panel {pointer-events: all;/*padding: 3rem 17% 2rem 12%;*/padding: 0rem 17% 3rem 9%;}
.right-panel {pointer-events: none;padding: 3rem 12% 2rem 17%;}
.panel .content {color: #fff;transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;transform: translateY(40px);}
.panel h3 {font-weight: 600;line-height: 1.4;font-size: 1.5rem;margin: 5px 0px;}
.panel p {font-size: 0.95rem;padding: 0px;margin: 0px;line-height: 26px;}
.btn.transparent {margin: 0;background: none;border: 2px solid #fff;width: 130px;
height: 41px;font-weight: 600;font-size: 0.8rem;}
.right-panel .image, .right-panel .content {transform: translateX(800px);}
.fgp a{position: relative;top: 0px;right: -100%;font-weight: 550;font-size: 13px;
padding: 20px 0px;color: #000;}
.brddiv{text-align: center;margin-left: 0;margin-top: 30px;}


/*--- Preloader ----*/
.preloader {position: fixed;width: 100%;height: 100%;background: linear-gradient(135deg, #F86F03, #FFB347);
display: flex;align-items: center;justify-content: center;flex-direction: column;
color: #fff;z-index: 9999;transition: opacity 1s ease, visibility 1s ease;}
.countdown {font-size: 3rem;margin-top: 1rem;}
.circle {width: 100px;height: 100px;border: 6px solid rgba(255, 255, 255, 0.3);
border-top: 6px solid #fff;border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden {opacity: 0;visibility: hidden;}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* ANIMATION */
.login-container.sign-up-mode:before {transform: translate(100%, -50%);right: 52%;}
.login-container.sign-up-mode .left-panel .image, 
.login-container.sign-up-mode .left-panel .content {transform: translateX(-800px);}
.login-container.sign-up-mode .signin-signup {left: 25%;}
.login-container.sign-up-mode form.sign-up-form {opacity: 1;z-index: 2;}
.login-container.sign-up-mode form.sign-in-form {opacity: 0;z-index: 1;}
.login-container.sign-up-mode .right-panel .image,
.login-container.sign-up-mode .right-panel .content {transform: translateX(0%);}
.login-container.sign-up-mode .left-panel {pointer-events: none;}
.login-container.sign-up-mode .right-panel {pointer-events: all;}

@media (max-width: 870px) {
.login-container {min-height: 800px;height: 100vh;}
.signin-signup {width: 100%;top: 95%;transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;}
.signin-signup, .login-container.sign-up-mode .signin-signup {left: 50%;}
.panels-container {grid-template-columns: 1fr;grid-template-rows: 1fr 2fr 1fr;}
.panel {flex-direction: row;justify-content: space-around;align-items: center;padding: 2.5rem 8%;grid-column: 1 / 2;}
.right-panel {grid-row: 3 / 4;}
.left-panel {grid-row: 1 / 2;}
.image {width: 200px;transition: transform 0.9s ease-in-out;transition-delay: 0.6s;}
.panel .content {padding-right: 15%;transition: transform 0.9s ease-in-out;transition-delay: 0.8s;}
.panel h3 {font-size: 1.2rem;}
.panel p {font-size: 0.7rem;padding: 0.5rem 0;}
.btn.transparent {width: 110px;height: 35px;font-size: 0.7rem;}
.login-container:before {width: 1500px;height: 1500px;transform: translateX(-50%);
left: 30%;bottom: 68%;right: initial;top: initial;transition: 2s ease-in-out;}
.login-container.sign-up-mode:before {transform: translate(-50%, 100%);bottom: 32%;
right: initial;}
.login-container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {transform: translateY(-300px);}
.login-container.sign-up-mode .right-panel .image,
.login-container.sign-up-mode .right-panel .content {transform: translateY(0px);}
.right-panel .image, .right-panel .content {transform: translateY(300px);}
.login-container.sign-up-mode .signin-signup {top: 5%;transform: translate(-50%, 0);}
}

@media (max-width: 570px) {
form {padding: 0 1.5rem;}
.image {display: none;}
.panel .content {padding: 0.5rem 1rem;}
.login-container {padding: 1.5rem;}
.login-container:before {bottom: 72%;left: 50%;}
.login-container.sign-up-mode:before {bottom: 28%;left: 50%;}
}