body.menu {
    overflow: hidden
}
@media (max-width:1280px) {
    .aparecePc{
        display:none
    }
    .apareceCell{
        display:inline
    }
    .second.apareceCell{
        display:block
    }
}
@media (min-width:1281px) {
    .aparecePc{
        display:inline
    }
    .apareceCell{
        display:none
    }
}
:root {
    --bege: #c6b0a4;
    --marsala: #840934;
    --preto: #1a1515;
    --amarelo: #f9c70c;
    --marron: #a05952;
    --cinza: #857275;
    --marron-claro: #c4795d;
    --cinza-escuro: #504340;
    --rosa: #c97b9c;
    --roxo-claro: #8b3955;
}

section.menu {
    animation: menu-close .9s ease-in-out;
    background: var(--marsala);
    bottom: 0;
    color: #fff;
    display: none;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding: 36px 45px 40px;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2
}

section.menu.open {
    animation: menu-open .9s ease-in-out;
    display: block
}

@keyframes menu-open {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media (min-width:1281px) {
    section.menu {
        padding: 0;
        top: 60px
    }
}

.slide.home {
    align-items: center;
    background: #fedd2c url(/images/logoRecantoAnimal.png) center 60px no-repeat;
    background-size: 176px auto;
    min-height: 100vh;
    padding-top: 103px
}

.home-content,
.slide.home {
    display: flex;
    flex-direction: column
}

.home-title {
    color: var(--marsala);
    font-family: Baloo, cursive;
    font-size: 28pt;
    line-height: 22pt;
    text-align: center
}

.home-title:first-line {
    color: #c78d17
}

.home-footer {
    font-size: 15pt;
    line-height: 17pt;
    margin: 0 auto;
    max-width: 408px;
    text-align: center;
    z-index: 2
}

.home-buttons {
    justify-content: center;
    display: flex;
    margin: 39px 0
}

.home-button {
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
    font-size: 9pt;
    height: 29px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 150px
}

.home-button-find {
    background: #afabd4;
    color: #fff
}

.home-button-find:hover {
    background: #7776a5
}

@media (min-width:1281px) {
    .slide.home {
        background: #fedd2c
    }

    body.home .logo {
        cursor: pointer;
        height: 100px;
        left: calc(50vw - 100px);
        width: 200px
    }

    body.carrossel .logo {
        cursor: pointer;
        height: 100px;
        left: calc(50vw - 100px);
        width: 200px
    }

    body.third .logo {
        cursor: pointer;
        height: 150px;
        left: calc(50vw - 100px);
        width: 200px
    }

    .home-logo {
        height: 97px;
        margin-top: -57px;
        width: 250px
    }

    .home-content {
        margin-top: 60px;
        width: 899px
    }

    .home-title {
        font-size: 36pt;
        line-height: 32pt
    }

    .home-footer {
        font-size: 18pt;
        line-height: 23pt;
        margin: 0 auto;
        max-width: 635px
    }

    .home-button {
        font-size: 12pt;
        height: 45px;
        line-height: 45px;
        width: 220px
    }
}

@media (min-width:1600px) {
    body.home .logo {
        height: 150px;
    }

    body.carrossel .logo {
        height: 150px;
    }

    .home-content {
        width: 1284px
    }

    .home-title {
        font-size: 48pt;
        line-height: 48pt
    }

    .home-footer {
        font-size: 22pt;
        line-height: 23pt;
        margin: 0 auto;
        max-width: 635px
    }
}

.second-container {
    display: flex;
    flex-direction: column
}

.lambe-container {
    position: relative
}
.lambe-container1 {
    position: relative
}

.cachorro-empinando {
    height: auto;
    max-height: 100%;
    width: 50%
}

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

.second .text-box {
    margin: 77px 38px 34px
}

.second-title {
    color: var(--marsala);
    font-family: Baloo, cursive;
    font-size: 32pt;
    line-height: 32pt;
    margin: 25px 0 0 0px
}

.second-text {
    color: black;
    font-family: Baloo, cursive;
    font-size: 16pt;
    line-height: 18pt
}

.whatsapp-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.whatsapp-links a {
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    font-size: 1em;
    padding: 10px 20px; 
    border: 2px solid black;
    border-radius: 25px; 
    transition: all 0.3s ease; 
    display: inline-flex;
    align-items: center;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    margin-bottom: -30px;
}
  
.whatsapp-links a:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
  
.whatsapp-links a i.fab {
    margin-right: 8px; 
}

.whatsapp-links-atend-vet {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -15px;
}

.whatsapp-links-atend-vet a {
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    font-size: 1em;
    padding: 10px 20px; 
    border: 2px solid black;
    border-radius: 25px; 
    transition: all 0.3s ease; 
}
  
.whatsapp-links-atend-vet a:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
  
.whatsapp-links-atend-vet a i.fab {
    margin-right: 8px; 
}

.lojas-container {
    display: flex;        
    justify-content: center;
    gap: 20px;             
}

.loja-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 15px;
    width: 40%; 
    max-width: 300px; 
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
  
.loja-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
  
.loja-header h4 {
    margin: 0;
    font-size: 1.2em;
    color: black;
}
  
.loja-header p {
    margin: 5px 0 15px;
    color: black;
    font-size: 0.9em;
}
  
.loja-links {
    display: flex;
    flex-direction: column;
    gap: 8px; 
    margin-top: 15px;
}
  
.loja-links a {
    display: block; 
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.loja-links a[href*="wa.me"] {
    background-color: #25d366;
    color: #fff;
}
  
.loja-links .link-video {
    background-color: #e0e0e0;
    color: #333;
}
  
.loja-links a[href*="wa.me"]:hover {
    background-color: #128c7e;
}
  
.loja-links .link-video:hover {
    background-color: #c0c0c0;
}
  
.loja-card i {
    margin-right: 8px;
}

/* Osso com linktr.ee */
.second-container {
    position: relative; 
}
  
.bone-container {
    position: absolute;
    top: 80%;
    right: 5%;
    transform: translateY(-50%);
    width: 300px;
    height: auto;
    text-align: center;
}
  
.bone-icon {
    font-size: 300px;
    color: var(--marsala); 
    opacity: 0.8;
}
  
.bone-text {
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-family: 'Arial', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color: black;
    text-align: center;
    line-height: 1.2;
    width: 85%;
}

@media screen and (max-width: 767px) {
    
    .lambe-container1 {
        position: static;
        width: 100%;
        overflow: hidden;
        background-color: #333;
        z-index: -100;
    }

    .lambe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
    }

    .carrossel-moderno-secao {
        padding: 0 !important;
        width: 80%;
        /* display: flex; */
        margin: auto;
        justify-content: center;
    }

    .atend-vete {
        padding-bottom: 0 !important;
    }

    .second .text-box {
        margin: 40px 16px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        text-align: left;
    }

    .second-title {
        font-size: 20pt;
        line-height: 28pt;
        margin-top: 32px;
        margin-bottom: 12px;
        color: var(--marsala);
        font-weight: 600;
        position: relative;
    }

    .second-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 3px;
        background-color: var(--marsala);
        margin-top: 6px;
        border-radius: 2px;
    }

    .second-text {
        font-size: 14.5pt;
        line-height: 26pt;
        margin-bottom: 28px;
        text-align: justify;
        color: black;
    }

    .lojas-container {
        flex-wrap: wrap; 
    }

    .loja-card {
        width: 80%; 
    }

    .second-container {
        position: initial; 
    }
    
    .bone-container {
        position: relative;
        top: auto;
        right: auto;
        transform: none;      
        display: inline-block;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin-top: -30px;
    }
    
    .bone-icon {
        font-size: 300px;
        margin-bottom: 10px;
    }

    .bone-text {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1em;
        text-align: center;
        color: black; 
        font-weight: bold;
        line-height: 1.3em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
    
    .lambe-container1 {
        position: static;
        width: 100%;
        overflow: hidden;
        background-color: #333;
        z-index: -100;
    }

    .lambe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
    }

    .second-container {
        position: initial; 
    }
    
    .bone-container {
        position: relative;
        top: auto;
        right: auto;
        transform: none;      
        display: inline-block;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin-top: -30px;
    }
    
    .bone-icon {
        font-size: 300px;
        margin-bottom: 10px;
    }

    .bone-text {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1em;
        text-align: center;
        color: black; 
        font-weight: bold;
        line-height: 1.3em;
    }

    .carrossel-moderno-secao {
        padding: 0 !important;
        width: 90%;
        /* display: flex; */
        margin: auto;
        justify-content: center;
    }

    .atend-vete {
        padding-bottom: 0 !important;
    }

    .third .text ul {
        list-style: none;
    }

    .second .text-box {
        margin: 40px 16px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        text-align: left;
    }

    .second-title {
        font-size: 20pt;
        line-height: 28pt;
        margin-top: 32px;
        margin-bottom: 12px;
        color: var(--marsala);
        font-weight: 600;
        position: relative;
    }

    .second-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 3px;
        background-color: var(--marsala);
        margin-top: 6px;
        border-radius: 2px;
    }

    .second-text {
        font-size: 14.5pt;
        line-height: 26pt;
        margin-bottom: 28px;
        text-align: justify;
        color: black;
    }
}

