:root {

    --red: #BF3515;
    --red-dark: #8E270F;
    --red-light: #E85B38;

    --black: #0C0C0B;
    --black-2: #131312;
    --black-3: #1A1A18;

    --white: #FFFFFF;

    --gray: #98958E;
    --gray-dark: #68655F;

    --line: rgba(255,255,255,.11);

    --cream: #F1EEE8;

    --container: 1180px;

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--black);

    color: white;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    overflow-x: hidden;

}


body.menu-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


.container {

    width:
        min(
            var(--container),
            calc(100% - 50px)
        );

    margin: auto;

}


/* ======================================================
   CURSOR
====================================================== */

.cursor {

    position: fixed;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--red);

    pointer-events: none;

    z-index: 9999;

    transform:
        translate(-50%,-50%);

    transition:
        width .2s,
        height .2s;

}

@media (max-width:800px) {

    .cursor {
        display: none;
    }

}


/* ======================================================
   HEADER
====================================================== */

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 2000;

    border-bottom:
        1px solid var(--line);

    background:
        rgba(12,12,11,.88);

    backdrop-filter:
        blur(14px);

}


.header-inner {
    width: calc(100% - 50px);
    max-width: var(--container);

    min-height: 82px;

    margin: 0 auto;

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


.logo {

    display: flex;

    align-items: center;

    gap: 11px;

}


.logo img {

    width: 70px;
    height: 70px;
    padding: .7rem;
    object-fit: contain;
   
    background: white;

}


.logo div {

    display: flex;

    flex-direction: column;

}


.logo strong {

    font-size: 15px;

    letter-spacing: .8px;

}


.logo span {

    margin-top: 4px;

    font-size: 7px;

    letter-spacing: 1.5px;

    color: var(--gray);

}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 30px;

}


.desktop-nav a {

    font-size: 10px;

    color: #AAA7A0;

    transition: .25s;

}


.desktop-nav a:hover {

    color: white;

}




/* ======================================================
   MENU BUTTON
====================================================== */

.menu-button {
    position: relative;

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.18);

    background: transparent;

    cursor: pointer;

    z-index: 2000;

    transition:
        border-color .3s ease,
        background .3s ease;
}


.menu-button:hover {
    border-color: var(--red);
}


.menu-button span {
    display: block;

    width: 20px;
    height: 1px;

    margin: 0;

    background: white;

    transition:
        transform .35s ease,
        opacity .25s ease,
        width .35s ease;
}


/* botão fechado */

.menu-button span:nth-child(2) {
    width: 14px;

    align-self: flex-end;

    margin-right: 15px;
}


/* botão aberto */

.menu-button.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-button.active span:nth-child(2) {
    opacity: 0;
    width: 20px;
}


.menu-button.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


.fullFULL {position:absolute; top:0; right:0; width: 0 !important; height: 0 !important; visibility: hidden; font-size: 1.7rem; opacity: 0; overflow: hidden;}


/* ======================================================
   MENU OVERLAY
====================================================== */

.menu-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100dvh;

    z-index: 1000;

    background: var(--red);

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(-100%);

    transition:
        transform .55s cubic-bezier(.77,0,.18,1),
        opacity .25s ease,
        visibility .55s;

    overflow-y: auto;
}


.menu-overlay.open {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}


.menu-overlay-inner {
    position: relative;

    width:
        min(
            var(--container),
            calc(100% - 50px)
        );

    min-height: 100dvh;

    margin: 0 auto;

    padding-top: 145px;
    padding-bottom: 45px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}


.menu-big-title {
    position: absolute;

    top: 65px;
    right: 0;

    color:
        rgba(255,255,255,.10);

    font-size:
        clamp(80px,13vw,180px);

    line-height: .8;

    font-weight: 900;

    letter-spacing: -8px;

    pointer-events: none;
}


