@media (max-width: 480px) {
    body {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        font-family: "DM Sans", sans-serif;
        font-weight: 600;

        & #menu {
            width: 100%;
            height: 5rem;
            background-image: linear-gradient(
                90deg,
                #f2295b56 0%,
                #641d9a56 100%
            );

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: left;
            position: fixed;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 400;
            z-index: 20;

            & #home-logo-mobile {
                display: flex;
                padding: 10px 30px;
            }

            & #menu-hamburguer {
                background-color: white;
                width: 25px;
                height: 25px;
                display: flex;
                padding: 10px 30px;
                mask-image: url(/image/icons/icone-menu-hamburger.svg);
                mask-position: center center;
                mask-size: contain;
                mask-repeat: no-repeat;
            }

            & #esc {
                display: none;
                padding: 10px 15px;
            }

            & nav {
                background-color: white;
                width: 70%;
                display: none;
                flex-direction: column;
                align-items: end;
                justify-content: end;
                gap: 20px;
                padding: 20px 0px;
                position: absolute;
                top: 0px;
                right: 0px;

                #home-logo {
                    display: none;
                }

                & #itens-menu {
                    /* border: rgb(255, 0, 195) solid 1px; */
                    width: 100%;
                    background-color: transparent;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: start;
                    gap: 20px;
                    padding: 0px 0px;
                    text-transform: uppercase;
                    font-size: 1.2rem;
                    font-weight: 300;

                    a {
                        padding-left: 20px;
                        color: #3a3a3a;
                    }

                    & ::first-letter {
                        text-transform: uppercase;
                    }

                    & #drop-down {
                        display: none;
                        width: 25px;
                        height: 25px;
                        background-image: url(/image/icons/arrow-left-icon.png);
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        transform: rotate(270deg);
                        position: absolute;
                        right: 445px;
                        bottom: 4px;
                    }

                    & #menu-drop-servicos {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                        /* border: none; */
                        background-color: transparent;
                        font-size: 1rem;
                        font-weight: 300;
                        position: relative;

                        top: 0px;
                        left: 0px;
                        text-transform: lowercase;

                        a {
                            padding: 0px 20px;

                            &:hover {
                                background-color: white;
                                color: #3a3a3a;
                            }

                            &::first-letter {
                                text-transform: uppercase;
                            }
                        }
                    }
                }
            }

            & p {
                display: none;
            }

            & a {
                color: white;
                text-decoration: none;

                & :visited {
                    color: white;
                    text-decoration: none;
                }
            }
        }

        & main {
            width: inherit;
            /* overflow: hidden; */

            & #carousel {
                height: 100vh;
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                color: white;

                & #container-tbelucci {
                    background-image: url("/image/banner_tbeluccirh_mobile.png");
                    background-position: bottom center;
                    background-repeat: no-repeat;
                    background-size: cover;

                    width: 100vw;
                    height: 100vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    & #container-info-tbelucci {
                        width: calc(100% - 30px);
                        display: flex;
                        align-items: center;
                        margin-left: 0px;
                        flex-flow: column wrap;
                        gap: 15px;
                        text-align: center;
                    }

                    & h1 {
                        font-size: 2rem;
                        font-weight: 400;

                        & span {
                            background: linear-gradient(
                                137deg,
                                #de4238 0%,
                                #631d9a 100%
                            );
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    & p {
                        font-size: 1rem;
                        font-weight: 400;
                    }

                    & button {
                        width: 242px;
                        height: 58px;
                        background-color: transparent;
                        text-decoration: none;
                        background-image: linear-gradient(
                            137deg,
                            #de4238 0%,
                            #631d9a 100%
                        );
                        border: none;
                        border-radius: 50px;
                        margin: 20px 0px;
                        text-decoration: none;
                        font-weight: 700;

                        & a {
                            color: white;
                            text-decoration: none;

                            & :visited {
                                color: white;
                                text-decoration: none;
                            }
                        }
                    }
                }

                & #container-target {
                    background-image: url("/image/banner_tbeluccitarget_mobile.png");
                    background-position: bottom center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    height: 100vh;
                    width: 100vw;
                    display: none;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    & #container-info {
                        width: calc(100% - 30px);
                        display: flex;
                        margin-left: 0px;
                        align-items: center;
                        flex-flow: column wrap;
                        gap: 15px;
                        text-align: center;
                    }

                    & h1 {
                        font-size: 2rem;
                        font-weight: 400;

                        & span {
                            background: linear-gradient(
                                137deg,
                                #de4238 0%,
                                #631d9a 100%
                            );
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    & p {
                        font-size: 1.1rem;
                        font-weight: 400;
                    }
                }
            }

            & #bullets {
                display: flex;
                justify-content: center;
                gap: 20px;
                position: relative;
                top: -50px;
                z-index: 5;

                & label {
                    border-radius: 10px;
                    width: 90px;
                    height: 10px;
                    background-color: #80808033;

                    & input[type="radio"] {
                        position: absolute;
                        opacity: 0;
                        pointer-events: none;
                    }
                }
            }

            & #quem-somos-section {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 40px 0px;

                & #quem-somos-container {
                    width: calc(100% - 30px);
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 40px;

                    & #quem-somos-content {
                        width: 100%;
                        height: 50%;
                        display: flex;
                        flex-direction: column;
                        gap: 40px;

                        & #quem-somos-info {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            gap: 15px;
                            text-align: center;

                            & h1 {
                                color: #3a3a3a;
                                font-size: 3rem;
                            }

                            & p {
                                color: #7a7a7a;
                                font-size: 1rem;
                                font-weight: 400;
                            }
                        }

                        & #foto-thalita {
                            width: 100%;
                            height: 100vw;
                            background-image: url(/image/Quem-Somos.png);
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            border-radius: 15px;
                        }
                    }

                    & #mvv {
                        width: 100%;
                        height: 50%;
                        display: flex;
                        flex-direction: column;
                        gap: 30px;

                        & #mvv-title {
                            text-align: center;

                            & h1 {
                                color: #3a3a3a;
                                font-size: 2rem;
                            }
                        }

                        & #mvv-cards-container {
                            display: flex;
                            flex-direction: row;
                            justify-content: start;
                            gap: 30px;
                            overflow-x: auto;
                            flex-wrap: nowrap;

                            overscroll-behavior-x: contain;

                            & .card {
                                background-image: linear-gradient(
                                    135deg,
                                    #f2295b 0%,
                                    #641d9a 100%
                                );
                                width: 270px;
                                height: 420px;
                                margin: 10px 0px;
                                display: flex;
                                flex-direction: column;
                                gap: 30px;
                                flex-shrink: 0;
                                padding: 30px;
                                border-radius: 15px;
                                color: white;
                                box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
                                transition: box-shadow 0.3s ease;

                                & p {
                                    font-size: 1rem;
                                    font-weight: 300;
                                }

                                & .head {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    gap: 30px;
                                }
                            }

                            & #card1 {
                                & #icone-missao {
                                    height: 50px;
                                    width: 50px;
                                    background-color: white;
                                    mask-image: url(/image/Missao.png);
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                }
                            }

                            & #card2 {
                                background-image: none;
                                color: #7a7a7a;

                                & #icone-visao {
                                    height: 50px;
                                    width: 50px;
                                    background-color: #7a7a7a;
                                    mask-image: url(/image/Visao.png);
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                }
                            }

                            & #card3 {
                                & #icone-valores {
                                    height: 50px;
                                    width: 50px;
                                    background-color: white;
                                    mask-image: url(/image/Valores.png);
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                }

                                & .bold {
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }

            & #nossos-servicos-section {
                width: 100%;
                height: auto;
                padding: 50px 0px;
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: #000000;
                color: white;

                & #nossos-servicos-container {
                    width: calc(100% - 30px);
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    gap: 50px;

                    & #nossos-servicos-head {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                        text-align: center;

                        & h1 {
                            font-size: 2rem;
                        }

                        & p {
                            color: #7a7a7a;
                            font-weight: 400;
                        }
                    }

                    & #nossos-servicos-info {
                        display: flex;
                        flex-direction: column-reverse;
                        gap: 30px;

                        & #nossos-servicos-img {
                            width: 300px;
                            height: 300px;
                            background-image: url(/image/Recrutamento-e-seleção.png);
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: contain;                            
                            align-self: center;
                        }

                        & #infos {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            gap: 20px;
                            text-align: center;

                            & h1 {
                                font-size: 2rem;

                                & span {
                                    background: linear-gradient(
                                        137deg,
                                        #de4238 0%,
                                        #631d9a 100%
                                    );
                                    background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                }
                            }

                            & p {
                                font-weight: 400;
                            }

                            & #topic {
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                text-align: left;
                            }
                        }
                    }

                    & #nossos-servicos-plans {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 20px;

                        & h1 {
                            font-size: 2rem;
                        }

                        & #cards-container {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 0px;

                            & .card {
                                width: 300px;
                                height: fit-content;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                gap: 10px;
                                padding: 10px;
                            }

                            & #card-1 {
                                /* border: red solid 1px; */
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                text-align: center;

                                & p {
                                    font-weight: 400;
                                }
                            }
                        }
                    }

                    & #nosso-servicos-outros {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 20px;

                        & h1 {
                            font-size: 2rem;

                            & span {
                                background: linear-gradient(
                                    137deg,
                                    #de4238 0%,
                                    #631d9a 100%
                                );
                                background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }
                        }

                        & p {
                            font-weight: 400;
                            text-align: center;
                        }

                        & #cards-container {
                            width: 270px;
                            display: flex;
                            flex-direction: row;
                            justify-content: start;
                            gap: 30px;
                            overflow-x: auto;
                            flex-wrap: nowrap;

                            overscroll-behavior-x: contain;

                            & .card {
                                background-color: #121212;
                                width: 250px;
                                height: 300px;
                                display: flex;
                                flex-direction: column;
                                flex-shrink: 0;
                                gap: 30px;
                                padding: 10px;
                                margin: 10px 0px;
                                border-radius: 15px;

                                & .icones {
                                    width: 40px;
                                    height: 40px;
                                    background-color: white;
                                }

                                & h1 {
                                    font-size: 1rem;
                                }

                                & #icone1 {
                                    mask-image: url(/image/Simulação-de-entrevista.png);
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                }

                                & #icone2 {
                                    mask-image: url(/image/Preparação-de-Entrevista.png);
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                }

                                & #icone3 {
                                    mask-image: url(/image/Busca-de-Vagas.png);
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                }
                            }
                        }
                    }
                }
            }

            & #para-empresas {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                & #para-empresas-container {
                    width: calc(100% - 30px);
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    gap: 30px;

                    & #recrutamento-selecao {
                        display: flex;
                        flex-direction: column;
                        gap: 30px;

                        & #head-para-empresas {
                            display: flex;
                            flex-direction: column;
                            gap: 30px;
                            text-align: center;

                            & h1 {
                                font-size: 3rem;
                                color: #3a3a3a;
                            }

                            & p {
                                font-size: 1rem;
                                color: #7a7a7a;
                                font-weight: 400;
                            }
                        }

                        & #content1-container {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 30px;

                            & #content {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 20px;

                                & h1 {
                                    font-size: 3rem;
                                    color: #3a3a3a;
                                    text-align: center;
                                }

                                & div {
                                    display: flex;
                                    flex-direction: column;                                    
                                    gap: 10px;

                                    & h1 {
                                        font-size: 1.1rem;
                                        color: #3a3a3a;
                                    }

                                    & p {
                                        font-weight: 500;
                                        font-size: 1rem;
                                        color: #3a3a3a;
                                        text-align: center;
                                    }

                                    & #vantagens {
                                        p {
                                            text-align: left;
                                        }
                                    }
                                }
                            }

                            & #img {
                                width: 90vw;
                                height: 90vw;
                                background-image: url(/image/Banner-recrutamento-e-seleção.png);
                                background-position: center center;
                                background-repeat: no-repeat;
                                background-size: contain;
                            }
                        }
                    }

                    & #outplacement {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 30px;

                        & h1 {
                            font-size: 3rem;
                            color: #3a3a3a;
                        }

                        & #content-container {
                            height: auto;
                            display: flex;
                            flex-direction: column-reverse;
                            gap: 30px;

                            & #img {
                                width: 85vw;
                                height: 85vw;
                                background-image: url(/image/Banner-Outpalcement.png);
                                background-position: center center;
                                background-repeat: no-repeat;
                                background-size: contain;
                            }

                            & #content {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                gap: 30px;

                                & p {
                                    font-size: 1rem;
                                    font-weight: 500;
                                    text-align: center;
                                }

                                & h1 {
                                    font-size: 1.1rem;
                                }

                                & #beneficios {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 10px;

                                    & p {
                                        text-align: left;
                                    }
                                }
                            }
                        }

                        & p {
                            font-size: 1rem;
                            color: #3a3a3a;
                            font-weight: 500;
                            text-align: center;
                        }
                    }
                }
            }

            & #historias-de-sucesso {
                background-color: #1f1a21;
                background-image: url("/image/doted-map.png");
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 30px;

                & #hds-header {
                    margin-top: 30px;
                    text-align: center;
                    color: white;

                    & h1 {
                        font-size: 59px;
                    }

                    & p {
                        font-size: 16px;
                    }
                }

                #depoimentos {
                    /* border: red solid 1px; */
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 30px;
                    width: 100%;

                    & #prints {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        overflow-x: auto;
                        flex-wrap: nowrap;
                        width: 100vw;
                        margin-top: 30px;
                        overscroll-behavior-x: contain;

                        & img {
                            border-radius: 15px;
                            object-fit: contain;
                        }
                    }

                    & #nav-arrows {
                        width: calc(100vw - 30px);
                        display: none;
                        justify-content: space-between;
                        z-index: 15;
                        position: relative;
                        bottom: 0px;

                        & img {
                            &:hover {
                                cursor: pointer;
                            }
                        }
                    }
                }

                & #case-sucesso {
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    & h1 {
                        width: calc(100% - 30px);
                        font-size: 2rem;
                        color: white;

                        & p {
                            font-size: 1rem;
                            font-weight: 400;
                        }
                    }
                }

                & #videos {
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                    margin: 40px 0px;

                    & iframe {
                        border-radius: 15px;
                    }

                    .video-wrapper {
                        position: relative;
                        width: calc(100vw - 20px);
                        margin: auto;
                        cursor: pointer;
                    }

                    .video-thumbnail {
                        display: block;
                        width: calc(100vw - 20px);
                        border-radius: 15px;
                    }

                    .play-button {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 80px;
                        height: 80px;
                        background: url("/image/icons/play-button.png")
                            no-repeat center center;
                        background-size: contain;
                        pointer-events: none;
                        z-index: 15px !important;
                    }

                    iframe {
                        width: calc(100vw - 20px);
                        height: 60vw;
                        border: none;
                        display: none;
                    }
                }
            }

            & #botão-whatsapp {
                background-color: #25d366;
                width: 60px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                z-index: 10;
                position: fixed;
                bottom: 1.5rem;
                right: 1.5rem;

                & img {
                    width: 2rem;
                    position: relative;
                    left: 1px;
                    top: 1px;
                }
            }
        }

        & footer {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgb(0, 0, 0);
            color: white;

            & #iformacoes {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                & #logo {
                    width: 100%;
                    margin: 20px;
                    display: flex;
                    justify-content: center;

                    & img {
                        width: 250px;
                    }
                }

                & #links-rapidos {
                    text-align: center;
                    margin: 20px;

                    p {
                        color: red;
                        font-size: 20px;
                    }

                    & ul {
                        li {
                            list-style: none;
                            font-weight: 400;

                            & a {
                                color: white;
                                text-decoration: none;

                                & :visited {
                                    color: white;
                                    text-decoration: none;
                                }
                            }
                        }
                    }
                }

                & #redes-sociais {
                    margin: 20px;

                    & p {
                        color: purple;
                        font-size: 20px;
                    }
                }
            }

            & #copyRight {
                display: flex;
                flex-direction: row;
                justify-content: center;
                text-align: center;
            }
        }
    }
}

@keyframes menu {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}