:root {
    --yellow: #ffc700;
    --orange: #ff9100;
    --red: #ff0000;
    --text-color: #656577;
    --gray: #f0f0f0;
    --dark-gray: var(--text-color);
    --dark: #313249;
    --color-d3d3d3: #EBEBEB;
    --color-434459: #434459;
    --font-size-large: 22px;
    --font-size-medium: 20px;
    --font-size-default: 18px;
    --font-size-small: 16px;
    --font-size-x-small: 14px;
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 26px;
    --border-radius-defualt: 10px
}

* {
    outline: unset;
    margin: unset;
    padding: unset;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    font-size: var(--font-size-default);
    text-decoration: none;
    color: inherit
}

body {
    scroll-behavior: smooth
}

button,
a,
label {
    cursor: pointer
}

.section {
    padding: 50px 0
}

.font-bold {
    font-weight: 700
}

.main a {
    text-decoration: underline;
    color: var(--yellow)
}

.main a:hover {
    color: var(--orange)
}

ol {
    list-style: inside !important;
    list-style-type: auto !important;
    margin-left: 30px !important
}

.d-none {
    display: none !important
}

.d-flex {
    display: flex
}

.p-relative {
    position: relative
}

.prem-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem
}

.prem_feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffb50f;
    text-wrap: nowrap
}

.p-absolute {
    position: absolute
}

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

.my-0 {
    margin-top: unset !important;
    margin-bottom: unset !important
}

.mx-1rem {
    margin: 0 1rem
}

.m-0 {
    margin: unset
}

.m-auto {
    margin: 0 auto
}

.mt-1em {
    margin-top: 1em
}

.mb-2rem {
    margin-bottom: 2rem
}

.pb-2rem {
    padding-bottom: 2rem
}

.px-0 {
    padding-left: unset;
    padding-right: unset
}

.py-0 {
    padding-top: unset;
    padding-bottom: unset
}

.p-0 {
    padding: unset
}

.pt-0 {
    padding-top: unset
}

.py-10px {
    padding: 10px 0
}

.mb-1em {
    margin-bottom: 1em
}

.py-1em {
    padding: 1em 0
}

.px-2rem {
    padding: 0 1rem
}

.gap-2rem {
    gap: 2rem
}

.gap-1rem {
    gap: 1rem
}

.text-center {
    text-align: center
}

.justify-content-center {
    justify-content: center
}

.align-items-center {
    align-items: center
}

.justify-space-between {
    justify-content: space-between
}

.flex-column {
    flex-direction: column
}

.row-gap-2rem {
    row-gap: 2rem
}

.shadow {
    box-shadow: 5px 12px 25px var(--yellow)7a
}

.container {
    max-width: 1280px;
    width: 90%;
    padding: 0 10px;
    margin: 0 auto;
    overflow: visible
}

.container__space {
    margin-top: 80px !important
}

.btn {
    cursor: pointer;
    outline: unset;
    border: unset
}

.img-fluid {
    max-width: 100%;
    width: 100%
}

.column-gap-2rem {
    column-gap: 2rem
}

.mw-600 {
    max-width: 600px
}

.mw-600 * {
    max-width: 600px;
    margin: 0 auto
}

.cursor-pointer {
    cursor: pointer
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem;
    width: 1300px;
    max-width: 99%;
    margin: 0 auto;
    position: relative
}

.navbar .logo {
    display: flex;
    align-items: center;
    column-gap: .2rem
}

.ul-style-none {
    list-style: none
}

.nav-links ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center
}

.nav-links ul * {
    font-size: 20px;
    color: #000
}

.mobile-menu-trigger {
    height: 30px;
    width: 30px;
    transform: rotate(90deg);
    position: absolute;
    right: 30px;
    /* top: 26px; */
    display: none;
    cursor: pointer
}

.mobile-menu {
    background: #F9F9F9;
    padding: 7px;
    gap: 2px;
    border-radius: 4px;
    border: 1px solid #E8E8E8;
    display: flex;

}

.navbar.mobile,
.mobile-nav-dropdown {
    display: none;
}

.mobile-menu-trigger>span {
    border: 2px solid var(--yellow) !important;
    margin: 3px;
    background-color: var(--yellow) !important
}

.menu-close-btn {
    position: absolute;
    top: 26px;
    height: 20px;
    width: 20px;
}

.topnav .icon {
    display: none
}

header {
    padding: 20px 0 10px 0
}

.logo {
    font-size: var(--font-size-large);
    column-gap: .725rem
}

.logo .logo-small {
    display: none
}

.nav-list {
    display: flex;
    list-style: none;
    column-gap: 2rem;
    align-items: center
}

.nav-list a {
    text-decoration: none;
    color: inherit
}

.header-right-nav {
    display: flex;
    column-gap: 12px;
    align-items: center;
    position: relative;
}

.header-right-nav>a {
    padding: 5px 10px;
    border-radius: 8px;
}

.header-right-nav>a:hover {

    background-color: #f6f6f6;
}

.profile-dropdown-head {
    display: flex;
    align-items: center;
    gap: 5px;
}

.profile-img {
    height: 32px;
    width: 32px;
}

.profile-name {
    font-size: 14px;
    font-weight: 600;
}

.profile-email {
    font-size: 12px;
    font-weight: 400;
}

.header-right-nav a:not(.contact-btn) {
    text-decoration: none;
    color: inherit
}

.contact-btn {
    background-image: linear-gradient(to right, var(--color-434459) 7.81%, var(--dark-gray) 51.56%, var(--color-434459) 88.02%);
    box-shadow: rgb(50 50 93 / .25) 0 30px 60px -12px inset, rgb(0 0 0 / .3) 0 18px 36px -18px inset;
    padding: 8px 10px !important;
    box-shadow: none
}

.premium__btn {
    background-image: linear-gradient(to right, #ffa41c 7.81%, #fec601 51.56%, #ffa61a 88.02%);
    box-shadow: rgb(50 50 93 / .25) 0 30px 60px -12px inset, rgb(0 0 0 / .3) 0 18px 36px -18px inset;
    padding: 8px 10px !important;
    box-shadow: none;
    color: #fff !important;
    border: none;
    outline: none;
    border-radius: 7px;
    font-size: var(--font-size-defaultÆ)
}

.pricing-btn {
    background-image: linear-gradient(to right, #ffa41c 7.81%, #fec601 51.56%, #ffa61a 88.02%);
    box-shadow: rgb(50 50 93 / .25) 0 30px 60px -12px inset, rgb(0 0 0 / .3) 0 18px 36px -18px inset;
    padding: 6px 14px !important;
    box-shadow: none;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* min-width: 130px !important; */
    font-size: 16px;
}

.login_btn {
    border: 1px solid #EAEAEA !important;
    padding: 6px 16px 6px 16px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: black !important;
    font-size: 16px !important;
}

.login_btn:hover {
    color: black !important;
}

.pricing__plans {
    box-shadow: 0px 0px 50px 0px #00000008;
    max-width: 300px !important;
}

.all_in_one_pricing_plan {
    max-width: 402px !important;
}

.all_in_one_pricing_plan_header {
    width: 100% !important;
    text-align: start !important;
}

.all-in-one-header {
    padding: 20px 10px !important;
}

.feature_all_in_one {
    align-items: center;
    gap: 10px
}

.account__btn {
    padding: 6px 12px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    cursor: pointer;
}

.account__btn:hover {
    background: #F5F5F5;
}

.profile-dropdown {
    top: 45px;
    /* left: 200px; */
    padding: 8px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0px 5px 20px 0px #0000000D;
    position: absolute;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 300;
    /* display: none; */
}

.profile-dropdown li>a,
.profile-dropdown li>label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
}

#logout_from {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-dropdown li span {
    font-size: 14px;
}

.profile-dropdown-item,
.mobile-dropdown-item {
    /* padding: 8px; */
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-dropdown-item:hover,
.mobile-dropdown-item:hover {
    background: #F9F9F9F5;
    border-radius: 8px;
}

.profile-items-img {
    height: 20px;
    width: 20px;
}

.active-item {
    background: #F9F9F9F5;
    border-radius: 8px;
}

/* a.login_btn {
    width: 130px !important
} */

.account__btn img,
.pricing-btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(0%) hue-rotate(274deg) brightness(112%) contrast(100%)
}

.account__btn img {
    height: 18px
}

.pricing-btn,
.contact-btn,
.upload-btn label,
.paste-btn label {
    width: 100px;
    text-align: center;
    color: #fff;
    background-color: var(--yellow);
    padding: 5px 10px;
    border-radius: 8px
}

.contact-btn {
    background-color: var(--dark);
    box-shadow: unset;
    text-decoration: none !important
}

.upload-btn,
.paste-btn,
.upload-btn label,
.paste-btn label {
    width: unset;
    border: unset;
    margin: 4px 6px;
    box-shadow: unset;
    background-color: var(--gray);
    color: var(--dark);
    font-size: 16px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
}

/* Common styles */
/* .upload-btn label:before,
.paste-btn label:before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    width: 16px;
    overflow: hidden;
} */

/* Specific background images */
/* .upload-btn label:before {
    background-image: url(/web_assets/frontend/img/upload-icon.svg);
}

.paste-btn label:before {
    background-image: url(/web_assets/frontend/img/paste-text.svg);
} */


.h1,
h1 {
    font-size: var(--font-size-h1);
    margin-bottom: 0rem
}

.h2,
h2 {
    font-size: var(--font-size-h2);
    margin-bottom: 1rem;
    position: relative
}

.h3,
h3 {
    font-size: var(--font-size-h3)
}

h3 {
    margin-bottom: 1rem
}

.h2::before {
    content: "";
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(../img/crown.svg);
    background-size: 50px;
    background-repeat: no-repeat;
    top: -35px;
    left: 48%
}

.text {
    color: #000;
    font-size: var(--font-size-default);
    line-height: 1.5
}

.text-color {
    color: var(--text-color)
}

.tool-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    color: #fff;
    gap: 1rem
}

.tool-header>div {
    min-width: fit-content
}

.choice-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 9px;
    width: 100%;
    align-items: center
}

