:root {
    --text-opaque: #828282;
    --text-dim: #4f4f4f;
    --text-color: #000000;
    --accent-color: #56CCF2;
    --accent-light-color: #86C32A99;
    --accent-shadow-color: #86C32A99;
    --background-hover: hsla(0, 0%, 100%, 0.1);
    --home-color: #f1f1f1c;
    --flatbox-color: #23262a;
    --workspace-color: #171719;
    --menu-color: #202225;
    --panel-color: #f1f1f1;
    --title-color: #24262b;
    --component-border: #424549;
    --component-dim: hsla(0, 0%, 100%, 0.06);
    --component-shade: rgba(0, 0, 0, 0.1);
    --component-color: #34363c;
    --component-highlight: #424549;
    --slider-color: #494b50;
    --normal-opacity: 0.6;
    --hover-opacity: 1;
    --accent-negative: #51555a;
    --splitter-size: 8px;
    --splitter-small-size: 4px;
    --scrollbar-color: #ffffff;
    --scrollbar-color-hover: #ffffff30
}


body {
    background-color: var(--home-color);
    color: var(--text-color);
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100svh;
    /* added to enhance seo  */
    font-display: swap;
}

a {
    text-decoration: none;
}

section,
.row,
.row>*,
.col {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 300px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-border-width: var(--bs-border-width);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
    --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto;
}

.form-control:focus {
    box-shadow: none !important;
}

.bg-body-tertiary {
    background: #FFF !important;
    border-bottom: 0.2px solid #ececec;
}