.menu-overlay nav {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.menu-overlay nav a {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 10px 0;

    font-size:
        clamp(34px,5.5vw,72px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    color: white;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.menu-overlay nav a:hover {
    transform:
        translateX(15px);
}


.menu-overlay nav small {
    width: 25px;

    flex-shrink: 0;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 0;

    opacity: .6;
}


.menu-footer {
    position: relative;

    z-index: 2;

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.65);
}

/* ======================================================
   HERO
====================================================== */

.hero {

    position: relative;

    min-height: 900px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--black);

}


.hero-grid-lines {

    position: absolute;

    inset: 0;

    opacity: .4;

    background-image:

        linear-gradient(
            90deg,
            transparent 49.8%,
            var(--line) 50%,
            transparent 50.2%
        ),

        linear-gradient(
            0deg,
            transparent 49.8%,
            var(--line) 50%,
            transparent 50.2%
        );

    background-size:
        25% 100%,
        100% 180px;

}


.hero-grid-lines::after {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -200px;
    top: 130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(191,53,21,.25),
            transparent 65%
        );

}


.hero-number {

    position: absolute;

    left: 25px;
    top: 50%;

    transform:
        rotate(-90deg)
        translateY(-50%);

    transform-origin:
        left top;

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--gray-dark);

}


.hero-content {

    position: relative;

    z-index: 2;

    width:
        min(
            var(--container),
            calc(100% - 50px)
        );

    margin: auto;

}


.hero-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 65px;

}


.hero-top span {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--gray);

}


.hero-title-wrap {

    display: grid;

    grid-template-columns:
        1fr 220px;

    gap: 60px;

    align-items: end;

}


.hero h1 {

    font-size:
        clamp(75px,10vw,145px);

    line-height: .79;

    letter-spacing: -9px;

    font-weight: 900;

}


.hero h1 span {

    display: block;

    color: var(--red);

}


.hero h1 em {

    display: block;

    font-style: normal;

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.55);

}


.hero-side-text {

    display: flex;

    gap: 17px;

    padding-bottom: 7px;

}


.vertical-line {

    width: 1px;

    background: var(--red);

}


.hero-side-text p {

    max-width: 180px;

    color: var(--gray);

    font-size: 11px;

    line-height: 1.7;

}


.hero-bottom {

    margin-top: 85px;

    padding-top: 25px;

    border-top:
        1px solid var(--line);

    display: grid;

    grid-template-columns:
        110px 1fr 110px;

    align-items: center;

}


.circle-button {

    width: 88px;
    height: 88px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    color: white;

    font-size: 10px;

    transition: .3s;

}


.circle-button:hover {

    background: var(--red);

    border-color: var(--red);

    transform:
        rotate(-10deg);

}


.hero-description {

    display: flex;

    align-items: center;

    gap: 15px;

}


.hero-description strong {

    color: var(--red);

    font-size: 35px;

}


.hero-description span {

    color: var(--gray);

    font-size: 9px;

    line-height: 1.5;

    text-transform: uppercase;

}


.hero-brand-symbol {

    justify-self: end;

    width: 85px;
    height: 85px;

    background: white;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

}


.hero-brand-symbol img {

    width: 58px;
    height: 58px;

    object-fit: contain;

}


/* ======================================================
   MARQUEE
====================================================== */

.marquee {

    overflow: hidden;

    background: var(--red);

    border-top:
        1px solid rgba(255,255,255,.1);

    border-bottom:
        1px solid rgba(255,255,255,.1);

}


.marquee-track {

    width: max-content;

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 20px 0;

    animation:
        marquee 30s linear infinite;

}