.choice-row>p {
    display: none
}

.choice-row>div {
    flex-grow: 1;
    padding: 1px !important
}

.choice {
    padding: 6px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-items: center;
    position: relative;
    cursor: pointer;
    background-color: var(--color-434459);
    color: #fff;
    border: solid 1px transparent;
    flex: 1
}

.premium_mode {
    border-left: none;
    border-right: none;
    border-radius: 6px;
    color: #fff;
    background-clip: padding-box;
    border: solid 1px #fff0;
    position: relative;
    overflow: hidden;
    padding: 1px !important;
    transition: 0.3s ease
}

.premium_mode::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: -5px;
    border-radius: inherit;
    transition: 0.3s ease;
    background: linear-gradient(to right bottom, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow))
}

.page-heading {
    margin-top: 50px;
    margin-bottom: 50px
}

.page-heading h1 {
    color: var(--dark);
    font-size: 40px
}

.page-heading p {
    color: var(--text-color);
    font-size: 18px;
    line-height: 28px
}

.download-txt,
.download-pdf,
.download-docx {
    justify-content: space-around;
    display: flex;
    padding: 5px;
    gap: 8px;
    align-items: center;
}

.download-txt p,
.download-pdf p,
.download-docx p {
    margin-top: 3px;
    width: auto;
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.download-txt img,
.download-pdf img,
.download-docx img {
    height: 16px !important;
    width: 16px !important;
}

.download-txt:hover,
.download-pdf:hover,
.download-docx:hover {
    background-color: var(--gray)
}

.premium_mode:hover::before {
    transition: 0.3s ease
}

@keyframes run_border {
    0% {
        background: linear-gradient(0deg, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow));
        transition: 0.3s ease
    }

    20% {
        background: linear-gradient(40deg, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow));
        transition: 0.3s ease
    }

    40% {
        background: linear-gradient(90deg, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow));
        transition: 0.3s ease
    }

    60% {
        background: linear-gradient(120deg, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow));
        transition: 0.3s ease
    }

    80% {
        background: linear-gradient(150deg, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow));
        transition: 0.3s ease
    }

    100% {
        background: linear-gradient(180deg, var(--color-434459), var(--yellow), var(--color-434459), var(--yellow));
        transition: 0.3s ease
    }
}

/* .choice-img {
    height: 22px;
    width: 22px
} */

.choice .circle {
    position: absolute;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    top: 12px;
    right: 10px;
    border: 1px solid var(--color-d3d3d3);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px
}

.choice .circle .inner-circle {
    border: #000;
    width: 7px;
    height: 7px;
    border-radius: 50%
}

.choice.active {
    border: 1px solid var(--orange);
    background-color: #fff;
    color: #000
}

.choice.active .circle .inner-circle {
    background-color: var(--yellow)
}

.choice .inner {
    display: flex;
    align-items: center;
    column-gap: 8px
}

.choice .inner span {
    font-size: 14px
}

.tool {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-defualt);
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
    position: relative;
    margin-top: 20px;
    /* border: 1px solid #c4c4c4 */
}

.tool-bg {
    background-position: 0 10px, 100% 100%;
    background-repeat: no-repeat, no-repeat
}

.tool-section {
    position: relative !important;
    padding-top: 0px !important;
    padding-bottom: 20px !important
}

.bg__left,
.bg__right {
    position: absolute;
    z-index: -1 !important
}

.bg__left img,
.bg__right img {
    max-width: 260px;
    z-index: -1 !important;
    width: 260px;
    height: 260px;
}

.bg__left {
    top: -50px;
    left: 80px;
    z-index: -1 !important
}

.bg__right {
    bottom: -20px;
    right: 90px;
    z-index: -1
}

.bg__right img {
    max-width: 230px
}

.tool .split-screen {
    background-color: var(--dark);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-right-radius: var(--border-radius-defualt);
    border-top-left-radius: var(--border-radius-defualt)
}

.tool .split-screen .split {
    display: flex;
    column-gap: 1.25rem;
    justify-content: space-between;
    align-items: center;
    color: #fff
}

.tool .col .actions {
    border-bottom-left-radius: var(--border-radius-defualt);
    border-bottom-right-radius: var(--border-radius-defualt);
    /* position: relative */
}

.captcha_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 1999;
    display: none;
}

.captcha-container {
    position: absolute;
    top: 100%;
    left: 49%;
    transform: translate(-50%, -50%);
    z-index: 2000;
}

.versions_container {
    display: none;
    flex-direction: row !important;
    justify-content: start !important;
    gap: 10px !important;
    position: absolute;
    align-items: center;
    background: white;
    height: 50px;
    width: 100%;
    padding-bottom: 8px !important;
    padding-left: 10px;
    padding-top: 12px;
}

.versions_container>.version {
    padding: 6px 12px 6px 12px;
    gap: 4px;
    border-radius: 8px;
    opacity: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #C7C7CD;
    background: #F9F9F9;

}

.versions_container>.version.active,
.versions_container>.version:hover {
    border: 1px solid #FFBE3C;
    background: #FFFBE7;
}

/* Captcha styling */
.tool .actions #captcha {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    /* Above everything */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}


.active-screen {
    filter: brightness(0) saturate(100%) invert(82%) sepia(41%) saturate(3059%) hue-rotate(355deg) brightness(102%) contrast(107%)
}

.js-split-flex.active {
    display: flex
}

.js-split-flex.active>div {
    flex: 1
}

.js-split-flex.active .result {
    border-left: 1px solid #ccc
}

.tool :is(.editor, .result, .result-stats) {
    position: relative;
    height: 380px;
    border-bottom: 2px solid var(--color-d3d3d3);
    flex: 1
}

.tool .result {
    display: flex;
    background-color: #fff;
    position: relative;
    border-left: 1px solid var(--color-d3d3d3)
}

.js-result div {
    margin: 0 auto
}

.tool .result .result-word-count {
    position: absolute;
    right: 20px;
    height: unset;
    width: unset;
    overflow: unset;
    scroll-behavior: unset;
    margin: unset;
    padding: unset
}

.tool .result>.js-result {
    word-break: break-word;
    padding: 20px;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 1.5;
    ;
}

.tool .result>div>p {
    margin-bottom: 10px;
    text-align: center
}

.js-result div {
    min-height: 250px
}

.tool .editor textarea {
    padding: 20px;
    width: 100%;
    height: 100%;
    outline: unset;
    border: unset;
    resize: none;
    line-height: 1.5;
}

.tool .editor .drag-n-drop {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center
}

.tool-div {
    position: relative;
    display: flex
}

#captcha {
    display: flex;
    align-items: center;
    justify-content: center
}

.tool .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 20px; */
    background-color: #fff;
    min-height: 66px
}

.action-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.action-btns :is(.js-before-result-btns, .js-after-result-btns) {
    display: flex;
    column-gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.action-btns .js-before-result-btns {
    width: 50%;
    /* flex: 1; */
    justify-content: space-between;
    padding: 12px 16px;
}


.js-result b {
    color: #FF6B1C;
    cursor: pointer;
    font-weight: 400 !important;
}

.action-btns .js-after-result-btns {
    display: none;
    /* flex: 1; */
    width: 50%;
    padding: 12px 16px;
    border-left: solid 1px #EBEBEB;
    /* flex-wrap: wrap; */
}

.line_seperator {
    height: 20px;
    width: 1px;
    background-color: #EBEBEB;
}

.rewrite-btn {
    background-color: var(--yellow);
    border: unset;
    color: #fff;
    border-radius: var(--border-radius-defualt);
    position: relative;
    /* margin-right: -20px */
}

.action-btns .js-after-result-btns span {
    /* padding: 5px 7px; */
    /* background-color: var(--gray); */
    border-radius: var(--border-radius-defualt);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.js-after-result-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-btns .js-after-result-btns span img {
    width: 25px;
    height: 25px
}

.action-btns .js-after-result-btns span:hover {
    /* background-color: var(--dark) */
}

.word-count {
    font-size: var(--font-size-large);
    font-weight: 700
}

.word-count-circle {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--yellow) !important;
}

.word-count-type :nth-child(2) {
    background: transparent !important;
}

.editor-word-count {
    position: absolute;
    right: 20px
}

.word-count {
    left: 0;
    justify-content: left !important;
    bottom: 0;
    padding: 0px !important;
    background-color: #fff !important;
}

.word-count-type {
    background-color: transparent !important;
}

.advantages-row {
    display: flex;
    justify-content: space-between;
    column-gap: 2rem;
    margin-top: 2rem
}

.advantages-row .card {
    text-align: center
}

.card .card-img {
    margin-bottom: 2rem
}

.adv-img-box {
    box-shadow: 0 10px 35px var(--yellow)a3;
    background-color: var(--yellow);
    padding: .725rem;
    display: flex;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: var(--border-radius-defualt);
    align-items: center
}

.adv-img-box img {
    height: 40px;
    width: 40px
}

.card .card-title {
    font-size: var(--font-size-h3);
    font-weight: 700;
    margin-bottom: .725rem
}

.card .card-desc {
    line-height: 1.5
}

.features-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 2rem
}

.features-row .feature-card {
    display: flex
}

.features-row .feature-card .img-box {
    flex: 1
}

.features-row .feature-card .img-box img {
    max-width: 150px
}

.features-row .feature-card .body {
    flex: 3
}

.features-row .feature-card .title {
    font-size: var(--font-size-large);
    margin-bottom: 10px
}

.demo {
    padding: 20px;
    border-radius: var(--border-radius-defualt);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15);
    flex: 1;
    position: relative;
    background-color: #fff
}

.demo::before {
    content: "";
    position: absolute;
    height: 300px;
    width: 300px;
    background-image: url(../img/globe.png);
    background-position: top left;
    background-repeat: no-repeat;
    left: 150px;
    top: -90px;
    z-index: -2
}

.demo * {
    font-size: var(--font-size-large);
    line-height: 1.5;
    background-color: #fff
}

span.orange {
    color: var(--orange)
}

span.red {
    color: var(--red)
}

span.yellow {
    color: var(--yellow)
}

