@font-face {
    font-family: RedHatDisplay-Black;
    src: url(../css/static/RedHatDisplay-Black.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: RedHatDisplay-Light;
    src: url(../css/static/RedHatDisplay-Light.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: RedHatDisplay-ExtraBold;
    src: url(../css/static/RedHatDisplay-ExtraBold.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

html {
    margin: 0;
    padding: 0
}

body {
    background-color: #00698f
}

.container-fluido {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.menu {
    background-color: #fff
}

.menu-linha {
    padding-top: 20px;
    padding-bottom: 20px
}

.frase-mobile {
    display: none
}

@media (max-width:767px) {
    .frase-mobile {
        display: block
    }
}

.card-container {
    padding: auto !important
}

.icons-align {
    position: absolute;
    top: 40%;
    right: 10%;
    gap: 1rem
}

@media only screen and (max-width:991px) {
    .icons-align {
        position: relative;
        display: flex;
        justify-content: center;
        top: 0;
        right: 0;
        gap: 20px;
        padding-bottom: 20px
    }
}

.icone {
    width: 100%;
    height: 40px
}

@media (max-width:767px) {
    .icone {
        display: none
    }
}

.selecione {
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #00698f
}

.selecione span {
    color: #fff;
    font-size: 20px;
    font-family: RedHatDisplay-ExtraBold;
    font-weight: bolder
}

@media (min-width:992px) {
    .col-card-porco {
        width: 48%;
        height: 53vh;
        border-radius: 0 0 29px 0
    }

    .col-card-cachorro {
        max-width: 48%;
        height: 53vh;
        border-radius: 0 0 0 29px
    }
}

@media (max-width:767px) {
    .card-linha {
        gap: 40px
    }
}

@media (max-width:991px) {
    .col-card-porco {
        width: 100%;
        height: 37vh;
        border-radius: 29px 29px 29px 29px
    }

    .col-card-cachorro {
        max-width: 100%;
        height: 37vh;
        border-radius: 29px 29px 29px 29px
    }
}

@media (max-width:767px) {
    .col-card-porco {
        width: 100%;
        height: 100%;
        border-radius: 29px 29px 29px 29px
    }

    .col-card-cachorro {
        max-width: 100%;
        height: 100%;
        border-radius: 29px 29px 29px 29px
    }
}

.porco {
    max-width: 40%;
    margin-bottom: 3rem;
    height: 70%;
    object-fit: contain
}

.cachorro {
    max-width: 60%;
    margin-bottom: 3rem;
    height: 70%;
    object-fit: contain
}

@media (max-width:767px) {
    .porco {
        margin-top: 1rem;
        margin-bottom: 2rem;
        max-width: 60%
    }

    .cachorro {
        margin-top: 1rem;
        max-width: 71%;
        margin-bottom: 3rem
    }
}

.botao-card {
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 53px;
    background-color: #00698f;
    bottom: 5%;
    padding: 13.5px 0 13.5px 0;
    width: 11vw;
    justify-content: center
}

@media (max-width:1700px) {
    .botao-card {
        width: 11vw
    }
}

@media (max-width:1360px) {
    .botao-card {
        width: 18vw
    }
}

@media (max-width:991px) {
    .botao-card {
        width: 30vw
    }
}

@media (max-width:767px) {
    .botao-card {
        padding: 5.5px 0 5.5px 0;
        width: 40vw;
        bottom: 4%
    }
}

@media (max-width:320px) {
    .botao-card {
        padding: 5.5px 0 5.5px 0;
        width: 60vw
    }
}

.botao-card a {
    color: #fff;
    font-size: 16px;
    font-family: RedHatDisplay-Black;
    font-weight: 700
}

@media (max-width:820px) {
    .botao-card {
        margin-top: 5rem
    }

    .botao-card a {
        font-size: 18px
    }
}

.botao-card:hover {
    color: #fff;
    font-size: 16px;
    padding: 10.5px 0 10.5px 0;
    border: solid 3px #e6007e;
}
@media (max-width:900px) {
    .botao-card:hover {
        color: #fff;
        font-size: 20px;
        padding: 0px;
        border: solid 3px #e6007e;

    }
}
.botao-link {
    color: #fff;
    text-decoration: none
}

.botao-link:hover {
    color: #fff
}

.footer-text {
    padding-bottom: 6rem
}

@media (max-width:1920px) {
    .footer-text {
        padding-bottom: 10rem
    }
}

@media (max-width:820px) {
    .footer-text {
        padding-bottom: 15rem
    }
}

.footer-textocerto {
    font-family: RedHatDisplay-Black !important;
    font-weight: 700 !important
}

.footer-text h1 {
    color: #fff;
    font-family: RedHatDisplay-Light
}

.footer-text h1,
strong {
    font-size: 25px
}

.footer-text .bold-frase {
    color: #fff;
    font-family: RedHatDisplay-ExtraBold
}

@media (max-width:767px) {
    .frase-vetica {
        display: none
    }

    .footer-text {
        padding-bottom: 40px
    }

    .footer-text .bold-frase {
        color: #00698f;
        font-family: RedHatDisplay-ExtraBold
    }

    .bold-frase,
    .footer-text h1,
    strong {
        font-size: 18px;
        color: #00698f
    }
}