@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700;900&display=swap');


body{
    font-family: 'Chakra Petch', sans-serif;
    background: #ececec;
}
.container{
    --bs-gutter-x: 4rem;
    padding-right: var(--bs-gutter-x, 1rem);
    padding-left: var(--bs-gutter-x, 1rem);
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.left-box {
    background: url(../images/auth/img_background_login.png) no-repeat;
    background-size: cover;
}

/*------------ Login container ------------*/
.box-area{
    width: 800px;

}
.header-text {
    text-align: center;
}
.header-text h2 {
    font-size: 26px;
    font-weight: 900;
    color: #5c5768;
}
.header-text p {
    color: #5c5768;
}
/*------------ Right box ------------*/
.right-box{
    display: table;
}
.box-login {
    display: table-cell;
    vertical-align: middle;
}
.featured-image .logo img{
    width: 25%;
    margin: 20px;
    cursor: pointer;
}
.featured-image .logo img:hover {
    transform: scale(1.1);
    transition: transform .3s;
}
/*------------ Custom Placeholder ------------*/
::placeholder{
    font-size: 16px;
}
.rounded-4{
    border-radius: 20px;
}
.rounded-5{
    border-radius: 30px;
}
.form-control:focus  {
    box-shadow: 0px 0px 10px #B08FF8;
    border: 1px solid #8654eb;
}
.form-control {
    border-radius: 3rem !important;
    border: 1px solid #B08FF8;
    background: #f9f8fed3;
    font-size: 16px;
    padding: 12px;
}
.btn {
    border-radius: 3rem !important;
    background-image: linear-gradient(45deg ,#B08FF8,#7F49EB);
    border: none;
    font-weight: 700;
}
.btn:hover {
    background-image: linear-gradient(45deg ,#cebbf8,#b476ef);
    box-shadow: 0px 0px 20px #cebbf8;
}

/*------------ For small screens------------*/
@media only screen and (max-width: 768px){
     .box-area{
        margin: 0 10px;
     }
     .left-box{
        height: none;
        overflow: none;
     }
     .right-box {
        padding: 20px;
     }
}
@media only screen and (max-width: 767px){
    .left-box {
        height: 80px;
        overflow: hidden;
     }
}
@media only screen and (max-width: 430px){
    .container{
        --bs-gutter-x: 1rem;
        padding-right: var(--bs-gutter-x, 1rem);
        padding-left: var(--bs-gutter-x, 1rem);
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
  
}