.how-it-works .faqs {
    flex: 1;
    border-right: 2px solid var(--color-d3d3d3);
    max-width: 90%
}

.faqs {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    gap: 2rem
}

.faqs .faq {
    display: flex;
    flex-direction: column;
    position: relative
}

.faqs .faq .ques,
.faqs .faq .ques span {
    font-size: var(--font-size-h3) !important;
    cursor: pointer;
    margin-bottom: unset
}

.faqs .faq .ans {
    color: var(--text-color);
    font-size: var(--font-size-default);
    margin-top: 10px;
    max-width: 90%
}

.faqs .faq::before {
    position: absolute;
    content: "";
    height: 100px;
    width: 100px;
    background-image: url(../img/faq_close.svg);
    background-size: 110px 110px;
    background-repeat: no-repeat;
    top: -25px;
    right: -56px;
    transition: all ease 0.4s
}

.faqs .faq.active::before {
    rotate: 45deg;
    filter: brightness(0) saturate(100%) invert(60%) sepia(78%) saturate(2922%) hue-rotate(2deg) brightness(105%) contrast(104%);
    translate: -17px -5px;
    height: 80px;
    width: 80px
}

.blogs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

.blog-card {
    cursor: pointer;
    border-radius: 16px !important;
    box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
    overflow: hidden
}

.blog-card a {
    color: var(--color-434459);
    text-decoration: none
}

.blog-card .img-box {
    max-height: 200px;
    margin-bottom: 24px
}

.blog-card .img-box img,
.single-blog .img-fluid,
.blog-detail img {
    display: block;
    object-fit: contain;
    object-position: center center;
    width: 100%
}

.blog-card .img-box img {
    height: 100%;
    min-height: 170px;
    background: #f7f7f7;
    aspect-ratio: 1.704
}

.single-blog .img-fluid {
    aspect-ratio: 1.702;
    background: #f7f7f7
}

.blog-detail img {
    aspect-ratio: 3 / 2
}

.blog-card .blog-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 15px
}

.blog-card .blog-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px
}

.blog-card .blog-info span {
    color: gray
}

.blog-card .blog-info * {
    font-size: var(--font-size-small)
}

.blog-card .blog-info .cat {
    color: var(--yellow)
}

.blog-card .blog-title {
    font-size: var(--font-size-medium)
}

.read-more-btn {
    padding: 5px 20px;
    background-color: var(--gray);
    color: var(--yellow)
}

.footer-row {
    display: inline-grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: 3rem;
    justify-content: space-between
}

footer {
    border-top: 7px solid var(--yellow)
}

footer>section {
    padding-bottom: 20px !important
}

.footer-row ul {
    list-style: none
}

.footer-row .list-title {
    margin-bottom: 1rem;
    font-size: var(--font-size-medium);
    color: var(--dark)
}

.footer-row ul li {
    margin-bottom: .725rem;
    color: var(--text-color)
}

.footer-row .logo {
    margin-bottom: 1rem
}

.footer__links a {
    transition: 0.1s ease
}

.footer__links a:hover {
    color: var(--yellow) !important
}

.footer__copyright {
    display: flex;
    margin-top: 30px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid lightgray;
    padding-top: 20px
}

.footer__copyright>div {
    flex: 1;
    color: #000;
    min-width: 300px
}

.footer__copyright>div:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    gap: 20px
}

.footer__copyright div:nth-child(2) a {
    background: var(--dark);
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-defualt);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: 0.3s ease
}

.footer__copyright div:nth-child(2) a img {
    max-width: 24px;
    max-height: 20px;
    height: 20px;
    width: 24px;
}

.footer__copyright div:nth-child(2) a:nth-child(4) img {
    width: 20px
}

.footer__copyright div:nth-child(2) a:hover {
    background-color: var(--yellow)
}

.how_our_tool_work {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem
}

.how_our_tool_work .card-desc {
    margin-bottom: 3rem
}

.how_our_tool_work .img-fluid {
    max-width: 80%;
    width: unset
}

.mode-demo {
    row-gap: 2rem;
    flex-direction: column;
    padding: 0 1rem;
    display: flex
}

.mode-demo .child {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mode-demo .child>span:last-child img {
    height: 50px;
    width: 50px
}

.twist-arrow {
    top: -60px
}

.twist-arrow img {
    width: 110px;
    height: 100px
}

.tooltip_main {
    position: absolute;
    overflow-y: scroll;
    min-height: 35px;
    max-height: 200px;
    min-width: 150px;
    z-index: 6000;
    box-shadow: 0 5px 30px -10px #999;
    background: #fff;
    padding: 5px 0 5px 5px;
    white-space: nowrap !important;
    border-radius: 5px
}

.tooltip_main::-webkit-scrollbar {
    width: 7px
}

.tooltip_main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--gray)
}

.tooltip_main>span {
    cursor: pointer;
    color: var(--yellow) !important;
    max-height: fit-content
}

#output_box>span>b,
#output_box>b {
    color: var(--yellow) !important
}

.error_text {
    font-size: 14px;
    font-weight: 700;

}

#sugest .line {
    width: 140px;
    height: 20px;
    margin-top: 12px;
    background-image: linear-gradient(90deg, #f4f4f4 0, rgb(229 229 229 / .8) 40px, #f4f4f4 80px);
    background-size: 600px;
    animation: shine-lines 2s infinite ease-out
}

#sugest .line {
    width: 80% !important;
    margin-right: 10px
}

#sugest .line~.line {
    background-color: #ddd
}

.reset-btn.tooltip {
    padding: 5px 8px;
    background-color: var(--gray);
    border-radius: var(--border-radius-defualt);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.word-counter-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.word-counter-flex-inner {
    display: flex;
    flex-direction: column
}

.word-count-type {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center
}

.word-count-type * {
    color: var(--text-color);
    font-size: var(--font-size-small)
}

@keyframes shine-lines {
    0% {
        background-position: -100px
    }

    40%,
    100% {
        background-position: 140px
    }
}

@keyframes shine-avatar {
    0% {
        background-position: -32px
    }

    40%,
    100% {
        background-position: 208px
    }
}

.feedback-div {
    left: -80%
}

.feedback-form span:hover {
    background-color: transparent !important
}

.feedback-thanks,
.feedback-form {
    width: 300px;
    min-height: 318px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 15px 0 rgb(0 0 0 / .15);
    top: -340px;
    left: -170px;
    z-index: 9999;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

div.feedback-thanks span,
div.feedback-form span {
    background-color: transparent !important
}

span.feedback-heading {
    color: var(--dark);
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

span.feedback-subheading {
    color: var(--text-color);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 10px;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px
}

.rate:not(:checked)>input {
    position: absolute;
    z-index: -9999;
    visibility: hidden;
    /* top: -9999px */
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc
}

.rate:not(:checked)>label:before {
    content: ' ★ '
}

.rate>input:checked~label {
    color: var(--yellow)
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #deb217
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #c59b08
}

.feedback-footer {
    justify-content: space-between !important
}

div.feedback-send span,
div.feedback-sent span,
div.feedback-cancel span {
    color: #313249;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px
}

#feedback-message {
    padding: 5px;
    border: none;
    background: #F8F8F8;
    border: 1px solid #F0F0F0;
    border-radius: 5px;
    resize: none;
}

#feedback-message:focus {
    border: 1px solid #656577;
    background: #FFFFFF;
}

.feedback-thanks .feedback-heading {
    color: var(--dark);
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21.5px
}

.feedback-thanks .feedback-subheading {
    color: var(--text-color);
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21.5px
}

.feedback-thanks .feedback-thanks-img {
    width: 160px !important;
    height: 90 !important;
    margin: 0 auto
}

.feedback-thanks span:hover img {
    filter: none !important
}

.feedback-sent {
    margin: 0 auto;
    background: transparent;
    outline: none;
    border: none;
    font-size: 16px;
    line-height: 40px;
}

.js-download:hover .download-options {
    display: block !important;
    background-color: #fff
}

.download-options {
    bottom: 46px;
    padding: 6px;
    width: 132px;

    background-color: #fff;
    box-shadow: rgb(0 0 0 / .15) 0 -15px 50px 0;
    z-index: 9;
    border-radius: 8px;
}

.download-options ul li {
    border-bottom: 1px solid lightgrey;
    padding: 4px
}

.download-options ul li>span:hover {
    color: #fff
}

.download-options ul li:last-child {
    border: none !important
}

dialog[open] {
    min-width: 33%;
    top: 25%;
    left: 33%;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / .2), 0 6px 20px 0 rgb(0 0 0 / .19);
    border: 0;
    padding: 30px 50px 30px 30px
}

dialog[open]::backdrop {
    background-color: var(--dark-gray);
    opacity: .5
}

/* .dialog-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--dark-gray);
    opacity: .5;
    top: 0;
    display: none
} */

.warning-text {
    color: var(--yellow)
}

.info-text {
    color: var(--dark)
}

.error-text {
    color: var(--red)
}

.dark-bg {
    background-color: var(--dark)
}

.dark-gray-bg {
    background-color: var(--dark-gray)
}

dialog button {
    padding: 10px;
    margin-top: 20px;
    float: right
}

.contact-card {
    max-width: 500px;
    padding: 2rem;
    margin: 0 auto;
    /* box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075); */
    box-shadow: 0px 4px 25px 0px #0000001A;
    border-radius: var(--border-radius-defualt)
}

.form-group {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin-bottom: 1rem
}

.form-input {
    padding: 10px 20px;
    border-radius: var(--border-radius-defualt);
    border: 1px solid var(--color-d3d3d3)
}

.form-input:focus-visible {
    outline: unset
}

textarea.form-input {
    resize: none
}

.contact-form-footer {
    display: flex;
    justify-content: space-between
}

.contact-form-footer .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px
}

.social-icons .social-icon {
    background-color: var(--color-d3d3d3);
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    border-radius: 5px
}

.social-icons .social-icon:hover {
    background-color: var(--yellow)
}

.submit-btn {
    width: 100px;
    padding: 10px 15px;
    background-color: var(--yellow);
    color: #fff;
    border: unset;
    border-radius: var(--border-radius-defualt)
}

