@media only screen and (max-width: 767px) {
                    body {
                        margin: calc(var(--header-height) + 1rem) 0 0 0;
                        padding-left: calc(var(--nav-width) + 2rem)
                    }
                    .header {
                        height: calc(var(--header-height) + 1rem);
                        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
                    }
                    .header_img {
                        width: 40px;
                        height: 40px
                    }
                    .header_img img {
                        width: 45px
                    }
                    .l-navbar {
                        left: 0;
                        padding: 1rem 1rem 0 0
                    }
                    .show {
                        width: calc(var(--nav-width) + 156px)
                    }
                    .body-pd {
                        padding-left: calc(var(--nav-width) + 188px)
                    }
                    .convert-text-block {
                        display: block;
                        margin-left: 0px;
                        width: 250px;
                    }
                    .convert-btn {
                        width: 125.61px;
                        height: 43px;
                    }
                    .convert-image-text {
                        font-size: 22px;
                    }
                    .dropzone-wrapper {
                        height: 360.73px;
                    }
                    .e-book {
                        display: grid;
                        justify-content: center;
                    }
                    .browse-btn{
                        width: 128px;
                        height: auto;
                    }
                }
                
                @media only screen and (min-width: 768px) and (max-width: 991px) {
                    .convert-text-block {
                        display: block;
                        margin-left: 24%;
                        width: 350px;
                    }
                    .convert-btn {
                        width: 125.61px;
                        height: 43px;
                    }
                    .convert-image-text {
                        font-size: 22px;
                    }
                    .nav-buttons {
                        margin-left: 20% !important;
                    }
                    .nav-buttons2 {
                        margin-right: 80px !important;
                    }
                    .dropzone-wrapper {
                        height: 343.73px;
                    }
                    .e-book {
                        display: grid;
                        justify-content: center;
                    }

                    .profile-div {
                        /* margin-left: 80px !important; */
                        width: 50% !important;
                    }
                    .login-div {
                        width: 90% !important;
                    }
                    .signup-div {
                        width: 90% !important;
                    }
                    
                }
                
                @media only screen and (min-width: 992px) and (max-width: 1199px) {
                    .convert-text-block {
                        display: block;
                        margin-left: 30%;
                        width: 350px;
                    }
                    .convert-btn {
                        width: 125.61px;
                        height: 43px;
                    }
                    .convert-image-text {
                        font-size: 22px;
                    }
                    .nav-buttons {
                        margin-left: 28% !important;
                    }
                    .nav-buttons2 {
                        margin-right: 76px;
                    }
                    .add-image-div {
                        width: 526.37px
                    }
                }
                
                @media only screen and (min-width: 1200px) and (max-width: 1399px) {
                    .convert-btn {
                        width: 151.61px;
                        height: 52px;
                    }
                    .convert-text-block {
                        width: 1034.19px;
                        margin-left: 40px;
                        padding-top: 50px;
                        display: flex;
                        justify-content: space-between;
                    }
                }
                
                @media only screen and (min-width: 1400px) and (max-width: 5000px) {
                    .convert-text-block {
                        width: 1034.19px;
                        margin-left: 135px;
                        padding-top: 50px;
                        display: flex;
                        justify-content: space-between;
                    }
                }