@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Urbanist", sans-serif;

}
a {
  text-decoration: none;
}
img {
  width: 100%;
}
::placeholder {
  color: #8391A180;
  font-size: 14px;
}
:root {
  --blue: #092EA7;
  --dark: #1E232C;
  --gray: #8391A1;
}
h2 {
  font-size: 35px;
  
}
select,
input {
  font-size: 15px !important;
}

.text-gray {
  color: var(--gray);
}
.text-blue {
  color: var(--blue);
}
.h-screen {
  min-height: 100vh;
}
/* Login area start  */

/* login left start  */
.left-side {
  background-image: url('../img/bg-left.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 150px 70px 30px;
}

.login-title h2,
.demo-area h2 {
  font-weight: 600;
}
.login-form .login-title {
  display: grid;
  grid-template-columns: 6fr 6fr;
}
.forgot-area:last-child {
  font-weight: 600;
}
.login-btn {
  background-color: #90181b;
}
.login-btn:is(:hover,.active, :focus) {
  background: #6c0d0fe0 !important;
}
/* demo area  */
.demo-area {
  padding-top: 50px;
}
.demo-area .demo-item {
  padding: 5px;
  border-radius: 5px;
}
.demo-item .demo-icon i {
  height: 35px;
  width: 35px;
  line-height: 35px;
  color: var(--blue);
  text-align: center; 
  background-color: #fff;
  border-radius: 4px;
}
.demo-item span {
  color: #fff;
  font-weight: 500;
}
.demo-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.demo-item1 {
  background-color: #092EA7;
}
.demo-item2 {
  background-color:#A990DD;
}
.demo-item3 {
  background-color: #1871AC ;
}
.demo-item4 {
  background-color: #8962F8 ;
}
.demo-item5 {
  background-color: #2C6184 ;
}
.demo-item6 {
  background-color: #6273BD ;
}
.demo-item7 {
  background-color: #1E538F ;
}
.demo-item8 {
  background-color: #474E95 ;
}
.demo-item9 {
  background-color: #092EA7;
}
/* login left end  */

/* Login right start  */
.right-side {
  background-image: url('../img/bg-right.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  /* padding: 50px 30px; */
}
.logo img {
  width: 300px;
  height: auto;
}
.banner img {
  width: 700px;
  height: 700;
}
#toggle-pass {
  cursor: pointer;
}
/* Login right end  */
/* Login end start  */
/* Register start start  */
.register-left {
  padding-top: 80px !important;
}
.regi-tabs .nav-pills {
  background-color: #fff;
}
.nav-pills {
  border-radius: 5px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background: linear-gradient(99.54deg, #9A9BE9 0%, #233DAE 119.69%);
}

.regi-tabs .nav-pills .nav-link {
  padding: 5px 25px;
  cursor: pointer;
}

.regi-tabs .nav-pills .nav-link h3 {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 40px;
  color: rgba(36, 61, 174, 0.5);
  font-weight: 700;
}
.regi-tabs .nav-pills .nav-link h5 {
  font-family: "Poppins", sans-serif;
  color: rgba(36, 61, 174, 0.4);
}
.nav-pills .nav-link.active h5, .nav-pills .show>.nav-link h5 {
  color: #fff !important;
}
.language select {
  padding: 0 45px;
}

.regi-first-form input {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 45px !important;
}
.regi-first-form .form-select {
    padding: 9px 0 9px 42px  !important;
}
.regi-first-form input[type="file"] {
padding: 7px 0 32px 42px !important;

}
.left-side .language span {
  font-size: 15px;
  color: #8391A1;
}
.language .svg-icon {
  left: 5px;
  top: 5px !important;
}

.login-form .svg-icon {
  left: 5px;
  top: 4px;
}
.regi-first-form img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  left: 5px;
  top: 32px;
  z-index: 10;
}
#on {
  display: none;
}

.form-template {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
}
.language .form-label,
.regi-first-form .form-label {
  margin-bottom: 5px !important;
}
.form-label {
  font-size: 15px;
  color: #8391A1;
}
.red {
  color: #ff6347;
}
.previous {
  padding: 8px 25px;
  background-color: #E6E7F7;
  color: var(--blue);
  outline: none !important;
  border: 1px solid var(--blue);
  border-radius: 4px;
  transition: all .4s ease-in-out;
}
.previous:hover {
  color: #fff;
  outline: none !important;
  border: 1px solid var(--blue);
  background-color: var(--blue);
}
.next {
  padding: 8px 25px;
  background-color: var(--blue);
  color: #fff;
  outline: none !important;
  border: 1px solid var(--blue);
  border-radius: 4px;
  transition: all .4s ease-in-out;
}
.next:hover {
  background-color: #E6E7F7;
  color: var(--blue);
  outline: none !important;
  border: 1px solid var(--blue);
}
/* Register end start  */


@media screen and (max-width: 1366px) {
  .login-form .login-title {
    display: grid;
    grid-template-columns: 8fr 4fr;
  }
  .left-side {
    padding: 50px 30px 0;
  }
  .banner img {
    width: 550px;
    height: 550px;
    object-fit: contain;
  }
  .demo-items {
    grid-template-columns: repeat(2, 1fr);
  }
  .demo-area {
    padding-top: 30px;
  }
  .regi-tabs .nav-pills .nav-link {
    padding: 5px 20px;
}
.regi-tabs .nav-pills .nav-link h3 {
  font-size: 35px;
}
.regi-tabs .nav-pills .nav-link h5 {
  font-size: 18px;
}
.register-left {
  padding-top: 20px !important;
}
}
@media screen and (max-width:992px) {
  .login-form-logo {
    width: 250px !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 768px) {
  .login-form .login-title {
    display: grid;
    grid-template-columns: 1fr;
  }
  .login-title h2 {
    text-align: center;
  }
  .left-side {
    padding: 50px 30px 20px;
  }
  .banner img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .demo-items {
    grid-template-columns: repeat(2, 1fr);
  }
  .demo-area {
    padding-top: 30px;
  }
  .form-template {
    grid-template-columns: repeat(1, 1fr);
  }

}
@media screen and (max-width: 512px) {
  .language {
    flex-direction: column;
  }
  .regi-tabs .nav-pills .nav-link h3 {
    font-size: 25px;
    margin-right: 5px !important;
  }
  .regi-tabs .nav-pills .nav-link h5 {
    font-size: 15px;
  }
  .regi-tabs .nav-pills .nav-link {
    padding: 5px 8px;
  }
}