.nav-link {
    font-family: 'Poppins';
    color: var(--text-dim) !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.4px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.pp-16 {
    font-family: 'Poppins';
    color: var(--text-opaque) !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.p-18 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.25px;
    color: var(--text-opaque);
}

.tp-l {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.4px;
    color: #333333;
}

.tp-li {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.4px;
    color: #333333;
}

.tp-r {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.4px;
    color: #333333;
}

.navbar-nav .nav-link.active {
    font-weight: 600;
    text-decoration: underline;
}

.navbar-nav .nav-link:hover {
    text-decoration: underline;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;700&family=Open+Sans:wght@400;600;800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,700&display=swap');

:root {
    --text-opaque: #828282;
    --text-dim: #4f4f4f;
    --text-color: #000000;
    --accent-color: #56CCF2;
    --accent-light-color: #86C32A99;
    --accent-shadow-color: #86C32A99;
    --background-hover: hsla(0, 0%, 100%, 0.1);
    --home-color: #f1f1f1c;
    --flatbox-color: #23262a;
    --workspace-color: #171719;
    --menu-color: #202225;
    --panel-color: #f1f1f1;
    --title-color: #24262b;
    --component-border: #424549;
    --component-dim: hsla(0, 0%, 100%, 0.06);
    --component-shade: rgba(0, 0, 0, 0.1);
    --component-color: #34363c;
    --component-highlight: #424549;
    --slider-color: #494b50;
    --normal-opacity: 0.6;
    --hover-opacity: 1;
    --accent-negative: #51555a;
    --splitter-size: 8px;
    --splitter-small-size: 4px;
    --scrollbar-color: #ffffff;
    --scrollbar-color-hover: #ffffff30
}


body {
    background-color: var(--home-color);
    color: var(--text-color);
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100svh;
}

a {
    text-decoration: none;
}


.navbar-brand {
    font-family: 'inter';
    font-weight: 400;
    font-size: 24px;
    line-height: 29.05px;
    opacity: 1;
}

.navbar-brand:hover {
    opacity: 0.7;
}

.input-textarea {
    resize: none !important;
    border-radius: 6px;
    padding: 10px;
    outline: 0;
    border: none;
    background-color: #fff;
    font-family: 'poppins';
    font-style: normal;
    font-size: 14px !important;
    line-height: 21px;
    letter-spacing: 0.4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.input-textarea::-webkit-scrollbar {
    display: none;
}

.navigationbar {
    position: relative;
    top: 0;
    left: 0;
}

/* signup user dropdown  */
.profile-side {
    position: relative;
}

.title-bar .profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.profile-avatar img {
    width: 50px;
    cursor: pointer;
}

.title-bar .profile-icon {
    padding: 5px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
}

.profile-dropdown {
    position: absolute;
    width: 140px;
    right: 15px;
    top: 40px;
    padding: 5px 5px;
    background-color: #fff;
    border-radius: 6px;
    margin-top: 5px;
    transition: all 0.15s;
    transform: scale(0);
    transform-origin: top right;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.profile-dropdown.show {
    transform: scale(1);
}

.profile-dropdown .dropdown-list {
    list-style: none;
    color: var(--accent-negative);
}

.dropdown-list li {
    color: var(--accent-negative);
    padding: 8px 20px;
    cursor: pointer;
}

.dropdown-list li.username {
    background-color: var(--accent-color);
    font-family: 'Poppins';
    color: #fff;
}

.dropdown-list li:hover {
    background-color: var(--panel-color);
    border-radius: 5px;
}

button.logout {
    outline: none;
    border: none;
    color: inherit;
    background: inherit;
    width: 100%;
    text-align: left;
}

.getstart {
    border: 0.5px solid var(--accent-color);
    border-radius: 21px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 21px;
    letter-spacing: 0.4px;
}

.getstart {
    font-style: normal;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 21px;
    letter-spacing: 0.4px;
    padding: 7px 21px !important;
}

#webTitle {
    font-family: 'Poppins';
    font-weight: bold;
}

.getstart:hover {
    background: var(--accent-color);
    color: #fff !important;
}

.sidebar {
    background-color: #f1f1f1;
    background-color: #fff;
    min-height: 100%;
    height: auto;
}

.sidebar .row {
    background-color: #E5F5FA;
    min-height: unset;
    height: unset;
    padding: 14px;
    margin: 9px 5px;
    border-radius: 8px;
}

/* range slider */
.range-container {
    position: relative;
}


.range-container span {
    position: absolute;
    top: 10px;
    right: 0;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 23px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

input[type=range] {
    width: 88%;
    margin: 18px 0;
    border: none;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-color) 0%, #e0e0e0 0%, #e0e0e0 100%);
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
    height: 7px;
    border-radius: 4px;
}

input[type=range]+label {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.09);
    position: absolute;
    padding: 1px 6px;
    top: -10px;
    left: -10px;
    text-align: center;
    width: 36px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.5px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    margin-top: -4px;
}

/* bootstrat selected start  */
.bootstrap-select>.dropdown-toggle {
    background-color: #fff;
    border-radius: 21px;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    /* background-color: #fff; */
    background-color: #4bc9f3;
    color: #ffffff;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--accent-color);
}

/* bootstrat selected end  */

/* range slider */
#genbtn {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background-color: var(--accent-color);
    border-radius: 32px;
    height: 46px;
    margin-bottom: 10px;
}

/* texteditor start */
.richText .richText-toolbar ul li a {
    color: var(--text-dim);
}

.richText .richText-editor {
    min-height: 70svh;
    outline: 0;
    overflow-y: scroll;
    overflow-x: auto;
}

.richText .richText-help {
    display: none;
}

/* texteditor end */
/* keywords */
#keywordInput {
    padding: 8px 16px;
    border: none;
    border-radius: 31px;
    outline: 0;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.5px;

}

.tiles {
    display: flex;
    flex-wrap: wrap;
    max-height: 100px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tiles::-webkit-scrollbar {
    display: none;
}

.tile {
    background: rgba(171, 171, 171, 0.14);
    border-radius: 31px;
    display: inline-block;
}

.tile span {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.5px;
    color: #414141;
    padding-left: 10px;
}

.tile i {
    color: #A3ACB1;
}

/* keywords */
.copy-btn {
    border: none;
}

.copy-btn:hover {
    opacity: 0.8;
}

#img-content {
    padding-top: 180px;
}