.second-saiba-como {
    background: #aeabd4;
    border-radius: 3px;
    color: #fff;
    display: block;
    font-size: 12pt;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    margin-top: 28px;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 220px
}

.cachorro-empinando {
    height: auto;
    left: 0;
    max-height: unset;
    min-height: 100vh;
    min-width: 100vw;
    top: -60px;
    width: auto;
    z-index: -100
}

@media (min-width:1281px) {
    .second {
        padding: 0;
        display: relative
    }

    .second-container {
        display: block;
        flex-direction: column
    }

    .lambe {
        height: auto;
        left: 0;
        max-height: unset;
        min-height: 100vh;
        min-width: 100vw;
        position: absolute;
        top: -60px;
        width: auto;
        z-index: -100
    }

    .cachorro-empinando {
        height: auto;
        left: 0;
        max-height: unset;
        min-height: 100vh;
        min-width: 50vw;
        margin-top: -130px;
        width: auto;
        z-index: -100
    }

    .second .text-box {
        flex-grow: unset;
        margin-left: 50px;
        margin-top: 58px;
        width: 90vw;
    }

    .second-title {
        font-size: 21pt;
        line-height: 24pt;
    }

    .second-text {
        font-size: 14pt;
        line-height: 16pt;
    }

    .whatsapp-links-atend-vet {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -58px;
        margin-left: 100px;
    }
}

