@media screen and (min-width: 481px) {
    .box-span {
        max-width: 80vw;
        margin-left: 10vw;
        margin-top: 5vh;
    }

    .span-text {
        font-size: 0.7rem;
    }

    .title {
        font-size: 2rem;
    }

    .products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        justify-content: center;
        max-width: 80vw;
        margin: 5vh auto;
        gap: 0 8vw;
    }

    button {
        box-sizing: border-box;
        color: white;
        background-color: #FF6A00;
        border: none;
        border-radius: 200px;
        padding: 1rem 3rem;
        font-size: 1.2rem;
        max-width: 30vw;
        font-weight: bold;
        cursor: pointer;
    }

    #find-shop {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5%;
    }

    button a {
        color: white;
        text-decoration: none;
    }

    .buttons {
        display: flex;
        justify-content: center;
    }

    #shop {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 40px;
        gap: 2vh;
        min-width: 48vw;
        padding: 2rem;
        display: none;
        opacity: 0;
        margin-right: 2vw;
        transition: 0.3s opacity;
        max-width: 50vw;
    }

    #shop a {
        color: blue;
    }

    #shop-loc {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #shop-loc iframe {
        width: 100%;
        max-height: 30vh;
    }

    #form {
        position: relative;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 1rem 3rem;
        border-radius: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2vh;
        min-width: 25vw;
        width: fit-content;
        transition: 0.3s opacity;
        margin-right: 2vw;
    }

    #form h2 {
        color: #FF6A00;
        font-weight: bold;
        text-align: center;
    }

    #form input {
        box-sizing: border-box;
        outline: none;
        border: 1px solid #606062;
        border-radius: 20px;
        padding: 0.5rem 2rem;
        width: 100%;
        transition: border 0.3s;
    }

    #form input:focus {
        border: 1px solid #FF6A00;
        transition: border 0.3s;
    }

    #form input:hover {
        border: 1px solid #FF4A00;
        transition: border 0.3s;
    }

    #form button:not(:disabled) {
        background-color: #FF6A00;
        color: white;
        cursor: pointer;
        border: none;
        outline: none;
        border-radius: 20px;
        padding: 0.5rem 2rem;
        transition: 0.3s background-color;
    }

    #form button:disabled {
        background-color: #606062;
        color: white;
        cursor: default;
        border: none;
        outline: none;
        border-radius: 20px;
        padding: 0.5rem 2rem;
        transition: 0.3s background-color;
    }

    #banner {
        min-width: 100vw;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 55vh;
        display: flex;

        background-image: url('/images/banner.webp');
        justify-content: start;
    }

    #banner iframe {
        max-width: 50vw;
        height: auto;
        padding: 2rem;
        box-sizing: border-box;
    }

    video {
        max-height: 60vh;
        height: auto;
        padding: 2rem;
        box-sizing: border-box;
        margin-right: 20vw;
        margin-left: 10vw;
    }
}

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

    body,
    html {
        overflow-x: hidden;
    }

    .box-span {
        max-width: 70vw;
        margin-left: 15vw;
        margin-top: 5vh;
    }

    .span-text {
        font-size: 0.5rem;
    }

    .title {
        font-size: 1rem;
    }

    .products {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-content: center;
        max-width: 90vw;
        margin: 5vh auto;
        gap: 0 5vw;
    }

    button {
        box-sizing: border-box;
        color: white;
        background-color: #FF6A00;
        border: none;
        border-radius: 200px;
        padding: 0.5rem 3rem;
        font-size: 1rem;
        max-width: 90vw;
        font-weight: bold;
        cursor: pointer;
    }

    #find-shop {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5%;
    }

    button a {
        color: white;
        text-decoration: none;
    }

    .buttons {
        display: flex;
        gap: 3vh;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #shop {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 40px;
        gap: 2vh;
        max-width: 80vw;
        padding: 2rem;
        display: none;
        opacity: 0;
        transition: 0.3s opacity;
        max-height: 100%;
        margin-bottom: 2vh;
    }

    #shop-loc {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #shop-loc iframe {
        width: 100%;
        max-height: 30vh;
    }

    #form {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 1rem 3rem;
        border-radius: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2vh;
        transition: 0.3s opacity;
        margin-bottom: 2vh;
        max-width: 70vw;
    }

    #form h2 {
        color: #FF6A00;
        font-weight: bold;
        text-align: center;
    }

    #form input {
        box-sizing: border-box;
        outline: none;
        border: 1px solid #606062;
        border-radius: 20px;
        padding: 0.5rem 2rem;
        width: 100%;
        transition: border 0.3s;
    }

    #form input:focus {
        border: 1px solid #FF6A00;
        transition: border 0.3s;
    }

    #form input:hover {
        border: 1px solid #FF4A00;
        transition: border 0.3s;
    }

    #form button:not(:disabled) {
        background-color: #FF6A00;
        color: white;
        cursor: pointer;
        border: none;
        outline: none;
        border-radius: 20px;
        padding: 0.5rem 2rem;
        transition: 0.3s background-color;
        font-size: 1rem;
    }

    #form button:disabled {
        background-color: #606062;
        color: white;
        cursor: default;
        border: none;
        outline: none;
        border-radius: 20px;
        padding: 0.5rem 2rem;
        transition: 0.3s background-color;
        font-size: 1rem;
    }

    #banner {
        min-width: 100vw;
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: end;
        display: flex;
        align-items: end;
        background-size: contain;
        background-color: #f85b01;

        background-image: url('/images/banner-m.webp');
        min-height: 87vh;
    }

    #banner iframe {
        max-width: 100vw;
        height: auto;
        padding: 2rem;
        box-sizing: border-box;
        margin-bottom: 5vh;
    }

    video {
        position: relative;
        max-height: 60vh;
        height: auto;
        box-sizing: border-box;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 3vh;
    }
}

.title {
    position: relative;
    padding-left: 10vw;
    padding-right: 1vw;
    color: #606062;
    width: fit-content;
    font-weight: 900;
    margin-top: 10vh;
}

.title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2vh;
    width: 100%;
    height: 3px;
    background-color: #FF6A00;
}

.products img {
    max-width: 100%;
    height: auto;
}

.span-text {
    font-weight: lighter;
}

#shop-name {
    color: #FF6A00;
    font-size: 1.75rem;
}

.field {
    color: #FF6A00;
}

.img-sul {
    display: none;
}

.img-norte {
    display: none;
}

.container-form {
    display: flex;
    justify-content: center;
    margin: 10vh;
}

#form {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#btn-find svg {
    width: 1.5rem;
}

#shop {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.aviso-campanha {
        background-color: #f8f8f8;
        padding: 25px;
        font-family: 'Arial', sans-serif;
        text-align: center;
        margin: 2rem auto;
        max-width: 700px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

.aviso-campanha h2 {
    color: #333;
    margin: 0 0 15px 0;
    font-size: 2em;
}

.aviso-campanha p {
    color: #555;
    font-size: 1.2em;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) { 
    .aviso-campanha {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media (max-width: 768px) {
    .aviso-campanha {
        padding: 20px;
        margin-top: 2rem;
    }

    .aviso-campanha h2 {
        font-size: 1.6em; 
    }

    .aviso-campanha p {
        font-size: 1em;
    }
}