@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jura:wght@300..700&display=swap');


* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

body {
    background-color: #fff;
}

:root {
    --color-neutral-500: #f6f5f4;
    --color-neutral-400: #bbbec4;
    --color-neutral-300: #58544b;
    --color-neutral-200: #2C2A26;
    --color-neutral-100: #161513;
    --color-feedback-accent-success: #4ae935;
    --color-feedback-accent-error: #ea583e;
    --color-feedback-accent-warning: #eac73e;
    --color-feedback-accent-info: #c0d9f6;
    --color-accent-primary: #f2b10d;
    --color-accent-primary-hover: #f6ca5a;
    --color-accent-primary-active: #c28d0a;
    --color-accent-secondary: #3e88ea;
    --color-accent-secondary-hover: #639fee;
    --color-accent-secondary-active: #186ddd;

    --color-orange-600: #F3BF16;
    --color-blue-600: #6EBEF7;
    --color-yellow-600: #F5F549;

    --sp-4: 0.25rem;
    --sp-8: 0.5rem;
    --sp-16: 1rem;
    --sp-24: 1.5rem;
    --sp-40: 2.5rem;
    --sp-120: 7.5rem;
    --sp-1128: 70.5rem;

    --type-button-primary: 700 1.2rem "Jura",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --type-head1: 300 4rem "Jura",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --type-head5: 400 1.25rem "Jura",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --type-head2: 400 3rem "Jura",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --type-body-lg: 400 1.25rem "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --type-body-md: 400 1rem "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --type-label-lg: 400 0.875rem "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

}

.btn-primary-dot-rd {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: 10rem;
    border: solid 2px var(--color-accent-primary);
    font: var(--type-button-primary);
    color: var(--color-neutral-100);
    background-color: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s ease;

    &:active {
        background-color: var(--color-accent-primary-active);
    }

    &::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--color-accent-primary);
        border-radius: 10rem;
        transition: 0.2s ease;
        z-index: -1;
    }

    &:hover::after {
        width: 100%;
        height: 100%;
        left: 0;
    }
}

.btn-ghost-soft-rd {
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: 10rem;
    border: solid 2px var(--color-accent-secondary);
    font: var(--type-button-primary);
    color: var(--color-neutral-100);
    background-color: var(--color-accent-secondary);
    cursor: pointer;
    transition: 0.2s ease;

    &:active {
        background-color: var(--color-accent-secondary-hover);
        transform: scale(0.8);
    }
}

.btn-secondary-dot-rd {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: 10rem;
    border: solid 2px transparent;
    font: var(--type-button-primary);
    color: var(--color-neutral-100);
    background-color: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s ease;

    &:active {
        background-color: var(--color-accent-primary-active);
    }

    &::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--color-accent-primary);
        border-radius: 10rem;
        transition: 0.2s ease;
        z-index: -1;
    }

    &:hover::after {
        width: 100%;
        height: 100%;
        left: 0;
    }
}

.btn-animated-link {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-8);
    border-radius: 0.5rem;
    font: var(--type-button-primary);
    color: var(--color-neutral-500);

    .icon-container {
        display: flex;
        overflow: hidden;

        i {
            font-size: var(--sp-24);
            transition: 0.5s;
        }
    }

    &:hover .icon-container i,
    &:focus .icon-container i {
        animation: move-scale-right-back-start 0.5s ease-out forwards;
    }
}

.btn-icon-float-message {
    max-width: 3rem;
    height: 3rem;
    position: fixed;
    bottom: 2rem;
    right: 2%;
    display: flex;
    align-items: center;
    transition: .5s ease;
    overflow: hidden;
    z-index: 99;

    &:hover {
        max-width: 18rem;
        height: 4rem;
    }

    &:hover p {
        visibility: visible;
        opacity: 1;
        width: 100%;
    }

    p {
        width: 0px;

        visibility: hidden;
        opacity: 0;
        font: var(--type-body-md);
        border: solid 2px var(--color-neutral-400);
        padding: var(--sp-8);
        background-color: var(--color-neutral-500);
        border-radius: 10rem;
        transition: 0.5s;
    }

    .btn-animated-link-float {
        width: 2rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color-feedback-accent-success);
        color: var(--color-neutral-200);
        border-radius: var(--sp-120);


        i {
            position: absolute;
            font-size: var(--sp-24);
            transform: translate(-50%, -50%);
        }
    }
}

.btn-icon {
    display: flex;
    align-content: center;
    padding: 0.5rem;
    border: solid 2px transparent;
    color: var(--color-accent-primary);
    background-color: transparent;
    cursor: pointer;
    transition: 0.2s ease;
    font-size: 1.5rem;

    i{
        transition: 0.2s ease;
    }

    &:active i {
        transform: scale(0.5);
    }

}