@media (min-width:1600px) {
    .second .text-box {
        margin-left: 150px;
        margin-top: 59px
    }

    .second-title {
        font-size: 32pt;
        line-height: 38pt
    }

    .whatsapp-links-atend-vet {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        margin-left: 0;
    }
}

.third .d3-set .d3 {
    height: 393px
}

.third .first-set {
    background: var(--marsala);
}

.third .second-set {
    background: white;
}

.third .d3 {
    background-size: contain
}

.third .text {
    color: #fff;
    font-family: 'Poppins', sans-serif; 
    font-size: 12pt;
    padding: 0 45px 30px
}

.third .text h2 {
    color: #fff;
    font-family: 'Poppins', sans-serif; 
    font-size: 20pt;
    line-height: 20pt
}

.third .text ul {
    list-style: none;
}

@media (min-width:1281px) {
    .slide.third {
        height: 100vh;
        padding-top: 60px;
    }

    .third-container {
        display: flex;
        height: 100%
    }

    .third .d3-set {
        flex: 1;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
    }

    .third .d3-set .d3 {
        height: 283px
    }

    .third .text ul { 
        line-height: 18pt
    }

    .third .text h2 {
        font-size: 24pt;
        line-height: 26pt
    }

    .video-coluna-direita {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

@media (max-width: 1280px) {
    .third-container{
        display: flex; 
        flex-direction: column
    }

    .social-whatsapp {
        display: none;
    }

    .slide.third {
        padding-top: 50px; /* Ajusta o espaçamento do topo para mobile */
        height: auto; /* A altura se ajusta ao conteúdo */
    }

    .third-container {
        display: flex;
        flex-direction: column; /* Empilha o texto e o vídeo verticalmente */
        width: 100%;
        height: auto; /* A altura se ajusta ao conteúdo */
    }

    .third .d3-set {
        flex: 1; /* Cada item ocupa a largura total */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza o conteúdo verticalmente */
        padding: 20px; /* Reduz o padding para telas menores */
    }

    .third .first-set {
        background: var(--marsala);
        color: white;
    }

    .third .second-set {
        background: white;
        padding: 0; /* Remove o padding para o vídeo preencher */
    }

    .lambe-container {
        width: 100%;
        /* Define uma altura com base na largura para manter a proporção */
        /* Podemos usar um aspect-ratio, mas nem todos os navegadores suportam totalmente */
        /* Vamos usar uma porcentagem da largura como alternativa */
        padding-bottom: 177.78%; /* Proporção 16:9 (comum para vídeos) */
        position: relative; /* Necessário para o posicionamento absoluto do vídeo */
        overflow: hidden; /* Garante que o vídeo não vaze */
    }

    .video-coluna-direita {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Preenche o contêiner mantendo a proporção */
    }

    .third .text {
        font-size: 14pt;
        line-height: 16pt;
        padding: 15px;
    }

    .third .text h2 {
        font-size: 18pt;
        line-height: 20pt;
    }
  
    .navigation >.logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 76px;
        margin-left: 0;
    }

    .slide >.textAnimalCarente {
        margin-bottom: 30px;
        margin-top: 0;
    }

    .slide >.textAnimalCarente h2 {
        text-align: center;
    }
}

@media (min-width:1600px) {
    .third .d3-set .d3 {
        height: 453px
    }

    .third .text {
        padding: 0 44px 0 90px
    }
}

.fifth {
    background: #faf9f7
}

.video {
    background: #99d4c0;
    flex-grow: 1;
    height: 108vw;
    overflow: hidden;
    position: relative
}

.video-player {
    height: 100%;
    left: -100vw;
    position: absolute;
    transition: left .4s linear, height .4s linear;
    width: 100%
}

.video-player.current {
    left: 0
}

.video-player.current~.video-player {
    left: 100vw
}

.video-text-container {
    color: #61003c;
    display: flex;
    font-family: Baloo, cursive;
    font-size: 20pt;
    justify-content: center;
    left: 0;
    line-height: 20pt;
    position: absolute;
    right: 0;
    top: 42px
}

.video-text:first-line {
    color: #957a1e
}

.table {
    color: #5a5b5e;
    flex-grow: 1;
    height: 50%;
    padding: 62px 38px
}

.table div.table-container {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s linear, height .4s linear;
    visibility: hidden
}

.table table {
    border-collapse: collapse;
    width: 100%
}

.table thead {
    border-bottom: 1px solid #666;
    color: #957a1e;
    font-size: 16pt
}

.table tbody {
    font-size: 10pt;
    line-height: 25pt
}

.table tbody tr:first-of-type td {
    padding-top: 18px
}

.table tfoot {
    border-top: 1px solid #666;
    color: #957a1e;
    font-size: 13pt
}

.table td,
.table th {
    text-align: center
}

td.table-title,
th.table-title {
    text-align: left
}

td.concorrente-1,
td.concorrente-3,
th.concorrente-1,
th.concorrente-3 {
    background: #efedec
}

td.recanto-animal,
th.recanto-animal {
    background: #ffeb69
}

td.concorrente-1,
td.concorrente-2,
td.concorrente-3,
td.concorrente-4,
th.concorrente-1,
th.concorrente-2,
th.concorrente-3,
th.concorrente-4 {
    display: none;
    padding: 4px
}

th.concorrente-1 div,
th.concorrente-2 div,
th.concorrente-3 div,
th.concorrente-4 div {
    align-items: center;
    border-radius: 3px;
    color: #fff;
    display: flex;
    font-size: 9pt;
    font-weight: 700;
    height: 35px;
    line-height: 9pt;
    margin: 0 auto;
    overflow: hidden;
    width: 85px
}

th.concorrente-1 div {
    background: #005220
}

th.concorrente-2 div {
    background: #fc5639;
    border: 2pt solid #000
}

th.concorrente-3 div {
    background: #ff8827
}

th.concorrente-4 div {
    background: #fff;
    color: #bd9a75;
    border: 2pt solid #bd9a75
}

th.recanto-animal div {
    background: url(/images/logoRecantoAnimal.png) 50% no-repeat;
    background-size: contain;
    display: inline-block;
    height: 35px;
    width: 85px
}

.table div.table-container.current {
    max-height: 9999px;
    opacity: 1;
    pointer-events: unset;
    visibility: visible
}

.table th {
    text-align: center;
    vertical-align: middle
}

@media (min-width:1281px) {
    .fifth-container {
        display: flex;
        flex-direction: row;
        height: 100%;
        padding-right: 60px
    }

    .video {
        height: 100%;
        width: 50vw
    }

    .video-text {
        font-size: 32pt;
        line-height: 28pt
    }

    .video-player {
        left: -50vw
    }

    .video-player.current {
        left: 0
    }

    .video-player.current~.video-player {
        left: 50vw
    }

    .table {
        height: 100%;
        padding: 45px 38px;
        width: 50vw
    }

    .table thead {
        font-size: 14pt
    }

    .table tbody {
        line-height: 16pt
    }

    .table tfoot {
        font-size: 11pt
    }

    td.concorrente-1,
    td.concorrente-2,
    td.concorrente-3,
    td.concorrente-4,
    th.concorrente-1,
    th.concorrente-2,
    th.concorrente-3,
    th.concorrente-4 {
        display: table-cell
    }

    .bullet-nav {
        position: absolute;
        bottom: 15px
    }
}

@media (min-width:1600px) {
    .video-text {
        font-size: 48pt;
        line-height: 48pt
    }

    .table {
        padding: 68px 38px
    }

    .table thead {
        font-size: 16pt
    }

    .table tbody {
        line-height: 34pt
    }

    .table tbody,
    .table tfoot {
        font-size: 13pt
    }
}

.eighth {
    background: #fff
}

.eighth .text-box {
    margin: 77px 38px 34px;
    text-align: center
}

.eighth-title {
    color: #d98745;
    font-family: Baloo, cursive;
    font-size: 36pt;
    line-height: 36pt;
    margin: 0 0 30px
}

.eighth-text {
    font-family: Baloo, cursive;
    font-size: 16pt;
    line-height: 18pt
}

.eighth-buttons {
    justify-content: center;
    display: flex;
    margin: 39px 0
}

.eighth-button {
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
    font-size: 9pt;
    height: 29px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 150px
}

.eighth-button-find {
    background: #afabd4;
    color: #fff
}

.eighth-button-find:hover {
    background: #7776a5
}

body.contact {
    overflow: hidden
}

.contact-content {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%
}

.contact-header {
    background: #aeacd3;
    height: 75px;
    position: relative
}

.contact-header .text {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 75px;
    padding-left: 32px
}

@media (min-width:1281px) {
    .eighth .text-box {
        height: 50%;
        margin: 0 auto;
        max-width: 640px
    }

    .eighth-button {
        font-size: 12pt;
        height: 45px;
        line-height: 45px;
        width: 220px
    }

    .contact-content {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, .7);
        height: unset;
        max-height: 645px;
        width: 720px
    }

}

