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

        .logo {
            height: 100%;
        }

        .logo img {
            width: 209px;
            z-index: 1;
            position: absolute;
        }

        #login-first {
            position: absolute;
            top: 0;
            right: 5px;
        }

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

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

        .right-side {
            position: relative;
        }

        #login-second {
            display: none;
        }

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

        .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: 50%;
            cursor: pointer;
            text-align: center;
            padding: 20px 20px;
        }

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

        .area-setup h3 {
            text-shadow: 0 0 30px #fff;
            color: white;
        }

        .area-setup-buttons: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;
            color: white;
        }

        .area-setup-buttons {
            background-color: rgb(7, 172, 248);
            color: white;
        }

        .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);
        }

        .square-top-left {
            background: linear-gradient(135deg,
                    #F06819 0%,
                    #FF8C42 50%,
                    #FFA53B 100%);
            background-size: cover;


        }

        .square-top-left h2 {
           
            font-weight: bold;
        }

        .square-top-left::before {
            background-image: url('/add/img/sels-3.png');
            background-position: right;
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
        }

        .square-top-right {
            background: linear-gradient(135deg,
                    #038DF0 0%,
                    #36A3FF 50%,
                    #6EC1FF 100%);
            color: white;
            background-size: cover;
        }

        .square-top-right::before {
            background-image: url("/add/img/saleswhp-2.png");
            background-position: right;
            background-size: 250px !important;
        }

        .square-top-right h2 {
            font-weight: bold;
        }

        .square-midle-left {
            background: linear-gradient(135deg,
                    #5B2EFF 0%,
                    #7B3BFF 50%,
                    #A548FF 100%);
            background-size: cover;
        }

        .square-midle-left::before {
            background-image: url('/add/img/cb-2.png');
            background-position-x: right;
            background-position-y: 10px;
            background-size: 230px !important;
        }

        .square-midle-left h2 {
            font-weight: bold;
        }

        .square-midle-right {
            background: linear-gradient(135deg,
                    #F06819 0%,
                    #FF4E50 100%);
            background-size: cover;
        }

        .square-midle-right::before {
            background-image: url('/add/img/fast-2.png');
            background-position-y: bottom !important;
        }

        .square-midle-right h2 {
            font-weight: bold;
        }

        .square-bottom-left {
            background: linear-gradient(135deg,
                    #4E2DBA 0%,
                    #7A4DFF 50%,
                    #B892FF 100%);
            background-size: cover;
        }

        .square-bottom-left::before {
            background-image: url("/add/img/des-2.png");
            background-position-y: 50px;
        }

        .square-bottom-left h2 {
            font-weight: bold;
        }

        .square-bottom-right {
            background: linear-gradient(135deg,
                    #038DF0 0%,
                    #36A3FF 50%,
                    #6EC1FF 100%);
            background-size: cover;
        }

        .square-bottom-right::before {
            background-image: url("/add/img/intu-2.png");
            background-position: bottom;
        }

        .square-bottom-right h2 {
            font-weight: bold;
        }

        .square-bottom-right-more {
            background: linear-gradient(135deg,
                    #F06819 0%,
                    #FF4E50 100%);
            background-size: cover;
        }

        .square-bottom-right-more::before {
            background-image: url("/add/img/ub-2.png");
            background-position-x: center;
            background-position-y: 17px !important;
        }

        .square-bottom-right-more h2 {
            font-weight: bold;
        }

        .square-bottom-right-plus {
            background: linear-gradient(135deg,
                    #038DF0 0%,
                    #36A3FF 50%,
                    #6EC1FF 100%);
            background-size: cover;
        }

        .square-bottom-right-plus::before {
            background-image: url("/add/img/free-2.png");
            background-size: 250px !important;
            background-position-x: right !important;
            background-position-y: bottom;

        }

        .square-bottom-right-plus h2 {
            font-weight: bold;

        }

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

        #head_transparent_for_app {
            position: absolute;
            display: none;
        }

        .area-setup-app {
            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;
        }

        .area-setup-app:hover {
            transform: translateY(5px);
            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;
            color: white;
        }

        @media screen and (max-width: 580px) {
            .area-setup h3 {
                font-size: 16px;
            }

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

            #head_transparent_for_app {
                top: 0;
                left: 0;
                width: 100%;
                z-index: 100000;
                display: block;
                text-align: right;
            }

            #login-first {
                top: 350px;
                right: 5px;
            }

            #login-first button {
                top: 350px;
                right: 5px;
                background-color: blue;
            }

            #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;
            }

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

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

        }

        /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


        #footer {
            background: linear-gradient(135deg,
                    #1e0a3c 0%,
                    #140828 50%,
                    #0b0618 100%);
            padding: 0 0 30px 0;
            color: #ccc;
            font-size: 14px;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        }

        #footer .footer-top {
            background: linear-gradient(135deg,
                    #9333ea 0%,
                    #7e22ce 40%,
                    #6d28d9 70%,
                    #3b0764 100%);
            border-bottom: 1px solid #ffffff;
            padding: 60px 0 30px 0;
            position: relative;
        }



        #footer .footer-top .footer-info {
            margin-bottom: 30px;
        }

        #footer .footer-top .footer-info h3 {
            font-size: 28px;
            margin: 0 0 20px 0;
            padding: 2px 0 2px 0;
            line-height: 1;
            font-weight: 700;
            text-transform: uppercase;
        }

        #footer .footer-top .footer-info h3 span {
            color: #fdfdfd;
        }

        #footer .footer-top .footer-info p {
            font-size: 14px;
            line-height: 24px;
            margin-bottom: 0;
            font-family: "Raleway", sans-serif;
            color: rgb(255, 255, 255);
        }

        #footer .footer-top .social-links a {
            font-size: 18px;
            display: inline-block;
            background: #ff7045;
            color: rgb(255, 255, 255);
            line-height: 1;
            padding: 8px 0;
            margin-right: 4px;
            border-radius: 4px;
            text-align: center;
            width: 36px;
            height: 36px;
            transition: 0.3s;
        }

        #footer .footer-top .social-links a:hover {
            background: #ff74e8;
            color: #ffffff;
            text-decoration: none;
        }

        #footer .footer-top h4 {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            position: relative;
            padding-bottom: 12px;
        }

        #footer .footer-top .footer-links {
            margin-bottom: 30px;
        }

        #footer .footer-top .footer-links ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #footer .footer-top .footer-links ul i {
            padding-right: 2px;
            color: #ffffff;
            font-size: 18px;
            line-height: 1;
        }

        #footer .footer-top .footer-links ul li {
            color: rgb(255, 255, 255);
            height: 40px;
        }

        #footer .footer-top .footer-links ul li:hover {
            color: rgb(255, 255, 255);
        }

        #footer .footer-top .footer-links ul li:first-child {
            padding-top: 0;
        }

        #footer .footer-top .footer-links ul a {
            color: rgb(255, 255, 255);
            transition: 0.3s;
            display: inline-block;
            line-height: 1;
        }

        #footer .footer-top .footer-links ul a:hover {
            color: rgb(255, 255, 255);
            border-radius: 5px;
        }

        #footer .footer-top .footer-newsletter form {
            margin-top: 30px;
            background: white;
            padding: 6px 10px;
            position: relative;
            border-radius: 4px;
        }

        #footer .footer-top .footer-newsletter form input[type=email] {
            border: 0;
            padding: 4px;
            width: calc(100% - 110px);
        }

        #footer .footer-top .footer-newsletter form input[type=submit] {
            position: absolute;
            top: 0;
            right: -2px;
            bottom: 0;
            border: 0;
            background: none;
            font-size: 16px;
            padding: 0 20px;
            background: #ff74e8;
            color: #ffffff;
            transition: 0.3s;
            border-radius: 0 4px 4px 0;
        }

        #footer .footer-top .footer-newsletter form input[type=submit]:hover {
            background: #f5e3f2;
        }

        #footer .copyright {
            text-align: center;
            padding-top: 30px;
        }

        #footer .credits {
            padding-top: 10px;
            text-align: center;
            font-size: 13px;
            color: #fff;
        }

        @media (max-width: 550px) {
            #header .logo img {
                width: 120px;
                 top: 19px;
            }



            .btn-login {
                font-size: 14px;
                padding: 5px 15px;
                display: flex;
                align-items: center;
            }
            .btn-register {
                font-size: 14px;
                padding: 5px 15px;
                display: flex;
                align-items: center;
            }
        }