.main-blog-row {
    display: flex;
    column-gap: 3rem;
    padding: 10px;
    /* box-shadow: 1px 2px 3px 0 rgb(0 0 0 / .2); */
    box-shadow: 0px 4px 25px 0px #0000001A;
    background-color: var(--text-color)0a
}

.main-blog-row>div {
    flex: 1
}

.main-blog-info {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.main-blog-info :is(h2, span) {
    line-height: 1.5;
    margin: unset
}

.continue-btn a {
    display: block;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    background-color: var(--orange);
    border-radius: var(--border-radius-defualt);
    width: 200px;
    margin-top: 1rem
}

.blog-detail {
    line-height: 2
}

.tooltip_top {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 5px;
    padding-bottom: 5px
}

.tooltip_top>span:first-child {
    color: #afafaf !important;
    font-size: 16px
}

.tooltip_main {
    position: absolute;
    min-height: 50px;
    min-width: 170px;
    z-index: 6000;
    padding: 10px;
    max-width: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 300px;
    height: fit-content
}

.tooltip_main::-webkit-scrollbar-thumb {
    background-color: var(--yellow)
}

.tooltip_top:after {
    content: "";
    position: absolute;
    top: 0;
    left: 13%;
    margin-left: -31px;
    margin-top: -16px;
    width: 0;
    height: 0;
    border-bottom: 16px solid var(--blue-color);
    border-right: 48px solid #fff0;
    border-left: 32px solid #fff0
}

.tooltip_flex {
    display: flex;
    justify-content: start;
    align-items: center
}

.tooltip_innerbox {
    border-radius: 1px;
    width: 100%;
    min-height: 100px;
    line-height: 2;
    margin-top: 0;
    display: flex;
    flex-direction: column
}

.tooltip_innerbox>span:nth-child(1) {
    color: #afafaf !important;
    font-size: 16px
}

#sugest {
    display: flex;
    flex-direction: column
}

.btn-danger {
    text-decoration: none;
    color: var(--blue-color);
    background: var(--background-gray);
    padding: 8px 20px;
    position: relative;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    border: 1px solid var(--blue-color)
}

.tooltip_innerbox .word {
    display: inline-block;
    padding: 0 5px 0 0;
    cursor: pointer;
    color: #5c5c5e;
    padding-left: 5px
}

.tooltip_innerbox .word:active {
    color: #0e388c
}

.tooltip_innerbox .word:hover {
    background: #f5f6f9;
    color: #000
}

.tooltip_innerbox .input {
    background: #fff;
    border: 1px solid #ddd;
    height: 40px;
    text-indent: 3px;
    width: 155px;
    margin-right: 5px;
    display: inline-block
}

.tooltip_innerbox .usebtn {
    border: 1px solid var(--blue-color);
    background: var(--blue-color);
    color: #fff;
    padding: 1px 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    margin-top: -1px
}

.customAlert {
    display: none;
    position: fixed;
    max-width: 25%;
    min-width: 320px !important;
    min-height: 20%;
    height: 200px;
    left: 50%;
    top: 40% !important;
    padding: 10px;
    box-sizing: border-box;
    margin-left: -12.5%;
    margin-top: -5.2%;
    background: var(--blue-color);
    border: 1px solid var(--blue-color);
    background: var(--background-gray)
}

.message {
    padding: 20px 5px;
    color: #341477;
    font-size: 18px;
    text-align: center;
    line-height: 20px
}

input[type="button"] {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 50%;
    height: 36px;
    margin-top: -45px;
    margin-left: -25%;
    outline: 0;
    border: 0;
    background: var(--blue-color);
    color: #fff
}

.rab {
    width: 200px;
    height: 30px;
    outline: 0;
    border: 0;
    color: #fff;
    background: darken(#04b486, 5%)
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.down__arrow {
    display: none
}

.choice__mobile__holder {
    display: none
}

::-webkit-scrollbar {
    width: 4px
}

::-webkit-scrollbar-track {
    background: #fff;
    border-radius: var(--border-radius-defualt)
}

::-webkit-scrollbar-thumb {
    background: #D9D9D9;
    border-radius: var(--border-radius-defualt);
    cursor: grab
}

body::-webkit-scrollbar-thumb {
    border-radius: 0
}

body::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yellow)
}

::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
    background: var(--orange)
}

.tooltip {
    position: relative;
    display: inline-block
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 110px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 14px !important;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 60%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 52%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--dark) #fff0 #fff0 #fff0
}

.download-options::after {
    content: "";
    position: absolute;
    bottom: -21px;
    left: 50%;
    margin-left: -10px;
    border-width: 12px;
    border-style: solid;
    border-color: #fff #fff0 #fff0 #fff0
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    background-color: var(--dark)
}

.login__popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    background-color: rgb(0 0 0 / .5);
    display: grid;
    place-items: center;
    overflow: hidden;
    z-index: 1000
}

.login__card {
    background-color: #fff;
    /* max-height: 700px !important; */
    /* min-height: 650px; */
    width: 90%;
    max-width: 450px;
    border-radius: 25px;
    display: flex;
    position: relative;
}

.login__wrapper {
    position: relative;
    /* padding-top: 30px; */
    overflow: hidden;
    /* overflow-y: auto; */
    display: flex;
    align-items: center
}

#close_login_popup {
    height: 24px;
    width: 24px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 100;
}

#close_login_popup:hover {
    cursor: pointer;
}

.login__card>div {
    flex: 1 !important
}

.login__card>div img {
    width: 100%;
    max-width: 200px
}

.login__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    /* margin-left: -200px; */
    visibility: hidden;
    opacity: 0;
    width: 100%;
    transition: 0.3s ease;
    position: relative !important;
    max-width: 360px;
    margin: 30px auto !important;
}

.login__form.active {
    margin-left: 0;
    visibility: visible;
    opacity: 1;
    transition: 0.3s ease
}

.login__form>div {
    /* width: 80%; */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

.form__heading {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    margin-bottom: 20px;

}


.login__form h2 {
    text-align: center;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 0px !important
}

.login__form .input__form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    position: relative;
}

.login__form .pass-hide-show {
    top: 36px !important;
    height: 20px;
    width: 20px;
}

.login__form .input__form span {
    font-size: 14px;
    color: red
}

.login__form .input__form label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(38, 42, 46, 1);

}

.login__form .input__form input {
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    outline: none;
    background: #FFFFFF;

}

.login__form .input__form input:focus {
    background-color: #FFFFFF;
    border: 0.5px solid #262A2E
}

.login__form .input__form input::placeholder {
    color: var(--color-d3d3d3);
    font-size: 14px;
}

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px white inset;
    box-shadow: 0 0 0 1000px white inset;
    color: inherit;
}

/* .login__form button {
    border: none;
    outline: none;
    background-color: #fff0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
} */

.custom__auth__btn {
    background-color: var(--yellow) !important;
    padding: 10px;
    font-size: 18px !important;
    border-radius: 6px;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 0
}

.google__auth__btn {
    border: 1px solid rgba(235, 235, 235, 1);
    padding: 9px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    background: rgba(255, 255, 255, 1);
    font-weight: 400;
    line-height: 24px;
}

.auth-link {
    font-size: 14px;
    text-align: center;
    color: rgba(67, 74, 81, 1);
}

.auth-link-span:hover {
    color: var(--yellow);
}

.google__auth__btn:hover {
    background: #F5F5F5;
}

.lines {
    background: rgba(235, 235, 235, 1);
    height: 1px;
    flex: 1;
}

.or {
    color: rgba(175, 175, 175, 1);

}

.login__form a img {
    max-width: 20px
}

.rememeber_me {
    display: flex;
    justify-content: end;
}

.rememeber_me * {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}



.login__form p span {
    font-weight: 500;
    color: #262A2E;
    cursor: pointer;
    font-size: 14px;
}

.form__heading p {
    font-size: 14px;
    color: rgba(67, 74, 81, 1);
    text-align: center;
    line-height: 18px;
}

.login__popup__detail {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    overflow: hidden;
    position: relative
}

.login__detail__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 100%;
    position: absolute;
    transition: 0.7s ease;
    margin-right: -200% !important;
    opacity: 0;
    visibility: hidden
}

.login__detail__item.active {
    margin-right: 0px !important;
    opacity: 1;
    visibility: visible
}

.login__detail__item>div {
    max-width: 80%;
    margin: 0 auto;
    width: fit-content
}

.login__detail__item p {
    line-height: 150%;
    margin-top: -10px
}

.login__detail__item div img {
    max-width: 100px;
    width: 100%
}

.login__detail__item div:nth-child(1) {
    display: flex;
    gap: 20px;
    align-items: center
}

.login__popup__slider__points {
    position: absolute;
    margin: 0px !important;
    bottom: 22%;
    display: flex;
    gap: 5px
}

.login__popup__slider__points span {
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--yellow);
    border-radius: 100%;
    transition: 0.3s ease
}

.login__popup__slider__points span.active {
    width: 30px;
    border-radius: 6px !important
}

#signup__form #response__msg {
    font-size: 16px;
    padding: 4px 8px;
    margin-bottom: 12px;
    background: #f7f7f7;
    border-radius: 4px;
    border-left: 4px solid var(--orange);
    box-shadow: 1px 2px 2px rgb(0 0 0 / .1)
}

.loader__wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff6;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
    border-radius: inherit
}

.animate_loader {
    width: 200px;
    height: 200px;
    position: absolute;
    transition: 0.3s ease;
    border-radius: 100%;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.5)
}

div:has(>.animate_loader) {
    animation: roll_loader 2.5s ease infinite;
    width: 100%;
    height: 100%
}

.loader__wrapper .loader_text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 70%);
    font-weight: 600;
    color: #98989880;
    font-size: 28px
}

