html[lang="en"] {
    box-sizing: border-box;
}

.text {
        color: #E7F2E4;
        font-family: "Noto Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
        font-variation-settings: "wdth" 100;
    }

a[type="button"] {
    text-decoration: none;
}

input[type='submit']:hover, a.whatsapp:hover {
    background: #27548A;
}

a[type="button"].whatsapp {
    background: #1a8754;
}

p.error {
    color: red;
}

p.success {
    color: #81E7AF;
}

div.testimony.hidden {
    opacity: 0.5;
}

a.home-templates, a.about-templates, a.themewagon-link {
    color: #FF90BB;
    text-decoration: none;
}

a.more-testimonies {
    color: #FF90BB;
}

div.video-holder {
    width: 100vw;
    display: flex;
    justify-content: center;
}

span.free {
    color: #16C47F;
}

div.upload-house:hover, div.upload-home:hover {
    /* border-color: #F2F2E4; */
    border-style: dotted;
}

input.upload-picture, input.upload-photo {
    display: none;
}

p.file-name, p.file-title {
    text-align: center;
    word-break: break-word;
    font-size: 1.9vw;
}

p.item-flash {
    text-align: center;
    color: #FF90BB;
}

p.store-flash {
    text-align: center;
    color: #81E7AF;
}

a.item-information {
    display: none;
}

div.store-item {
    cursor: pointer;
}

div.item-button.hidden {
    display: none;
}

div.quantity-buttons.hidden {
    display: none;
}

p, a {
    font-weight: 500;
}