.marquee span {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.marquee i {

    font-style: normal;

    opacity: .5;

}


@keyframes marquee {

    to {
        transform:
            translateX(-50%);
    }

}


/* ======================================================
   SECTION NUMBER
====================================================== */

.section-number {

    position: absolute;

    left: 25px;

    font-size: 8px;

    letter-spacing: 3px;

    color: var(--gray-dark);

}


/* ======================================================
   INTRO
====================================================== */

.intro {

    position: relative;

    padding:
        150px 0;

    background: var(--cream);

    color: var(--black);

}


.intro-grid {

    display: grid;

    grid-template-columns:
        .65fr 1fr;

    gap: 100px;

}


.intro-label {

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding-top: 10px;

}


.intro-label span {

    font-size: 9px;

    color: #77736B;

    letter-spacing: 1.5px;

}


.intro-content h2 {

    max-width: 750px;

    font-size:
        clamp(48px,7vw,90px);

    line-height: .95;

    letter-spacing: -5px;

}


.intro-content h2 strong {

    display: block;

    color: var(--red);

}


.intro-content p {

    max-width: 550px;

    margin-top: 40px;

    color: #706C64;

    font-size: 13px;

    line-height: 1.9;

}


.text-button {

    display: inline-flex;

    gap: 20px;

    align-items: center;

    margin-top: 35px;

    padding-bottom: 8px;

    border-bottom:
        1px solid var(--red);

    color: var(--red);

    font-size: 11px;

    font-weight: 800;

}


/* ======================================================
   SERVICES
====================================================== */

.services {

    position: relative;

    padding:
        140px 0;

    background: var(--black-2);

}


.services-header {

    display: grid;

    grid-template-columns:
        1fr .4fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 65px;

}


.mini-label {

    display: block;

    margin-bottom: 20px;

    color: var(--red);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.services-header h2 {

    font-size:
        clamp(50px,7vw,88px);

    line-height: .9;

    letter-spacing: -5px;

}


.services-header h2 span {

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.45);

}


.services-header p {

    color: var(--gray);

    font-size: 11px;

    line-height: 1.8;

}


/* service list */

.services-list {

    border-top:
        1px solid var(--line);

}


.service-row {

    border-bottom:
        1px solid var(--line);

}


.service-trigger {

    width: 100%;

    min-height: 100px;

    display: grid;

    grid-template-columns:
        80px 1fr 60px;

    align-items: center;

    gap: 25px;

    border: 0;

    background: transparent;

    color: white;

    text-align: left;

}


.service-index {

    color: var(--gray-dark);

    font-size: 9px;

    letter-spacing: 1px;

}


.service-name {

    font-size:
        clamp(25px,4vw,48px);

    font-weight: 700;

    letter-spacing: -2px;

    transition: .3s;

}


.service-trigger:hover
.service-name {

    color: var(--red);

}


.service-plus {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--line);

    border-radius: 50%;

    color: var(--gray);

    font-size: 20px;

    transition: .35s;

}


.service-row.active
.service-plus {

    background: var(--red);

    border-color: var(--red);

    transform:
        rotate(45deg);

    color: white;

}


.service-detail {

    max-height: 0;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        1fr 200px;

    transition:
        max-height .5s ease;

}


.service-row.active
.service-detail {

    max-height: 300px;

}


.service-detail > div:first-child {

    padding:
        0 0 40px 105px;

}


.service-detail span {

    font-size: 8px;

    color: var(--red);

    letter-spacing: 2px;

}


.service-detail p {

    max-width: 500px;

    margin-top: 12px;

    color: var(--gray);

    font-size: 12px;

    line-height: 1.8;

}


.service-detail a {

    display: inline-block;

    margin-top: 20px;

    color: white;

    font-size: 10px;

    border-bottom:
        1px solid var(--red);

    padding-bottom: 5px;

}


.service-detail-number {

    color:
        rgba(255,255,255,.04);

    font-size: 110px;

    line-height: .7;

    font-weight: 900;

}


/* ======================================================
   BIG STATEMENT
====================================================== */

.big-statement {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--red);

}


.big-statement-bg {

    position: absolute;

    left: -50px;

    bottom: -80px;

    font-size: 260px;

    font-weight: 900;

    color:
        rgba(0,0,0,.08);

    white-space: nowrap;

}


.big-statement .container {

    position: relative;

    z-index: 2;

}


.big-statement .container > span {

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.65);

}


.big-statement h2 {

    max-width: 850px;

    margin-top: 25px;

    font-size:
        clamp(65px,9vw,125px);

    line-height: .85;

    letter-spacing: -7px;

}


.big-statement h2 em {

    color:
        rgba(255,255,255,.45);

    font-style: normal;

}


.statement-line {

    width: 120px;
    height: 2px;

    margin-top: 50px;

    background: white;

}


/* ======================================================
   COMPANY
====================================================== */

.company {

    position: relative;

    padding:
        150px 0;

    background: var(--cream);

    color: var(--black);

}


.company-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 120px;

}


.company-left h2 {

    font-size:
        clamp(48px,6vw,78px);

    line-height: .95;

    letter-spacing: -5px;

}


.company-left h2 span {

    display: block;

    color: var(--red);

}


.company-right {

    padding-top: 25px;

}


.company-right p {

    max-width: 520px;

    color: #716D65;

    font-size: 12px;

    line-height: 1.9;

    margin-bottom: 22px;

}


.company-right .company-lead {

    color: var(--black);

    font-size: 19px;

    line-height: 1.5;

}


.company-stats {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 15px;

    margin-top: 60px;

    border-top:
        1px solid #D6D0C7;

}