@keyframes roll_loader {
    0% {
        transform: rotate(72deg)
    }

    25% {
        transform: rotate(144deg)
    }

    50% {
        transform: rotate(216deg)
    }

    75% {
        transform: rotate(288deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.animate_loader span {
    width: 40px;
    height: 40px;
    background-color: var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    position: absolute
}

.animate_loader span:nth-child(1) {
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
    animation: span1 0.8s ease infinite
}

.animate_loader span:nth-child(2) {
    top: 28%;
    left: 12%;
    animation: span2 0.8s ease infinite
}

.animate_loader span:nth-child(3) {
    top: 28%;
    left: 88%;
    animation: span3 0.8s ease infinite;
    transform: translateX(-100%)
}

.animate_loader span:nth-child(4) {
    top: 55%;
    left: 38%;
    animation: span4 0.8s ease infinite;
    transform: translateX(-72%)
}

.animate_loader span:nth-child(5) {
    top: 55%;
    left: 60%;
    animation: span5 0.8s ease infinite;
    transform: translateX(-30%)
}

@keyframes span1 {
    0% {
        top: 10%
    }

    50% {
        top: 0%
    }

    100% {
        top: 10% !important
    }
}

@keyframes span2 {
    0% {
        left: 12%
    }

    50% {
        left: 2%
    }

    100% {
        left: 12% !important
    }
}

@keyframes span3 {
    0% {
        left: 88%
    }

    50% {
        left: 98%
    }

    100% {
        left: 88% !important
    }
}

@keyframes span4 {
    0% {
        top: 55%;
        left: 38%
    }

    50% {
        top: 70%;
        left: 28%
    }

    100% {
        top: 55%;
        left: 38%
    }
}

@keyframes span5 {
    0% {
        top: 55%;
        left: 60%
    }

    50% {
        top: 70%;
        left: 70%
    }

    100% {
        top: 55%;
        left: 60%
    }
}

.mode__tool__tip {
    position: absolute;
    z-index: 1;
    width: 240px;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--yellow);
    top: 70px;
    left: -40%
}

.mode__tool__tip>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #fff9e5;
    width: 100%;
    border-radius: 10px
}

.mode__tool__tip>div img {
    width: 18px
}

.mode__tool__tip>div h4 {
    font-size: 14px;
    color: #333
}

.mode__tool__tip>div div {
    display: flex;
    align-items: center;
    gap: 10px
}

.mode__tool__tip>div>img {
    width: 16px
}

.mode__tool__tip p {
    font-size: 12px;
    text-align: center;
    color: #333
}

.mode__tool__tip>p {
    padding: 10px;
    font-size: 14px;
    line-height: 130%
}

.mode__tool__tip a {
    border: none;
    outline: none;
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
    background-image: linear-gradient(to right, #ffa41c 7.81%, #fec601 51.56%, #ffa61a 88.02%);
    font-size: 12px;
    margin: auto;
    text-decoration: none
}

.mode__tool__tip a:hover {
    text-decoration: none;
    color: #fff
}

.mode__tool__tip span {
    display: block;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    width: 30px;
    height: 20px;
    position: absolute;
    top: -20px;
    z-index: -2;
    background: #fff5d3
}

.pricing__plans__types__wrapper>p {
    padding-top: 10px
}

.pricing__plans__types__wrapper>p,
.pricing__plans__types__wrapper>h1 {
    text-align: center
}

.pricing__plans__types__wrapper {
    /* background: linear-gradient(#fbfbfb, #ffffff); */
    padding-top: 30px !important
}

.pricing__plans__types {
    display: flex;
    justify-content: center;
    max-width: 1100px !important;
    align-items: flex-end;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    min-height: 171px
}

.pricing__plans__types>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 120px;
    justify-content: center;
    background-color: #f5f6f9;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    transition: 0.3s ease;
    margin-top: 10px;
    cursor: pointer
}

.pricing__plans__types>div img {
    max-width: 40px;
    margin-bottom: 10px
}

.pricing__plans__types>div h4 {
    font-size: 22px
}

.pricing__plans__types>div h4,
.pricing__plans__types>div p {
    color: var(--text-color)
}

.pricing__plans__types>div.active h4,
.pricing__plans__types>div.active p {
    color: #000
}

.pricing__plans__types>div img {
    filter: grayscale(1);
    max-width: 35px
}

.pricing__plans__types>div.active {
    background-color: #fff;
    box-shadow: rgb(149 157 165 / .1) 0 -8px 24px;
    min-height: 160px
}

.pricing__plans__types>div.active img {
    filter: none;
    max-width: 50px
}

.pricing__plans__types>div>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center
}

.pricing__plans__list {
    display: flex;
    max-width: 1100px;
    margin: auto;
    margin-bottom: 100px;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}

.pricing__plans__header {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0px !important;
    padding: 20px 30px;
    border-radius: 18px;
    background: #F6F6F6;
}

.pricing__plans__header div {
    text-align: center;
}

.plan__icon {
    height: 40px !important;
    max-width: 40px !important;
}

.pricing__plans__list>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    gap: 10px;
    border: 1px solid #fff0;
    min-width: 219px;
    max-width: 400px;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0px 0px 50px 0px #00000008;
}

.pricing__plans__list>div.active {
    border: 1px solid var(--yellow);
    box-shadow: 0 10px 20px .5px rgb(255 199 0 / .2)
}

.pricing__plans__list>div * {
    color: var(--dark)
}

.pricing__plans__list>div h2 {
    margin-bottom: 0;
    font-size: var(--font-size-h1)
}

.pricing__plans__list>div span {
    font-size: 14px;
    margin-top: -5px;
    font-weight: 500;
    line-height: 20px;
    color: #afafaf !important;
}

.pricing__plans__list>div h4 {
    font-weight: 700;
    margin-bottom: 0;
    line-height: 32px;
    font-size: 20px;
}

.pricing__plans__list>div>* {
    text-align: center
}

.pricing__plans__list>div>h5 {
    text-align: left;
    margin-left: 8px 0px;
    font-size: 14px;
    font-weight: 500;
    color: #AFAFAF;
    line-height: 20px;
    margin-top: 10px
}

.pricing__plans__list>div>div {
    text-align: left
}

.pricing__plans__list>div>div {
    display: flex;
    gap: 10px;
    /* margin-top: 8px;
    margin-left: 20px */
}

.pricing__plans__features * {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}

.pricing__plans__list>div>div img {
    max-width: 18px
}

.pricing__plans__list>div>a {
    width: 100%;
    padding: 8px 18px !important;
    box-shadow: none;
    border-radius: 10px;
    border: none;
    outline: none;
    margin: 20px auto;
    margin-bottom: 10px;
    background: #F8F8F8;
    color: #313249;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    border: 1.5px solid transparent;
    transition: all;
    transition-duration: 1ms;

}