#user-input {
    border: none;
    border-radius: 0;
    flex: 1 1;
    height: 100%;
    background-color: transparent !important;
    box-sizing: border-box;
    color: #777;
    display: inline-block;
    padding: 32px 18px;
}

#user-input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #a0a0a0;
    opacity: 1;
    /* Firefox */
}

#user-input:focus {
    box-shadow: none;
    border: 0;
    outline: none;
}

#user-input-grammer {
    border: none;
    border-radius: 0;
    flex: 1 1;
    height: 100%;
    background-color: transparent !important;
    box-sizing: border-box;
    color: #777;
    display: inline-block;
    padding: 8px 10px;
}

#user-input-grammer::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #a0a0a0;
    opacity: 1;
    /* Firefox */
}

#user-input-grammer:focus {
    box-shadow: none;
    border: 0;
    outline: none;
}

input:focus-visible {
    outline-offset: 0;
}


.text-light-gray {
    color: #777;
}

.text-dark-gray {
    color: #525252;
}

/* modal started */
.model {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: hidden;
    transform: scale(1.1);
    transition: opacity 0.25s 0s, transform 0.25s;
}

.model .image {
    width: 55%;
}

.model .content {
    width: 45%;
}

.model-content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 70svw;
    border-radius: 0.75rem;
    box-sizing: border-box;
    border: 0;
    background-color: #fff;
}

.model-content .card {
    display: flex;
    flex-direction: row;
}

.model-content img {
    width: 100%;
    height: 100%;
    border: 0;
    /* border-radius: 0.75rem; */
}

.show-model {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: all 0.3s linear 0.3s;
    z-index: 999;
}

.model-header {
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 10px;
}

.model-icons {
    height: 55px;
    width: 55px;
}

.icon-item-icon {
    font-size: 28px;
}

.tags {
    font-size: 14px;
    padding: 1px 6px;
    border: 1px solid #ebfaeb;
    border-radius: 4px;
}

.detail-description {
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px;
}

.body-larger.bold {
    margin-bottom: 12px;
    margin-top: 32px;
}

.prompt {
    background-color: #f7f7f8;
    border-radius: 4px;
    color: #202123;
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
    padding: 16px;
    white-space: pre-wrap;
}

.response-text {
    background-color: #ebfaeb;
    border-radius: 4px;
    color: #202123;
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
    padding: 16px;
    white-space: pre-wrap;
}


/* img response page  end */


/* grammer css  */
#grammer-content {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grammer-from {
    background-color: var(--home-color);
    box-shadow: 0 1px 3px 1px rgb(0 0 0 / 15%);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50svh;
}

.gramer-input {
    resize: none;
    min-height: 50svh;
    border-radius: 20px;
    margin-top: 10px;
}

#fixit {
    border: none;
    border-radius: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    font-weight: 500;
    font-size: 14px;
    padding: 9px;
    background: var(--accent-color);
    color: #ffffff;
}

#fixit:hover {
    opacity: 0.8;
}

/* question answer css  */

#q-content {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.q-from {
    display: flex;
    align-items: center;
    height: 44px;
    width: 100%;
    background: var(--home-color);
    border-radius: 6px;
    box-shadow: 0 2px 4px 0 rgb(0 0 82 / 15%);
    overflow: hidden;
    transition: box-shadow .2s ease-in-out;
    margin-top: 20px;
    z-index: 2;
}

.q-form-outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 19px;
    margin-top: 60px;
    margin-bottom: 10px;
}

#ask {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--panel-color);
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 29px;
    background: var(--accent-color);
    color: #fff;
}

.examples .row>* {
    margin-top: 0.50rem;
    padding-left: 0.5rem;
}

.example-cards {
    /* box-shadow: 0 1px 3px 1px rgb(0 0 0 / 15%); */
    border: 1px solid #d7d7d7;
    padding: 10px;
    height: 8rem;
    color: #777;
    transition: box-shadow .3s linear, background-color .3s linear;
    cursor: pointer;
}