.company-stats div {

    padding-top: 20px;

}


.company-stats strong {

    display: block;

    font-size: 40px;

    color: var(--red);

}


.company-stats span {

    color: #77736C;

    font-size: 9px;

    text-transform: uppercase;

}


/* ======================================================
   PROCESS
====================================================== */

.process {

    padding:
        140px 0;

    background: var(--black);

}


.process-top {

    margin-bottom: 65px;

}


.process-top h2 {

    max-width: 700px;

    font-size:
        clamp(55px,7vw,90px);

    line-height: .9;

    letter-spacing: -5px;

}


.process-top h2 span {

    color: var(--red);

}


.process-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 1px;

    background: var(--line);

}


.process-card {

    min-height: 300px;

    padding: 25px;

    background: var(--black);

    transition: .3s;

}


.process-card:hover {

    background: var(--red);

}


.process-card-top {

    display: flex;

    justify-content: space-between;

}


.process-card-top span {

    font-size: 9px;

    color: var(--gray);

}


.process-card-top b {

    font-size: 15px;

    font-weight: 400;

}


.process-card h3 {

    margin-top: 120px;

    font-size: 21px;

}


.process-card p {

    max-width: 220px;

    margin-top: 12px;

    color: var(--gray);

    font-size: 10px;

    line-height: 1.8;

}


.process-card:hover p {

    color:
        rgba(255,255,255,.7);

}


/* ======================================================
   CONTACT
====================================================== */

.contact {

    position: relative;

    padding:
        150px 0;

    background: var(--black-2);

    overflow: hidden;

}


.contact-bg {

    position: absolute;

    right: -50px;

    bottom: -100px;

    color:
        rgba(255,255,255,.025);

    font-size: 300px;

    font-weight: 900;

}


.contact-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr .75fr;

    gap: 120px;

    align-items: center;

}


.contact-left h2 {

    max-width: 700px;

    font-size:
        clamp(55px,7vw,90px);

    line-height: .9;

    letter-spacing: -5px;

}


.contact-left p {

    max-width: 500px;

    margin-top: 30px;

    color: var(--gray);

    font-size: 12px;

    line-height: 1.8;

}


.contact-note {

    margin-top: 50px;

    padding-top: 18px;

    border-top:
        1px solid var(--line);

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.contact-note span {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--red);

}


.contact-note strong {

    font-size: 10px;

    color: var(--gray);

}


/* form */

.contact-form {

    padding: 35px;

    background: white;

    color: var(--black);

}


.contact-form label {

    display: block;

    margin-bottom: 8px;

    font-size: 9px;

    color: #77736D;

}


.contact-form select,
.contact-form input,
.contact-form textarea {

    width: 100%;

    border:
        1px solid #DEDAD3;

    background: white;

    color: var(--black);

    outline: none;

    padding:
        0 13px;

    margin-bottom: 20px;

    border-radius: 0;

}


.contact-form select,
.contact-form input {

    height: 50px;

}


.contact-form textarea {

    height: 100px;

    padding-top: 14px;

    resize: vertical;

}


.contact-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus {

    border-color: var(--red);

}


.contact-button {

    width: 100%;

    min-height: 55px;

    border: 0;

    background: var(--red);

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    font-size: 11px;

    font-weight: 800;

}


.contact-button:hover {

    background: var(--red-dark);

}


.contact-form small {

    display: block;

    margin-top: 12px;

    text-align: center;

    font-size: 8px;

    color: #99948C;

}


/* ======================================================
   FAQ
====================================================== */

.faq {

    padding:
        140px 0;

    background: var(--cream);

    color: var(--black);

}


.faq-grid {

    display: grid;

    grid-template-columns:
        .7fr 1.2fr;

    gap: 120px;

}


.faq h2 {

    font-size:
        clamp(50px,6vw,75px);

    line-height: .9;

    letter-spacing: -5px;

}


.faq h2 span {

    color: var(--red);

}


.faq-list {

    border-top:
        1px solid #D8D2C9;

}


.faq-item {

    border-bottom:
        1px solid #D8D2C9;

}


.faq-item button {

    width: 100%;

    min-height: 75px;

    border: 0;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-align: left;

    color: var(--black);

    font-size: 12px;

    font-weight: 700;

}


