* {
    margin: 0;
    padding: 0;
    font-family: poppins;
    box-sizing: border-box;

}

html {
    scroll-behavior: smooth;

    overflow-x: hidden;
    max-width: 100%;
}

body {
    background: black;
    color: white;

    overflow-x: hidden;
    max-width: 100%;

}

.text-wrapper {
    display: flex;

    background-color: #273b77;
    padding: 10px;
    text-transform: uppercase;

    margin-top: -100px;
}

.text-wrapper span {
    white-space: nowrap;
    animation: animafaixa 5s linear infinite;
}

@keyframes animafaixa {
    0% {
        transform: translatex(0%);
    }

    100% {
        transform: translate(-100%);
    }
}

.container {
    width: 90%;
    margin: 0 auto;
}

/*btn whatsApp flutuante*/
#btn-flow {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/*header*/

#img-mbl-header {
    display: none;
}

.header-img {
    display: block;
}


header {
    background-image: url(../img/back-pc.png);
    background-size: 100%;
    height: 600px;
    background-repeat: no-repeat;
}

h1 {
    font-size: 65px;
    line-height: 65px;

    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transparente para mostrar o gradiente */
}

.header-flex {
    padding-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    /* border: solid 2px red; */
}

.header-txt {
    width: 40%;

    /* border: red solid 1px; */
}

.header-img {
    /* border: green solid 1px; */
}

.header-txt a {
    display: inline-block;
    color: white;
    text-decoration: none;
    background-color: green;
    padding: 15px;
    border-radius: 10px;
    text-transform: uppercase;
    margin-top: 10px;

}




/*variedade************************/
#variedade {
    padding: 35px 0;
    text-align: center;

    background-image: url(../img/back-variedade-pc.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.sub-t {
    font-size: 20px;
}

.h-2 {
    font-size: 50px;
    font-weight: bold;

    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transparente para mostrar o gradiente */
}

.cards {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    /* border: solid red 1px; */
}

.cards a {
    /* border: solid yellow 1px; */
    display: inline-block;
    width: 30%;
}



.cards img {
    width: 100%;
    cursor: pointer;
    transition: 0.2s;

    border-radius: 20px;
    box-shadow: 0 0 15px #ec8e06
}

.cards img:hover {
    transform: scale(1.03);

}

/*telas oled*/


#telas-oled {
    padding: 35px 0;
}

#telas-oled h2 {
    text-align: center;
    font-size: 50px;

    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transparente para mostrar o gradiente */
}

#telas-oled h3 {

    text-align: center;
    font-size: 30px;
}

h3+p {
    text-align: center;
}

.container-card-oled {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.card-oled {
    width: 30%;
    background-image: url(../img/back-card-novo.png);
    background-size: 100%;
    background-position: top;
    /* border: solid rgb(70, 70, 255) 2px; */
    padding: 30px;
    border-radius: 20px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: 0.2s;
    box-shadow: 0 0 15px #ec8e06;
}

.card-oled:hover {
    transform: scale(1.05);
}

/*telas china*/

#telas-china {
    padding: 35px 0;
}

#telas-china h2 {
    text-align: center;
    font-size: 50px;


    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transpare*/
}

#telas-china h3 {

    text-align: center;
    font-size: 30px;
}

h3+p {
    text-align: center;

}

.container-card-china {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.card-china {
    width: 30%;
    padding: 30px;
    border-radius: 20px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;

    background-image: url(../img/back-card-novo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: 0.2s;
    box-shadow: 0 0 15px #ec8e06;
}

.card-china:hover {
    transform: scale(1.05);
}

/*baterias*/

.b3-mobile {
    display: none;
}

#bateria {
    padding: 35px 0;
}

#bateria h2 {
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;

    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transparente para mostrar o gradiente */
}

h2+p {
    text-align: center;
}

#img-bt {
    width: 100%;
    margin-top: 30px;
}

.container-bateria {
    margin-top: 30px;
    display: flex;
    align-items: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.container-bateria img {
    width: 13%;
    cursor: pointer;
    transition: 0.2s;
}

.container-bateria img:hover {
    transform: scale(1.10);
}




/*docs*/

#doc {
    padding: 35px 0;
}

#doc h2 {
    text-align: center;
    font-size: 50px;


    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transparente para mostrar o gradiente */
}

h2+p {
    text-align: center;
}


.container-card-doc {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.card-doc {
    width: 30%;

    padding: 30px;
    border-radius: 20px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;

    background-image: url(../img/back-cards.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: 0.2s;
    box-shadow: 0 0 15px rgb(66, 66, 255);
}

.card-doc:hover {
    transform: scale(1.05);
}

/*missao*/

#missao {
    padding: 35px 0;
}

#missao h2 {
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;

    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transparente para mostrar o gradiente */

    margin-bottom: 20px;
}

.container-missao {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.title-missao-txt {
    display: flex;
    flex-direction: row;
    color: #ec8e06;
    gap: 10px;
}

.title-missao-txt img {
    max-width: 100%;
    height: auto;
    object-fit: contain;

}

.missao-txt {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.missao-txt,
.missao-img {
    width: 48%;
}

.missao-txt span {
    font-weight: bold;
    font-size: 20px;
}

.missao-img img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.missao,
.visao,
.valores {
    padding: 10px;
    border-radius: 10px;
    background-image: url(../img/back-missao.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

/*depoimentos*/
#depoimentos {
    padding: 35px 0;
}

#depoimentos h2 {
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;
    margin-bottom: 30px;

    background: linear-gradient(to right, #ec8e06, white);
    /* Gradiente desejado */
    -webkit-background-clip: text;
    /* Faz o gradiente ser aplicado ao texto */
    -webkit-text-fill-color: transparent;
    /* Torna a cor do texto transpare*/
}

.container-depoimentos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.card-depoimento {
    width: 30%;
    padding: 15px;
    border-radius: 20px;
    background-image: url(../img/back-missao.png);
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;

    border: solid #ec8e06 1px;

    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;

    transition: 0.2s;
}

.card-depoimento:hover {
    box-shadow: 0 0 15px #ec8e06;
}

/*orçamento*/

#orcamento {
    margin-top: 20px;
    padding: 35px 0;
    text-align: center;

    background-color: #ec8e06;
    color: black;
}

#orcamento h2 {
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: bold;
}

#orcamento span {
    font-size: 30px;
}

#orcamento a {
    display: inline-block;
    color: white;
    text-decoration: none;
    background-color: green;
    padding: 15px;
    border-radius: 10px;
    text-transform: uppercase;
    margin-top: 10px;
}

/*info-like*/

#info-like {
    padding: 35px 0;
}

.container-info-like {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.c-1 {
    display: flex;
    flex-direction: column;
    gap: 50px;
    text-align: center;
}

.c-1 img {
    margin: 0 auto;
}

.c-2 {
    text-align: center;
}

.c-2 p {
    margin-bottom: 20px;
}

iframe {
    width: 100%;
}

.c-1,
.c-2 {
    width: 45%;
}

/*rodape*/


footer {
    padding: 35px 0;
    background-color: #d3d0cc;
    color: black;
}

.h2-footer {
    font-weight: bold;
}

footer a i {
    color: black;
}

.container-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.logo-entrega {
    display: flex;
    gap: 10px;
}

.logo-entrega img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}