/* Hero Area */


.heroarealogin {
    display: flex;
    justify-content: center;
    margin: 100px 0;
}

.mainfromlogin {
    padding: 77px 52px 23px 52px;
    background-color: #252B31;
    border-radius: 35px;
    -webkit-box-shadow: 1px 1px 30px 30px #171D23;
    box-shadow: 1px 1px 30px 30px #171D23;
    width: 601px;
    /* z-index: -10; */
}

.mainfromlogin h1 {
    font-size: 40px;
    font-weight: 700;
    color: white;
}

.mainfromlogin input {
    border: none;
    border-bottom: 1px solid #fff;
    background-color: transparent;
    width: 100%;
    font-weight: 400;
    padding: 0 0 5px 40px;
    font-size: 25px;
    color: white;
    font-family: "Nunito", sans-serif;
    outline: none;
}

::placeholder {
    color: white;
}

:-ms-input-placeholder {
    color: white;
}

::-ms-input-placeholder {
    color: white;
}

.names {
    position: relative;
    margin-top: 70px;
    margin-bottom: 64.5px;
}
.names2 {
    position: relative;
    margin-top: 70px;
    margin-bottom: 55.5px;
}
.names2 img {
    position: absolute;
    left: 0;
    margin-top: 2px;
}
.names img {
    position: absolute;
    left: 0;
    margin-top: 5px;
}

input[type="password"] {
    padding-right: 40px;
}

.passwords {
    position: relative;
    margin-top: 30px;
}

.pass1 {
    position: absolute;
    left: 0;
    margin-top: 3px;
}

.pass2 {
    position: absolute;
    right: 0;
    margin-top: 3px;
}

.mainfromlogin button {
    width: 100%;
    padding: 23.5px 0;
    background-color: #4d3478;
    color: white;
    text-transform: uppercase;
    font-size: 25px;
    font-family: "Nunito", sans-serif;
    border: none;
    font-weight: 700;
    border-radius: 10px;
    margin-top: 80px;
    margin-bottom: 24.5px;
    /* -webkit-box-shadow: 1px 1px 30px 2px #F68913;
box-shadow: 1px 1px 30px 2px #F68913; */
}

.forget {
    color: #F68913;
    font-size: 25px;
    text-decoration: none;
    float: right;
    font-weight: 400;
}

p.count {
    color: #F68913;
    font-size: 30px;
    text-align: center;
    margin-bottom: 24px;
    font-weight: 400;
}

.creatacnt {
    text-align: center;
    font-size: 25px;
    margin-bottom: 50px;
}

.creatacnt a {
    text-decoration: none;
    color: #F68913;
    font-weight: 400;
}


/* Responsive */

@media (max-width:1700px){

    /* navres:1700 */

    .nav2side {
        padding-left: 48px;
        padding-right: 48px;
    }

    /* navres:1700----end */

}

@media (max-width:1500px){

    /* navres:1500 */

    .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
        flex-wrap: nowrap;
    }

    .nav_icon {
        margin-left: 27px;
    }

    /* navres:1500-----end */
}

@media (max-width:1400px){

        /* navres:1400 */

        section.top_navbar {
            height: 72px;
        }
    
        .search_div {
            margin: 0;
        }
    
        .nav-link {
            font-size: 15px;
        }

        .search_div input {
            max-width: 260px;
            padding: 8px 17px;
            font-size: 16px;
        }

        .search_div img {
            top: 12px;
        }

        .custom_btn1 {
            font-size: 16px;
            padding: 8px 46px;
        }

        .custom_btn2 {
            font-size: 16px;
            padding: 8px 46px;
        }

        ul.dropdown-menu.pcsearchauto.show {
            width: 175%;
            background: #292E34;
            margin-top: 5px;
        }

        /* navres:1400-----end */
    
}


