body{
            height:100vh;
            max-height:100vh;
        }

        .body-div{
            width: 100%;
            height: 100vh;
        }

        .logo{
            position:absolute;
            top:5px;
            left:10px;
            width:200px;
        }

        #login-first{
            position:absolute;
            bottom:40px;
            left:5px;
            transition: box-shadow .15s,transform .15s;
            cursor:pointer;
        }

        #login-first:hover{
            transform: translateY(-5px);
        }

        #login-first img{
            width: 400px;
        }

        .left-side{
            position:relative;
            background: url("/add/img/girshopping.png");
            background-size: cover;
            width: 40%;
            height: 100vh;
            text-align: center;
        }

        .right-side{
            position:relative;
        }

        #login-second{
            display:none;
        }

        .rest-side{
            width: 30%;
            height: 100vh;
            background-color: orange;
        }

        .area-setup{
            box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
            transition: box-shadow .15s,transform .15s;
            height: 33vh;
            width: 100%;
            cursor:pointer;
            text-align:center;
            padding: 20px 20px;
        }

        .area_img{
            transition: box-shadow .15s,transform .15s;
        }

        .area-setup h5{
            text-shadow: 0 0 30px #fff;
        }

        .area-setup:hover{
            transform: translateY(-2px);
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        }

        .area_img:hover{
            transform: translateY(-2px);
        }

        .area-setup-end{
            box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
            transition: box-shadow .15s,transform .15s;
            height: 34vh;
            width: 100%;
            cursor:pointer;
            text-align:center;
            padding: 20px 20px;
        }

        /* .area-setup img{
            height: 25vh;
        } */

        .img_text{
            height: 25vh;
        }

        /* .area-setup-end img{
            height: 25vh;
        } */

        .area-setup-end:hover{
            transform: translateY(-2px);
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        }

        .square-top-left{
            background: #00C4CC;
        }

        .square-top-right{
            background: #FF738E;
        }

        .square-midle-left{
            background: #A548FF;
        }

        .square-midle-right{
            background: #FFA53B;
        }

        .square-bottom-left{
            background: #6422B8;
        }

        .square-bottom-right{
            background: #FFD93B;
        }

        .footer{
            position:fixed;
            bottom:0px;
            left:0px;
            height:30px;
            width:100%;
            z-index:10;
            color:white;
            font-size:12px;
        }

        @media screen and (max-width: 580px) {

            .logo{
                top:5px;
                left:5px;
                width: 170px;
            }

            #login-first{
                display: none;
            }

            #login-second{
                display:block;
                position:absolute;
                top:5px;
                right:5px;
            }

            #login-second img{
                width: 250px;
            }

            .left-side{
                background: url("/add/img/girlformobile.png");
                background-size: cover;
            }

            .area-setup{
                padding: 80px 5px;
            }

            .area-setup-end{
                padding: 80px 5px;
            }

            .area-setup{
                padding: 80px 5px;
            }

            .square-top-left{
                padding: 120px 5px;
            }

            .square-top-right{
                padding: 120px 5px;
            }

            /* .area-setup img{
                width: 120px;
                height: 15vh;
            } */

            .img_text{
                width: 120px;
                height: 15vh;
            }

            /* .area-setup-end img{
                width: 120px;
                height: 15vh;
            } */

            .footer{
                height:35px;
                color:white;
                font-size:20px;
            }

        }