* {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-family: 'Poppins', sans-serif;

        }

        body {

        

        }

        /*----------------left---------------------*/

        .left-section  {

        background: url('https://yt2.checkgates.in/public/web_assets/images/login-bg.jpg') no-repeat center center;

        background-size: cover;

        color: white;

        padding: 3rem 16rem 0 12rem;

        height: 100vh;

        justify-content: flex-start;

        align-items: flex-start;

        }

        .left-section .login-left h2 {

        font-size: 2rem;

        font-weight: 600;

        margin-bottom: 1.2rem;

        margin-top: 2.5rem;

        }

        .left-section .login-left p {

        font-size: .9rem;

        font-weight: 500;

        }

        .left-section .header-logo-wrapper {

        }



        .left-section .header-logo-wrapper .logo-wrapper a {

          display: flex;

          align-items: center;

        }

        .left-section .header-logo-wrapper .logo-wrapper a img {

            display: block;

            max-height: 83px;

            padding-right: 1rem;

            width: auto;

        }

        .left-section .header-logo-wrapper .logo-wrapper a img:last-child {

          max-height: 57px;

          position: relative;

          top: 13px;

          width:auto;

        }



       /* .left-section .header-logo-wrapper .logo-wrapper a img:last-child span::before {

            content: 'kdjkd';

            position: absolute;

            height: 100px;

            background: #fff;

            z-index: 99;

        }*/



        .left-section .login-left ul {

            display: flex;

            margin-top: 2rem;

            padding-left: 0;

        }

        .left-section .login-left ul li {

        display: block;

        width: 54px;

        text-align: center;

        margin-left: 21%;

        }

        .left-section .login-left ul li:first-child {

        display: block;

        width: 54px;

        text-align: center;

        margin-left: 0;

        }

        .left-section .login-left ul li img {

        width: 54px;

        }

        .left-section .login-left ul li span {

        display: block;

        color: #fff;

        font-size: .7rem;

        text-align: left;

        }

        /*-------------right--------------*/

        .login-section {

        display: flex;

        justify-content: center;

        align-items: center;

        height: 100vh;

        }



        .login-section .h4, .login-section h4 {

        font-size: 1.9rem;

        font-weight: 600;

        }

        .login-box {

        background: white;

        padding: 40px;

        

        }

        .login-box form {

        margin-top: 3rem;

        }

        .login-box img.logo  {

        width: 250px;

        }



        .login-box .form-label, .login-box .form-check-label  {

        margin-bottom: .5rem;

        color: #555;

        font-weight: 400;

        font-size: .97rem;

        }

        .login-box .input-group-text {

        padding: 1rem;

        font-size: 1rem;

        font-weight: 400;

        line-height: 1.5;

        color: var(--bs-body-color);

        text-align: center;

        white-space: nowrap;

        background-color: #848f9b;

        border: #848f9b;

        border-radius: 7px;

        }

        .login-box .form-control{

            background: #fbfbfb;

        }

        .login-box .form-control::placeholder {

        color: #000;

        opacity: .4;

        }

        .form-control:focus, .form-check-input:focus {

        color: var(--bs-body-color);

        background-color: var(--bs-body-bg);

        border-color: #ff8800;

        outline: 0;

        box-shadow:none;

        }

        .login-box .form-check-input {

        border: 2px solid #9292A9;

        height: 17px;

        width: 17px;

        margin-top: 0.1em;

        margin-right:.5rem ;

        }

        .login-box .form-check-input:checked {

        background-color: #f80;

        border-color: #f80;

        }

        .login-box .text-muted {

            color: #000 !important;

        }



        .login-box a.text-black  {

            text-decoration: none;

            color: #323232;

            font-weight: 400;

            font-size: .8rem;

        }



        .login-box .form-check-label  {

        margin-bottom: .5rem;

        color: #9292A9;

        font-weight: 400;

        font-size: .8rem;

        }



        .login-box .btn-primary:hover {

            box-shadow: 0 8px 20px rgba(253, 116, 1, 0.3);

            transition: background-color 0.3s ease, box-shadow 0.3s ease;

        }

        .login-box .btn-primary {

        background: #ff8800;

        color: #ffffff;

        border-color: #ff8800;

        font-size: .98rem;

        padding: 1rem;

        }

         .login-box p{

            font-size: .8rem;

            text-align: center;



         }

         .login-box p a{

            color: #000;

         }



@media(max-width:1366px){

        .left-section {

        padding: 4rem 6rem 0 4rem;

        height: 100vh;

    }

    .login-section .h4, .login-section h4 {

        font-size: 1.7rem;

        

    }

        .left-section .header-logo-wrapper .logo-wrapper a img {

        max-height: 55px;

    }

    .left-section .header-logo-wrapper .logo-wrapper a img:last-child {

        max-height: 42px;

        top: 7px;

        width: auto;

    }

    .left-section .login-left h2 {

        font-size: 1.7rem;

    }

    .left-section .login-left ul li {

        margin-left: 17%;

    }

    .login-section {

        height: 100vh;

    }



}



/*@media(max-width:1024px) {

        .left-section {

        padding: 4rem 6rem 0 4rem;

        height: 100vh;

    }

        .left-section .header-logo-wrapper .logo-wrapper a img {

        max-height: 55px;

    }

    .left-section .header-logo-wrapper .logo-wrapper a img:last-child {

        max-height: 42px;

        top: 7px;

        width: auto;

    }

    .left-section .login-left h2 {

        font-size: 1.7rem;

    }

    .left-section .login-left ul li {

        margin-left: 17%;

    }

    .login-section {

        height: 100vh;

    }



}*/



@media(max-width:992px) {

        .left-section {

        padding: 4rem 6rem 0 4rem;

        height: 100vh;

    }

        .left-section .header-logo-wrapper .logo-wrapper a img {

        max-height: 55px;

    }

    .left-section .header-logo-wrapper .logo-wrapper a img:last-child {

        max-height: 42px;

        top: 7px;

        width: auto;

    }

    .left-section .login-left h2 {

        font-size: 1.7rem;

    }

    .left-section .login-left ul li {

        margin-left: 17%;

    }

    .login-section {

        height: 100vh;

    }



}



@media(max-width:576px){



  .left-section {

    padding: 3rem 2rem 0 2rem;

    height: 100vh;

  }

  .left-section .header-logo-wrapper .logo-wrapper a img {

    max-height: 40px;

    }



    .left-section .header-logo-wrapper .logo-wrapper a img:last-child {

        max-height: 25px;

        top: 7px;

    }

    .login-section {

        height: 82vh!important;

    }

        .left-section .login-left ul li {

        margin-left: 10%;

    }

}



@media(min-width:768px) and (max-width:992px) {

    .login-box {

        padding: 0 0 0 30px;

    }

    .left-section.col-md-7 {

        width: 53.333%;

    }

    .left-section.col-md-5 {

        width: 46.667%;

    }

    .left-section {

        padding: 4rem 3rem 0 2.5rem;

        

    }

    .left-section .header-logo-wrapper .logo-wrapper a img {

        max-height: 38px;

    }

    .left-section .header-logo-wrapper .logo-wrapper a img:last-child {

        max-height: 30px;

        top: 5px;

        

    }

    .left-section .login-left ul li {

        width: 60px;

        margin-left: 10%;

    }

    .left-section .login-left h2 {

        font-size: 1.7rem;

    }



    }

    .login-section {

        height: 100vh;

    }