.slide.footer {
    background: var(--marsala);
    color: #fff;
    font-size: 12pt;
    line-height: 18pt;
    overflow-y: auto;
    padding: 0 45px 40px
}

.links .vitaminas {
    background-size: contain;
    color: transparent;
    display: block;
    height: 115px;
    margin: 45px 0 27px;
    width: 149px
}

.links h3 {
    font-size: inherit;
    font-weight: 700;
    line-height: 35pt;
    margin: 0
}

.links .link {
    color: inherit;
    cursor: pointer;
    display: block;
    text-decoration: none
}

.links .link:hover {
    text-decoration: underline
}

.links .campanhas {
    color: #ffee82;
    margin-bottom: 45px
}

.links .button {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: var(--marsala);
    cursor: pointer;
    display: block;
    font-size: 12pt;
    height: 45px;
    line-height: 45px;
    margin: 45px 0;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 220px
}

.links .button:hover {
    background: var(--marsala);
    color: #fff
}

.links .button.button-find {
    border: none;
    background: #aeabd4;
    color: #fff
}

.links .button.button-find:hover {
    background: #7776a5
}

.address {
    font-size: 9pt;
    line-height: 9pt
}

.contacts {
    line-height: 15pt
}

.contacts .phone,
.contacts .sac,
.contacts .social {
    margin-bottom: 45px
}