@media (max-width:1300px){

    /* navres:1300 */
        /* Navbar */

        .navbar-expand-lg .navbar-collapse {
            align-items: center;
            justify-content: space-between;
        }

        .mx-auto {
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .search_div input {
            width: 210px;
        }
    
    
        .nav-item {
            margin: 0 2px;
        }
    
        .logo_div {
            width: 150px;
        }
    
        .logo_div img {
            width: 100%;
        }

        .nav-link {
            font-size: 15px;
        }

        .search_div input {
            padding: 8px 12px;
            font-size: 16px;
        }

        .search_div img {
            position: absolute;
            right: 72px;
            top: 10px;
            width: 24px;
        }

        .custom_btn1 {
            font-size: 16px;
            padding: 5px 30px;
            margin: 7px 15px;
        }

        .custom_btn2 {
            font-size: 16px;
            padding: 5px 30px;
            margin: 7px 15px;
        }

    /* navres:1300----end */
    
}



@media (max-width:991px){

    /* navres:991 */

    .mobnavmain {
        display: block;
        height: 54px;
    }
    
    nav.navbar.navbar-expand-lg.navbar-dark.mobnavfiexd {
        position: fixed;
        width: 100%;
        z-index: 10;
        background-color: #171D23;
    }

    .top_navbar{
        display: none;
    }

    .navbar {
        font-family: "Nunito", sans-serif;
        height: auto;
        background: none;
        border-bottom: none;
        z-index: 0;
    }

    .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
        flex-wrap: inherit;
    }

    /* Navbar */
    .active_page::after {
        display: none;
    }
    
    .my_btns {
        float: right;
    }

    /* navres:991----end */
}


@media (max-width:768px){
    .navprodiv button {
        width: 280px;
        display: block;
        margin: 0 auto;
        border: none;
        border-radius: 10px;
        background-color: #F68913;
        font-size: 22px;
        font-family: 'Nunito', sans-serif;
        color: white;
        padding: 5px 0;
    }

    .mobdrama button {
        width: 280px;
        display: block;
        margin: 0 auto;
        border: 1px solid #F68913;
        border-radius: 10px;
        background-color: transparent;
        font-size: 22px;
        font-family: 'Nunito', sans-serif;
        opacity: 0.8;
        color: white;
        padding: 5px 0;
    }

}



@media (max-width:576px){

        /* navres:576 */

        .offcanvas-start {
            top: 0;
            left: 0;
            width: 240px;
            border-right: 1px solid rgba(0, 0, 0, .2);
            transform: translateX(-100%);
        }
    
        /* navres:576----end */


    .navprodiv button {
        width: 200px;
        display: block;
        margin: 0 auto;
        border: none;
        border-radius: 10px;
        background-color: #F68913;
        font-size: 22px;
        font-family: 'Nunito', sans-serif;
        color: white;
        padding: 5px 0;
    }


    .mobdrama button {
        width: 200px;
        display: block;
        margin: 0 auto;
        border: 1px solid #F68913;
        border-radius: 10px;
        background-color: transparent;
        font-size: 22px;
        font-family: 'Nunito', sans-serif;
        opacity: 0.8;
        color: white;
        padding: 5px 0;
    }


    .mainfromlogin {
        padding: 30px 30px;
        background-color: #252B31;
        border-radius: 35px;
        -webkit-box-shadow: 1px 1px 30px 30px #171D23;
        box-shadow: 1px 1px 30px 30px #171D23;
        width: 98%;
    }

    .mainfromlogin h1 {
        font-size: 26px;
        color: white;
    }

    input {
        border: none;
        border-bottom: 1px solid #fff;
        background-color: transparent;
        width: 100%;
        padding: 0 0 5px 35px;
        font-size: 16px;
        color: white;
        font-family: "Nunito", sans-serif;
        outline: none;
    }

    .names img {
        position: absolute;
        left: 0;
        margin-top: 0;
    }

    .pass1 {
        position: absolute;
        left: 0;
        margin-top: 0;
        bottom: 7px;
        padding-bottom: 0;
    }

    .pass2 {
        position: absolute;
        right: 0;
        margin-top: 0px;
    }

    .mainfromlogin button {
        width: 100%;
        padding: 8px 0;
        background-color: #4d3478;
        color: white;
        text-transform: uppercase;
        font-size: 20px;
        font-family: "Nunito", sans-serif;
        border: none;
        border-radius: 10px;
        margin-top: 50px;
        margin-bottom: 30px;
    }

    p.count {
        color: white;
        font-size: 20px;
        text-align: center;
        margin: 1px;
    }

    .creatacnt {
        text-align: center;
        font-size: 18px;
        margin-bottom: 50px;
    }

    .creatacnt {
        text-align: center;
        font-size: 18px;
        margin-bottom: 30px;
    }

    .forget {
        color: #F68913;
        font-size: 18px;
        text-decoration: none;
        float: right;
    }

    .mainfromlogin input {
        font-size: 20px;
    }

}