.pricing__plans__list>div>a:hover {
    border: 1.5px solid;
    border-image-source: conic-gradient(from 180deg at 50% 50%, rgba(100, 100, 118, 0.35) -95.7deg, #434459 40.25deg, rgba(100, 100, 118, 0.68) 82.34deg, #434459 217.69deg, rgba(100, 100, 118, 0.35) 264.3deg, #434459 400.25deg);
    background: linear-gradient(84.99deg, #434459 8.22%, #656577 54.26%, #434459 92.62%);
    color: white;

}

section.pricing__wrapper {
    background: #fafafa;
    padding: 0px 0px 20px 0px;
}

.plan_toggle {
    color: #AFAFAF;
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
}

.plan_toggle_container {
    box-shadow: 0px 3px 0px 0px #00000014;
    background: #FFFFFF;
    max-width: 326px;
    padding: 12px 24px 12px 24px;
    gap: 24px;
    border-radius: 40px;
    opacity: 0px;
    margin: 40px auto;
    justify-content: space-between;
    align-items: center;

}

.plan_toggle_container div {
    align-items: center;
    gap: 5px;
}

.premium_plan_radio[type="radio"]:checked::after,
.plans_toggle_input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #67C392;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

.premium_plan_radio[type="radio"],
.plans_toggle_input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.premium_plan_radio[type="radio"]:checked,
.plans_toggle_input[type="radio"]:checked {
    border-color: #67C392;
}



.plan-content.active {
    display: block;
}


.pricing__info {
    display: flex;
    flex-wrap: wrap !important;
    gap: 50px
}

.pricing__info>div {
    flex: 1;
    min-width: 350px !important
}

.pricing__feature {
    display: flex;
    flex-direction: column
}

.pricing__feature div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px
}

.pricing__feature div ul {
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pricing__feature div p {
    display: flex;
    align-items: center;
    gap: 8px
}

.pricing__feature div p img {
    width: 18px
}

.pricing__faq {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.pricing__faq>div {
    box-shadow: rgb(99 99 99 / .2) 0 2px 8px 0;
    border-radius: 7px
}

.pricing__faq>div>div:nth-child(1) {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 15px
}

.pricing__faq>div>div:nth-child(1)>div {
    display: flex;
    gap: 15px;
    align-items: center
}

.pricing__faq>div>div:nth-child(1) img:nth-child(1) {
    width: 30px;
    height: 30px
}

.pricing__faq>div>div:nth-child(1) h4 {
    font-size: 20px;
    font-weight: 500
}

.pricing__faq>div>div:nth-child(1)>img {
    width: 18px;
    transition: 0.3s ease;
    transform: rotate(-90deg)
}

.pricing__faq>div>div:nth-child(2) {
    color: var(--text-color);
    line-height: 150%;
    padding: 0 15px;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: padding 0.3s ease
}

.pricing__faq>div.active>div:nth-child(2) {
    height: auto;
    padding-bottom: 15px;
    visibility: visible;
    opacity: 1
}

.pricing__faq>div.active>div:nth-child(1)>img {
    transform: rotate(0deg)
}

.pricing__faq__main {
    max-width: 1000px;
    margin: auto
}

.pricing__faq__main h3 {
    font-weight: 400;
    font-size: var(--font-size-h3) !important
}

.pricing__faq__main h3 span {
    font-weight: 800
}

.pricing__faq__main .ans {
    margin-left: 50px;
    line-height: 130%
}

.user__profile {
    display: flex;
    /* border-top: 1px solid lightgray; */
    margin-top: 20px;
    /* min-height: 500px */
    gap: 20px;
}

.profile__sidebar {
    flex: 0.83;
    /* border-right: 1px solid lightgray; */
    padding: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    opacity: 0px;
    background: #FFFFFF;
    position: relative;

}

.profile__sidebar>div {
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
}

.profile__sidebar>div.active img {
    filter: none
}

/* .profile__sidebar>div img {
    max-width: 30px;
    filter: grayscale(1)
} */

.profile__detail__wrapper {
    flex: 2;
    padding: 20px
}

.profile__subscription h3,
.profile__detail h3 {
    margin-bottom: 5px !important
}

.profile__subscription>div,
.profile__detail>div {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px
}

.cancel__sub__msg {
    background: #ffdede;
    padding: 9px 10px;
    border-radius: 7px;
    color: darkred
}

.profile__subscription>div>div>*:nth-child(1),
.profile__detail>div>div>*:nth-child(1) {
    min-width: 400px
}

.profile__subscription>div>div,
.profile__detail>div>div {
    display: flex;
    align-items: flex-start
}

.profile__detail>div>div button {
    margin-left: 20px
}

.cancel__sub,
.profile__edit__btn,
.reset__password,
.profile__udpate>button,
.logout__btn {
    background: #f8f8f8;
    border: none;
    outline: none;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    margin-left: -0px !important
}

.validation_error {
    border: 0.5px solid #FA565D !important;
}

.logout__btn img,
.profile__edit__btn img {
    width: 15px
}

.cancel__sub,
.logout__btn {
    color: #ff5c5c
}

.profile__subscription p span {
    color: var(--orange)
}

.plan__card {
    /* min-width: 300px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    border: 1px solid var(--yellow);
    box-shadow: 0 10px 10px 2px rgb(255 199 0 / .1) */
    /* max-width: 120px; */
    /* display: flex;
    align-items: center;
    gap: 5px; */
}

.plan__card .range {
    width: 100%;
    margin: auto;
    height: 8px;
    background-color: #d9d9d9;
    border-radius: 100px;
    display: flex;
    justify-content: flex-start;
    overflow: hidden
}

.billing-title {
    font-size: 12px;
    line-height: 16px;
    color: #434A51;
}

.billing-data {
    color: #313249;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.billing-duration,
.billing-subscription {
    font-size: 12px;

}

.plan__card .range span {
    display: block;
    width: 50%;
    height: 5px;
    background-color: var(--yellow)
}

.plan__queries {
    display: flex;
    justify-content: space-between;
    color: var(--text-color)
}

.plan__queries p {
    font-size: 14px !important;
}

.profile__udpate>button {
    float: right
}

.profile__update__wrapper>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.profile__update__wrapper>div input {
    /* max-width: 300px; */
    padding: 8px;
    border-radius: 7px;
    border: 0.5px solid #EBEBEB;
    outline: none;
    font-size: 16px;
    margin-top: 5px;
    flex: 2;
}

.profile__update__wrapper>div label {
    flex: 1;
    font-size: 14px;
}

.profile__update__wrapper .input-group input:focus {
    border-color: #313249;
}

.profile__udpate {
    padding: 15px;
}

.reset__password {
    background: #313249;
    color: #fff
}

.profile-update-footer {
    justify-content: end !important;
    gap: 15px;
    flex-direction: row !important;
}

.profile-update-footer>button {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: 0% !important;

}

.go__back__profile {
    padding: 6px 23px 6px 23px;
    border-radius: 6px;
    background: #F9F9F9;
    border: 1px solid #EBEBEB
}

.reset__pass__err {
    font-size: 16px;
    background: #ffeded;
    color: red;
    padding: 8px;
    width: fit-content;
    border-radius: 7px
}

.reset__pass__err.success {
    background: #edffee !important;
    color: green !important
}

.ads__div {
    min-height: 100px;
    width: 100%;
    margin: auto
}

.ads__div>div {
    width: fit-content;
    margin: auto
}

.tool__below__ads {
    min-height: 300px !important
}

.popup-alert {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    background-color: rgb(0 0 0 / .5);
    display: grid;
    place-items: center;
    overflow: hidden;
    z-index: 1000
}

.popup-card {
    background-color: #fff;
    max-height: 33vh;
    min-height: 40vh;
    width: 33%;
    max-width: 1000px;
    border-radius: 25px;
    display: flex
}

.sample-copy-section {
    background: #fff
}

.tools-container {
    max-width: 990px;
    margin: auto
}

.tools-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px
}

.tools-row .tool-link {
    padding: 18px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #fff0;
    color: var(--dark);
    text-decoration: none;
    transition: all 300ms;
    box-shadow: 0 8px 24px 0 #0000000F
}

.tools-row .tool-link:hover {
    box-shadow: 0 8px 24px 0 #FFC70014;
    border-color: var(--orange);
    color: var(--dark)
}

.tools-row .tool-link .tool-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 500
}

.tool-btn {
    color: #000000;
    cursor: pointer;
    padding: 9px 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background: #feb210;
    border-radius: 10px;
}

/* custom dropdown */
.dropdown-container {
    position: relative;
}

.dropdown-menu {
    box-shadow: 1px 10px 25px 0px #00000026;
    border: 1px solid #ECECEC;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px 0px 0px 0px;
    opacity: 0px;
    position: absolute;
    z-index: 10;
    bottom: 50px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    display: none;
}

#essay_type_dropdown,
#poem_genre_dropdown,
#story_creativity_dropdown,
#story_type_dropdown {
    flex-direction: row;
    flex-wrap: wrap;
}

#story_creativity_dropdown p {
    flex-basis: 45% !important;
}

#essay_type_dropdown p,
#poem_genre_dropdown p {
    flex-basis: 48%;
}

#story_creativity_dropdown p,
#story_type_dropdown p {
    flex-basis: 25%;
}

.dropdown-toggle:hover {
    cursor: pointer;
}

.dropdown-menu p {
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    padding: 10px;
}

.dropdown-menu p:hover {
    background: #F8F8FF;
    border-radius: 10px;
}

.rotate {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.dropdown-toggle img {
    transition: transform 0.2s ease;
}

/* end custom dropdown */


/* new popup */
/* Overlay */
.popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

/* Popup */
.cancel-popup-container,
.popup_container,
.profile-popup-container {
    position: fixed;
    top: 35%;
    left: 50%;
    display: none;
    background: #FFFFFF;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
    width: 98%;
    max-width: 710px;
}

.popup_image_section {
    width: 50%;
    height: 100%;
    display: flex;
    padding: 40px 0px;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #F8F7F3;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
    border-radius: 15px 0px 0px 15px;
}

.popup_text_section {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 40px 5px;
    border-radius: 0px 15px 15px 0px;
}

.popup_text_section h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.13px;
    text-align: left;
}

.popup_text_section span {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
    color: #656577;
}

.go_back_popup_btn {
    background: #313249;
    color: white;
    padding: 8px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 18.75px;
    margin-top: 10px;
}

.close_popup_btn {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

/* end new popup */


/* new profile page */

.user__profile_section {
    background: #fafafa;
}

.profile_upgrade_container {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.profile_upgrade_container div h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    color: #313249;
}

.profile__update__wrapper div p {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #434A51;
}

.upgrade_btn {
    padding: 8px 16px 8px 16px;
    gap: 8px;
    border-radius: 8px;
    background: #313249;
    color: white;
    font-size: 16px;
    font-weight: 400;
}

.profile_sidebar_header {
    background: linear-gradient(101.31deg, #FFF4E4 0%, #F3FCF3 98.75%);
    height: 74px;
    gap: 0px;
    border-radius: 14px;
}

.profile_info_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 40px 0px 0px 0px;
    padding: 0px 20px;
}

.profile_name {
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-overflow: ellipsis;
}

.profile-email-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.profile_id {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.04em;
}

.profile_edit_btn,
.account__btn,
.profile_verify_btn {
    padding: 6px 12px 6px 12px;
    border-radius: 8px;
    border: 0.4px;
    border: 0.4px solid #EBEBEB;
    background: #F8F8F8;
    color: #434A51;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.email_verification {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 3px;
    margin-top: 3px;
}

.not_verified {
    color: #FF5C5C;
}

.verification-sended {
    color: #4AA2FA;
}

.verified {
    color: #6BC997;

}

.profile__table {
    padding: 0px 20px;
}

.table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 30px;
}

.table-data {
    border-top: 0.4px solid #D3D3D3;
    border-collapse: collapse;
    padding: 20px 0px;
    font-size: 14px;
}

.right-align {
    text-align: end;
}

.profile-details {
    border-radius: 16px;
    background: #FFFFFF;
    flex: 2;
}

.profile-details-header {
    border-radius: 14px 14px 0px 0px;
    background: #F8F8F8;
    border: 0.4px solid #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-details-header div b {
    font-weight: 600;
    line-height: 22px;
    color: #313249;
}

.profile-details-header div p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;

}

.profile-details-header .tabs {
    display: flex;
    gap: 20px;
}