.contacts a {
    color: inherit;
    text-decoration: none
}

.contacts a:hover {
    text-decoration: underline
}

.social .social-facebook,
.social .social-instagram,
.social .social-whatsapp {
    color: transparent;
    display: inline-block;
    height: 30px;
    width: 30px
}

.social .social-whatsapp {
    background: 50% no-repeat
}

.social .social-facebook {
    background: url(/images/logoFacebook.png) 50% no-repeat
}

.social .social-instagram {
    background: url(/images/logoInstagram.png) 50% no-repeat
}

@media (min-width:1281px) {
    .slide.footer {
        padding: 0
    }

    .links {
        display: flex;
        padding: 74px 104px 0
    }

    .contacts {
        display: flex;
        padding: 45px 104px 0
    }

    .links .vitaminas {
        margin: 0 0 37px
    }

    .links .link:hover {
        text-decoration: underline
    }

    .contacts .phone,
    .contacts .sac,
    .links .recanto-animal,
    .links .sobre-nos {
        flex-grow: 1;
        padding-right: 20%;
        width: 40%
    }

    .contacts .social,
    .links .campanhas {
        flex-grow: 1;
        width: 20%
    }

    .links .campanhas {
        margin-bottom: 0
    }

    .links .button {
        margin: 0 0 92px
    }

    .contacts .phone,
    .contacts .sac,
    .contacts .social {
        margin-bottom: 0
    }

    .address {
        padding: 45px 104px 0
    }
}