.faq-item button b {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid #CCC6BD;

    border-radius: 50%;

    color: var(--red);

    font-size: 17px;

    font-weight: 400;

    transition: .3s;

}


.faq-item.active button b {

    transform:
        rotate(45deg);

    background: var(--red);

    color: white;

    border-color: var(--red);

}


.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .4s ease;

}


.faq-answer p {

    max-width: 600px;

    padding:
        0 50px 25px 0;

    color: #767168;

    font-size: 11px;

    line-height: 1.8;

}


/* ======================================================
   FOOTER
====================================================== */

footer {

    background:
        #080808;

}


.footer-top {

    min-height: 370px;

    padding:
        75px 0;

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 100px;

}


.footer-logo {

    display: flex;

    flex-direction: column;

}


.footer-logo img {

    width: 75px;
    height: 75px;
    padding: .7rem;
    background: white;

    object-fit: contain;

}


.footer-logo strong {

    margin-top: 18px;

    font-size: 17px;

    letter-spacing: 1px;

}


.footer-logo span {

    margin-top: 4px;

    font-size: 7px;

    color: var(--gray);

    letter-spacing: 1.5px;

}


.footer-links {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 50px;

}


.footer-links div {

    display: flex;

    flex-direction: column;

}


.footer-links small {

    margin-bottom: 25px;

    color: var(--red);

    font-size: 8px;

    letter-spacing: 1.5px;

}


.footer-links a {

    margin-bottom: 11px;

    color: #77736D;

    font-size: 10px;

    transition: .2s;

}


.footer-links a:hover {

    color: white;

}


.footer-bottom {

    border-top:
        1px solid var(--line);

}


