/* phone width */
@media only screen and (max-width: 480px) {
    .container {
        width: 95%;
    }

    .app-sidebar {
        display: none;
    }

    .login-form-wrapper .login-form-container {
        width: 100%;
    }

    #loading-screen img {
        width: 10rem;
    }

    #app-container {
        padding: .5rem;
    }

    #desktop-menu {
        display: none;
    }

    #page-title {
        margin-bottom: 0;
        margin-left: .5rem;
    }

    .page {
        margin-left: 0;
        padding-bottom: 0;
        padding-top: 8rem;
    }

    #resume-data-column {
        width: 100% !important;
    }

    .services-wrapper {
        position: relative;
    }

    .app-top .app-top-left img {
        width: 8rem;
    }

    #page-title {
        font-size: 1.25rem;
    }

    #app-content {
        height: calc(100vh - 2rem);
    }

    .service-img {
        position: absolute;
        width: 100%;
        height: 20rem;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 0;
        top: 0;
        border: 1px solid rgba(var(--gray), .2);
    }

    .services-wrapper {
        padding-top: 20rem;
    }

    table td {
        min-width: 12rem;
    }

    #resumes .col-12 {
        margin-bottom: 1.5rem;
    }

    #resume-data-column .black-box {
        margin-bottom: 1.5rem;
    }

    #resume-data-column .services-wrapper {
        margin-bottom: 2.5rem !important;
    }

    #resume-data-column .services-wrapper .p-5 {
        padding: 2rem !important;
    }

    #mobile-menu {
        display: block;
    }

    .mobile-menu-content {
        display: none;
    }

    #mobile-menu-btn {
        background: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 18px !important;
        position: relative;
        right: 1rem;
    }

    #mobile-nav {
        display: none;
        background: rgba(0, 0, 0, 0.9);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        backdrop-filter: blur(8px);
        overflow-y: auto;
    }

    #mobile-menu-btn i {
        color: rgba(var(--gray), 1);
        font-weight: 600;
        position: relative;
        top: -1px;
        font-size: 20px;
    }

    #select-ai-btn-2,
    #open-crm-btn {
        color: black !important;
    }

    #close-mobile-nav {
        position: absolute;
        right: 1rem;
        font-size: 45px;
        color: #fff;
        background: none;
        border: none;
        top: 1rem;

    }

    #mobile-nav ul {
        list-style: none;
        padding: 0 2rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        margin-top: 2rem;
        width: 100%;
    }

    .mobile-logout {
        position: absolute;
        bottom: 2rem;
        padding: 0 2rem;
        width: 100%;
    }

    .mobile-user-info img {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
        border: 2px solid rgba(var(--gray), .2);
        cursor: pointer;
    }

    #mobile-nav ul li {
        width: 100%;
        padding: .75rem 1rem;
        border-radius: 12px;
        background: none;
        margin-bottom: .25rem;
        transition: .3s ease-in-out;
    }

    #mobile-nav .paid-option {
        pointer-events: none !important;
        cursor: not-allowed !important;
        background: rgba(var(--dead-white), .1) !important;
    }

    #mobile-nav .paid-option a {
        color: rgba(var(--dead-white), .6) !important;
    }

    #mobile-nav ul li a {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        color: rgba(var(--dead-white));
        font-size: 14px;
    }

    #mobile-nav ul li a i {
        margin-right: .5rem;
        position: relative;
        top: 3px;
        font-size: 18px;
    }

    #mobile-nav ul .selected {
        background: rgba(var(--primary-color), 1);
    }

    .mobile-nav-top {
        width: 100%;
        padding: 0 2rem;
        margin-top: 7rem;
    }

    .bordered-btn:hover {
        background: rgba(var(--primary-color), 1);
        color: rgba(var(--dead-white));
    }

    #mobile-nav .tippy-box {
        background: rgba(var(--dead-white));
        color: rgba(var(--gray));
    }

    #mobile-nav .ai-list-btn {
        color: rgba(var(--gray));
    }

    .open-crm {
        justify-content: left;
    }

    .open-crm label {
        right: 4rem;
    }

    .hours-switchs p {
        width: 75% !important;
        max-width: 75% !important;
    }

    .generate-enterprise-left {
        width: 100%;
    }

    .login-form-wrapper .md-title {
        max-width: 100% !important;
    }

    label[for="register-terms"] {
        display: inline-block !important;
        position: relative !important;
        top: -3rem !important;
        left: 2rem !important;
        margin-bottom: 0 !important;
    }

    .has-preview-btns {
        display: block !important;
    }

    .input-with-icon input {
        padding-left: 3rem !important;
    }

    #select-plan-btn {
        margin-top: 1rem;
    }

    .pagination-controls {
        margin-top: 1rem;
    }

    .hours-preview {
        display: none;
    }

    .hours-switchs .switch-container {
        display: block !important;
    }

    .hours-input {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .hours-content {
        padding: 0rem !important;
    }

    #mobile-nav-logo {
        width: 8rem;
        position: absolute;
        top: 2rem;
        left: 2rem;
    }

    .adv-view {
        height: auto !important;
        min-height: 13rem !important;
        padding: 0 !important;
    }

    .mobile-user-info {
        background: rgba(var(--dead-white));
        padding: 1rem;
        border-radius: 40px;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .mobile-user-info h3 {
        font-weight: 600;
        font-size: 16px;
        color: rgba(var(--gray));
        margin-bottom: 0;
    }

    .mobile-user-info p {
        font-size: 14px;
        color: rgba(var(--gray), .6);
        font-weight: 500;
        margin-bottom: 0;
        text-decoration: none;
    }

    .vehicles-pages,
    .sellers-pages,
    .leads-pages {
        display: block;
    }

    /* get first div of  */
    .vehicles-pages div:first-child,
    .sellers-pages div:first-child,
    .leads-pages div:first-child {
        margin-bottom: .5rem;
    }

    #sellers {
        padding-top: 4rem !important;
    }

    #config {
        padding-top: 1rem !important;
    }

    .search-box {
        width: 100%;
    }

    .leads-pages .lead-option-wrapper {
        margin-bottom: .5rem;
    }

    .leads {
        padding-top: 9rem;
    }

    .app-page {
        height: fit-content;
    }

    #vehicles {
        padding-top: 6rem;
        min-height: 20rem;
    }

    /* .md-input input,
    .md-input textarea {
        padding: .5rem 1rem;
    } */

    .full-container {
        padding: 3rem 0;
        overflow-x: hidden;
    }

    #config .title-box {
        padding: 1rem !important;
    }

    #lead-search {
        padding-left: 3rem !important;
    }

    .ai-preview {
        padding: 1.5rem;
    }

    #preview-reset-session {
        position: absolute;
        top: -33rem;
        right: -1rem;
        width: 3rem;
        height: 3rem;
        min-width: unset;
    }

    .ai-preview .messages {
        padding-top: 2rem;
        margin-bottom: 4rem;
        margin-top: 2rem;
    }

    .response-image {
        width: 100% !important;
    }

    .ai-message .message-box {
        max-width: 100%;
    }

    .image-modal img {
        width: 100%;
    }

    .close-image-modal {
        top: 2rem;
        right: 2rem;
    }

    .responsive-service {
        padding: 2rem 1.5rem !important;
    }

    .app-top {
        position: fixed;
        width: 100%;
        background: white;
        z-index: +99;
        top: 0;
        left: 0;
        padding-bottom: 2.5rem !important;
        padding: 1rem 1rem;
    }

    .page-top {
        position: fixed;
        top: 6rem;
        z-index: +99;
        background: white;
        width: 100%;
        left: 0;
        padding: 0 1rem;
    }

    .md-input input:focus,
    .md-input textarea:focus {
        border: 2px solid rgba(var(--gray), .3);
        outline: none;
    }

    .car-img {
        display: none;
    }

    #integrations img {
        width: 100%;
    }

    .connect-icon {
        width: 2rem !important;
    }

    .clock-icon {
        width: 4.5rem !important;
    }

    .disclaimer {
        text-align: left !important;
    }

    #billing-plans {
        width: 100%;
        padding: .5rem;
        margin: 0;
    }

    .billing-plan-value {
        margin-bottom: 1.5rem;
    }

    .billing-usage span {
        width: 95% !important;
        font-size: .85rem !important;
    }

    .billing-plan-info {
        display: inline !important;
    }

    #billing-renovation {
        margin-left: .5rem !important;
    }

    .billing-resume-card-content {
        padding: 1rem .5rem !important;
    }

    #manage-subscription-btn {
        margin-bottom: 1rem;
    }

    .billing-plan-value div {
        text-align: center !important;
    }

    .billing-resume-card-header h2 {
        margin-bottom: .5rem;
    }

    .payment-method-info-item img {
        margin-bottom: 1rem !important;
    }

    .payment-method-info-item p {
        margin-bottom: 1rem;
    }

    .payment-method-info {
        padding: 2rem !important;
    }

    .payment-method-info {
        display: block !important;
    }

    .active-plan-tag {
        margin-left: 0 !important;
    }

    .plans-top {
        display: block !important;
    }

    .invoices {
        display: none;
        margin-top: 3rem !important;
        padding: 0 .5rem;
    }

    .enterprises {
        margin-top: 3rem !important;
    }

    .contact-right img {
        width: 80% !important;
        bottom: 2rem !important;
    }

    .adv-header {
        display: block !important;
    }

    .footer-content {
        display: block !important;
    }

    /* .discount-tag {
            display: none !important;
        } */

    #annual-plan {
        position: relative;
    }

    #annual-plan .discount-tag {
        position: absolute;
        top: -1rem;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        font-size: .75rem;
    }

    .plan-selector {
        padding-right: 0 !important;
        border-right: 0 !important;
    }

    #hero .headline .title {
        font-size: 2.5rem !important;
    }

    .stats-info {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    .stats-item {
        margin-left: 0 !important;
        width: 100% !important;
        margin-bottom: 3rem !important;
        display: block !important;
    }

    .right-divisor {
        border-right: 0 !important;
    }

    #stats {
        padding: 3rem 0 !important
    }

    .contact-content {
        display: block !important;
    }

    .contact-right {
        width: 100% !important;
        border-top-right-radius: 0rem !important;
        border-bottom-right-radius: 40px !important;
        border-bottom-left-radius: 40px !important;
        padding: 2rem !important;
        height: 35rem !important;
    }

    .contact-item {
        width: 100% !important;
    }

    #features .headline {
        text-align: center !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
    }

    #features .sub-headline {
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
        max-width: 100% !important;
    }

    .features-card {
        min-height: 18rem !important;
        height: auto !important;
    }

    .features-demo {
        margin-top: 4rem !important;
    }

    .demo-viewer {
        padding: 1rem !important;
    }

    .features-title {
        font-size: 1.25rem !important;
        line-height: 28px !important;
    }

    .wrapper-card {
        padding: 2rem !important;
    }

    #integrations .headline {
        text-align: center !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
    }


    #integrations .sub-headline {
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
        max-width: 100% !important;
    }

    #integrations,
    #steps,
    #features,
    #advantages {
        margin-bottom: 3rem !important;
    }

    #advantages .headline {
        text-align: center !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
    }

    #advantages .sub-headline {
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
        max-width: 100% !important;
    }

    .adv-btn {
        width: 100% !important;
        margin-top: 2rem !important;
        margin-left: 0 !important;
    }

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

    #steps img {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 2rem !important;
    }

    #steps .headline {
        text-align: center !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
    }

    #steps .sub-headline {
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
        max-width: 100% !important;
    }

    #steps .custom-btn {
        width: 100% !important;
        font-size: .85rem !important;
        padding: 1rem 1rem !important;
    }

    #plans .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .voice-selector {
        margin: 0 auto !important;
        width: fit-content !important;
        margin-top: 1rem !important;
    }

    .plan-selector {
        margin: 0 auto !important;
        margin-top: 2rem !important;
    }

    #plans .headline {
        text-align: center !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
    }

    #plans .sub-headline {
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
        max-width: 100% !important;
    }

    .plan-card {
        margin-bottom: 2rem !important;
    }

    #plans {
        margin-bottom: 0rem !important;
    }

    .callback-content {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;

    }

    .callback-image img {
        width: 100% !important;
        height: auto !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 40px !important;
    }

    .callback-item {
        padding: 2rem !important;
        text-align: center !important;
        scale: .9 !important;
    }

    #callback,
    #contact {
        margin-bottom: 3rem !important;
    }

    #callback .headline {
        text-align: center !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
    }

    #callback .sub-headline {
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
        max-width: 100% !important;
    }

    #callback button {
        margin-top: 2rem !important;
        font-size: .85rem !important;
        padding: 1rem 1rem !important;
    }

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

    .footer-btns .primary-btn {
        margin-left: 0 !important;
        margin-top: 1rem !important;
    }

    .purchase-banner p {
        width: 100% !important;
    }

    .purchase-banner {
        height: auto !important;
    }

    .footer-item .sub-headline {
        max-width: 100% !important;
    }

    .footer-item {
        margin-bottom: 2rem !important;
    }

    .footer-btns {
        text-align: center !important;
    }

    .footer-logo {
        left: 50% !important;
        position: relative !important;
        transform: translateX(-50%) !important;
    }

    footer .sub-headline {
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        margin-top: 2rem !important;
    }

    .footer-links {
        margin-left: 0 !important;
        margin: 0 auto !important;
    }

    .footer-item ul li {
        text-align: center !important;
    }

    #steps {
        padding: 0 1rem !important;
    }

    #hero::before {
        background-size: auto !important;
        bottom: -10vh !important;
    }

    .hero-image {
        width: 100% !important;
        bottom: 0 !important;
        /* height: auto !important; */
        top: 0 !important;
        height: 85vh !important;
    }

    #stats {
        margin-top: 8rem !important;
    }

    .navbar-list ul {
        display: none !important;
    }

    #hero .headline .title {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }

    #hero .headline .description {
        font-size: 1rem !important;
        line-height: 1.25rem !important;
        margin-bottom: 2rem !important;
    }

    #hero .headline {
        width: 100% !important;
        margin-top: -4rem !important;
    }

    .navbar-btns {
        display: none !important;
    }

    #hero {
        height: 75vh !important;
    }

    #landing-nav {
        padding: 2rem 1rem !important;
    }

    #landing-nav .navbar-logo img {
        width: 6rem !important;
    }

    .hero-image img {
        width: 95% !important;
    }

    #btn-hero {
        font-size: .85rem !important;
        padding: .5rem 1rem !important;
    }

    .adv-card {
        padding: 2rem 1.5rem !important;
    }

    .plan-price button {
        font-size: .85rem !important;
        padding: 1rem 1rem !important;
    }

    .responsive-menu {
        display: block !important;
        color: rgba(var(--dead-white), .6);
        font-size: 2rem;
    }

    #responsive-menu {
        width: 0%;
        height: 100vh;
        background: rgba(var(--dead-white));
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        display: block !important;
        transition: .3s ease-in-out;
        overflow-y: hidden;
        /* display: none !important; */
    }

    /* active responsive menu */
    #responsive-menu.active {
        width: 100%;
        /* display: block !important; */
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .close-icon {
        position: fixed;
        top: 2rem;
        right: 2rem;
        font-size: 45px;
        color: rgba(var(--gray), .6);
        background: none;
        border: none;
        display: none !important;
    }

    #responsive-menu .responsive-menu-list {
        display: none !important;
    }

    #responsive-menu.active .responsive-menu-list {
        display: block !important;
    }

    .responsive-menu.active .close-icon {
        display: block !important;
    }

    #responsive-menu .responsive-menu-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #responsive-menu .responsive-menu-list ul li {
        width: 100%;
        padding: .8rem 2rem;
        border-radius: 12px;
        background: none;
        margin-bottom: .5rem;
        transition: .3s ease-in-out;
        font-weight: 500;
        background: rgba(var(--gray), .1);
    }

    #responsive-menu .responsive-menu-list ul li a {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        color: rgba(var(--gray), 1) !important;
        font-size: 14px;
        width: 100%;
        display: block;
    }

    #responsive-menu .responsive-menu-list .selected {
        background: rgba(var(--primary-color), 1) !important;
        color: rgba(var(--dead-white), 1) !important;
    }

    #responsive-menu .responsive-menu-list .selected a {
        color: rgba(var(--dead-white), 1) !important;
    }

    #ai-off-message {
        margin-bottom: 2rem;
    }

    .toggle-ai-card-left {
        height: 12rem !important;
    }

    .wpp-connection-tips {
        width: 100% !important;
        position: relative !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 40px !important;
    }

    .wpp-connection-wrapper {
        display: block !important;
    }

    .wpp-connection {
        width: 100% !important;
    }

    .wpp-tips-content {
        padding: 2rem;
    }

    .whatsapp-mobile-type-text {
        width: 100% !important;
    }

    #integrations img {
        width: 15rem !important;
    }

}

/* se o height da tela for menor que 700 */
@media only screen and (max-height: 750px) {
    #hero .headline {
        scale: .8 !important;
    }

    .hero-image img {
        scale: 1 !important;
    }

    .hero-image {
        height: 95vh !important;
    }

    #hero .headline {
        margin-top: 0 !important;
    }
}