@media (min-width:1600px) {
    .slide.footer {
        font-size: 12pt;
        line-height: 30pt
    }

    .links {
        padding: 89px 321px 0
    }

    .links .vitaminas {
        margin-bottom: 66px
    }

    .links .button {
        margin: 35px 0 83px
    }

    .contacts {
        padding: 122px 321px 0
    }

    .address {
        font-size: 10pt;
        line-height: 10pt;
        padding: 90px 321px 84px
    }
}

* {
    box-sizing: border-box
}

body {
    color: #61003c;
    font-family: Gotham, serif;
    font-size: 11pt;
    line-height: 14pt;
    margin: 0;
    padding: 0
}

.navigation {
    align-items: center;
    background: var(--amarelo);
    display: flex;
    height: 60px;
    justify-content: flex-end;
    padding-left: 14px;
    position: fixed;
    top: 0;
    transition: background .3s ease-in-out;
    width: 100%;
    z-index: 5
}

.logo {
    background: url(/images/logoRecantoAnimal.png) 50% no-repeat;
    background-size: contain;
    height: 48px;
    margin-left: 38px;
    opacity: 1;
    pointer-events: unset;
    width: 100px
}

body:not(.home) .logo {
    opacity: 1
}

.navigation .social-facebook,
.navigation .social-instagram,
.navigation .social-whatsapp {
    display: none
}