.tab-label {
    padding: 6px 12px 6px 12px;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.tab-label img {
    height: 20px;
    width: 20px;
}

.tab-label.active {
    border: 1px solid #313249;
    background: #FFFFFF;
}

.profile-details-body .tab-content {
    display: none;
}

.profile-details-body {
    max-height: 320px;
    min-height: 320px;
    overflow-y: auto;
}

.profile-details-body .tab-content.active {
    display: block;
}
.refund{
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    background: none;
    padding: 7px 12px;
    position: relative;
}
.general-detail-table {
    width: 100%;
    overflow: auto;
    min-width: 600px;
    border-collapse: collapse;
}

.general-data {
    padding: 20px 15px;
    border-bottom: 0.4px solid #EBEBEB;
    color: #313249;
    font-size: 14px;
}
.actions{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 24px;
    height: 58.5px;
}

.actions .dropdown{
    position: absolute;
    top: -25px;
    background: #313249;
    padding: 6px 10px;
    color: white;
    border-radius: 8px;
    font-size: 14px;
}
.general-head {
    color: #434A51;
}

.unlock-pro {
    background: #FBFBFB;
    padding: 21px;
    text-align: center;
    margin: 10px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.unlock-pro p {
    font-size: 12px;
    text-align: center;
    color: #434A51;
    max-width: 305px;
}

.unlock-pro-btn {
    background: #313249;
    padding: 8px 12px 8px 12px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.input-group {
    position: relative;
}

.pass-hide-show {
    position: absolute;
    right: 10px;
    top: 16px;
    cursor: pointer;
}

.billing-renewal button {
    font-size: 12px;
    color: #4285F4;
    cursor: pointer;
    background: transparent;
    outline: none;
    border: none;
    margin: 0px 2px;
}

.plan__card {
    display: flex;
    align-items: center;
    width: 70%;
}

.plan__queries p {
    /* width: 50px; */
    text-align: center;
}

.range {
    flex: 1;
    background-color: #e0e0e0;
    height: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

.range span {
    display: block;
    height: 100%;
    background-color: #4caf50;
    width: 0;
    /* Default width */
}

.cancel-popup-container,
.profile-popup-container {
    border-radius: 16px;
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background: #FFFFFF;
    width: 100% !important;
    max-width: 375px !important;
}
.c-popup{
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.c-popup-heading{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #262A2E;
}
.c-popup-text{
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #262A2E;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Roboto;
  cursor: pointer;
}

.checkbox-item span {
  font-weight: 400;
  font-size: 14px !important;
  line-height: 20px;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #EBEBEB;
  accent-color: #2563eb; /* blue tone when checked */
  cursor: pointer;
}
#other-reason{
    width: 100%;
    height: 80px;
    opacity: 1;
    border-radius: 6px;
    padding: 12px;
    border-width: 1px;
    resize: none;
    background-color: #F9F9F9;
    border: 1px solid #EBEBEB;
    font-size: 14px;
}
.c-popup-btns{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 12px;
}

.c-popup-btns button{
    padding: 6px 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #EBEBEB;
    color: black;
}
.c-popup-btns button.confirm{
    background-color: #FF5C5C;
    opacity: 0.6;
    color: white;
}
.rsn{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-popup-btns button.confirm:hover{
    opacity: 1;
}
.dissable{
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #B3B7BC;
}

.cancel-popup-container,
.profile-popup-container>div {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    border-bottom: 0.8px solid #EBEBEB;
    padding: 15px;
}

.profile-name-section {
    flex-direction: column;
}

.profile-input,
.profile-input {
    padding: 10px 16px 10px 16px;
    border-radius: 8px;
    border: 0.5px;
    background: #FBFBFB;
    border: 0.5px solid #EBEBEB;
    width: 100%;
}

.edit-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}

.profile-lable {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.profile-popup-footer {
    border: none !important;
}

.profile-close-icon {
    cursor: pointer;
}

.feedback-close {
    position: absolute;
    right: 10px;
    top: 8px;
    height: 12px;
    width: 12px;
    cursor: pointer;
}

/* end new profile page */
.summarizer-btn {
    border: none;
}

/* premium popup and page */
/* Overlay styling */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Dark semi-transparent background */
    z-index: 10;
}

/* Popup container styling */
.premium_popup_container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    max-width: 522px;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 99999;
    /* Make sure the popup is above the overlay */
}

.justify-content-between {
    justify-content: space-between
}

.plans_btn {
    padding: 12px;
    gap: 8px;
    border-radius: 16px;
    opacity: 0px;
    border: 1px solid #EAEAEA;
    background: #FFFFFF;
    flex-direction: column;
    gap: 8px;
    /* flex: 1; */
    width: 150px;
}

.active-plan {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(180deg, #FF9100 0%, #FFD700 100%);
    border: 1px solid transparent;
}



.plans_img {
    height: 24px;
    width: 24px;
}

.items-center {
    align-items: center
}

.plan_name {
    font-size: 16px;
    font-weight: 500;
}

.plans_btn_container {
    gap: 10px;
}

.plan_price {
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 32px !important;
    color: #313249 !important;

}

.price_text {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #AFAFAF;
}


.title_name {
    color: #AFAFAF;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-bottom: 15px;
}

.plan-hide {
    display: none;
}

.active-content {
    display: flex;
    gap: 25px;
}

.plan-detail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-detail-list li {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan_btn {
    padding: 9px 14px;
    gap: 8px;
    border-radius: 10px;
    opacity: 0px;
    background: #313249;
    color: white !important;
    border: none;
    margin-top: 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.plan_btn:hover {
    cursor: pointer;
    background: #292A3D;
}

#close_premium_popup:hover {
    cursor: pointer;
}

.premium_plan_radio[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    outline: none;
    cursor: pointer;
    position: relative;
}

/* Style the radio button when checked */
.premium_plan_radio[type="radio"]:checked {
    /* background-color: green; */
    border-color: #67C392;
}

.premium_plan_radio[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #67C392;
    border-radius: 50%;
    position: absolute;
    top: 2.4px;
    left: 2px;
}

.color_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.color-label {
    position: relative;
}

.tick-mark {
    display: none;
    position: absolute;
    top: -1px;
    right: 1px;
    background: #4285F4;
    color: #fff;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 10px;
}

.logo-img {
    height: 30px;
    width: 215px;
}

.color-label.selected .tick-mark {
    display: block;
}

.banner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ECF8F8;
    flex-wrap: wrap;
    padding: 10px;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    text-align: center;
    justify-content: center;
}

.banner-text {
    font-size: 16px;
    line-height: 18px;
    color: #262A2E;
}

.ouput_btn_container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.banner-btn {
    background: #FFFFFF;
    padding: 5px 12px 5px 12px;
    gap: 4px;
    border-radius: 6px;
    color: #262A2E;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    border: none;
    outline: none;

}

.mobile-profile-dropdown {
    border: none !important;
}

@media only screen and (max-width: 360px) {
    .plans_btn {
        min-width: auto;
    }
}

/* end premium popup and page */
@media screen and (min-width:1024px) {

    .plagiarism-btn,
    .grammar-btn,
    .summarizer-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

    }
}

@media only screen and (min-width:1024px) {
    .action-btns .js-after-result-btns span:hover img.tooltip-icon {
        /* filter: brightness(0) saturate(100%) invert(99%) sepia(3%) saturate(675%) hue-rotate(200deg) brightness(117%) contrast(100%) */
    }
}

@media only screen and (max-width:1350px) {
    .down__arrow {
        position: absolute;
        z-index: 100;
        background: #f0f0f0;
        height: 86% !important;
        max-width: 25px;
        min-width: 19px !important;
        font-size: 18px;
        display: flex;
        justify-content: center;
        /* height: 32px !important; */
        align-items: center;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        right: 0px;
        color: #000;
        cursor: pointer;
    }

    .choice__mobile__holder {
        display: flex;
        /* position: absolute; */
        align-items: center;
        z-index: 200;
        max-width: 250px !important;
        width: 200px !important;
        max-width: 210px !important;
        right: 0
    }

    .down__arrow.active img {
        transform: rotate(0deg)
    }

    .down__arrow img {
        width: 12px;
        height: 7px;
        transition: 0.3s ease;
        transform: rotate(-90deg)
    }

    .choice-img {
        width: 16px !important
    }

    .choice-row {
        display: none !important;
        flex-direction: column;
        width: 254px;
        position: absolute;
        right: 0;
        z-index: 100;
        gap: 0px !important;
        flex-wrap: nowrap !important;
        border: 1px solid lightgray;
        border-radius: 7px;
        box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
        padding: 2px 5px;
        margin-top: -3px;
        top: 45px;
        background: var(--dark)
    }

    .choice-row.active {
        display: flex !important
    }

    .choice-row>div {
        margin-bottom: 5px
    }

    .mobile__view {
        /* flex-direction: column !important; */
        position: relative
    }

    .toggle__Modes {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        /* width: 100%; */
        padding: 8px 0
    }

    .toggle__Modes>div {
        display: flex;
        flex-direction: column;
        height: 18px;
        justify-content: space-between
    }

    .toggle__Modes span {
        display: block;
        width: 20px;
        height: 3px;
        background: #fcc604
    }

    .choice-row>div {
        min-width: 100%
    }
}

@media only screen and (max-width:1024px) {
    .tool .split-screen {
        padding: 10px
    }

    .tool-bg {
        padding: 2rem
    }

    .rewrite-btn {
        margin-right: 0
    }

    .mode__tool__tip {
        right: 105% !important;
        left: auto !important;
        top: 20% !important;
        align-items: end
    }

    .mode__tool__tip span {
        clip-path: polygon(75% 50%, 0% 0%, 0% 100%) !important;
        right: -12% !important;
        top: 5px !important
    }

    .img-fluid {
        object-fit: contain
    }

    .advantages-row {
        flex-direction: column;
        row-gap: 2rem
    }
}

@media only screen and (max-width:920px) {
    .user__profile {
        flex-direction: column;
    }
}

@media only screen and (max-width:800px) {
    .tool :is(.editor, .result) {
        width: 100% !important
    }

    #input_word_counter {
        position: absolute;
        left: 6px;
        top: 319px;
        width: 100%;
        background: white;
    }

    .editor,
    .upload-area {
        padding-bottom: 27px;
    }

    #result_word_counter {
        position: absolute;
        top: -110px;
        right: -1px;
        right: 0px;
        width: 100%;
        background: white;
    }

    #ouput_result_section {
        padding-bottom: 28px;
    }

    .action-btns .js-after-result-btns {
        width: 100%;
        padding: 5px 16px;
        border: none;
        position: relative;
    }

    .ouput_btn_container {
        width: 100%;
        /* margin-top: 10px; */
        justify-content: space-between;
    }

    div:has(>.animate_loader) {
        width: 0%;
        margin: 200px auto;
        height: 0px !important;
    }

    .animate_loader {
        left: 36%
    }

    .tool .result {
        display: none
    }

    .container {
        width: 95%;
        padding: 0
    }

    .section {
        padding: 10px 0
    }

    .features-row .feature-card {
        flex-direction: column
    }

    .tool-bg {
        background: unset;
        /* padding: 25px 0px */
        margin: 45px auto;
    }

    .logo-img {
        height: 23px;
        width: 170px;
    }

    .account__btn {
        padding: 8px 6px !important;
    }

    h2 {
        margin-top: 2rem
    }

    .blogs-row {
        grid-template-columns: repeat(2, 1fr)
    }

    .blogs-section {
        padding: 3rem 0
    }

    .header-right-nav {
        column-gap: .5rem
    }

    .action-btns {
        flex-direction: column;
        /* row-gap: 0.5rem */
    }

    .action-btns .js-before-result-btns {
        width: 100%;
        flex-direction: column
    }

    .action-btns .js-before-result-btns {
        padding: 5px 5px;
        /* margin-top: 27px; */
    }

    .word-counter-flex {
        justify-content: space-between !important;
        /* width: 100% !important */
    }

    .word-counter-flex-inner {
        flex-direction: row !important;
        justify-content: center !important;
    }

    .word-count-type {
        margin-left: 6px !important
    }

    .word-count-circle {
        display: none
    }

    .rewrite-btn,
    .tool-btn {
        width: 100% !important;
        margin: 10px 0;
        font-size: 16px;
    }

    #humanizar-text {
        font-size: 16px !important;
    }

    .js-after-result-btns .tooltip {
        background: transparent !important
    }

    .tool-section {
        margin-top: -14px !important;
        padding: 0px !important;
        padding-bottom: 20px !important
    }

    .js-split-flex.active .result {
        border-left: 0px !important
    }

    .navbar.desktop {
        /* flex-direction: column */
        display: none;
    }



    .mobile-nav-dropdown {
        position: relative;
        /* right: 0; */
        /* left: 0; */
        top: 10px;
        background-color: #fff;
        display: none;
        z-index: 10000;
    }

    .mobile-nav-dropdown ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
        color: #000;
        padding: 5px;
        overflow: auto;
        border-radius: 5px;
        border: 1px solid #0000001A;
    }

    .mobile-nav-dropdown ul li {
        padding: 5px;
    }

    .pricing__info {
        flex-direction: column
    }

    .pricing__info>div {
        width: 100%;
        min-width: auto !important;
    }


    .pricing__plans__list {
        justify-content: center;
        gap: 10px;
        margin-top: 20px !important
    }

    /* .pricing__plans__list>div {
        border: 1px solid var(--yellow) !important;
        border-radius: 15px;
        padding: 5px
    } */

    .pricing__plans__list>div h2 {
        margin-top: 0px !important
    }

    .mobile-menu-trigger {
        display: block
    }

    /* .navbar .logo {
        position: absolute;
        left: 0px;
         top: 20px
    } */
    .navbar.mobile {
        display: flex;
        position: relative;
        align-items: start;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }

    .pricing-btn {
        min-width: 85px !important;
    }

    .nabar .header-right-nav {
        position: relative;
        background: #fff;
        right: 0;
        left: 0;
        flex-direction: column;
        gap: 20px;
        z-index: 1000;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
        width: 100%;
        height: 0px !important;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        margin-top: 60px
    }

    .header-right-nav.active {
        height: 215px !important;
        display: flex;
        opacity: 1;
        border: 1px solid #f3f3f3;
        border-radius: 10px;
    }

    header {
        padding: 5px 0 10px 0
    }

    h1 {
        font-size: var(--font-size-h2) !important
    }

    h2 {
        font-size: var(--font-size-h3) !important
    }

    h3 {
        font-size: 22px !important
    }

    p {
        font-size: 16px !important
    }

    .login__popup__detail {
        display: none !important
    }

    .profile__subscription>div>div>*:nth-child(1),
    .profile__detail>div>div>*:nth-child(1) {
        min-width: auto !important;
        width: fit-content !important
    }

    .profile__subscription>div>div,
    .profile__detail>div>div {
        gap: 8px;
        flex-direction: column !important
    }

    .profile__detail>div>div>*:nth-child(1) {
        font-weight: 600
    }

    .profile__detail .premium__btn {
        margin-top: 10px !important
    }

    .user__profile {
        flex-direction: column
    }

    /* .profile__sidebar {
        padding: 20px 0px !important;
        border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        flex-direction: row !important;
        border-right: none !important */
    /* } */

    .profile__sidebar>div {
        gap: 5px !important
    }

    .user__profile {
        border-top: 0px !important
    }

    .profile__udpate>button {
        margin-top: -48px !important
    }

    /* .tool-header {
        flex-direction: column
    } */

    .tool-div {
        flex-direction: column;
        gap: .725rem
    }

    .tool-div :is(.editor, .result) {
        min-height: 300px
    }

    .tool-div .editor {
        display: flex;
        flex-direction: column
    }

    .tool-div .editor :is(textarea) {
        flex: 1
    }

    .tool .result>div {
        max-height: 300px;
    }

    .feedback-thanks,
    .feedback-form {
        left: -80px;
    }

    .result-type img {
        height: 20px;
        width: 20px;
    }

    .result-type-container .result-type {
        font-size: 12px !important;
        padding: 4px 4px !important;
        align-items: center;
    }

    .result-type-container {
        padding: 2px;
    }

    .tool .split-screen {
        padding: 5px;
    }

    .choice__mobile__holder {
        max-width: 100% !important;
    }

    div:has(>.tool-output:not([style="display: none"])) {
        padding: 20px 10px !important;
    }
}