.example-cards:hover {
    box-shadow: -1px 1px 4px rgb(212 212 212 / 32%), 1px 3px 6px rgb(214 211 211 / 19%);
}

.prompt {
    background-color: #f7f7f8;
    border-radius: 4px;
    color: #202123;
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
    padding: 16px;
    white-space: pre-wrap;
}

.response-text {
    background-color: #ebfaeb;
    border-radius: 4px;
    color: #202123;
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 16px;
    white-space: pre-wrap;
}

.exampleQ {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    /* number of lines to show */
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* translate page  */
.select-language {
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    box-shadow: 0px 1px 8px;
    z-index: 2;
    padding: 15px 10px;
    color: #777;
}

.lang {
    overflow-y: scroll;
    height: 50svh;
}

.lang::-webkit-scrollbar {
    display: none;
}

#languages {
    border: none;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    padding: 9px;
    background: var(--accent-color);
    color: #ffffff;
}

#languages:hover {
    opacity: 0.8;
}

.response-translation {
    background-color: #ebfaeb;
    color: #202123;
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 16px;
}

/* translate page  */
/* landing page start */
.info-model-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 28px 32px 0;
    min-width: 70vw;
    max-width: 70vw;
    max-height: 80vh;
    border-radius: 0.5rem;
    overflow-y: scroll;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.info-model-content::-webkit-scrollbar {
    display: none;
}

.hero {
    margin-top: 30px;
}

.hero-heading {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-size: 50px;
    line-height: 70px;
    letter-spacing: 3.2px;
    color: var(--text-dim);
}


@media screen and (min-width: 820px) {

    .hero-textarea {
        padding-top: 125px;
        position: relative;
    }

    .hero-textarea::before {
        content: "";
        background-image: url('../img/starts.png');
        position: absolute;
        z-index: -2;
        top: 58px;
        left: -2px;
        height: 63px;
        width: 67px;
    }
}

@media screen and (max-width: 500px) {
    .hero-row {
        margin-top: 125px;
    }
}

.hero-textarea {
    padding-top: 0;
    position: relative;
}

.hero-textarea::before {
    content: "";
    background-image: url('../img/starts.png');
    position: absolute;
    z-index: -2;
    top: -58px;
    left: -2px;
    height: 63px;
    width: 67px;
}

.hero-textarea::after {
    content: "";
    background-image: url('../img/circls-square.png');
    position: absolute;
    z-index: -2;
    top: 78px;
    right: 2px;
    height: 81px;
    width: 81px;
}

.hero-imgarea {
    padding-top: 60px;
    position: relative;
}

.hero-img {
    width: 44svw;
    height: auto;
    position: relative;
}

.hero-imgarea::after {
    content: "";
    background-image: url('../img/green-circles-square.png');
    position: absolute;
    z-index: -2;
    bottom: 15px;
    right: -18px;
    height: 81px;
    width: 81px;
}


.hero-from {
    display: flex;
    align-items: center;
    height: 65px;
    width: 85%;
    background: var(--home-color);
    border-radius: 6px;
    box-shadow: -1px 1px 4px 0 rgb(0 0 82 / 15%);
    overflow: hidden;
    transition: box-shadow .2s ease-in-out;
    margin-top: 25px;
}

.hero-from:focus-within {
    box-shadow: 0 5px 9px 0 rgb(0 0 82 / 10%);
}

#find {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--panel-color);
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: 0.2px;
    color: #FFFFFF;
    padding: 25px 20px;
    background: var(--accent-color);
    color: #fff;
}

#find:hover {
    background: var(--accent-color);
}

.hero-tiles {
    display: flex;
    flex-wrap: wrap;
    max-height: 100px;
}

.hero-tile {
    background: rgba(182, 182, 182, 0.1);
    border-radius: 21px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.2px;
    color: #333333;
    padding: 8px 15px;
    cursor: pointer;
}

.feature-heading {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.2px;
    color: #333333;
}

.feature {
    position: relative;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    height: 250px;
    border: 0.2px solid #ebebeb;
}

.feature>a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 3;
}

