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

@media (orientation: portrait) {

    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: 1;
    }

    a.brand {
        flex: 1;
        display: flex;
        padding: 1.5vh 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.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;
    }

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

    .hero-title {
        margin-bottom: 8vw;
    }

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

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

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

    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.home-link, a.about-link {
        text-decoration: none;
        color: #FF90BB; /* #71C0BB; */
    }

    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
    }

    p.copyright {
        font-size: 2.5vw;
        margin-left: 3.5vw;
    }

    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.footer-link {
        margin-right: 3.5vw;
        font-size: 1.875vw;
        text-align: end;
    }

    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: 35vh;
        margin-bottom: 53vh;
    }

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

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

    p.signup-prompt {
        font-size: 2.1vw;
        /* 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;
    }

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

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

    svg.testify-svg {
        display: inline;
    }

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

    h3.testimonies-heading {
        text-align: center;
        margin-top: 7vw;
        margin-bottom: 1vw;
    }

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

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

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

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

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

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

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

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

    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"] {
        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.testimony-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: 2vh;
    }

    div.delete-card {
        padding: 4vh 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;
    }

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

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

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

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

    a.picture-button {
        background: transparent;
        border-radius: 2vw;
        border: 1px solid #E7F2E4;
        padding: 1.5vh 3.6vw;
        margin-left: 3.5vw;
    }

    svg.picture-svg {
        display: inline;
    }

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

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

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

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

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

    form.upload-form {
        margin-left: 3.5vw;
        margin-bottom: 50vh;
    }

    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: 2.6vw;
        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;
    }

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

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

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

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

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

    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: 1rem;
        height: 1rem;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        display: inline;
        position: static;
        border: 1px solid #E7F2E4;
    }

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

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

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



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

    div.head-holder {
        display: flex;
    }

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

    div.user-body {
        min-height: 80vh;
    }

    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.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.1vw;
    }

    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.2vw;
        height: 2.2vw;
    }

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

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

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

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

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

    p.design-type {
        padding-left: 2vw;
    }

    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.business-designs, div.portfolio-designs, div.blog-designs, div.personal-designs {
        margin-left: 4vw;
    }

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

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

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

}

@media (orientation: landscape) {

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

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

    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: 7vw 20vw;
        padding-bottom: 4vw;
        font-size: 2vw;
        margin-top: 2vw;
        min-width: 60vw;
    }

    .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: 1vw;
        border-radius: 0.75vw;
        padding: 2.25vh 5.5vw;
    }

    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.home-link, a.about-link {
        text-decoration: none;
        color: #FF90BB; /* #71C0BB */
    }

    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
    }

    p.copyright {
        font-size: 1.25vw;
        margin-left: 2vw;
        max-width: 20vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    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.footer-link {
        margin-right: 2vw;
        font-size: 0.94vw;
        min-width: 5vw;
        text-align: end;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    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: 0.5vw;
    }

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

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

    div.user-page {
        display: flex;
    }

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

    a.user-link {
        width: 11vw;
        padding: ;
        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;
    }
    
    div.add-container {
        display: flex;
        justify-content: center;
    }

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

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

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

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

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

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

    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"] {
        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.testimony-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: 1px solid #E7F2E4;
        padding: 1vh 2vw;
        margin-left: 2vw;
    }

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

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

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

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

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

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

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

    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: 1rem;
        height: 1rem;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        border: 1px 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;
    }

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

    p.upload-instruction {
        margin-left: 2vw;
    }

    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: 3vw;
        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.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: 55vw;
        margin-bottom: 18vw;
        font-size: 1.65vw;
    }

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

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

    p.design-type {
        padding-left: 2vw;
    }

    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.business-designs, div.portfolio-designs, div.blog-designs, div.personal-designs {
        margin-left: 4vw;
    }

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

    

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

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

}