.input-primary {
    display: grid;
    gap: var(--sp-4);

    label {
        font: var(--type-label-lg);
        color: var(--color-neutral-200);
    }

    input,
    textarea {
        padding: var(--sp-8);
        font: var(--type-body-md);
        color: var(--color-neutral-100);
        border: solid 2px var(--color-accent-secondary);
        border-radius: var(--sp-8);
        resize: vertical;
        transition: 0.2s;

        &:focus {
            background-color: var(--color-neutral-500);
            outline-color: var(--color-accent-secondary-active);
        }

        &::placeholder {
            color: var(--color-neutral-400);
        }
    }

    select {
        padding: var(--sp-8);
        font: var(--type-body-md);
        color: var(--color-neutral-100);
        border: solid 2px var(--color-accent-secondary);
        border-radius: var(--sp-8);
        resize: vertical;
        transition: 0.2s;

        &:focus {
            background-color: var(--color-neutral-500);
            outline-color: var(--color-accent-secondary-active);
        }

        &::placeholder {
            color: var(--color-neutral-400);
        }
    }

    .file-content {
        position: relative;
        overflow: hidden;


        input[type="file"] {
            padding: 0;
            width: 100%;

            &:hover {
                background-color: var(--color-neutral-500);
            }

            &:hover::file-selector-button {
                background-color: var(--color-accent-secondary-hover);
            }

            &::file-selector-button {
                padding: 0.5rem 1rem 0.5rem 2rem;
                border: none;
                font: var(--type-body-md);
                background-color: var(--color-accent-secondary);
                color: var(--color-neutral-100);
                cursor: pointer;
                transition: 0.2s;
            }

        }

        i {
            position: absolute;
            font-size: 1.5rem;
            color: var(--color-neutral-100);
            top: 50%;
            left: 0.5rem;
            transform: translateY(-50%);
        }

        &:hover i {
            animation: move-scale-top-back-start 2s ease-out forwards infinite;
        }
    }
}

.menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background-color: var(--color-neutral-500);
    transform: translateX(100%);
    transition: 0.5s;
    z-index: 99;

    .logo {
        display: flex;
        align-items: center;
        gap: var(--sp-16);

        span {
            font-family: "Jura",
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-neutral-200);
        }

        img {
            width: 2.5rem;
        }
    }

    .nav-bar-mobile {
        width: 100%;
        margin-top: 4rem;

        ul {
            display: flex;
            flex-direction: column;
            align-items: start;

            li {
                width: 100%;
                display: flex;
                align-items: center;

                a {

                    width: 100%;
                }
            }
        }
    }
}

header {
    max-width: var(--sp-1128);
    margin: auto;
    padding: var(--sp-16);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        display: flex;
        gap: var(--sp-16);

        span {
            font-family: "Jura",
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-neutral-200);
        }
    }

    .nav-bar-desktop {

        ul {
            display: flex;
            align-items: center;

            li {
                display: flex;
                align-items: center;
            }
        }
    }

    .btn-show-menu-mobile {
        display: none;
        position: relative;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
        background-color: var(--color-accent-primary);
        border: solid 2px var(--color-accent-primary);
        color: var(--color-neutral-100);
        cursor: pointer;
        z-index: 100;
        overflow: hidden;

        &:hover span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
            width: 1.25rem;
        }

        &:hover span:nth-child(2) {
            transform: translateY(0) rotate(-45deg);
        }

        &:hover span:nth-child(3) {
            transform: translate(60px);
        }

        span:nth-child(1) {
            width: 1rem;
            height: 4px;
            border-radius: 5rem;
            background-color: var(--color-neutral-200);
            transition: .2s ease-in-out
        }

        span:nth-child(2) {
            width: 1.25rem;
            height: 4px;
            border-radius: 5rem;
            background-color: var(--color-neutral-200);
            transition: .2s ease-in-out
        }

        span:nth-child(3) {
            width: 0.5rem;
            height: 4px;
            border-radius: 5rem;
            background-color: var(--color-neutral-200);
            transition: .2s ease-in-out
        }
    }
}

@media screen and (max-width: 768px) {
    header {
        position: sticky;
        top: 0;
        padding: 0.5rem 1rem;
        background-color: var(--color-neutral-500);
        z-index: 100;

        .logo {
            span {
                font: var(--type-button-primary)
            }

            img {
                width: 3rem;
            }
        }

        .nav-bar-desktop {
            display: none;
        }

        .btn-show-menu-mobile {
            display: flex;
        }
    }
}