.feature:hover {
    box-shadow: -1px 1px 4px rgb(212 212 212 / 32%), 1px 3px 6px rgb(214 211 211 / 19%);
}

.feature .icon i {
    font-size: 46px;
}

.blue-text {
    color: var(--accent-color);
}

.green-text {
    color: #44EB8B;
}

.orange-text {
    color: #FF993A;
}

.purple-text {
    color: #8D7AFF;
}

.pink-text {
    color: #FF8181;
}

.feature .heading {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.2px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.feature .description {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: #4F4F4F;
    margin-bottom: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.features .row>* {
    margin-top: 1rem !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.info-button {
    position: absolute;
    right: 0;
    top: 6px;
    display: inline;
    z-index: 10;
}

.info-btn:hover {
    color: rgb(11, 91, 238);
}

/* landing page end*/

/* img generation page start */
.imggen-heading {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 54px;
    letter-spacing: 2.5px;
    color: #333333;
    text-align: center;
}


.imggen-from {
    display: flex;
    align-items: center;
    height: 78px;
    width: 100%;
    background: #F9F9F9;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

#imggenerate {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--panel-color);
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 29px;
    background: var(--accent-color);
    color: #fff;
}

#imggenerate:hover {
    background: #6ed7fa;
}

#surprizebtn {
    border: none;
    border-radius: 6px;
    border-left: 1px solid var(--panel-color);
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 10px;
    background: var(--accent-color);
    color: #fff;
}

#surprizebtn:hover {
    background: #6ed7fa;
}

.upload {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.4px;
    color: #333333;
}

#uploadbtn {
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

#uploadbtn:hover {
    color: var(--accent-color);
}

.create-examples-grid {
    grid-gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.example-img {
    cursor: pointer;
}

.image-prompt-overlay-container {
    display: flex;
    position: relative;
}

.example-img img {
    border-radius: 6px;
    height: 100%;
    width: 100%;
}

.image-prompt-overlay {
    background: rgba(250, 250, 252, .95);
    color: #777;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    /* align-items: center; */
    left: 0;
    opacity: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    transition: opacity .2s ease-in-out;
    width: 100%;
}

.image-prompt-overlay h4 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.9px;
    color: #4F4F4F;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    margin: 0;
}

.image-prompt-overlay-container:hover .image-prompt-overlay {
    opacity: 1;
}

.trybtn {
    background: #FFFFFF;
    border: 0.5px solid #828282;
    border-radius: 31px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.4px;
    color: #333333;

}

.trybtn i {
    margin-left: 0.25rem;
    transition: 0.3s ease-in-out all;
}

.trybtn:hover {
    background: #FFFFFF;
    border: 0.5px solid #828282;
}

.trybtn:hover i {
    margin-left: 0.75rem;
}

.modelbtn {
    border-radius: 6px;
    border: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    background: var(--accent-color);
    color: #FFFFFF;
}

.modelbtn:hover {
    background: #6ed7fa;
    color: #FFFFFF;
}

.about-upload {
    position: relative;
}

.about-upload i {
    padding-left: 2px;
    cursor: pointer;
}

.about-upload p {
    position: absolute;
    background-color: #f1f1f1;
    bottom: 5px;
    right: 0;
    width: 165px;
    height: auto;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Poppins';
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.about-upload i:hover+.popup {
    opacity: 1;
}

/* img generation page end */
/* img generation result page start */
.clearbtn {
    border: none;
    background: #EDEDED;
    border-radius: 6px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.4px;
    color: #000000;
}

.clearbtn:hover {
    background: #EDEDED;
    box-shadow: 0px 1px 3px #bab8b8;
}

.generated-img {
    position: relative;
    border-radius: 6px;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.generated-img:hover {
    transform: scale(.95);
    cursor: pointer;
}

.generated-img:hover button {
    opacity: 1;
}

.generated-img img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}


.generated-img button {
    position: absolute;
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
    border: 0;
    border-radius: 50px;
    right: max(4%, 10px);
    top: max(4%, 10px);
    opacity: 0;
    transition: opacity .2s ease;
}

.dropdown-menu-img {
    background: #FFFFFF;
    border-radius: 4px;
    padding: 18px 14px;
    min-width: 9rem !important;
}

.dropdown-menu-img a {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.4px;
    color: #4F4F4F;
}

.dropdown-menu-img li {
    margin-bottom: 6px;
}

.dropdown-menu-img li:hover a {
    font-weight: 600;
    text-decoration: underline;
}

#outputimages>* {
    margin-top: 0.5rem !important;
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

#histry>* {
    margin-top: 0.5rem !important;
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

#histry img {
    width: 100%;
    height: 100%;
}