@media only screen and (max-width:699px) {
    .pricing__plans__types {
        display: none !important
    }

}

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

    .features-row,
    .how_our_tool_work {
        column-gap: 2rem
    }

    .how-it-works .faqs {
        max-width: 90%
    }

    .bg__left,
    .bg__right {
        display: none;
    }

    .faqs .faq .ques {
        max-width: 90%
    }

    .main-blog-row {
        flex-direction: column;
        row-gap: 2rem
    }

    .mode__tool__tip {
        right: auto !important;
        left: auto !important;
        align-items: end;
        position: relative !important
    }

    .mode__tool__tip span {
        display: none !important
    }

    dialog[open] {
        top: 32%;
        left: 8%;
    }

    .popup_container {
        width: 96%;
        flex-direction: column;
    }

    .popup_image_section {
        width: 100%;
        border-radius: 15px 15px 0px 0px;
        clip-path: none;
    }

    .popup_text_section {
        width: 100%;
        padding: 20px 20px;
    }

    .close_popup_btn {
        top: -215px;
    }

    .plan__card {
        flex-direction: column;
        gap: 5px;
    }

    .tab-label img {
        display: none;
    }

    .profile-details-header {
        padding: 10px;
    }

    .profile-details-header .tabs {
        gap: 5px;
    }

    .tab-label {
        gap: 4px;
    }


    .contact-card {
        padding: 1rem;
    }

    .premium_popup_container {
        width: 98%;
        gap: 15px;
        padding: 14px 14px 20px 14px;
    }

    .plans_btn {
        gap: 5px;
        flex: 1;
        min-width: 150px;
    }

    .plans_btn_container {
        flex-wrap: wrap;
    }

    .price_text {
        font-size: 12px !important;
    }

    .profile_info_section {
        padding: 0px 6px;
    }

    .navbar {
        padding: 0rem;
        max-width: 100%;
    }

    .logo-big {
        margin-top: 4px !important;
    }

    .tool .actions {
        padding: 10px 5px
    }

    .tooltip:hover .tooltiptext {
        visibility: hidden;
        opacity: 0;
        background-color: var(--dark)
    }
}

@media only screen and (max-width:426px) {
    .container {
        width: 100%;
        padding: 10px;
    }

    .h2::before {
        left: 42%;
    }

    .card .card-title,
    .how_our_tool_work .card-desc {
        text-align: center;
    }

    .choice-row {
        flex-direction: column;
        row-gap: 1rem
    }

    .how_our_tool_work,
    .features-row {
        grid-template-columns: 1fr
    }



    .step-visual {
        text-align: center
    }

    .faqs .faq.active::before {
        display: none;
    }

    .feature-card {
        text-align: center
    }

    .footer-row {
        grid-template-columns: 1fr;
        row-gap: 1rem;
        padding: 10px;
    }

    .footer__copyright {
        gap: 10px;
        text-align: center;
        justify-content: center;
    }

    .footer__copyright>div:nth-child(2) {
        justify-content: center;
        gap: 20px;
    }

    .how-it-works .faqs {
        max-width: 100%;
        /* padding: 15px; */
    }

    .download-options {
        right: -25px;
    }

    .how-it-works .faqs {
        border: none;
    }

    .faqs .faq::before {
        display: none;
    }

    .blogs-row {
        grid-template-columns: repeat(1, 1fr)
    }

    /* .tool-header {
        flex-direction: column
    } */

    .tool-div {
        flex-direction: column;
        gap: .725rem
    }

    .tool-div :is(.editor, .result) {
        min-height: 300px
    }

    .tool-div .editor {
        display: flex;
        flex-direction: column
    }

    .tool-div .editor :is(textarea) {
        flex: 1
    }

    header {
        padding: 5px 0 10px 0
    }

    .toggle__Modes p {
        /* width: 40px; */
        font-size: 14px !important;
    }

    .choice__mobile__holder {
        top: 0px !important
    }

    .animate_loader {
        left: 26% !important
    }

    .login__wrapper {
        align-items: start;
        padding-top: 0px;

    }

    .login__card {
        min-height: 620px;
        width: 96%;
        max-width: 1000px;
    }

    .login__form>div {
        width: 95%;

    }

    .plans_btn {
        flex: 1;
    }


    .plans_btn {
        /* width: 100%; */
    }

    .plans_btn_container {
        flex-wrap: wrap;
        gap: 5px;
    }


    .title_name {
        margin-bottom: 5px;
    }

    .plan_price {
        font-size: 22px;
    }

    .plans_img {
        height: 20px;
        width: 20px;
    }

    .profile__update__wrapper>div label,
    .profile__update__wrapper>div input {
        width: 100%;
    }

    .profile__update__wrapper>div {
        flex-direction: column;
    }

    .pass-hide-show {
        top: 31px !important;
        right: 13px;
    }
}

@media only screen and (max-width:340px) {
    .bg__left {
        left: auto
    }
}

.container p,
.container ol li {
    line-height: 1.5;
}

.delete-icon-button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.js-clear {
    cursor: pointer;
}