main {
    overflow: hidden;
}

.hero-section {
    position: relative;
    max-width: var(--sp-1128);
    height: 100dvh;
    margin: auto;
    margin-top: var(--sp-24);
    padding: 0 1rem;
    display: flex;

    .hero-content {
        width: 30rem;
        display: flex;
        flex-direction: column;
        justify-content: center;

        h1 {
            font: var(--type-head1);
            color: var(--color-neutral-100);
        }

        p {
            margin-top: var(--sp-8);
            font: var(--type-body-lg);
            color: var(--color-neutral-200);
            font-family: "Inter";
        }

        .action {
            margin-top: var(--sp-40);
        }
    }

    .hero-image {
        position: absolute;
        width: 45rem;
        max-height: 100%;
        right: -10rem;
        top: 50%;
        transform: translateY(-50%);

        img {
            height: 100%;
        }
    }

}

@media screen and (max-width: 1020px) {
    .hero-section {
        padding: 0 1rem;
        flex-direction: column;

        .hero-content {
            width: 100%;
        }

        .hero-image {
            display: flex;
            position: relative;
            left: 0;
            width: 100%;
            margin-top: 2rem;
            transform: translateY(-60%);


            img {
                width: 160%;
                height: auto;
            }
        }
    }
}




.service-section {
    position: relative;
    width: 100%;
    height: 100dvh;
    transition: 1s;


    .service-container {
        position: relative;
        max-width: 50rem;
        width: 100%;
        height: 100%;
        margin: auto;
        display: flex;

        .icon-service {
            position: absolute;
            top: 50%;
            transition: 0.2s;
        }

        .service-content {
            max-width: 35rem;
            margin-left: 10rem;
            height: 100%;
            align-content: center;
            opacity: 0;
            transform: translateY(300px);

            h2 {
                font: var(--type-head2);
                color: var(--color-neutral-100);
            }

            p {
                margin-top: var(--sp-8);
                font: var(--type-body-lg);
                color: var(--color-neutral-200);
            }
        }
    }

}

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


    .service-section {
        padding: 0 1rem;
        flex-direction: column;

        .service-container {
            width: 100%;

            .service-content {
                margin-left: 5rem;

                h2 {
                    font-size: 2.5rem;
                }

                p {
                    font: var(--type-body-md);
                }
            }
        }

    }
}