/* img generation result page end */
/* img generation single page start */
.savebtn-single {
    border-radius: 6px;
    border: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    background: var(--accent-color);
    color: #FFFFFF;
}

.savebtn-single:hover {
    background: #6ed7fa;
    color: #FFFFFF;
    box-shadow: 0px 1px 3px #bab8b8;
}

.singlepage {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.4px;
    padding: 10px 20px;
}

.single-img {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 20px;
}

.single-img img {
    width: 100%;
    height: auto;
}

.single-img-btn-div {
    position: absolute;
    top: 15px;
    right: 20px;
}

.single-img-btn {
    background: #FFFFFF;
    border-radius: 4px;
}

.single-img-btn:hover {
    background: #ffffffad;
}

#single {
    transition: display 0.5s ease-in-out;
}

/* img generation single page end */
/* featurs page start */
/* #feature-usersinput {
    resize: none;
    height: 30svh;
    border: none;
    box-shadow: -1px 1px 4px rgb(212 212 212 / 32%), 1px 3px 6px rgb(214 211 211 / 19%);
}

#feature-output {
    resize: none;
    height: 30svh;
    border: none;
    box-shadow: -1px 1px 4px rgb(212 212 212 / 32%), 1px 3px 6px rgb(214 211 211 / 19%);
}

#feature-output:focus,
#feature-usersinput:focus {
    box-shadow: -1px 1px 4px rgb(212 212 212), 1px 3px 6px rgb(214 211 211) !important;
} */

.in-out-headings {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.2px;
    color: #333333;
}

.dbtn {
    border: none;
    border-radius: 0;
    font-weight: 500;
    font-size: 14px;
    background: var(--accent-color);
    color: #ffffff;
    border-radius: 21px;
}

.dbtn:hover {
    opacity: 0.8;
    background: var(--accent-color);
}

/* featurs page end */
/* emailer page start */
.email-from {
    display: flex;
    align-items: center;
    height: 78px;
    width: 100%;
    background: #F9F9F9;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

#emailgenerate {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--panel-color);
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 29px;
    background: var(--accent-color);
    color: #fff;
}

#emailgenerate:hover {
    background: #6ed7fa;
}

/* emailer page end */
/* footer start  */
footer {
    border-top: none;
    margin-top: 15px;
}

footer .p {
    text-align: justify;

}

.txt-clr {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: #4F4F4F;
}

/* footer end  */
/* about us page start */
.aboutHeading {
    background-color: var(--accent-color);
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.aboutHeading .navigation a,
.aboutHeading .navigation {
    color: #fff;
}

.about-title {
    text-align: center;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 28px;
    letter-spacing: 0.2px;
    /* color: var(--text-color); */
    color: #fff;
}

#aboutapp img {
    border-radius: 10px;
}

.imageContainer {
    height: 500px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.about-app,
.about-company {
    padding: 10px;
}

.about-app h3 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.2px;
    color: var(--text-color);
}

.about-app p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: var(--text-dim);
    white-space: pre-line;
    text-align: justify;
}

#aboutcompany img {
    border-radius: 10px;
}

.about-company h3 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.2px;
    color: var(--text-color);
}

.about-company p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
    color: var(--text-dim);
    white-space: pre-line;
    text-align: justify;
}

/* about us page end */
/* emailer page start */
.custom-bg-secondary {
    background-color: var(--secondary-color);
}