.navigation .social-whatsapp {
    background: 50% no-repeat
}

.navigation .social-facebook {
    background: url(/images/logoFacebook.png) 50% no-repeat
}

.navigation .social-instagram {
    background: url(/images/logoInstagram.png) 50% no-repeat
}

.slide {
    overflow: hidden;
    position: relative
}

@media (max-width: 1090px) {
    .footer-container .footer-column .atend-footer {
        margin-top: 0 !important;
    }
}

@media (min-width:1281px) {
    body {
        overflow: hidden
    }

    .logo {
        background: url(/images/logoRecantoAnimal.png) 50% no-repeat;
        background-size: contain;
        height: 65px;
        left: calc(50vw - 50px);
        margin-left: 0;
        opacity: 1;
        pointer-events: unset;
        position: absolute;
        top: 6px;
        transition: all .4s ease-in-out;
        width: 100px
    }

    .slide,
    .slides {
        height: 100vh
    }

    .slide {
        opacity: 0;
        overflow: hidden;
        padding-top: 2vh;
        position: absolute;
        top: -100vh;
        transition: all .3s linear;
        width: 100vw
    }

    .slide.current {
        opacity: 1;
        top: 0
    }

    .slide.current~.slide {
        top: 100vh
    }

    .navigation {
        z-index: 1
    }

    .navigation .social-facebook,
    .navigation .social-instagram,
    .navigation .social-whatsapp {
        color: transparent;
        display: block;
        height: 42px;
        width: 42px
    }
}
#carrossel {
    background-color: #840934;
    padding: 40px 0;
    text-align: center;
    position: relative;
}

.carousel-container {
    position: relative;
    max-width: 600px;
    margin: auto;
}

.carousel-slide img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    opacity: 1;
    /* display: none; */
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: 40px;
    background: none;
    border: none;
}

.prev:hover, .next:hover {
    color: white;
}

.prev {
    left: -40px;
}

.next {
    right: -40px;
}

.carousel-indicators {
    text-align: center;
    margin-top: 15px;
}

.dot {
    height: 10px;
    width: 40px;
    margin: 0 5px;
    background-color: #ccc;
    display: inline-block;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: white;
}

.carrossel-slide {
    padding: 40px 0;
    background: var(--marsala); /* ou outra cor de fundo, se necessário */
}

.textAnimalCarente {
    margin-top: 40px;
    margin-left: 15px;
}

.textAnimalCarente h2 {
    color: #fff;
    font-family: 'Poppins', sans-serif; 
    font-size: 20pt;
    line-height: 20pt
}

.textAnimalCarente li {
    color: #fff;
    font-family: 'Poppins', sans-serif; 
}

.textAnimalCarente ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
}

@media (min-width: 1281px) {
    .slide-carrossel {
        overflow: hidden;
        position: relative;
    }
    .carousel-container{
        margin-top: 20vh;
    }
}

/* ========================================================================= */
/* ============= CSS PARA O NOVO RODAPÉ PROFISSIONAL ======================= */
/* ========================================================================= */