.contact-section {
    max-width: var(--sp-1128);
    margin: auto;
    margin-top: var(--sp-120);
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    gap: var(--sp-40);

    .contact-content {

        .title {
            position: relative;

            h2 {
                position: relative;
                font: var(--type-head2);
                color: var(--color-neutral-100);
            }

            .h2-effect {
                position: absolute;
                width: 4rem;
                height: 4rem;
                background-color: var(--color-accent-secondary-hover);
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                border-radius: 10rem;
            }
        }


        p {
            margin-top: var(--sp-40);
            font: var(--type-body-lg);
            color: var(--color-neutral-200);
        }
    }

    .form-container {
        width: 40%;

        form {
            display: grid;
            gap: var(--sp-16);

            button {
                margin-top: var(--sp-8);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .contact-section {
        flex-direction: column;
        padding: 0 1rem;

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

.service-images-section {
    margin-top: var(--sp-120);
    width: 100%;
    overflow: hidden;

    .images {
        width: 100%;
        display: flex;
        overflow-y: scroll;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1.5rem;
        scrollbar-width: none;

        img {
            scroll-snap-align: start;
            max-width: 30rem;
            object-fit: cover;
        }
    }

}

.login-section{
    max-width: 20rem;
    margin: auto;

    .input-primary{
        margin-top: 0.5rem;
    }

    .btn-primary-dot-rd{
        margin-top: 1rem;
    }
}

.service-budge-section {
    max-width: var(--sp-1128);
    margin: auto;
    margin-top: var(--sp-120);
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    gap: var(--sp-40);
    display: none;

    .service-budge-content {

        .title {
            position: relative;

            h1 {
                position: relative;
                font: var(--type-head2);
                color: var(--color-neutral-100);
            }

            .h1-effect {
                position: absolute;
                width: 4rem;
                height: 4rem;
                background-color: var(--color-accent-primary);
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                border-radius: 10rem;
            }
        }


        p {
            margin-top: var(--sp-40);
            font: var(--type-body-lg);
            color: var(--color-neutral-200);
        }
    }

    .form-container {
        width: 40%;

        form {
            display: grid;
            gap: var(--sp-16);

            button {
                margin-top: var(--sp-8);
            }

            .btn-add-field {
                margin-top: 0;
                max-width: 12rem;
                padding: 0.5rem;
                background-color: transparent;
                border-radius: 0.5rem;

                &:hover {
                    background-color: var(--color-accent-secondary-hover);
                }
            }

            .item-title {
                margin-top: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;

                p{
                    font: var(--type-body-md);
                    color: var(--color-neutral-300);
                }
            }
        }
    }
}


@media screen and (max-width: 768px) {
    .service-budge-section {
        flex-direction: column;
        padding: 0 1rem;

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

.digital-card-main {
    max-width: var(--sp-1128);
    width: 100%;
    padding: var(--sp-24);
    height: 100dvh;

    header {
        width: 100%;
        justify-content: center;
        background-color: transparent;

        .logo a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--sp-16);

            span {
                font: var(--type-button-primary);
                color: var(--color-neutral-500);
            }

            img {
                width: 4rem;
            }
        }
    }

    .digital-card-section {
        margin-top: var(--sp-40);
        padding: var(--sp-24);

        nav {
            height: 100%;

            ul {

                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: var(--sp-40);
                display: grid;

                li {
                    min-width: 16rem;
                }

                a {

                    border: solid 2px var(--color-accent-secondary);
                }
            }

        }

        .bg-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100dvh;
            z-index: -1;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background-image: url("/public/empty-hangar.opti.webp");
            background-size: fill;
            background-position: center;
        }

    }
}

.section-404{
    max-width: var(--sp-1128);
    margin: auto;
    margin-top: 2rem;

    h1{
        font: var(--type-head1);
    }

    svg{
        margin-top: 2rem;
        width: 90%;
    }
}



footer {
    margin-top: var(--sp-120);
    width: 100%;
    padding: var(--sp-24) 0;
    background-color: var(--color-neutral-200);

    .footer-main {
        max-width: var(--sp-1128);
        margin: auto;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 5rem;

        .logo-content {
            .logo {
                display: flex;
                gap: var(--sp-16);
            }

            span {
                font-family: "Jura",
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Roboto,
                    "Helvetica Neue",
                    Arial,
                    sans-serif;
                font-size: 2rem;
                font-weight: 700;
                color: var(--color-neutral-500);
            }

            p {
                margin-top: var(--sp-16);
                font: var(--type-body-lg);
                color: var(--color-neutral-500);
            }

        }

        .widget {
            width: 100%;
            display: flex;
            flex-direction: column;

            h5 {
                font: var(--type-head5);
                font-weight: 500;
                color: var(--color-accent-secondary-hover);
            }

            nav {
                margin-top: var(--sp-24);

                ul li {
                    margin-bottom: var(--sp-16);
                }
            }
        }
    }

    .made-for {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem 0rem 1rem;

        &:hover a {
            font-size: 1rem;
        }

        &::before {
            position: absolute;
            top: 1rem;
            content: "";
            width: 25%;
            height: 2px;
            background-color: var(--color-neutral-300);
            border-radius: 1rem;
            transition: 0.4s ease;
        }

        &:hover::before {
            width: 2%;
            background-color: var(--color-accent-primary);
        }

        h6 {
            font: var(--type-label-lg);
            color: var(--color-neutral-400);
        }

        a {
            color: var(--color-accent-primary);
            transition: 0.2s ease;
        }
    }
}

@media screen and (max-width:768px) {
    footer {
        padding: 1rem;

        .footer-main {

            flex-direction: column;
        }
    }
}

.yellow600 {
    background-color: var(--color-yellow-600);
}

.blue600 {
    background-color: var(--color-blue-600);
}

.orange600 {
    background-color: var(--color-orange-600);
}

.gray600 {
    background-color: var(--color-neutral-400);
}

.teste {
    background-color: blue;
    fill: red;
}

.reveralUp {
    animation: reveralUp 0.6s ease forwards;
}

.move-menu-from-right {
    transform: translateX(0);
}

.stick-top-right {
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    transform: translateX(0);
    animation: bouncy 2s ease forwards;
}

@keyframes bouncy {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes reveralUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes move-from-right {
    to {
        transform: translateX(0);
    }
}

@keyframes move-scale-right-back-start {

    0%,
    100% {
        transform: translateX(0%) scale(1);
    }

    50% {
        transform: translateX(100%) scale(0.2);
    }

    60% {
        opacity: 0;
    }

    65% {
        transform: translateX(-100%);
    }
}

@keyframes move-scale-top-back-start {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-100%) scale(0.2);
    }

    60% {
        opacity: 0;
    }

    65% {
        transform: translateY(100%);
    }
}