.home {
    padding: 3rem 0;
}


.home .search-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-accent {
    background-color: var(--accent-color);
}

.btn-accent:hover {
    opacity: 0.8;
}

.home .searchbar {
    width: 75%;
}

/* .searchbar input {
    border-radius: 15px;
    padding: 8px 30px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
} */

.cards .card {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.cards .accordion-item {
    /* border: 2px solid var(--accent-color); */
    margin: 15px 0;
    border-radius: 8px;
    /* padding: 1px; */
}

.accordion-item .accordion-button {
    border-radius: 8px;
}

/* Image editor styling */
#editor {
    background: #ffff;
    width: 95%;
    position: relative;
    left: 3%;
    border-radius: 15px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.10);
}

#editor .title {
    color: var(--accent-color);
    font-family: 'Poppins';
    text-align: center;
}

/* Image editor styling end*/


/* emailer page end */
/* media Query  */
@media screen and (max-width:540px) {
    nav .getstart {
        width: 32%;
    }

    .model-content .card {
        display: flex;
        flex-direction: column;
    }

    .model-content .image {
        width: 100%;
        border: 0;
        /* border-radius: 0.75rem; */
    }

    .model-content .content {
        width: 100%;
    }

    .model-content {
        min-width: 80vw;
        max-width: 80vw;
    }

    .info-model-content {
        min-width: 80vw;
        max-width: 80vw;
    }

    .imggen-from {
        height: 60px;
    }

    .email-from {
        height: 60px;
    }

    #aboutcompany {
        display: flex;
        flex-direction: column-reverse;
    }

    .imageContainer {
        height: 400px;
        border-radius: 12px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
    }
}

@media screen and (max-width: 767px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-grid .example-img {
        grid-column: auto / span 1 !important;
        grid-row: auto /span 1 !important;
    }

    .overlay {
        padding: 10px;
    }

    .overlay h4 {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        /* number of lines to show */
        line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 18px;
        line-height: 1.3em;
    }

    .hero::after {
        display: none;
    }
}

@media screen and (min-width: 767px) and (max-width: 992px) {
    .hero-img {
        width: 52svw;
        height: auto;
    }
}



@media screen and (min-width:767px) {
    .create-examples-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .example-img.large {
        grid-column: auto/span 2;
        grid-row: auto/span 2;
    }

    /* ai content  */
}

@media screen and (max-width:767px) {
    .sidebar {
        background-color: #fff;
        min-height: unset;
        height: unset;
    }

    .sidebar .row {
        background-color: #E5F5FA;
        min-height: unset;
        height: unset;
        padding: 14px;
        margin: 9px 5px;
        border-radius: 8px;
    }
}

/* for instructions  */
.custom-bg-secondary-1 {
    background-color: #f7f7f8;
}

.custom-bg-secondary-2 {
    background-color: #ebfaeb;
}

#input,
#response {
    white-space: pre-wrap;
}

/* prompt section  */
.prompt-card {
    width: 456px;
}

.view-more {
    border: 0.2px dashed #ebebeb;
    border-radius: 10px;
}

.view-more .plus {
    border-radius: 50%;
    padding: 25px;
    border: 0.2px solid #ebebeb;
}

@media screen and (max-width: 680px) {
    .prompt-card {
        width: 372px;
    }
}

.viewMoreBtn {
    color: var(--accent-color);
    font-size: 17px;
    transition: all 0.2s;
}

.viewMoreBtn:hover {
    text-decoration: underline;
}

/* all prompts page  */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar .promptTitle {
    margin: 0;
}

.topbar .searchContainer {
    display: flex;
    align-items: center;
    height: 56px;
    width: 28%;
    background: #F9F9F9;
    border-radius: 8px;
    overflow: hidden;
}

.topbar .search {
    border: none;
    border-radius: 0;
    flex: 1 1;
    height: 100%;
    background-color: transparent !important;
    box-sizing: border-box;
    color: #777;
    display: inline-block;
    padding: 32px 18px;
}

