@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --cor-principal: #e80400;
    /*--cor-secundaria: #006daa;*/
    --cor-secundaria: #757761;
    --cor-terciaria: #231f20;
    --cor-de-fundo-primaria: #F5F5F5;
    --cor-de-fundo-secundaria: #f7fff7;
    --cor-de-fundo-terciaria: #F6AA1C;
    --cor-de-texto-secundaria: #6f6f6f;
    --cor-vidro: #F5F5F580;
    --cor-vidro2: #231f2040;
    --fonte-primaria: "DM Sans", sans-serif;
}

.fonte-medium {
    font-weight: 500;
}

.fonte-bold {
    font-weight: 700;
}

body {
    background-color: var(--cor-de-fundo-secundaria);
    font-family: var(--fonte-primaria);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

header {
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem;
    justify-content: space-around;
    position: fixed;
    width: calc(100% - 2rem);
    background-color: var(--cor-de-fundo-secundaria);
    z-index: 10;
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.social-icon {
    height: 40px;
    margin-right: 12.8px;
}

.social-icon2 {
    height: 43.2px;
    margin-right: 6.4px;
}

.social-icon3 {
    height: 51.2px;
    filter: brightness(0) saturate(100%) invert(77%) sepia(80%) saturate(726%) hue-rotate(74deg) brightness(88%) contrast(85%);
}

.social-div {
    display: flex;
    align-items: center;
}

.logo {
    width: 300px;
    object-position: -100px;
}

.logo-div {
    display: flex;
    overflow: clip;
    height: 71px;
    width: 100px;
    align-items: center;
}

a {
    text-decoration: none;
    color: var(--cor-terciaria);
}

.Menu-Desktop a {
    font-size: 1.2rem;
    font-weight: 400;
    position: relative;
}

button {
    border-radius: 180px;
    padding: 1rem;
    border: none;
}

footer {
    padding: 3rem;
}

.Menu-Desktop {
    display: flex;
    gap: 2rem;
    position: relative;
}

main {
    padding-top: 118.98px;
}

.bus-icon {
    width: 256px;
    height: 64px;
    transform: rotate(180deg);
}

.faixa {
    width: 2%;
    height: 7%;
    background-color: var(--cor-de-fundo-primaria);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -40px;
    animation: moverFaixas 2s linear infinite;
}

@keyframes moverFaixas {
    from {
        left: -40px;
    }

    to {
        left: 100%;
    }
}

.faixa:nth-child(3) {
    animation-delay: 0s;
}

.faixa:nth-child(4) {
    animation-delay: 0.4s;
}

.faixa:nth-child(5) {
    animation-delay: 0.8s;
}

.faixa:nth-child(6) {
    animation-delay: 1.2s;
}

.faixa:nth-child(7) {
    animation-delay: 1.6s;
}

.faixa:nth-child(8) {
    animation-delay: 2.0s;
}

.Menu-Mobile {
    display: none;
}

@media (max-width: 768px) {

    .bus-icon {
        width: 64px;
        height: 32px;
    }

    .Menu-Desktop {
        display: none;
    }

    .Menu-Mobile {
        display: block;
    }

}

html {
    scroll-behavior: smooth;
}

.menu {
    display: none;
    background-color: var(--cor-de-fundo-secundaria);
    position: fixed;
    right: 0;
    top: 89px;
    z-index: 11;
    width: 10rem;
    align-items: end;
    padding: 1.5rem 0;
    border-bottom-left-radius: 15px;
}

.menu.show {
    display: block;
}

.menu ul {
    display: flex;
    row-gap: 24px;
    flex-direction: column;
}

.menu li {
    display: flex;
    justify-content: center;
}

.menu a {
    font-size: 1rem;
    font-weight: 700;
}

.Menu-Desktop a:after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    height: 1em;
    width: 100%;
    border-bottom: 2px solid;
    margin-top: 10px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}

.Menu-Desktop a:hover:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.Menu-Desktop a:hover {
    color: var(--cor-principal);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.scale {
    transition: all 0.3s ease;
}

.scale:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

h1, h2, h3, h4, p {
    user-select: none;
}

.icones-veiculo {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.icone-especificacao {
  width: 28px;
  height: 28px;
  object-fit: contain;
}