/*
==========
Styles for Whatsapp.
==========
*/

.link__whatsapp__container{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    animation-name: animate-logo;
    animation-duration: .4s;
    z-index: 1;
}

@keyframes animate-logo{
    0%{
        transform: scale(1,1);
    }

    50%{
        transform: scale(1.7, 1.7);
    }

    100%{
        transform: scale(1,1);
    }
}

.figure__whatsapp{
    width: 100%;
    height: 100%;
}

.logo__whatsapp{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.move__whatsapp{
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    transition: all .3s ease-in-out;
}

.return__whatsapp{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    transition: all .3s ease-in-out;
}

/*
==========
Styles for footer.
==========
*/

footer{
    width: 100%;
    height: auto;
    display: flex;
    gap: 1em;
    flex-direction: column;
    background-color: var(--redwine-color);
    padding: 2em;
}

footer .business{
    display: flex;
    width: 200px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding-bottom: 2em;
    padding-top: 1em;
}

footer .business img{
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

/*
==========
Styles for navigation menu in footer.
==========
*/

.navigation__footer{
    width: 100%;
    height: auto;
}

.navigation__footer ul{
    width: 100%;
    height: auto;
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
}

.navigation__footer ul li{
    list-style: none;
}

.navigation__footer ul li a{
    text-decoration: none;
    color: var(--white-color);
    transition: all ease-in-out .3s;
}

.navigation__footer ul li a:hover{
    text-decoration: none;
    color: var(--white-color-transparent);
    transition: all ease-in-out .3s;
}

/*
==========
Styles for contact data in footer
==========
*/

.container__contact{
    width: 100%;
    height: auto;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.container__contact .contact{
    width: max-content;
    height: auto;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: var(--white-color);
}

.container__contact .contact .icon{
    width: 20px;
    height: 20px;
}

.container__contact .contact .icon svg{
    width: 100%;
    height: 100%;
    fill: var(--white-color);
}

/*
==========
Styles for networks data in footer
==========
*/

.networks{
    width: 100%;
    height: auto;
    display: flex;
    gap: 3em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 2em;
}

.networks .network{
    width: auto;
    height: auto;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: var(--white-color);
}

.networks .network i{
    width: 30px;
    height: 30px;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: var(--white-color);
}

.networks .network i svg{
    width: 100%;
    height: 100%;
    fill: var(--white-color);
    transition: all ease-in-out .3s;
}

.networks .network i svg:hover{
    width: 100%;
    height: 100%;
    fill: var(--white-color-transparent);
    transition: all ease-in-out .3s;
}

/*
==========
Styles for copyright and development data in footer
==========
*/

.copyright__and__development{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.copyright__and__development .line{
    border-top: 1px solid var(--white-color);
}

.copyright__and__development .copyright{
    color: var(--white-color);
    padding-top: 2em;
}

.copyright__and__development .copyright a{
    color: var(--white-color);
    text-decoration: none;
    transition: all ease-in-out .3s;
    font-weight: bold;
}

.copyright__and__development .copyright a:hover{
    color: var(--white-color-transparent);
    text-decoration: none;
    transition: all ease-in-out .3s;
}

.copyright__and__development .development{
    color: var(--white-color);
}

.copyright__and__development .development a{
    color: var(--white-color);
    text-decoration: none;
    transition: all ease-in-out .3s;
    font-weight: bold;
}

.copyright__and__development .development a:hover{
    color: var(--white-color-transparent);
    text-decoration: none;
    transition: all ease-in-out .3s;
}

/*
==========
Styles for form request catalog.
==========
*/

.container__form__request__catalog{
    min-width: 100%;
    width: 100%;
    height: max-content;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form__request__catalog {
    width: 70%;
    margin: 0 auto;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
}

.form__request__catalog .container__title{
    width: 100%;
    height: auto;
    padding-bottom: 2em;
}

.form__request__catalog .container__title .title__two{
    color: var(--redwine-color);
    text-align: center;
    padding: .5em;
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}

.form__request__catalog .container__title .description{
    color: var(--white-color);
    text-align: center;
}

.form__request__catalog .container__inputs {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.form__request__catalog .container__inputs .container__input{
    width: 50%;
}

.form__request__catalog .button__redwine{
    width: 170px;
    margin-top: 1em;
}

/*
==========
Styles for screens up to 500px.
==========
*/

@media (max-width: 700px) {
    .form__request__catalog {
        width: 100%;
        margin: 0 auto;
        padding: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1em;
        flex-wrap: wrap;
    }

    .form__request__catalog .container__inputs {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1em;
    }

    .form__request__catalog .container__inputs .container__input{
        width: 100%;
    }
}