.footer-bottom .container {

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.footer-bottom span {

    color: #55514C;

    font-size: 8px;

}


/* ======================================================
   FLOATING BUTTON
====================================================== */

.floating-button {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 800;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        9px 14px 9px 18px;

    background: white;

    color: var(--black);

    border-radius: 50px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

    font-size: 9px;

    font-weight: 800;

    transition: .3s;

}


.floating-button b {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #168C50;

    color: white;

    border-radius: 50%;

}


.floating-button:hover {

    transform:
        translateY(-4px);

}


/* ======================================================
   RESPONSIVE 1000
====================================================== */

@media (max-width:1000px) {


    .desktop-nav {

        display: none;

    }


    .hero-title-wrap {

        grid-template-columns: 1fr;

    }


    .hero-side-text {

        margin-top: 30px;

    }


    .services-header {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .company-grid {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .process-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .contact-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .faq-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}


/* ======================================================
   RESPONSIVE 700
====================================================== */

@media (max-width:700px) {

     .menu-button {
        width: 45px;
        height: 45px;

        position: relative;

        z-index: 2000;
    }


    .container,
    .hero-content,
    .menu-overlay-inner {

        width:
            calc(100% - 30px);

    }


    .hero {

        min-height: 800px;

    }


    .hero-top {

        flex-direction: column;

        gap: 10px;

    }


    .hero h1 {

        font-size: 64px;

        letter-spacing: -5px;

    }


    .hero-bottom {

        grid-template-columns:
            80px 1fr;

        gap: 25px;

    }


    .hero-brand-symbol {

        display: none;

    }


    .intro,
    .services,
    .company,
    .process,
    .contact,
    .faq {

        padding:
            90px 0;

    }


    .intro-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .intro-content h2 {

        font-size: 55px;

    }


    .services-header h2 {

        font-size: 60px;

    }


    .service-trigger {

        grid-template-columns:
            45px 1fr 45px;

        gap: 10px;

    }


    .service-name {

        font-size: 25px;

    }


    .service-detail {

        grid-template-columns: 1fr;

    }


    .service-detail > div:first-child {

        padding:
            0 0 35px 55px;

    }


    .service-detail-number {

        display: none;

    }


    .big-statement {

        min-height: 480px;

    }


    .big-statement h2 {

        font-size: 65px;

        letter-spacing: -5px;

    }


    .big-statement-bg {

        font-size: 130px;

    }


    .company-left h2 {

        font-size: 58px;

    }


    .process-grid {

        grid-template-columns: 1fr;

    }


    .process-card {

        min-height: 240px;

    }


    .process-card h3 {

        margin-top: 90px;

    }


    .contact-left h2 {

        font-size: 60px;

    }


    .footer-top {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .footer-links {

        grid-template-columns: 1fr 1fr;

        gap: 40px;

    }


    .footer-bottom .container {

        flex-direction: column;

        justify-content: center;

        gap: 8px;

        padding:
            15px 0;

        text-align: center;

    }

}


/* ======================================================
   RESPONSIVE 450
====================================================== */

@media (max-width:450px) {

    .logo img {padding: .3rem;}

    .hero h1 {

        font-size: 54px;

        letter-spacing: -4px;

    }


    .hero-side-text {

        display: none;

    }


    .hero-bottom {

        margin-top: 55px;

    }


    .intro-content h2 {

        font-size: 47px;

    }


    .services-header h2 {

        font-size: 50px;

    }


    .company-left h2 {

        font-size: 48px;

    }


    .contact-left h2 {

        font-size: 48px;

    }


    .faq h2 {

        font-size: 50px;

    }


    .footer-links {

        grid-template-columns: 1fr;

    }


    .floating-button span {

        display: none;

    }


}


/* ======================================================
   MOBILE - CORREÇÃO FINAL
====================================================== */

@media (max-width: 700px) {

    body {
        overflow-x: hidden;
    }


    .header {
        height: 70px;
    }


    .header-inner {
        width: calc(100% - 30px);
        min-height: 70px;
    }


    .logo img {
        width: 36px;
        height: 36px;
    }


    .logo strong {
        font-size: 13px;
    }


    .logo span {
        font-size: 6px;
        letter-spacing: 1.2px;
    }


    .menu-button {
        width: 45px;
        height: 45px;
    }


    /* -----------------------------
       MENU MOBILE
    ----------------------------- */

    .menu-overlay-inner {

        width:
            calc(100% - 30px);

        padding-top: 120px;
        padding-bottom: 30px;
    }


    .menu-big-title {

        top: 70px;

        right: -10px;

        font-size:
            clamp(70px,22vw,110px);

        letter-spacing: -5px;
    }


    .menu-overlay nav {

        gap: 4px;
    }


    .menu-overlay nav a {

        font-size:
            clamp(32px,10vw,48px);

        letter-spacing: -2px;

        padding: 9px 0;

        gap: 14px;
    }


    .menu-overlay nav small {

        width: 20px;

        font-size: 7px;
    }


    /* -----------------------------
       HERO
    ----------------------------- */

    .hero {

        min-height:
            100svh;

        height:
            auto;

        padding-top: 70px;

        padding-bottom: 35px;

        display: flex;

        align-items: center;
    }


    .hero-content {

        width:
            calc(100% - 30px);

        padding-top: 45px;
    }


    .hero-top {

        margin-bottom: 48px;

        gap: 8px;
    }


    .hero-top span {

        font-size: 7px;

        letter-spacing: 1.5px;
    }


    .hero-title-wrap {

        display: block;

        width: 100%;
    }


    .hero h1 {

        width: 100%;

        font-size:
            clamp(48px,15vw,64px);

        line-height: .90;

        letter-spacing: -4px;

        word-break: normal;
    }


    .hero h1 span,
    .hero h1 em {

        display: block;

        margin-top: 4px;
    }


    .hero-side-text {

        display: flex;

        margin-top: 35px;

        padding: 0;
    }


    .hero-side-text p {

        max-width: 240px;

        font-size: 10px;

        line-height: 1.6;
    }


    .hero-bottom {

        margin-top: 55px;

        padding-top: 20px;

        grid-template-columns:
            80px 1fr;

        gap: 15px;
    }


    .circle-button {

        width: 70px;
        height: 70px;

        font-size: 9px;
    }


    .hero-description strong {

        font-size: 32px;
    }


    .hero-description span {

        font-size: 8px;
    }


    .hero-brand-symbol {

        display: none;
    }


    .hero-number {

        display: none;
    }

}


/* ======================================================
   MOBILE PEQUENO
====================================================== */

@media (max-width: 400px) {

    .hero-content {

        padding-top: 35px;
    }


    .hero-top {

        margin-bottom: 40px;
    }


    .hero h1 {

        font-size: 46px;

        letter-spacing: -3px;

        line-height: .92;
    }


    .hero-side-text {

        margin-top: 28px;
    }


    .hero-bottom {

        margin-top: 45px;
    }


    .menu-overlay nav a {

        font-size: 31px;

        letter-spacing: -1.5px;
    }

}