/* Estilo principal do rodapé */
.footer-moderno {
    background-color: var(--marsala, #61003c); /* Usa a variável --marsala, com um fallback */
    color: #fdfdfd; /* Cor de texto mais suave que o branco puro */
    padding: 60px 40px 20px 40px;
    border-top: 4px solid var(--amarelo, #f9c70c); /* Adiciona um detalhe visual */
    font-family: 'Gotham', sans-serif; /* Mantém a fonte do corpo */
}

/* Container principal com Flexbox para alinhar as colunas */
.footer-container {
    display: flex;
    justify-content: space-between; /* Distribui as colunas uniformemente */
    flex-wrap: wrap; /* Permite que as colunas quebrem para a linha de baixo em telas menores */
    gap: 40px; /* Espaço entre as colunas */
    margin-bottom: 40px;
}

/* Estilo base para cada coluna */
.footer-column {
    flex: 1; /* Permite que as colunas cresçam */
    min-width: 280px; /* Largura mínima antes de quebrar a linha */
}

/* Coluna da Logo */
.logo-column {
    flex-grow: 1.5; /* Faz a coluna da logo ser um pouco maior */
}

.footer-logo {
    max-width: 180px;
    margin-bottom: 20px;
}

.footer-column h4 {
    font-family: 'Baloo', cursive; /* Usa a fonte de destaque */
    font-size: 22px;
    color: var(--amarelo, #f9c70c);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Linha decorativa abaixo dos títulos das colunas */
.footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--amarelo, #f9c70c);
}

.footer-column p, .footer-column a {
    font-size: 15px;
    line-height: 1.7;
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #ffffff; /* Ilumina o link ao passar o mouse */
}

.loja-contato {
    margin-bottom: 20px;
}

.loja-contato h5 {
    font-size: 16px;
    color: #fff;
    margin: 0 0 10px 0;
    font-weight: bold;
}

/* Ícones ao lado dos títulos e números */
.footer-column .fab, .footer-column .fas {
    margin-right: 10px;
    color: var(--amarelo, #f9c70c);
}

.footer-container .footer-column .atend-footer {
    margin-top: 30px;
}

/* Estilo dos ícones de redes sociais */
.social-links-moderno a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    margin-right: 10px;
    font-size: 20px;
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links-moderno a:hover {
    background-color: var(--amarelo, #f9c70c);
    color: var(--marsala, #61003c);
    transform: translateY(-3px); /* Efeito de elevação */
}

/* Barra de Copyright na parte inferior */
.footer-copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: #a0a0a0;
}

.footer-copyright p {
    margin: 5px 0;
    color: #a0a0a0;
}

.footer-copyright a {
    color: #fff;
    font-weight: bold;
}

/* ========================================================================= */
/* ============= CSS PARA O NOVO CARROSSEL PROFISSIONAL ==================== */
/* ========================================================================= */

/* Estilo entre 1280px e 1600px */
@media screen and (min-width: 1281px) and (max-width: 1600px) {
    .carrossel-moderno-secao {
        width: 70%;
        padding: 20px 0 0 0;
        margin: 50px auto; /* centraliza a seção */
        /* display: flex; */
        justify-content: center;
    }

    .carrossel-moderno-secao >.anim-caren {
        width: 70%;
        padding: 0;
        margin: 50px auto; /* centraliza a seção */
        justify-content: center;
        margin-top: -40px;
    }

    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}


/* Estilo para telas maiores que 1600px */
@media screen and (min-width: 1601px) {
    .carrossel-moderno-secao {
        width: 100%;
        padding: 130px 0 60px 0;
        background-color: var(--marsala, #840934);
        position: relative;
    }

    .carrossel-moderno-secao >.anim-caren{
        width: 100%;
        padding: 0;
        background-color: var(--marsala, #840934);
        position: relative;
        margin-top: -90px;
    }
}

.swiper-container-moderno {
    width: 100%;
    max-width: 1200px; /* Largura máxima do carrossel */
    margin: 0 auto;
    border-radius: 15px; /* Bordas arredondadas para um look suave */
    overflow: hidden; /* Garante que nada saia das bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidade */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir todo o espaço, sem distorcer */
}

/* --- Estilização das Setas de Navegação --- */
.swiper-button-next,
.swiper-button-prev {
    color: var(--amarelo, #f9c70c) !important; /* Cor da seta */
    background-color: rgba(0, 0, 0, 0.3); /* Fundo semi-transparente */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%; /* Deixa as setas redondas */
    transition: background-color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Escurece o fundo no hover */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px !important; /* Tamanho do ícone da seta */
    font-weight: bold;
}

/* --- Estilização da Paginação (Pontinhos) --- */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.carrossel-wrapper .swiper-pagination-bullet-active {
    background-color: var(--amarelo, #f9c70c) !important; /* Adicionado !important para garantia extra */
    transform: scale(1.2);
}