@media (orientation: portrait) {
    .landscape-only {
        display: none;
    }

    div.showcase {
        display: grid;
    }

    div.loading-overlay {
        grid-area: 1/ 1/ 2/ 2;
        width: 100vw;
        height: 100vh;
        position: fixed;
        /* background: rgb(0, 0, 0); */
        background: rgba(0, 0, 0, 0.5);
        /* z-index: 1; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div.the-content {
        grid-area: 1/ 1/ 2/ 2;
        z-index: 1;
    }

    @keyframes roll {
        0% {
            transform: rotate(0deg);
        }

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

    div.loader {
        border: 1vw solid transparent;
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        border-top: 1vw solid #E7F2E4;
        animation-name: roll;
        animation-timing-function: ease-in;
        animation-iteration-count: infinite;
        animation-duration: 0.5s;
    }

    webbuild-container {
        margin: 0;
        background: skyblue; /* #2b3035; */
    }

    div.webbuild-container {
        display: grid;
        width: 100vw;
        height: 100vh;
        min-width: 100vw;
        min-height: 100vh;
        grid-template: 1fr 1fr; 1fr;
        background: skyblue;
        position: relative;
        z-index: -2;
        gap: 5vh;
    }

    div.grid-item-1 {
        height: 100%;
    }

    body {
            background: #2b3035;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: -4;
        }

    div.navigation-container {
        position: fixed;
        top: 0;
        background: #2b3035;
        min-width: 100vw;
        display: flex;
        flex-direction: column;
        height: auto;
        /* padding-right: ; */
        z-index: 2;
    }

    a.brand {
        flex: 1;
        display: flex;
        padding: 2.6vw 0vh;
    }

    svg.logo {
        width: 7.46vw;
        height: 7.46vw;
        padding-left: 3.5vw;
        color: #E7F2E4;
        flex: 1;
        flex-grow: 0;
        min-height: 7.46vw;
        min-width: 7.46vw;

    }

    p.brand-text {
        flex: 1;
        padding: 0;
        margin: 0;
        font-size: 6.25vw;
        white-space: pre;
        flex-grow: 0;
        font-family: "Dancing Script", cursive;
    }

    div.links-container {
        /* flex: 1; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: blueviolet;
    }

    a.home {
        flex: 1;
        flex-grow: 0;
    }

    a.about {
        flex: 1;
        flex-grow: 0;
    }

    a.designs {
        flex: 1;
        flex-grow: 0;
    }

    a.testimonials {
        flex: 1;
        flex-grow: 0;
    }

    a.contact {
        flex: 1;
        flex-grow: 0;
    }

    a.login {
        flex: 1;
        flex-grow: 0;
    }

    a.account {
        flex: 1;
    }

    /* a.settings {
        flex: 1;
    } */

    a.logout {
        flex: 1;
    }

    a.nav-link {
        padding: 2.1vh 3.5vw;
        font-size: 3.5vw;
        background: #2b3035;
        color: #E7F2E4;
        border-top: 0.1vw solid #E7F2E4;
        width: 93vw;
    }

    div.hero-prompt {
        display: flex;
        flex-direction: column;
        /* min-height: 90vh; */
        padding: 0vh 20vw;
        font-size: 3vw;
        /* margin-top: 20vw; */
        height: 100vh;
        justify-content: center;
        align-items: center;
    }

    .hero-body {
        text-align: center;
        margin-bottom: 6.2vw;
    }

    .hero-title {
        /* margin-bottom: 0vw; */
        /* font-size: 4.6vw; */
    }

    .hero-comment {
        font-size: 3.4vw;
        margin-top: 0vw;
    }

    .hero-content {
        margin-bottom: 1vh;
    }

    div.hero-actions {
        display: flex;
        justify-content: center;
        margin-top: 0vh;
        gap: 1vw;
    }

    .hero-button {
        margin-top: 3.6vw;
        border-radius: 2vw;
        padding: 2.8vw 7vw;
        background: #1f2328;
        font-size: 3.1vw;
    }

    a.whatsapp {
        background: #0065F8;
        color: #E7F2E4;
    }

    div.about-content {
        display: flex;
        flex-direction: column;
        min-height: 90vh;
        font-size: 4vw;
        margin-top: 65vw;
        /* justify-content: center; */
        /* align-items: center;
        min-width: 100vw; */
    }

    div.about-text {
        padding-left: 10vw;
        padding-right: 10vw;
        padding-bottom: 1vh;
        width: 80vw;
        text-align: center;
    }

    a.about-link {
        /* text-decoration: none; */
        color: #FF90BB; /* #71C0BB; */
    }

    a.home-link {
        color: #FF90BB;
        font-size: 3.1vw;
        /* font-weight: bold; */
        /* margin-top: 4vw; */
    }

    div.about-button-container {
        display: flex;
        width: 100vw;
        /* padding-left: 3.5vw; */
        margin-bottom: 2vh;
        justify-content: center;
    }

    a.about-button {
        border-radius: 1vw;
        padding: 3vh 6vw;
    }


    div.contact-content {
        font-size: 4vw;
        margin-top: 22vw;
        min-height: 90vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

    .contact-text {
        /* padding-left: 3.5vw; */
    }

    h2.contact-header {
        /* margin-bottom: 0vh; */
        margin-top: 40vw;
    }

    p.contact-body {
        margin-top: 2vh;
        margin-bottom: 0;
    }

    a.contact-button {
        border-radius: 1vw;
        padding: 1.75vh 7.5vw;
        /* max-width: 20vw; */
        /* margin-left: 3.5vw; */
        margin-top: 7vw;
    }

    div.testimonies-card {
        display: flex;
        justify-content: center;
    }

    div.testimonials-content {
        font-size: 4vw;
        display: flex;
        flex-direction: column;
        padding-top: 4vh;
        width: 78.1vw;
        min-height: 90vh;
    }

    .testimonials-text {
        text-align: center;
    }

    h2.testimonials-header {
        margin-bottom: 0vw;
        text-align: center;
    }

    div.invite-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p.testimonials-body {
        margin: 0vw;
        margin-top: 20vw;
        text-align: center;
        width: 50vw;
    }

    div.testimonials-link {
        display: flex;
        justify-content: center;
    }

    a.testimonials-button {
        border-radius: 1vw;
        padding: 1.75vh 7.5vw;
        max-width: 28vw;
        margin-top: 4vw;
        margin-bottom: 6vw;
    }

    div.footer {
        background: #2b3035;
        display: flex;
        justify-content: space-between;
        /* height: 8vh; */
        align-items: center;
        max-width: 100vw;
    }

    div.footer * {
        color: #E7F2E4
    }

    a.github {
        font-size: 2.5vw;
        margin-left: 3.5vw;
        text-decoration: none;
    }

    div.brand {
        display: flex;
    }

    svg.footer-logo {
        width: 5.72vw;
        height: 5.72vw;
        min-width: 5.72vw;
        min-height: 5.72vw;
        margin: 0vw;
    }

    p.footer-brand-text {
        font-size: 4.8vw;
        margin: 0vh 0vw;
        padding: 0vw;
        white-space: pre;
        font-family: "Dancing Script", cursive;
    }

    a.whats-app {
        margin-right: 3.5vw;
        font-size: 2.5vw;
        text-align: end;
        text-decoration: none;
    }

    svg.github {
        width: 2.5vw;
        height: 2.5vw;
    }

    div.webbuild-container {
        display: grid;
        width: 100vw;
        height: 100vh;
        min-width: 100vw;
        min-height: 100vh;
        grid-template: 1fr 1fr; 1fr;
        background: #2b3035;
        position: relative;
        z-index: -2;
    }

    /* img {
        position: absolute;
        z-index: -1;
    } */

    div.grid-item-1 {
        margin: 0vw;
    }

    div.grid-item-2 {
        display: flex;
        flex-direction: column;
        /* height: 100%; */
        justify-content: flex-end;
        background: #2b3035;
        max-width: 100vw;
    }

    input.field{
        background: transparent;
        border: 1px solid #757575;
        color: #EFEEEA;
        border-radius: 1vw;
        outline: none;
        width: 40vw;
        padding: 2vw 2.5vw;
        font-size: 2.8vw;
    }

    input.login-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        font-size: 2.6vw;
        margin-top: 2vh;
        cursor: pointer;
    }

    input::placeholder {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 2.6vw;
    }

    input:-webkit-autofill { 
        -webkit-text-fill-color: #EFEEEA !important; 
        transition: background-color 9999s 9999s; /* Delays bg-color flash */
        caret-color: #EFEEEA;
    }

    input:focus {
        color: #EFEEEA;
        font-size: 2.8vw;
    }

    div.login-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* margin-top: 26vw; */
        min-height: 100vh;
        /* margin-bottom: 53vh; */
    }

    div.login-form {
        padding: 2.1vh 3.5vw;
        border: 1px solid #757575;
        border-radius: 2vw;
    }

    p.login-label {
        font-size: 3vw;
    }

    p.signup-prompt {
        font-size: 2.5vw;
        /* padding-left: 2.5vw; */
    }

    a.login-signup, a.signup-login, a.signup-ppolicy {
        text-decoration: none;
        color: #FF90BB;
    }

    input.signup-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        font-size: 2.6vw;
        margin-top: 2vh;
    }

    div.signup-card {
        display: flex;
        justify-content: center;
        margin-bottom: 45vh;
        margin-top: 6vw;
    }


    label[for="first_name"], label[for="last_name"], label[for="email"], label[for="password"], label[for="second_password"] {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 3vw;
    }

    p.login-prompt {
        font-size: 2.2vw;
    }

    input.signup-field {
        margin: 1vh 0vw;
    }

    div.signup-form {
        padding: 2.4vh 4vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    p.signup-instruction {
        color: red;
        margin-top: 0;
        font-size: 2.6vw;;
    }

    p.login-flash {
        color: #FF90BB; 
        margin-top: 1vh; 
        /* padding-left: 2.5vw; */
        font-size: 2.4vw;
    }

    p.signup-flash {
        color: #FF90BB; 
        margin-top: 1vh;
        font-size: 2.4vw;
    }

    div.signup-password, div.signup-second-password, div.login-password, div.reset-password, div.reset-second-password {
        display:grid;
        width: 31vw;
        grid-template-columns: 37.5vw 7.5vw;
    }

    input.signup-password, input.signup-second-password, input.login-password, input.reset-password, input.reset-second-password {
        grid-area: 1/ 1/ 2/ 3;
    }

    button.signup-toggle, button.signup-second-toggle, button.login-toggle, button.reset-toggle, button.reset-second-toggle {
        border: none;
        background: transparent;
        font-size: 3vw;
        grid-area: 1/ 2/ 2/ 3;
        width: 7.5vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg.password-toggle {
        width: 3vw;
        height: 3vw;
    }

    a.testimonials-prompt {
        text-decoration: none;
        color:#FF90BB;
    }

    div.user-page {
        display: flex;
        flex-direction: column;
    }

    div.user-nav {
        display: flex;
        flex-direction: column;
    } 

    a.user-link {
        width: 93vw;
        padding: 2.5vh 3.5vw;
        border-top: 0.1vw solid #E7F2E4;
        font-size: 3.5vw;
    }

    svg.user-svg {
        display: inline;
        height: 3vw;
        width: 3vw;
    }

    p.nav-text {
        white-space: pre;
        display: inline;
    }

    h2.user-greeting {
        margin-bottom: 6vw;
        text-align: center;
        margin-top: 6vw;
        font-size: 3.2vw;       
    }

    div.add-container {
        display: flex;
        justify-content: center;
    }

    a.testimony-button {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
        /* margin-left: 3.5vw; */
    }

    a.mony-button {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        width: 36vw;
        height: 9.5vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg.testify-svg {
        display: inline;
        width: 3vw;
        height: 3vw;
    }

    p.testimony-prompt {
        display: inline;
        white-space: pre;
    }

    h3.testimonies-heading {
        text-align: center;
        margin-top: 8vw;
        margin-bottom: 1vw;
        font-size: 3.2vw;
    }

    div.testimony-holder {
        display: flex;
        justify-content: center;
    }

    div.testimony-unit{
        padding: 4.5vw 4.5vw;
        border: 0.4vw solid rgba(231, 242, 228, 0.7);
        border-radius: 4vw;
        margin: 2.625vw 3.5vw;
        width: 67vw;
    }

    h3.testimony-heading {
        font-size: 3vw;
    }

    p.testimony-data {
        font-size: 2.8vw;
    }

    p.note-content {
        margin-bottom: 5vw;
    }

    h3.date-time {
        margin-top:2vw;
        font-size: 3vw;
    }

    div.testimony-change {
        display: flex;
        margin-top: 3.5vw;
    }

    div.edit-container {
        display: flex;
    }

    a.edit-button {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.edit-svg {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.edit-prompt {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    div.delete-container {
        display: flex;
    }

    a.delete-button {
        background: #dc3545;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
        margin-left: 2vw;
    }

    svg.delete-svg {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.delete-prompt {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    h2.add-title {
        text-align: center;
    }

    input.add-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        font-size: 2.6vw;
        margin-top: 2vh;
    }

    div.add-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    label[for="website"], label[for="testimony"], label[for="picture"], label[for="name"], label[for="unique_name"], label[for="price"], label[for="description"] {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 3vw;
    }

    input.add-field {
        margin-top: 2vw;
        margin-bottom: 4vw;
    }

    div.add-form {
        padding: 2.4vh 4vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    p.add-instruction {
        color: red;
        margin-top: 0;
        font-size: 2.6vw;
    }

    textarea {
        font-family: "Noto Sans", sans-serif;
        background: transparent;
        border: 1px solid #757575;
        color: #EFEEEA;
        border-radius: 1vw;
        width: 40vw;
        height: 30vh;
        padding: 2vw 2.5vw;
        font-size: 2.8vw;
        resize: none;
        margin-top: 2vw;
        margin-bottom: 4vw;
    }

    textarea::placeholder{
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 2.6vw;
        opacity: 0.5;
    }

    textarea:focus {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 2.8vw;
        outline:none;
    }

    input::placeholder {
        opacity: 0.5;
    }

    p.note-data {
        word-break: break-word;
        font-size: 3vw;
    }

    h3.delete-question {
        text-align: center;
        font-size: 3.2vw;
    }

    p.delete-question {
        text-align: center;
        word-break: break-word;
    }

    div.delete-house {
        display: flex;
        justify-content: center;
        margin-bottom: 2vh;
    }

    div.delete-card {
        padding: 4vw 3vw;
        border: 3.75px solid rgba(231, 242, 228, 0.7);
        border-radius: 4vw;
        margin: 3.5vh 3.5vw;
        width: 66vw;
    }

    div.delete-options {
        display: flex;
    }

    div.cancel-delete {
        display: flex;
    }

    a.cancel-anchor {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.cancel-icon {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.cancel-instruction {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    div.delete-delete {
        display: flex;
    }

    a.delete-anchor {
        background: #dc3545;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
        margin-left: 2vw;
    }

    svg.delete-icon {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.delete-instruction {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    div.picture-container {
        display: flex;
        justify-content: center;
    }

    a.picture-button {
        background: transparent;
        border-radius: 2vw;
        border: 0.2vw solid #E7F2E4;
        width: 35.6vw;
        height: 9.1vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg.picture-svg {
        display: inline;
        width: 3vw;
        height: 3vw;
    }

    p.picture-prompt {
        display: inline;
        white-space: pre;
    }

    div.picture-testimony {
        display: flex;
        width: 100vw;
        justify-content: center;
    }

    div.projects-grid {
        width: 65vw;
        display: grid;
        grid-template-columns: 30vw 30vw;
        gap: 5vw;
    }

    div.projects-grid {
        width:  76vw;
        display: grid;
        grid-template-columns: 36vw 36vw;
        gap: 4vw;
    }

    a.account-project {
        text-align: center;
        font-size: 3vw;
    }

    div.picture-holder {
        display: flex;
        justify-content: center;
        margin-top: 2vh;
        height: 50vw;
    }

    div.picture-placeholder {
        border: 1.5vw solid #E7F2E4;
        width: 50vw;
        height: 50vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 60px;
    }

    svg.icon-placeholder {
        width: 25vw;
        height: 25vw;
    }

    div.picture-options {
        display: flex;
        justify-content: center;
        margin-top: 4vh;
    }

    a.upload-button {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.upload-svg {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.upload-prompt {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    form.upload-form {
        /* margin-left: 3.5vw; */
        margin-bottom: 4vw;
    }

    input.upload-picture {
        cursor: pointer;
        margin-bottom: 2vh;
    }

    input.upload-button {
        cursor: pointer;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        font-size: 3vw;
        background: #0065F8;
        color: #E7F2E4;
    }

    input.submit-picture {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }
    
    p.upload-flash {
        color: #FF90BB;
        margin-top: 0;
        font-size: 2.6vw;
        text-align: center;
    }

    img.profile-picture {
        width: 50vw;
        height: 50vw;
        object-fit: cover;
        object-position: center;
        border-radius: 60px;
    }

    div.new-picture {
        display: flex;
    }

    a.update-picture {
        background: #0065F8;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.picture-change {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.change-picture {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    div.delete-picture {
        display: flex;
    }

    a.delete-photo {
        background: #dc3545;
        border-radius: 2vw;
        border: none;
        padding: 1.5vh 3.6vw;
        margin-left: 2vw;
    }

    svg.delete-pic {
        display: inline;
        width: 2.5vw;
        height: 2.5vw;
    }

    p.pic-delete {
        display: inline;
        white-space: pre;
        font-size: 3vw;
    }

    div.delete-confirm {
        display: flex;
    }

    div.delete-home {
        display: flex;
        justify-content: center;
        margin-bottom: 40vh;
    }
    
    h3.delete-pix {
        margin-top: 5vh;
    }

    img.account-picture {
        width: 2.8vw;
        height: 2.8vw;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        display: inline;
        position: static;
        border: 0.1vw solid #E7F2E4;
    }

    h2.picture-greeting {
        text-align: center;
        font-size: 3.2vw;
    }

    div.testimony {
        text-align: center;
        margin: 8vw 0vw;
        padding: 12vw 9vw;
        border: 0.05vw solid rgba(231, 242, 228, 0.7);
        border-radius: 2vw;
        width: 60vw;
    }

    p.testimony-date {
        margin-bottom: 0vw;
        font-size: 3vw;
    }

    img.testimony-image {
        object-fit: cover;
        object-position: center;
        position: static;
        width: 14rem;
        height: 14rem;
        border-radius: 50%;
        /* border: 2px solid #E7F2E4; */
    }

    svg.placeholder-svg {
        width: 14rem;
        height: 14rem;
        color: #E7F2E4;
        filter: brightness(0.67);
    }

    div.comment-placeholder {
        width: 14rem;
        height: 14rem;
        border: 0.42vw solid #E7F2E4;
        border-radius: 50%;
    }

    div.verify-holder {
        display: flex;
        justify-content: center;
    }

    p.verify-instruction {
        max-width: 40vw;
        font-size: 2.5vw;
        text-align: center;
        margin-top: 36vw;
    }

    div.upload-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h2.upload-instruction {
        /* margin-left: 3.5vw; */
        margin-top: 4vh;
        font-size: 2.5vw;
    }

    p.upload-instruction {
        /* margin-left: 3.5vw; */
        font-size: 2.5vw;
        margin-top: 0vw;
    }

    div.head-holder {
        display: flex;
    }

    button.menu {
        margin-right: 3.5vw;
        background: #2b3035;
        font-size: 3.5vw;
        border: none;
    }

    div.user-body {
        min-height: 110vh;
        margin-top: 20vw;
    }

    div.privacy-house {
        max-width: 65vw;
        margin-left: 3.5vw;
        margin-top: 22vw;
        min-height: 100vh;
    }

    input[type="checkbox"] {
        display: inline;
        margin-top: 2vw;
    }

    p.privacy-text {
        white-space: pre;
        display: inline;
        font-size: 2.2vw;
    }

    a.privacy-link {
        color: #FF90BB;
        text-decoration: none;
    }

    p.testi-signup {
        width: 50vw;
    }

    p.verify-flash {
        color: #81E7AF;
        /* margin-top: 20vw; */
        margin-bottom: 4vw;
        font-size: 2.4vw;
        text-align: center;
    }

    div.verify-card {
       display: flex;
       justify-content: center;
       margin-top: 6vw;
       margin-bottom: 90vh;
    }

    div.verify-form {
        padding: 2.5vw 2.5vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    form.verify-house {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    input.verify-input {
        width: 20vw;
        /* text-align: center; */
        -moz-appearance: textfield;
    }

    input.amount-input {
        text-align: center;
    }

    input.verify-input::-webkit-inner-spin-button, input.verify-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    p.preparation-prompt {
        width: 60vw;
        font-size: 3vw;
    }

    a.forgot-password {
        font-size: 2.5vw;
    }

    div.email-card {
        display: flex;
        justify-content: center;
        margin-bottom: 70vh;
        margin-top: 24vw;
    }

    div.email-form {
        padding: 2.4vh 4vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    form.email-house {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
    }

    input.new-password {
        /* text-align: center; */
        width: 40vw;
    }

    a.resend-email {
        text-align: center;
        opacity: 0.62;
        margin-top: 1vw;
    }

    a.resend-password {
        text-align: center;
        opacity: 0.62;
        margin-top: 1vw;
    }

    input.your-email {
        text-align: center;
    }

    div.admin-content {
        min-height: 100vh;
        margin-left: 3.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a.show-button {
        text-align: center;
        background: #0065F8;
    }

    a.hide-button {
        text-align: center;
        background: #dc3545;
    }

    img.testimony-picture {
        object-fit: cover;
        object-position: center;
        position: static;
        width: 7rem;
        height: 7rem;
        border-radius: 50%;
        /* border: 2px solid #E7F2E4; */
    }

    svg.holder-svg {
        width: 7rem;
        height: 7rem;
        color: #E7F2E4;
        filter: brightness(0.67);
    }

    svg.home-whatsapp {
        width: 2.2856vw;
        height: 2.2856vw;
    }

    span.home-chat {
        white-space: pre;
    }

    svg.about-whatsapp {
        width: 3vw;
        height: 3vw;
    }

    div.designs-house {
        margin-left: 3.5vw;
        margin-top: 20vw;
        width: 96.5vw;
        font-size: 3.2vw;
        text-align: left;
    }

    a.hosting-link {
        color: #FF90BB;
        text-decoration: none;
    }

    div.design {
        width: 93vw;
        border-bottom: 0.2025vw solid #E7F2E4;
        cursor: pointer;
    }

    div.design-images {
        display: flex;
        gap: 7.2vw;
        margin-top: 2vw;
        /* justify-content: center; */
    }

    img.bordered {
        border: 0.1vw solid #E7F2E4;
    }

    img.image-lanscape {
        height: 22vw;
    }

    img.image-portrait {
        height: 22vw;
    }

    div.pc {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div.mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p.view {
        text-align: center;
    }

    li.image-bullet {
        list-style-type: none; 
    }

    div.payment-designs, div.application-designs, div.business-designs, div.portfolio-designs, div.blog-designs, div.personal-designs, div.social-designs, div.businesss-designs {
        margin: 0vw;
        margin-left: 2vw;
        margin-right: 3vw;
    }

    p.project-detail {
        padding-right: 3vw;
    }

    div.payment-designs.hidden, div.application-designs.hidden, div.business-designs.hidden, div.portfolio-designs.hidden, div.blog-designs.hidden, div.personal-designs.hidden, div.social-designs.hidden, div.businesss-designs.hidden {
        display: none;
    }

    ul.designs-list {
        margin-bottom: 10vw;
        list-style-type:none;
    }

    p.themewagon-prompt {
        margin-bottom: 6.5vw;;
    }

    svg.designs-whatsapp {
        width: 2.35vw;
        height: 2.35vw;
    }

    a.designs-button {
        margin-top: 2vw;
        border-radius: 1vw;
        padding: 1.5vh 3vw;
    }

    span.must-read {
        color: #FF90BB;
        margin: 0;
        white-space: pre;
        cursor: pointer;
    }

    span.touch-designs {
        color: #FF90BB;
        cursor: pointer;
    }

    div.home-testimonies {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* min-height: 70vh; */
        font-size: 3vw;
    }

    p.settings-email {
        padding-left: 2.5vw;
        font-size: 2.8vw;
    }

    video.video {
        /* border: 1px solid #E7F2E4; */
        border-radius: 2vw;
        width: 20vw;
    }

    div.footer-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p.location {
        font-size: 2.5vw;   
    }

    ul.features {
        margin-bottom: 5vw;
        list-style-type: disc;
    }

    li.uploader-instruction {
        color:#FF90BB;
        margin-bottom: 5vw;
    }

    li.uploadey-instruction {
        margin-top: 5vw;
    }

    div.upload-house {
        width: 40vw;
        height: 30vw;
        border-radius: 2vw;
        border: 0.6vw dashed rgba(231, 242, 228, 0.85);
        margin-bottom: 3.5vw;
        margin-top: 2.5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    svg.uploadey-svg {
        width: 8vw;
        height: 8vw;
    }

    /* div.store-holder {
        margin-top: 4vw;
    } */

    div.store-nav {
        width: 100vw;
        height: 16vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        background: #2b3035;
        border-top: 0.2vw solid #E7F2E4;
    }

    a.cart-holder {
        display: flex;
        /* justify-content: center; */
        /* flex-direction: column; */
        align-items: center;
        background: #2b3035;
        /* position: fixed; */
        bottom: 7.3vw;
        left: 47vw;
        z-index: 2;
        text-decoration: none;
    }

    svg.cart {
        width: 3vw;
        height: 3vw;
        /* margin-bottom: 2.8vw; */
    }

    p.cart {
        font-size: 3vw;
        padding-right: 1vw;
        white-space: pre;
        margin: 0;
    }

    div.item-count {
        border-radius: 50%;
        background: #0065F8;
        width: 5vw;
        height: 5vw;
        /* border: 0.4vw solid #E7F2E4; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.item-count {
        margin: 0;
        font-size: 2.75vw;
    }

    div.cart-background {
        width: 100vw;
        height: 16vw;
        background: #2b3035;
        position: fixed;
        bottom: 0;
        z-index: 1;
        border-top: 0.2vw solid #E7F2E4;
    }

    div.items-grid {
        margin: 6vw 7vw;
        display: grid;
        grid-template-columns: 40vw 40vw;
        gap: 6vw;
        /* display: none; */
        /* display: flex;
        justify-content: center; */
    }

    div.store-item {
        width: 40vw;
        height: 57vw;
        border: 0.2vw solid #E7F2E4;
        border-radius: 2vw;
    }

    img.item-image {
        object-fit: cover;
        width: 40vw;
        height: 30vw;
        border-top-left-radius: 2vw;
        border-top-right-radius: 2vw;
        /* opacity: 0.9; */
    }

    div.item-details {
        padding: 1.5vw 2vw;
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
        /* align-items: center; */
    }

    p.item-price {
        font-size: 4vw;
        margin: 0vw;
    }

    p.item-title {
        font-size: 2.5vw;
        margin: 0vw;
        /* text-align: center; */
    }

    div.item-button {
        display: flex;
        justify-content: center;
    }

    a.item-button {
        /* margin: 2vw 0vw; */
        font-size: 2.5vw;
        padding: 3vw 7vw;
        margin-top: 2vw;
        width: 36vw;
        /* background: #ffd814; */
        background: #0065F8;
        /* color: #0f1111; */
        color: #E7F2E4;
        /* border: 0.2vw solid #E7F2E4; */
        text-decoration: none;
    }

    svg.item-svg {
        width: 2.5vw;
        height: 2.5vw;
    }

    div.upload-home {
        height: 30vw;
        border-radius: 2vw;
        margin-bottom: 3.5vw;
        margin-top: 2.5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 43.8vw;
        border: 0.2vw dashed rgba(117, 117, 117, 1);
    }

    svg.uploadei-svg {
        width: 4vw;
        height: 4vw;
    }

    p.file-title {
        font-size: 2vw;
    }

    img.item {
        width: 45vw;
        /* height: 46vw; */
        object-fit: cover;
        border-radius: 2vw;
    }

    div.item-container {
        margin-top: 4vw;
        display: flex;
        width: 100vw;
        height: 67vh;
        justify-content: center;
        align-items: center;
    }

    div.item {
        margin-left: 3.5vw;
        margin-right: 3.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 4vw;
        width: 60vw;
    }

    div.item > * {
        margin: 1vw 0vw;
    }

    p.item-name {
        font-size: 2.75vw;
        text-align: center;
    }

    p.item-amount {
        font-size: 3vw;
        text-align: center;
    }

    p.item-description {
        font-size: 2.75vw;
        text-align: center;
    }

    a.add-item {
        margin: 0;
        font-size: 2.5vw;
    }

    a.add-item.hidden {
        display: none;
    }

    svg.add-item {
        width: 2vw;
        height: 2vw;
    }

    div.quantity-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 2.2vw;
    }

    a.toggle-quantity {
        padding: 0;
        width: 9vw;
        height: 9vw;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.item-quantity {
        font-size: 2.5vw;
        min-height: 4vw;
        display: flex;
        align-items: center;
        margin: 0;
        text-align: center;
    }

    svg.toggle-quantity {
        width: 3.5vw;
        height: 3.5vw;
    }

    div.cart-page {
        margin-top: 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 16vw;
    }

    div.total {
        width: 92vw;
        height: 7.2vw;
        border-radius: 1.25vw;
        border: 0.2vw solid #E7F2E4;
        padding: 0.2vw 2.2vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2vw;
    }

    p.total {
        font-size: 3vw;
    }

    a.checkout-button {
        padding-left: 14vw;
        padding-right: 14vw; 
        font-size: 2.5vw;
        position: fixed;
        bottom: 22vw;
        /* display: none; */
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
    }

    div.cart-item {
        width: 92vw;
        height: 39.4vw;
        border-radius: 1.75vw;
        border: 0.2vw solid #E7F2E4;
        margin-bottom: 2vw;
        padding: 0vw 2.2vw;
        display: flex;
        align-items: center;
    }

    div.item-grid {
        padding: 1vw;
        display: grid;
        /* display:none; */
        grid-template-columns: 26vw 52vw 14vw;
        grid-template-rows: 8vw 8vw 8vw 8vw;
    }

    div.product-image {
        grid-area: 1/ 1/ 4/ 2; 
        display: flex;
        justify-content: center;
    }

    img.product-image {
        border-radius: 2.75vw;
        width: 18vw;
        height: 21vw;
        object-fit: cover;
        padding-top: 1vw;
    }

    p.product-title {
        grid-area: 1/ 2/ 3/ 4; 
        margin-left: 2vw;
        /* margin-top: 0; */
        font-size: 2.8vw;
    }

    p.product-price {
        grid-area: 3/ 2/ 4/ 4; 
        margin-left: 2vw;
        margin-top: 0;
        font-size: 4.25vw;
    }

    div.product-toggle {
        grid-area: 4/ 1/ 5/ 2; 
        border: none;
    }

    div.product-link {
        grid-area: 4/ 2/ 5/ 3;
        height: 100%;
        display: flex;
        align-items: center;
    }

    a.product-link { 
        margin-left: 2vw;
        color:#FF90BB;
        font-size: 2.4vw;
    }

    div.amount-buttons {
        margin: 0;
        padding: 1vw;
    }
    
    a.toggle-amount {
        width: 6.75vw;
        height: 6.75vw;
        background: transparent;
        border: 0.2vw solid #E7F2E4;
        color: #E7F2E4;
    }

    svg.toggle-amount {
        width: 2.625vw;
        height: 2.625vw;
    }

    p.item-amount {
        font-size: 1.875;
    }

    div.empty-cart {
        width: 100vw;
        height: 67vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    div.empty-cart.hidden {
        display: none;
    }

    svg.empty-cart {
        width: 10vw;
        height: 10vw;
    }

    p.empty-cart {
        font-size: 3vw;
        font-weight: bold;
    }

    p.cart-empty {
        font-size: 2.5vw;
        margin: 0;
    }

    div.delete-item {
        grid-area: 4/ 3/ 5/ 4;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    a.delete-item {
        margin: 0;
        border-radius: 2vw;
        padding: 0;
        width: 6.75vw;
        height: 6.75vw;
        display: flex;
        justify-content: center;
        align-items: center;
        
        /* border: 0.4vw solid #FB4141;
        background: transparent;
        color: #FB4141;
        padding: 0;
        width: 6.05vw;
        height: 6.05vw; */
    }

    svg.delete-item {
        width: 2.625vw;
        height: 2.625vw;
    }

    div.count-buttons {
        width: 50vw;
        margin-top: 2.5vw;
    }

    a.toggle-count {
        width: 10vw;
        height: 10vw;
    }

    p.item-size {
        font-size: 2.5vw;
        min-height: 4vw;
        display: flex;
        align-items: center;
        margin: 0;
        text-align: center;
    }

    a.add-item {
        /* margin: 2vw 0vw; */
        padding: 3vw 7vw;
        margin-top: 2.5vw;
        width: 36vw;
        /* background: #ffd814; */
        background: #0065F8;
        /* color: #0f1111; */
        color: #E7F2E4;
        /* border: 0.2vw solid #E7F2E4; */
        text-decoration: none;
    }

    div.checkout-house {
        width: 100vw;
        height: 67vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #E7F2E4;
    }

    svg.checkout-svg {
        opacity: 0.9;
        width: 10vw;
        height: 10vw;
    }

    p.checkout-text {
        font-size: 3.25vw;
    }

    a.checkout-link {
        color: #FF90BB;
        font-size: 3.5vw;
    }

    div.orders {
        margin-top: 6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a.order {
        width: 92vw;
        height: 8.2vw;
        border-radius: 1.25vw;
        border: 0.2vw solid #E7F2E4;
        padding: 0.2vw 2.2vw;
        margin-bottom: 4vw;
        display: flex;
        align-items: center;
        background: rgba(43, 48, 54, 0.3); /* transparent layer */
        backdrop-filter: blur(6px);           /* blur the background */
        -webkit-backdrop-filter: blur(6px);   /* Safari support */
        font-size: 2.8vw;
        text-decoration: none;
        white-space: pre;
    }

    div.order-list {
        margin-top: 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 6vw;
    }

    div.item-frequency {
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    p.order-time {
        font-size: 3.5vw;
        text-align: center;
    }

    a.store-anchor {
        font-size: 3vw;
        /* position: fixed; */
        bottom: 7.3vw;
        left: 14.8vw;
        z-index: 2;
        text-decoration: none;
    }

    a.orders-anchor {
        font-size: 3vw;
        /* position: fixed; */
        bottom: 7.3vw;
        right: 15vw;
        z-index: 2;
        text-decoration: none;
    }

    div.no-orders {
        width: 100vw;
        height: 62vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.no-orders {
        font-size: 4vw;
    }

    h2.store-welcome {
        margin-top: 8vw;
        margin-bottom: 4vw;
        text-align: center;
        font-size: 3.75vw;
    }

    h3.store-heading {
        margin-bottom: 4vw;
        text-align: center;
        font-size: 3.25vw;
    }

    div.demo-prompt {
        width: 74vw;
        border-radius: 2.5vw;
        border: 0.2vw solid #E7F2E4;
        margin-top: 12vw;
        background: rgba(43, 48, 54, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 3.2vw;
        padding: 3.5vw;
    }

    div.message {
        width: 100vw;
        position: fixed;
        bottom: 18vw;
        display: flex;
        justify-content: center;
        gap: 2vw;
        z-index: 1;
    }

    textarea.message-box {
        padding: 2vw 5vw;
        width: 62vw;
        height: 6.5vw;
        margin: 0;
        margin-left: 6.95vw;
        /* margin-right: 6.95vw; #89918c;*/
        border-radius: 9999px;
        border: 0.3vw solid #E7F2E4;
        background: rgba(5, 4, 3, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 3.6vw;
    }

    textarea.message-box:focus {
        font-size: 3.6vw;
    }

    button.send-button {
        border: none;
        border-radius: 50%;
        width: 10.5vw;
        height: 10.5vw;
        margin: 0.55vw;
        margin-right: 7.5vw;
        background: #2b3035;
    }

    svg.send-svg {
        width: 4.5vw;
        height: 4.5vw;
        color: #E7F2E4;
    }

    svg.stop-svg {
        width: 11vw;
        height: 11vw;
        border-radius: 50%;
        background: #2b3035;
        color: #E7F2E4;
        margin: 0.55vw;
        margin-right: 7.5vw;
    }

    div.messages {
        margin-top: 20vw;
        margin-bottom: 20vw;
        color: #E7F2E4;
    }

    div.user-question {
        margin-left: 20vw;
        width: 72.6vw;
        margin-right: 3vw;
        display: flex;
        justify-content: flex-end;
    }

    div.user-message {
        padding: 2vw;
        width: fit-content;
        border-radius: 2.5vw;
        border: 0.2vw solid #E7F2E4;
        background: rgba(43, 48, 54, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    p.user-message {
        font-size: 3.2vw;
        margin: 0;
        line-height: 4.3vw;
    }

    div.assistant-message {
        margin: 6vw;
        margin-left: 5vw;
        width: 87vw;
        margin-right: 8vw;
    }

    p.assistant-message {
        font-size: 3.2vw;
        margin: 0;
        line-height: 4.3vw;
    }

    .assistant-message {
        font-size: 3.2vw;
        margin: 0;
        line-height: 4.3vw;
    }

    button.ai-menu {
        border: none;
        border-radius: 50%;
        width: 10.5vw;
        height: 10.5vw;
        background: #2b3035;
        position: fixed;
        top: 15.75vw;
        left: 3.5vw;
    }

    svg.ai-svg {
        width: 4.5vw;
        height: 4.5vw;
        color: #E7F2E4;
    }

    div.ai-menu {
        background: #2b3035;
        height: 70vh;
        padding-bottom: 30vh;
        z-index: 1;
        width: 66vw;
        padding-top: 13vw;
        position: fixed;
        top: 0;
        left: -66vw;
        overflow-y: auto;
    }

    div.ai-greeting {
        width: 100vw;
        height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h2.ai-greeting {
        font-weight: 500;
        font-size: 7vw;
    }

    @keyframes slideRight {
        0% {
            transform: translateX(-66vw);
        }

        100% {
            transform: translateX(0vw);
        }
    }

    div.ai-menu.slide-right {
        animation-name: slideRight;
        animation-duration: 0.33s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
    }

    @keyframes slideLeft {
        0% {
            transform: translateX(0vw);
        }

        100% {
            transform: translateX(-66vw);
        }
    }

    div.ai-menu.slide-left {
        animation-name: slideLeft;
        animation-duration: 0.33s;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
    }

    div.close-ai {
        width: 66vw;
        display: flex;
        justify-content: space-between;
        margin-top: 4vw;
    }

    svg.bot {
        width: 4.5vw;
        height: 4.5vw;
        color: #E7F2E4;
        padding: 1.65vw 3.5vw;
    }

    button.new-chat {
        background: transparent;
        /* padding: 1.65vw 3.5vw; */
        font-size: 3.2vw;
        border: none;
        color: #E7F2E4;
        display: flex;
        white-space: pre;
        height: 7.8vw;
        align-items: center;
        margin-left: 2.5vw;
    }

    svg.new-chat {
        width: 4.5vw;
        height: 4.5vw;
        color: #E7F2E4;
    }

    button.close-ai {
        border: none;
        background: transparent;
        padding: 1.65vw 3.5vw;
    }

    svg.close-ai {
        width: 4.5vw;
        height: 4.5vw;
        color: #E7F2E4;
    }

    div.chats-label {
        background: transparent;
        border: none;
        /* border-top: 0.2vw solid #E7F2E4; */
        padding: 2vw 3.5vw;
        width: 59vw;
        font-size: 2.9vw;
        color: #89918C;
        text-align: left;
        /* margin-top: 4vw; */
        /* border-top: 0.1vw solid #E7F2E4; */
    }

    button.old-chat {
        background: transparent;
        border: none;
        /* border-top: 0.2vw solid #E7F2E4; */
        padding: 2vw 3.5vw;
        width: 66vw;
        font-size: 3.2vw;
        color: #E7F2E4;
        text-align: left;
    }

    div.projects-holder {
        display: flex;
        gap: 2.5vw;
    }

    a.project-project {
        width: 41.6vw;
        text-decoration: none;
    }

    select.field {
        /* background: transparent;
        color: #E7F2E4; */
        border-radius: 5px;
        padding: 12px 4px;
        font-size: 2.8vw;
        margin-top: 1vh;
    }

}

@media (orientation: landscape) {
    .portrait-only {
        display: none;
    }

    body{
        margin: 0vw;
        background: #2b3035;
        padding-bottom: 0vw;
        width: 0vw;
        height: 0vh;
    }

    div.showcase {
        display: grid;
    }

    div.loading-overlay {
        grid-area: 1/ 1/ 2/ 2;
        width: 100vw;
        height: 100vh;
        position: fixed;
        /* background: rgb(0, 0, 0); */
        background: rgba(0, 0, 0, 0.5);
        /* z-index: 1; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div.the-content {
        grid-area: 1/ 1/ 2/ 2;
        z-index: 1;
    }

    @keyframes roll {
        0% {
            transform: rotate(0deg);
        }

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

    div.loader {
        border: 0.5vw solid transparent;
        width: 2vw;
        height: 2vw;
        border-radius: 50%;
        border-top: 0.5vw solid #E7F2E4;
        animation-name: roll;
        animation-timing-function: ease-in;
        animation-iteration-count: infinite;
        animation-duration: 0.5s;
    }

    div.navigation-container {
        position: fixed;
        top: 0;
        background: #2b3035;
        display: flex;
        width: 100vw;
        justify-content: space-between;
        gap: 36vw;
        height: auto;
        z-index: 2;
    }

    a.brand {
        flex: 1;
        font-size: 1.8vw;
        flex-basis: 20vw;
        display: flex;
        gap: 0vw;
        padding: 2vh 0vw;
        margin-left: 2vw;
    }

    svg.logo {
        height:3.15vw;
        padding: ;
        color: #E7F2E4;
        flex: 1;
        flex-grow: 0;
        min-width: 3.8vw;

    }

    p.brand-text {
        flex: 1;
        padding: 0;
        margin: 0;
        font-size: 2.7vw;
        white-space: pre;
        flex-grow: 0;
        font-family: "Dancing Script", cursive;
    }

    div.links-container {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        margin-right: 2vw;
        height: 3.8vw + 4vh;
        align-items: center;
    }

    a.home {
        flex: 1;
    }

    a.about {
        flex: 1;
    }

    a.designs {
        flex: 1;
    }

    a.testimonials {
        flex: 1;
    }

    a.contact {
        flex: 1;
    }

    a.login {
        flex: 1;
    }

    a.account {
        flex: 1;
    }

    a.logout {
        flex: 1;
    }

    a.nav-link {
        padding: 0 0.8vw;
        font-size: 1.35vw;
    }



    div.hero-prompt {
        display: flex;
        flex-direction: column;
        margin-top: 0vw;
        align-items: center;
        padding: 0vw 20vw;
        padding-bottom: 4vw;
        font-size: 2vw;
        margin-top: 2vw;
        min-width: 60vw;
        height: 100vh;
        justify-content: center;
    }

    .hero-body {
        text-align: center;
    }

    .hero-title {
        margin-bottom: 0vh;
    }

    .hero-content {
        margin-bottom: 3vh;
    }

    div.hero-actions {
        display: flex;
        margin-top: 0vh;
        gap: 1vw;
    }

    .hero-button {
        margin-top: 1.8vw;
        border-radius: 0.75vw;
        padding: 2.25vh 5.5vw;
        background: #1f2328;
    }

    a.email {
        border: 1px solid #E7F2E4;
        color: #E7F2E4;
    }

    a.whatsapp {
        background: #0065F8;
        color: #E7F2E4;
    }

    div.about-content {
        display: flex;
        flex-direction: column;
        /* min-width: 75vw; */
        min-height: 100vh;
        font-size: 1.75vw;
        padding-top: 15vw;
        box-sizing: border-box;
        padding-bottom: 18vw;
    }

    div.about-text {
        padding-left: 22vw;
        padding-right: 22vw;
        padding-bottom: 1vh;
        width: 56vw;
        text-align: center;
    }

    a.about-link {
        /* text-decoration: none; */
        color: #FF90BB; /* #71C0BB */
    }

    a.home-link {
        color: #FF90BB;
        margin-bottom: 2vw;
    }

    div.about-button-container {
        display: flex;
        width: 100vw;
        /* padding-left: 2vw; */
        justify-content: center;
    }

    a.about-button {
        border-radius: 1vw;
        padding: 3vh 6vw;
    }

    div.contact-content {
        font-size: 1.8vw;
        display: flex;
        flex-direction: column;
        width: 100vw;
        min-height: 100vh;
        padding-top: 10vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-text {
        /* padding-left: 2vw; */
    }

    h2.contact-header {
        /* margin-bottom: 0vh; */
        /* text-decoration: underline; */
        margin-top: 8vw;
    }

    p.contact-body {
        /* margin-top: 2vh; */
        margin: 1vw;
    }

    a.contact-button {
        border-radius: 1vw;
        padding: 2.5vh 0vw;
        width: 21vw;
        /* margin-left: 2vw; */
        text-align: center;
        margin-top: 2vw;
    }

    div.testimonies-card {
        display: flex;
        justify-content: center;
        width: 100vw;
    }

    div.testimonials-content {
        font-size: 1.8vw;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        width: 56.05vw;
    }

    .testimonials-text {
        text-align: center;
    }

    h2.testimonials-header {
        text-align: center;
        margin-bottom: 1vw;
    }

    div.invite-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p.testimonials-body {
        text-align: center;
        margin-top: 12vw;
        margin-bottom: 2vw;
        width: 35vw;
    }

    div.testimonials-link {
        display: flex;
        justify-content: center;
    }

    a.testimonials-button {
        border-radius: 1vw;
        padding: 2.5vh 0vw;
        width: 20vw;
        margin-bottom: 2vw;
        text-align: center;
    }

    div.footer {
        background: #2b3035;
        display: flex;
        justify-content: space-between;
        width: 100vw;
    }

    div.footer * {
        color: #E7F2E4
    }

    a.github {
        font-size: 1.25vw;
        margin-left: 2vw;
        max-width: 20vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 0;
        text-decoration: none;
    }

    div.brand {
        display: flex;
        max-width: 21vw;
    }

    svg.footer-logo {
        width: 2.86vw;
        height: 2.86vw;
        min-width: 2.86vw;
        min-height: 2.86vw;
        margin: 0vw;
    }

    p.footer-brand-text {
        font-size: 2.4vw;
        margin: 0vh 0vw;
        padding: 0vw;
        max-height: 3.5vw;
        white-space: pre;
        font-family: "Dancing Script", cursive;
    }

    a.whats-app {
        margin-right: 2vw;
        font-size: 1.25vw;
        min-width: 5vw;
        text-align: end;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-decoration: none;
    }

    svg.github {
        width: 1.25vw;
        height: 1.25vw;
    }

    input.field{
        background: transparent;
        border: 1px solid #757575;
        color: #EFEEEA;
        border-radius: 1vw;
        outline: none;
        width: 28.5vw;
        padding: 1vw 1.25vw;
        font-size: 1.4vw;
    }

    input.login-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 2.8vh 1.8vw;
        font-size: 1.4vw;
        margin-top: 2vh;
        margin-bottom: 3vh;
        cursor: pointer;
    }

    input::placeholder {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 1.3vw;
    }

    input:-webkit-autofill { 
        -webkit-text-fill-color: #EFEEEA !important; 
        transition: background-color 9999s 9999s; /* Delays bg-color flash */
        caret-color: #EFEEEA;
    }

    input:focus {
        color: #EFEEEA;
        font-size: 1.4vw;
    }

    div.login-card {
        display: flex;
        min-width: 100vw;
        min-height: 100vh;
        flex-direction: column;
        align-items: center;
        padding-top: 14vw;
        z-index: 1;
    }

    div.login-form {
        padding: 2.1vh 3.5vw;
        border: 1px solid #757575;
        border-radius: 2vw;
    }

    p.login-label {
        font-size: 1.5vw;
    }

    p.signup-prompt {
        font-size: 1.15vw;
        /* padding-left: 1.8vw; */
    }

    a.login-signup, a.signup-login, a.signup-ppolicy {
        text-decoration: none;
        color: #FF90BB;
    }

    input.signup-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 2.8vh 1.8vw;
        font-size: 1.4vw;
        margin-top: 2vh;
    }

    div.signup-card {
        display: flex;
        justify-content: center;
        z-index: 1;
        min-width: 100vw;
        min-height: 50vh;
        margin-bottom: 50vh;
        margin-top: 5vw;
    }


    label[for="first_name"], label[for="last_name"], label[for="email"], label[for="password"], label[for="second_password"] {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 1.5vw;
    }

    p.login-prompt {
        font-size: 1.15vw;
    }

    input.signup-field {
        margin: 1vh 0vw;
    }

    div.signup-form {
        padding: 2.5vw 2.5vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    p.signup-instruction {
        color: red;
        margin-top: 0;
        font-size: 1.3vw;;
    }

    p.login-flash {
        color: #FF90BB; 
        margin-top: 0vh; 
        /* padding-left: 1.8vw; */
        font-size: 1.2vw;
    }

    p.signup-flash {
        color: #FF90BB;
        margin-top: 0vh;
        font-size: 1.2vw;
    }

    div.signup-password, div.signup-second-password, div.login-password, div.reset-password, div.reset-second-password {
        display:grid;
        width: 31vw;
        grid-template-columns: 26vw 6vw;
    }

    input.signup-password, input.signup-second-password, input.login-password, input.reset-password, input.reset-second-password {
        grid-area: 1/ 1/ 2/ 3;
    }

    button.signup-toggle, button.signup-second-toggle, button.login-toggle, button.reset-toggle, button.reset-second-toggle {
        border: none;
        background: transparent;
        font-size: 1vw;
        grid-area: 1/ 2/ 2/ 3;
        width: 5vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg.password-toggle {
        width: 1.25vw;
        height: 1.25vw;
    }

    a.testimonials-prompt {
        text-decoration: none;
        color:#FF90BB;
    }

    div.user-page {
        display: flex;
    }

    div.user-nav {
        display: flex;
        flex-direction: column;
        z-index: 1;
        padding-top: 6vw;
    } 

    a.user-link {
        width: 15vw;
        border-top: 0.1vw solid #E7F2E4;
        padding: 0.3vw 2vw;
        font-size: 1.35vw;
    }

    svg.user-svg {
        display: inline;
    }

    p.nav-text {
        white-space: pre;
        display: inline;
    }

    h2.user-greeting {
        margin-bottom: 8vh;
        text-align: center;
        margin-top: 10vw;
    }
    
    div.add-container {
        display: flex;
        justify-content: center;
    }

    a.testimony-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1vh 2vw;
        margin-left: 2vw;
    }

    a.mony-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        width: 18vw;
        height: 4.75vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg.testify-svg {
        display: inline-block;
    }

    p.testimony-prompt {
        display: inline-block;
        white-space: pre;
    }
    
    h3.testimonies-heading {
        text-align: center;
        margin-top: 6vh;
        font-size: 1.6vw;
    }

    div.testimony-holder {
        display: flex;
        justify-content: center;
        margin-bottom: 2.5vh;
    }

    div.testimony-unit{
        padding: 3vw 3vw;
        border: 0.2vw solid rgba(231, 242, 228, 0.7);
        border-radius: 2vw;
        margin: 3.5vh 3.5vw;
        width: 50vw;
    }

    h3.testimony-heading {
        font-size: 1.5vw;
    }

    p.testimony-data {
        font-size: 1.4vw;
    }

    p.note-content {
        margin-bottom: 2.5vw;
        color: ;
    }

    h3.date-time {
        margin-top: 2vw;
    }

    div.testimony-change {
        display: flex;
    }

    div.edit-container {
        display: flex;
    }

    a.edit-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.edit-svg {
        display: inline;
    }

    p.edit-prompt {
        display: inline;
        white-space: pre;
    }

    div.delete-container {
        display: flex;
    }

    a.delete-button {
        background: #dc3545;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        margin-left: 2vw;
    }

    svg.delete-svg {
        display: inline;
    }

    p.delete-prompt {
        display: inline;
        white-space: pre;
    }

    h2.add-title {
        text-align: center;
        margin-top: 10vw;
    }

    input.add-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 2.6vh 2.2vw;
        font-size: 1.4vw;
        margin-top: 2vh;
        cursor: pointer;
    }

    div.add-card {
        display: flex;
        height: 103.33vw;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }


    label[for="website"], label[for="testimony"], label[for="picture"], label[for="name"], label[for="unique_name"], label[for="price"], label[for="description"] {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 1.5vw;
    }

    input.add-field {
        margin-top: 1vh;
        margin-bottom: 2vh;
        width: 21vw;
    }

    div.add-form {
        padding: 2.5vw 2.5vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    p.add-instruction {
        color: red;
        margin-top: 0;
        font-size: 1.3vw;;
    }

    textarea {
        font-family: "Noto Sans", sans-serif;
        background: transparent;
        border: 1px solid #757575;
        color: #EFEEEA;
        border-radius: 1vw;
        width: 21vw;
        height: 30vh;
        padding: 1vw 1.25vw;
        font-size: 1.4vw;
        resize: none;
        margin-top: 0.75vw;
        margin-bottom: 1.25vw;
    }

    textarea::placeholder{
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 1.4vw;
        opacity: 0.5;
    }

    textarea:focus {
        font-family: "Noto Sans", sans-serif;
        color: #EFEEEA;
        font-size: 1.4vw;
        outline:none;
    }

    input::placeholder {
        opacity: 0.5;
    }

    p.note-data {
        word-break: break-word;
    }

    h3.delete-question {
        text-align: center;
    }

    p.delete-question {
        text-align: center;
        word-break: break-word;
    }

    div.delete-house {
        display: flex;
        justify-content: center;
        margin-bottom: 2.5vh;
    }

    div.delete-card {
        padding: 4vh 3vw;
        border: 3.75px solid rgba(231, 242, 228, 0.7);
        border-radius: 2vw;
        margin: 3.5vh 3.5vw;
        width: 50vw;
    }

    div.delete-options {
        display: flex;
        padding-top: 1vh;
    }

    div.cancel-delete {
        display: flex;
    }

    a.cancel-anchor {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.cancel-icon {
        display: inline;
    }

    p.cancel-instruction {
        display: inline;
        white-space: pre;
    }

    div.delete-delete {
        display: flex;
    }

    a.delete-anchor {
        background: #dc3545;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        margin-left: 2vw;
    }

    svg.delete-icon {
        display: inline;
    }

    p.delete-instruction {
        display: inline;
        white-space: pre;
    }
    
    div.picture-container {
        display: flex;
        justify-content: center;
        margin-bottom: 4vh;
    }

    a.picture-button {
        background: transparent;
        border-radius: 1vw;
        border: 0.1vw solid #E7F2E4;
        width: 17.8vw;
        height: 4.55vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg.picture-svg {
        display: inline-block;
        width: 1.25vw;
        height: 1.25vw;
    }

    p.picture-prompt {
        display: inline-block;
        white-space: pre;
    }

    div.picture-testimony {
        display: flex;
        justify-content: center;
    }

    div.projects-grid {
        width:  56.4vw;
        display: grid;
        grid-template-columns: 18vw 18vw 18vw;
        gap: 1.2vw;
    }

    a.account-project {
        text-align: center;
        font-size: 1.5vw;
    }

    div.picture-holder {
        display: flex;
        justify-content: center;
        margin-top: 5vh;
    }

    div.picture-placeholder {
        border: 0.75vw solid #E7F2E4;
        width: 25vw;
        height: 25vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 60px;
    }

    svg.icon-placeholder {
        width: 12.5vw;
        height: 12.5vw;
    }

    div.picture-options {
        display: flex;
        justify-content: center;
        margin-top: 8vh;
    }

    a.upload-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1vh 2vw;
    }

    svg.upload-svg {
        display: inline-block;
    }

    p.upload-prompt {
        display: inline-block;
        white-space: pre;
    }

    form.upload-form {
        /* margin-left: 2vw; */
        margin-bottom: 1.6vw;
    }

    input.upload-picture {
        cursor: pointer;
        margin-bottom: 2vh;
    }

    input.upload-button {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 2.8vh 1.8vw;
        font-size: 1.4vw;
        color: #E7F2E4;
    }

    input.submit-picture {
        background: #0065F8;
        border-radius: 0.5vw;
        border: none;
        padding: 1vh 1.5vw;
    }



    p.upload-flash {
        color: #FF90BB;
        margin-top: 0;
        font-size: 1.3vw;
        text-align: center;
    }

    img.profile-picture {
        width: 25vw;
        height: 25vw;
        object-fit: cover;
        object-position: center;
        border-radius: 60px;
    }

    h3.delete-pix {
        margin-top: 6vh;
    }

    div.new-picture {
        display: flex;
    }

    a.update-picture {
        background: #0065F8;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
    }

    svg.picture-change {
        display: inline;
    }

    p.change-picture {
        display: inline;
        white-space: pre;
    }

    div.delete-picture {
        display: flex;
    }

    a.delete-photo {
        background: #dc3545;
        border-radius: 1vw;
        border: none;
        padding: 1.5vh 3.6vw;
        margin-left: 2vw;
    }

    svg.delete-pic {
        display: inline;
    }

    p.pic-delete {
        display: inline;
        white-space: pre;
    }

    div.delete-confirm {
        display: flex;
    }

    div.delete-home {
        display: flex;
        justify-content: center;
    }

    img.account-picture {
        width: 1.15vw;
        height: 1.15vw;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        border: 0.05vw solid #E7F2E4;
    }

    h2.picture-greeting {
        text-align: center;
    }

    div.testimony {
        margin-top: 2vw;
        margin-bottom: 4vw;
        text-align: center;
        padding: 4vh 3vw;
        border: 0.025vw solid rgba(231, 242, 228, 0.7);
        border-radius: 2vw;
        width: 50vw;
    }

    img.testimony-image {
        object-fit: cover;
        object-position: center;
        width: 10.5rem;
        height: 10.5rem;
        border-radius: 50%;
        /* border: 2px solid #E7F2E4; */
    }

    svg.placeholder-svg {
        width: 10.5rem;
        height: 10.5rem;
        color: #E7F2E4;
        filter: brightness(0.67);
    }

    a.sign-up.nav-link {
        text-wrap: nowrap;
    }

    div.verify-holder {
        display: flex;
        justify-content: center;
        min-width: 100vw;
    }

    p.verify-instruction {
        max-width: 28.5vw;
        text-align: center;
        margin-top: 15vw;
    }

    div.upload-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h2.upload-instruction {
        /* margin-left: 2vw; */
        margin-top: 8vh;
    }

    p.upload-instruction {
        /* margin-left: 2vw; */
        margin-top: 0vw;
    }

    button.menu {
        display: none;
    }

    div.head-holder {
        flex: 1;
        display: flex;
    }

    div.privacy-house {
        margin-left: 2vw;
        min-width: 45vw;
        margin-top: 10vw;
    }

    input[type="checkbox"] {
        display: inline;
        margin-top: 1vw;
    }

    p.privacy-text {
        white-space: pre;
        display: inline;
        font-size: 1.15vw;
    }

    a.privacy-link {
        color: #FF90BB;
        text-decoration: none;
    }

    p.testi-signup {
        width: 35vw;
        margin-bottom: 2vw;
    }

    p.verify-flash {
        color: #81E7AF;
        margin-top: 10vw;
        font-size: 1.2vw;
        text-align: center;
    }

    div.verify-card {
        width: 100vw;
       display: flex;
       justify-content: center;
       margin-top: 5vw;
       margin-bottom: 70vh;
    }

    div.verify-form {
        padding: 2.5vw 2.5vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    form.verify-house {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    input.verify-input {
        width: 12vw;
        /* text-align: center; */
        -moz-appearance: textfield;
    }

    input.amount-input {
        text-align: center;
    }

    input.verify-input::-webkit-inner-spin-button, input.verify-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    a.forgot-password {
        font-size: 1.15vw;
    }

    div.email-card {
        display: flex;
        justify-content: center;
        z-index: 1;
        min-width: 100vw;
        margin-bottom: 50vh;
        margin-top: 10vw;
    }

    div.email-form {
        padding: 2.5vw 2.5vw;
        border: 1px solid #757575;
        border-radius: 0.5vw;
    }

    form.email-house {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
    }

    input.new-password {
        /* text-align: center; */
        width: 28.5vw;
    }

    a.resend-email {
        text-align: center;
        opacity: 0.62;
        margin-top: 1vw;
    }

    a.resend-password {
        text-align: center;
        opacity: 0.62;
        margin-top: 1vw;
    }

    input.your-email {
        text-align: center;
    }

    div.admin-content {
        min-height: 100vh;
        margin-left: 2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a.show-button {
        text-align: center;
        background: #0065F8;
    }

    a.hide-button {
        text-align: center;
        background: #dc3545;
    }

    img.testimony-picture {
        object-fit: cover;
        object-position: center;
        width: 5.25rem;
        height: 5.25rem;
        border-radius: 50%;
        /* border: 2px solid #E7F2E4; */
    }

    svg.holder-svg {
        width: 5.25rem;
        height: 5.25rem;
        color: #E7F2E4;
        filter: brightness(0.67);
    }

    svg.home-whatsapp {
        width: 1.55vw;
        height: 1.55vw;
    }

    span.home-chat {
        white-space: pre;
    }

    svg.about-whatsapp {
        width: 1.3125vw;
        height: 1.3125vw;
    }

    div.designs-house {
        margin-left: 2vw;
        margin-top: 9vw;
        width: 98vw;
        margin-bottom: 18vw;
        font-size: 1.65vw;
        text-align: left;
    }

    div.designs-house ul {
        width: 55vw;
    }

    a.hosting-link {
        color: #FF90BB;
        text-decoration: none;
    }

    div.design {
        width: 96vw;
        border-bottom: 0.0675vw solid rgba(231, 242, 228, 0.7);
        cursor: pointer;
    }

    div.design-images {
        display: flex;
        gap: 26vw;
        margin-top: 2vw;
        /* justify-content: center; */
    }

    img.bordered {
        border: 0.033vw solid #E7F2E4;
    }

    img.image-lanscape {
        height: 15vw;
    }

    img.image-portrait {
        height: 15vw;
    }

    div.pc {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div.mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p.view {
        text-align: center;
    }

    li.image-bullet {
        list-style-type: none; 
    }

    /* div.payment-designs, div.application-designs, div.business-designs, div.portfolio-designs, div.blog-designs, div.personal-designs, div.social-designs {
        margin-left: 4vw;
    } */

    div.payment-designs.hidden, div.application-designs.hidden, div.business-designs.hidden, div.portfolio-designs.hidden, div.blog-designs.hidden, div.personal-designs.hidden, div.social-designs.hidden, div.businesss-designs.hidden {
        display: none;
    }

    

    ul.designs-list {
        margin-bottom: 4vw;
        list-style-type:none;
    }

    p.themewagon-prompt {
        margin-bottom: 3vw;
    }

    svg.designs-whatsapp {
        width: 0.92vw;
        height: 0.92vw;
    }

    a.designs-button {
        margin-top: 2vw;
        border-radius: 0.75vw;
        padding: 2.25vh 5.5vw;
    }

    span.designs-wa {
        font-size: 1.22vw;;
    }

    a.must-read {
        color: #FF90BB;
        margin: 0;
    }

    span.must-read {
        color: #FF90BB;
        margin: 0;
        white-space: pre;
        cursor: pointer;
    }

    span.touch-designs {
        color: #FF90BB;
        cursor: pointer;
    }

    div.home-testimonies {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* min-height: 100vh; */
        font-size: 2vw;
        margin-bottom: 4vw;
    }

    p.settings-email {
        padding-left: 1.25vw;
        font-size: 1.4vw;
    }

    video.video {
        /* border: 1px solid #E7F2E4; */
        border-radius: 2vw;
        width: 10vw;
    }

    div.footer-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    p.location {
        font-size: 1.25vw;
        margin-left: 2vw;  
    }

    

    ul.features {
        margin-bottom: 2vw;
        list-style-type: disc;
    }

    li.uploader-instruction {
        color:#FF90BB;
        margin-bottom: 2vw;
    }

    li.uploadey-instruction {
        margin-top: 2vw;
    }

    div.upload-house {
        width: 30vw;
        height: 15vw;
        border-radius: 1.4vw;
        border: 0.3vw dashed rgba(231, 242, 228, 0.85);
        margin-bottom: 2vw;
        margin-top: 1.25vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    svg.uploadey-svg {
        width: 4vw;
        height: 4vw;
    }

    div.store-holder {
        margin-top: 2vw;
    }

    div.store-nav {
        width: 81vw;
        height: 7.1vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        background: #2b3035;
        border-top: 0.1vw solid #E7F2E4;
    }

    a.cart-holder {
        display: flex;
        /* justify-content: center; */
        /* flex-direction: column; */
        align-items: center;
        background: #2b3035;
        /* position: fixed; */
        bottom: 0;
        left: 58vw;
        z-index: 1;
        text-decoration: none;
    }

    svg.cart {
        width: 1.5vw;
        height: 1.5vw;
    }

    p.cart {
        font-size: 1.5vw;
        padding-right: 0.5vw;
        white-space: pre;
        margin: 0;
    }

    div.item-count {
        border-radius: 50%;
        width: 2.5vw;
        height: 2.5vw;
        background: #0065F8;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.item-count {
        margin: 0;
        font-size: 1.375vw;
    }

    div.cart-background {
        width: 100vw;
        height: 7.1vw;
        background: #2b3035;
        position: fixed;
        bottom: 0;
        /* z-index: 1; */
        border-top: 0.1vw solid #E7F2E4;
    }

    div.items-grid {
        margin: 1vw 8.5vw;
        display: grid;
        grid-template-columns: 20vw 20vw 20vw;
        gap: 2vw;
        margin-bottom: 4vw;
        /* display: none; */
        /* display: flex;
        justify-content: center; */
    }

    div.store-item {
        width: 20vw;
        height: 28.5vw;
        border: 0.1vw solid #E7F2E4;
        border-radius: 1vw;
    }

    img.item-image {
        object-fit: cover;
        width: 20vw;
        height: 15vw;
        border-top-left-radius: 1vw;
        border-top-right-radius: 1vw;
        /* opacity: 0.9; */
    }

    div.item-details {
        padding: 0.75vw 1vw;
        display: flex;
        flex-direction: column;
        gap: 0.75vw;
        /* align-items: center; */
    }

    p.item-price {
        font-size: 2vw;
        margin: 0vw;
    }

    p.item-title {
        font-size: 1.125vw;
        margin: 0vw;
        /* text-align: center; */
    }

    div.item-button {
        display: flex;
        justify-content: center;
    }

    a.item-button {
        /* margin: 2vw 0vw; */
        font-size: 1.125vw;
        margin-left: 0vw;
        width: 18vw;
        /* background: #ffd814; */
        background: #0065F8;
        /* color: #0f1111; */
        color: #E7F2E4;
        /* border: 0.1vw solid #E7F2E4; */
    }

    svg.item-svg {
        width: 1.25vw;
        height: 1.25vw;
    }

    div.upload-home {
        height: 15vw;
        border-radius: 1.4vw;
        margin-bottom: 2vw;
        margin-top: 1.25vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 22.9vw;
        border: 0.1vw dashed rgba(117, 117, 117, 1);
    }

    svg.uploadei-svg {
        width: 2vw;
        height: 2vw;
    }

    p.file-title {
        font-size: 1vw;
    }

    img.item {
        width: 93vw;
        /* height: 46vw; */
        object-fit: cover;
        border-radius: 2vw;
    }

    img.item {
        width: 22.5vw;
        /* height: 46vw; */
        object-fit: cover;
        border-radius: 1vw;
    }

    div.item-container {
        margin-top: 2vw;
        display: flex;
        width: 81vw;
        justify-content: center;
        align-items: center;
        margin-bottom: 8vw;
    }

    div.item {
        margin-left: 1.75vw;
        margin-right: 1.75vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30vw;
    }

    div.item > * {
        margin: 0.5vw 0vw;
    }

    p.item-name {
        font-size: 1.375vw;
        text-align: center;
    }

    p.item-amount {
        font-size: 1.5vw;
        text-align: center;
    }

    p.item-description {
        font-size: 1.25vw;
        text-align: center;
    }

    a.add-item {
        margin: 0;
        font-size: 1.25vw;
    }

    a.add-item.hidden {
        display: none;
    }

    svg.add-item {
        width: 2vw;
        height: 2vw;
    }

    div.quantity-buttons {
        display: flex;
        justify-content: space-between;
        /* margin-top: 1.1vw; */
    }

    a.toggle-quantity {
        padding: 0;
        margin: 0;
        width: 5.05vw;
        height: 5.05vw;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.item-quantity {
        font-size: 1.25vw;
        min-height: 2vw;
        display: flex;
        align-items: center;
        margin: 0;
        text-align: center;
    }

    svg.toggle-quantity {
        width: 1.75vw;
        height: 1.75vw;
    }

    div.cart-page {
        margin-top: 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 16vw;
    }

    div.total {
        width: 46vw;
        height: 3.6vw;
        border-radius: 0.625vw;
        border: 0.1vw solid #E7F2E4;
        padding: 0.1vw 1.1vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1vw;
    }

    p.total {
        font-size: 1.5vw;
    }

    a.checkout-button {
        padding: 1vw;
        padding-left: 7vw;
        padding-right: 7vw; 
        font-size: 1.25vw;
        position: fixed;
        bottom: 11vw;
        /* display: none; */
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
        border-radius: 0.5vw;
    }

    div.cart-item {
        width: 46vw;
        height: 19.7vw;
        border-radius: 0.8525vw;
        border: 0.1vw solid #E7F2E4;
        margin-bottom: 1vw;
        padding: 0vw 1.1vw;
        display: flex;
        align-items: center;
        /* display: none; */
    }

    div.item-grid {
        padding: 0.5vw;
        display: grid;
        /* display:none; */
        grid-template-columns: 13vw 26vw 7vw;
        grid-template-rows: 4vw 4vw 4vw 4vw;
    }

    div.product-image {
        grid-area: 1/ 1/ 4/ 2; 
        display: flex;
        justify-content: center;
    }

    img.product-image {
        border-radius: 1.375vw;
        width: 9vw;
        height: 10.5vw;
        object-fit: cover;
        padding-top: 0.5vw;
    }

    p.product-title {
        grid-area: 1/ 2/ 3/ 4; 
        margin-left: 1vw;
        /* margin-top: 0; */
        font-size: 1.25vw;
    }

    p.product-price {
        grid-area: 3/ 2/ 4/ 4; 
        margin-left: 1vw;
        margin-top: 0;
        font-size: 2vw;
    }

    div.product-toggle {
        grid-area: 4/ 1/ 5/ 2; 
        border: none;
    }

    div.product-link {
        grid-area: 4/ 2/ 5/ 3;
        height: 100%;
        display: flex;
        align-items: center;
    }

    a.product-link { 
        margin-left: 1vw;
        color:#FF90BB;
        font-size: 1vw;
    }

    div.amount-buttons {
        margin: 0;
        padding: 0.5vw;
    }
    
    a.toggle-amount {
        width: 3.375vw;
        height: 3.375vw;
        background: transparent;
        border: 0.1vw solid #E7F2E4;
        color: #E7F2E4;
    }

    svg.toggle-amount {
        width: 1.3125vw;
        height: 1.3125vw;
    }

    p.item-amount {
        font-size: 1.875;
    }

    div.empty-cart {
        width: 81vw;
        height: 50vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    div.empty-cart.hidden {
        display: none;
    }

    svg.empty-cart {
        width: 5vw;
        height: 5vw;
    }

    p.empty-cart {
        font-size: 1.5vw;
        font-weight: bold;
    }

    p.cart-empty {
        font-size: 1.25vw;
        margin: 0;
    }

    div.delete-item {
        grid-area: 4/ 3/ 5/ 4;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    a.delete-item {
        margin: 0;
        border-radius: 1vw;
        padding: 0;
        width: 3.375vw;
        height: 3.375vw;
        display: flex;
        justify-content: center;
        align-items: center;
        
        /* border: 0.4vw solid #FB4141;
        background: transparent;
        color: #FB4141;
        padding: 0;
        width: 6.05vw;
        height: 6.05vw; */
    }

    svg.delete-item {
        width: 1.3125vw;
        height: 1.3125vw;
    }

    div.count-buttons {
        width: 25vw;
        margin-top: 1.25vw;
    }

    a.toggle-count {
        width: 5vw;
        height: 5vw;
    }

    p.item-size {
        font-size: 1.25vw;
        min-height: 2vw;
        display: flex;
        align-items: center;
        margin: 0;
        text-align: center;
    }

    a.add-item {
        /* margin: 2vw 0vw; */
        padding: 0.5vw 3.5vw;
        margin-top: 1.25vw;
        width: 18vw;
        /* background: #ffd814; */
        background: #0065F8;
        /* color: #0f1111; */
        color: #E7F2E4;
        /* border: 0.2vw solid #E7F2E4; */
        text-decoration: none;
    }

    div.checkout-house {
        width: 81vw;
        height: 67vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #E7F2E4;
    }

    svg.checkout-svg {
        opacity: 0.9;
        width: 10vw;
        height: 10vw;
    }

    p.checkout-text {
        font-size: 1.625vw;
    }

    a.checkout-link {
        color: #FF90BB;
        font-size: 1.75vw;
    }

    div.orders {
        margin-top: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a.order {
        width: 46vw;
        height: 4.1vw;
        border-radius: 0.625vw;
        border: 0.1vw solid #E7F2E4;
        padding: 0.1vw 1.1vw;
        margin-bottom: 2vw;
        display: flex;
        align-items: center;
        background: rgba(43, 48, 54, 0.3); /* transparent layer */
        backdrop-filter: blur(6px);           /* blur the background */
        -webkit-backdrop-filter: blur(6px);   /* Safari support */
        font-size: 1.4vw;
        text-decoration: none;
        white-space: pre;
    }

    div.order-list {
        margin-top: 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 6vw;
    }

    div.item-frequency {
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    p.order-time {
        font-size: 1.75vw;
        text-align: center;
    }

    a.store-anchor {
        font-size: 1.55vw;
        /* position: fixed; */
        bottom: 2.6vw;
        left: 44.5vw;
        z-index: 2;
        text-decoration: none;
    }

    a.orders-anchor {
        font-size: 1.5vw;
        /* position: fixed; */
        bottom: 2.6vw;
        right: 25vw;
        z-index: 2;
        text-decoration: none;
    }

    div.no-orders {
        width: 81vw;
        height: 67vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.no-orders {
        font-size: 2vw;
    }

    h2.store-welcome {
        margin-top: 2vw;
        margin-bottom: 2vw;
        text-align: center;
        font-size: 1.875vw;
    }

    h3.store-heading {
        margin-bottom: 2vw;
        text-align: center;
        font-size: 1.625vw;
    }

    div.demo-prompt {
        width: 37vw;
        border-radius: 1.25vw;
        border: 0.1vw solid #E7F2E4;
        margin-top: 6vw;
        background: rgba(43, 48, 54, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 1.65vw;
        padding: 2vw;
        margin-bottom: 6vw;
    }

    div.ai-holder {
        margin-top: 7vw;
        margin-bottom: 12vw;
    }

    div.message {
        width: 54vw;
        position: fixed;
        bottom: 6vw;
        left: 35.175vw;
        display: flex;
        justify-content: center;
        gap: 1vw;
        z-index: 1;
    }

    textarea.message-box {
        padding: 1vw 2.5vw;
        width: 37.1vw;
        height: 3.25vw;
        margin: 0;
        /* margin-right: 6.95vw; #89918c;*/
        border-radius: 9999px;
        border: 0.15vw solid #E7F2E4;
        background: rgba(5, 4, 3, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 1.8vw;
    }

    textarea.message-box:focus {
        font-size: 1.8vw;
    }

    button.send-button {
        border: none;
        border-radius: 50%;
        width: 5.25vw;
        height: 5.25vw;
        margin: 0.275vw;
        background: #2b3035;
    }

    svg.send-svg {
        width: 2.25vw;
        height: 2.25vw;
        color: #E7F2E4;
    }

    svg.stop-svg {
        width: 5.5vw;
        height: 5.5vw;
        border-radius: 50%;
        background: #2b3035;
        color: #E7F2E4;
        margin: 0.275vw;
    }

    div.messages {
        margin-top: 10vw;
        margin-bottom: 10vw;
        color: #E7F2E4;
    }

    div.user-question {
        margin-left: 30.3vw;
        width: 36vw;
        margin-right: 12.5vw;
        display: flex;
        justify-content: flex-end;
    }

    div.user-message {
        padding: 1vw;
        width: fit-content;
        border-radius: 1vw;
        border: 0.1vw solid #E7F2E4;
        background: rgba(43, 48, 54, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    p.user-message {
        font-size: 1.6vw;
        margin: 0;
        line-height: 2.15vw;
    }

    div.assistant-message {
        margin: 3vw;
        margin-left: 19.5vw;
        width: 45vw;
        margin-right: 12.5vw;
    }

    p.assistant-message {
        font-size: 1.6vw;
        margin: 0;
        line-height: 2.15vw;
    }

    .assistant-message {
        font-size: 1.6vw;
        margin: 0;
        line-height: 2.15vw;
    }

    button.ai-menu {
        border: none;
        border-radius: 50%;
        width: 5.25vw;
        height: 5.25vw;
        background: #2b3035;
        position: fixed;
        top: 7.275vw;
        left: 21vw;
    }

    svg.ai-svg {
        width: 2.25vw;
        height: 2.25vw;
        color: #E7F2E4;
    }

    div.ai-menu {
        background: #2b3035;
        height: 70vh;
        padding-bottom: 30vh;
        z-index: 1;
        width: 33vw;
        padding-top: 6.5vw;
        position: fixed;
        top: 0;
        left: -33vw;
        overflow-y: auto;
    }

    div.ai-greeting {
        width: 81vw;
        height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h2.ai-greeting {
        font-weight: 500;
        font-size: 2.9vw;
    }

    @keyframes slideRight {
        0% {
            transform: translateX(-33vw);
        }

        100% {
            transform: translateX(0vw);
        }
    }

    div.ai-menu.slide-right {
        animation-name: slideRight;
        animation-duration: 0.66s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
    }

    @keyframes slideLeft {
        0% {
            transform: translateX(0vw);
        }

        100% {
            transform: translateX(-33vw);
        }
    }

    div.ai-menu.slide-left {
        animation-name: slideLeft;
        animation-duration: 0.66s;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
    }

    div.close-ai {
        width: 33vw;
        display: flex;
        justify-content: space-between;
        margin-top: 2vw;
    }

    svg.bot {
        width: 2.25vw;
        height: 2.25vw;
        color: #E7F2E4;
        padding: 0.825vw 1.75vw;
    }

    button.new-chat {
        background: transparent;
        /* padding: 0.825vw 1.75vw; */
        font-size: 1.6vw;
        border: none;
        color: #E7F2E4;
        display: flex;
        white-space: pre;
        height: 3.9vw;
        align-items: center;
        margin-left: 1.25vw;
    }

    svg.new-chat {
        width: 2.25vw;
        height: 2.25vw;
        color: #E7F2E4;
    }

    button.close-ai {
        border: none;
        background: transparent;
        padding: 0.825vw 1.75vw;
    }

    svg.close-ai {
        width: 2.25vw;
        height: 2.25vw;
        color: #E7F2E4;
    }

    div.chats-label {
        background: transparent;
        border: none;
        /* border-top: 0.1vw solid #E7F2E4; */
        padding: 1vw 2vw;
        width: 29vw;
        font-size: 1.45vw;
        color: #89918C;
        text-align: left;
        /* margin-top: 4vw; */
        /* border-top: 0.1vw solid #E7F2E4; */
    }

    button.old-chat {
        background: transparent;
        border: none;
        /* border-top: 0.1vw solid #E7F2E4; */
        padding: 1vw 1vw;
        width: 33vw;
        font-size: 1.6vw;
        color: #E7F2E4;
        text-align: left;
    }

    div.projects-holder {
        display: flex;
        gap: 1.25vw;
    }

    a.project-project {
        width: 20.1vw;
        text-decoration: none;
    }

    select.field {
        /* background: transparent;
        color: #E7F2E4; */
        border-radius: 5px;
        padding: 6px 2px;
        font-size: 1.4vw;
        margin-top: 0.5vh;
    }

}