body {
    font-family: urbane-rounded, sans-serif;
    background: url(/img/fundo\ \(2\).webp) no-repeat center center;
    background-size: cover;
    background-color: #FFED00;
    display: grid;
    align-items: center;
}
.mixtree-grid {
    display: grid;
    justify-content: center;
}
.mixtree-grid > a:last-child {
    /* max-width: fit-content; */
    border-radius: 10px;
    background-color: #DF0209;
    color: black;
    padding: 15px;
    text-align: center;
    width: 100%;
    transition: .3s;
}
.mixtree-grid > a:last-child:hover {
    background-color: black;
    color: #FFED00;
}
.logo img {
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.6);
    transition: .3s;
}
.logo:hover img{
    transform: scale(1.7);
}
.social p {
    font-weight: 600;
    text-align: center;
}
.social {
    margin-top: 20px;
    margin-bottom: 20px;
}
.social div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.social div a {
    transition: .3s;
}
.social div a:hover {
    transform: scale(1.25);
}
.social div img {
    transform: scale(1.2);
}

.local {
    background-color: black;
    display: grid;
    grid-template-columns: max-content 1fr;
    color: #FFED00;
    padding: 20px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    width: 287px;
    z-index: 2;
    transition: .3s;
}
.local img {
    margin-left: 10px;
}
.local p {
    max-width: 200px;
}
.local p span {
    font-weight: 600;
}
.local:hover {
    transform: scale(1.1);
}

.fone {
    position: relative;
    bottom: 20px;
    z-index: 1;
    background-color: #DF0209;
    display: grid;
    grid-template-columns: max-content 1fr;
    padding: 20px;
    padding-top: 35px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    grid-gap: 25px;
    width: 287px;
    transition: .3s;
}
.fone:hover {
    transform: translateY(10px);
}
.fone p {
    font-weight: 600;
    text-align: center;
    max-width: fit-content;
}
.fone img {
    margin-left: 15px;
}
.loja1 {
    display: grid;
    justify-items: center;
}
.loja2 {
    display: grid;
    justify-items: center;
}

.whats-fixed {
    position: fixed;
    bottom: 40px;
    right: 40px;
    animation: move 3s infinite;
    z-index: 222;
    max-width: 65px;
  }
  
  @keyframes move {
    25%{
       transform: translateX(-10px);  }
    50%{
      transform: translateX(0px);  
    }
    75%{
      transform: translateX(10px); 
    }
    100%{
      transform: translateX(0px); 
    }
  }

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

    .logo img {
        transform: scale(1);
    }
    .logo:hover img{
        transform: scale(1);
    }
    .social div a:hover {
        transform: scale(1.05);
    }
    .social div img {
        transform: scale(1);
    }

    .fone {
        position: relative;
        bottom: 20px;
        z-index: 1;
        background-color: #DF0209;
        display: grid;
        grid-template-columns: max-content 1fr;
        padding: 20px;
        padding-top: 35px;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        grid-gap: 25px;
        width: 227px;
        transition: .3s;
    }
    .fone p {
        font-size: .9rem;
    }
    .fone img {
        margin-left: 0px;
    }
    .local {
        background-color: black;
        display: grid;
        grid-template-columns: max-content 1fr;
        color: #FFED00;
        padding: 20px;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        grid-gap: 20px;
        position: relative;
        width: 227px;
        z-index: 2;
        transition: .3s;
    }
    .local img {
        margin-left: 0px;
    }
    .local p {
        font-size: 0.75rem;
    }
    .local p span {
        font-size: 0.9rem;
    }
    
  }