.topbar .searchPromptBtn {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--panel-color);
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 18px;
    background: var(--accent-color);
    color: #fff;
}

.icons {
    position: absolute;
    bottom: 0;
    width: 90%;
}

.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buttons .empty-col {
    width: 126px;
}

@media screen and (max-width: 620px) {
    .topbar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .topbar .searchContainer {
        width: 100%;
        margin-top: 15px;
    }

    .topbar .searchPromptBtn {
        padding: 28px;
    }

    .buttons .empty-col {
        display: none;
    }
}

.buttons button {
    background-color: var(--accent-color);
    border: none;
    outline: none;
    padding: 8px 13px;
    color: #fff;
    font-size: 17px;

}

.buttons button:hover {
    background-color: #36b7e2;
}

.buttons button.prevbtn {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #fff;
}

.buttons button.nextbtn {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}



/* AVATAR DIALOG  */

.profile-image {
    display: block;
    margin: 20px auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--background-color);
    /* border: 1px solid var(--background-color-2); */
    position: relative;
}

.profile-image .profileAvatarInHero {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
}

.profile-image i {
    position: absolute;
    top: 0;
    right: 0px;
    padding: 7px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: #fff;
    cursor: pointer;

}

.profile-image .avatarDialog {
    transform: scale(0);
    transform-origin: top right;
    transition: all 0.2s;
    position: absolute;
    top: 55px;
    right: 0;
    padding: 8px;
    display: grid;
    width: 380px;
    /* border: solid red; */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    grid-template-columns: repeat(auto-fill, 115px);
    justify-content: center;
    gap: 5px;
    z-index: 10;
}

.avatarDialog .avatar {
    margin-top: 10px;
    width: 80px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
}

.avatarDialog .avatar:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.profile-image .avatarDialog.showDialog {
    transform: scale(1);
}

/* upload loader  */
.upload-loader-icon {
    display: none;
}

.upload-loader.show .upload-loader-icon {
    display: block;
}

.upload-loader.show {
    background-color: rgba(104, 103, 103, 0.425);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
}

/* CHAT ICON  */
.chaticon {
    display: inline;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    cursor: pointer;
}

.chaticon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 20;
    /* width: 85px; */
    /* height: 85px; */
    padding: 5px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.chaticon i {
    font-size: 26px;
    color: var(--white-color);
    z-index: 21;
}

.chatdialog {
    position: fixed;
    width: 350px;
    height: 478px;
    overflow-y: hidden;
    bottom: -500px;
    right: 58px;
    z-index: 20;
    padding: 18px;
    background-color: #fbfcf6;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    border: 1px solid var(--accent-negative);
}

.chatdialog.show {
    bottom: 154px;
    z-index: 1100;
}

.chatdialog form {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-bottom: 16px;
    width: 93%;
}

.chatdialog textarea {
    font-size: 12px;
}

.chatdialog .split {
    display: flex;
    align-items: center;
    gap: 0 15px;
}

.chatdialog i:not(.copyResponse) {
    font-size: 18px;
    padding: 10px;
    background-color: var(--accent-color);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
}

.chatdialog .chatsection {
    position: relative;
    height: 82%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.chatdialog .chatsection .default-response {
    padding: 8px;
    font-size: 12px;
    background-color: rgb(228, 250, 243);
    border-radius: 8px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    text-align: left;
    margin-right: auto;
    position: relative;
    padding: 8px 18px 16px 8px;
}

.chatdialog .chatsection .user-response {
    padding: 8px;
    font-size: 12px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    text-align: right;
    margin-left: auto;

}

.copyResponse {
    position: absolute;
    bottom: 3px;
    right: 5px;
    cursor: pointer;
    color: #ccc;
}


/* loader  */
.lds-ellipsis {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: 0 auto;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ccc;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@media screen and (max-width: 650px) {
    .chaticon {
        bottom: 10px;
        right: 10px;
    }

    .chatdialog {
        right: 10px;
    }

    .chatdialog.show {
        bottom: 115px;
    }
}