* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}

h1 {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
}

p {
    font-family: Arial, Helvetica, sans-serif;
}

/* BARRA DE ROLAGEM */ 


body::-webkit-scrollbar {
    width: 10px;    
}


body::-webkit-scrollbar-track {
    background: white; 
}


body::-webkit-scrollbar-thumb {
    background-color: yellow;
    border-radius: 20px; 
    border: 3px solid black;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 200px;
}



.wppiconn {
    display: flex;
    background-color: red;
}

/* HEADER */

header {
    position: fixed;
    z-index: 2;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.8px);
    -webkit-backdrop-filter: blur(8.8px);
    border: 1px solid rgba(255, 255, 255, 0.44);
    width: 100%;
}

nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
}




nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

nav ul li {
    padding: 20px;
}

nav ul li a{
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    color: black;
    font-weight: bold;
}

nav ul li a:hover {
    color: rgb(255, 166, 0);
    transition: 0.3s;
    
}
 /* MAIN */ 

main {
    width: 100%;
}

 .container-main {
    position: relative;
    padding-bottom: 120px;
    width:100%;
    height: 100vh;
 }
.banner img {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 100%;
    max-height: 800px;
    width: 100%;
    object-fit: cover;
}


.bem-vindo {
    display: flex;
    position: relative;
    top: 350px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;

}

.bem-vindo p {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    margin-top: 20px;
    font-size: 11px;
}

.bem-vindo h1{
    font-size: 50px;
    
}
.wppiconn  {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    
}



.wppiconn   {
    color:  black;
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    display: flex;
    gap: 9px;
    align-items: center;
    border: 2px solid black;
    background-color: #ffe14d;
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.wppiconn:hover {
    color: rgb(41, 41, 41);
    filter: brightness(.9);
    border: 2px solid black;
    transition: 0.4s;
}



/* SECTION */

.section1{
    padding-bottom: 120px;
}
.container-section {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    width: 100%;
    max-width: 1200px;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.mover-tudo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.texto-sobre {
    color: black;
    display: flex;
    flex-direction: column;
    width: 570px;
    padding-left: 30px;

}

.imagemdolado img{
    width: 100%;

}

.texto-sobre h1 {
    font-weight: bold;
    font-size: 50px;
    padding-bottom: 20px;
    cursor: default;
}
.texto-sobre h1:hover {
    
   color: gray;
   transition: 0.4s;
}

.texto-sobre p {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    line-height: 25px;
}


.borda {
    padding-top: 10px;
    border-bottom: 3px solid lightgoldenrodyellow;
}


 /* SECTION2 */




 .section2 {
    padding-bottom: 100px;
 }

.container-section2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.galeria  {
 display: flex;
 justify-content: center;
 align-items: center;

}
.galeria h1 {
     font-weight: bold;
     font-size: 50px;
     width: 100%;
     text-align: center;
     padding-bottom: 50px;
}

.imagens-galeria {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}

.imagens-galeria .imgdog {
    gap: 20px;
    border: 2px solid black;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.imagens-galeria .imgdog:hover {
  transition: 0.3s;
  opacity: 0.7;
}


/* SECTION 3 */

.section3 {
    padding-bottom: 160px;
}

.mover-tudo3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-section3 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    max-width: 1230px;
    width: 100%;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.texto-contato {
    color: black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 570px;
    padding-left: 30px;
}

.texto-contato h1 {
    cursor: default;
    font-weight: bold;
    font-size: 25px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    
}

.texto-contato h1:hover {
    color: gray;
    transition: 0.4s;
}

.texto-contato a {
    color: blue;
}
.texto-contato a:hover{
    transition: 0.3s;
    color: rgb(0, 0, 82);
}

.texto-contato p {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    line-height: 30px;
    width: 100%;

}

.borda3 {
    margin-bottom: 30px;
    border-bottom: 3px solid lightgoldenrodyellow;
    width: 90%
}

.borda4 {
    border-bottom: 3px solid lightgoldenrodyellow;
    width: 90%
}

.imagemdolado3 {
    display: flex;
    flex-wrap: wrap;
    
}

.imagemdolado3 img {
    width: 100%;
}




/* SECTION 4 */ 


.container-section4 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 130px;
}

.servicos  h1{
    font-weight: bold;
    font-size: 50px;
    width: 100%;
    text-align: center;
    padding-bottom: 50px;

}


/* BANHO E TOSA SERVIÇOS */

.banho-tosa {
    height: 100%;
    max-height: 520px;
    width: 100%;
    max-width: 290px;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.banho-tosa img {
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border-radius: 20px 20px 0 0 ;
    max-width: 290px;
    width: 100%;
}

.especificacoes {

    display: flex;
    flex-direction: column;
    text-align: center;

}

.especificacoes h1 {
    padding: 11px;
    padding-top: 10px;
    font-weight: bold;
    padding-bottom: 20px;
}

.especificacoes p {
    padding: 11px;
   line-height: 21px;
   font-size: 16px;
}



.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 31.3px;
}

.btn a{
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
cursor: pointer;
padding: 15px 25px;
 border: unset;
 border-radius: 15px;
 color: #212121;
 background: #e8e8e8;
 font-weight: 1000;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 width: 240px;
}



.btn  a:hover{
    color: gray;
}


/* ESCOVAÇÃO E DESEMBARAÇAMENTO */ 


.escovacao-e-desembaracamento {
    height: 100%;
    max-height: 520px;
    width: 100%;
    max-width: 290px;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.escovacao-e-desembaracamento img {
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border-radius: 20px 20px 0 0 ;
    max-width: 290px;
    width: 100%;
}

.especificacoes2 {
    display: flex;
    flex-direction: column;
    text-align: center;
}


.especificacoes2 h1 {
    padding: 11px;
    padding-top: 10px;
    font-weight: bold;
    padding-bottom: 20px;
}

.especificacoes2 p {
    padding: 11px;
    line-height: 21px;
    font-size: 16px;
}

.btn2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 31.3px;
}



.btn2 a{
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
cursor: pointer;
padding: 15px 25px;
 border: unset;
 border-radius: 15px;
 color: #212121;
 background: #e8e8e8;
 font-weight: 1000;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 width: 240px;
}


.btn2  a:hover{
    color: gray;
}



/* LIMPEZA DE OUVIDO E DENTES */

.limpeza-de-ouvidos-e-dentes {
    height: 100%;
    max-height: 520px;
    width: 100%;
    max-width: 290px;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.limpeza-de-ouvidos-e-dentes img {
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border-radius: 20px 20px 0 0 ;
    max-width: 290px;
    width: 100%;
}

.especificacoes3 {
    display: flex;
    flex-direction: column;
    text-align: center;
    
}


.especificacoes3 h1 {
    padding: 11px;
    padding-top: 10px;
    font-weight: bold;
    padding-bottom: 20px;
}

.especificacoes3 p {
    padding: 11px;
   line-height: 21px;
   font-size: 16px;
}

.btn3 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 31.3px;
}

.btn3 a{
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
cursor: pointer;
padding: 15px 25px;
 border: unset;
 border-radius: 15px;
 color: #212121;
 background: #e8e8e8;
 font-weight: 1000;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 width: 240px;
}

.btn3  a:hover{
    color: gray;
}


/* CORTE DE UNHA */ 

.corte-de-unha {
    height: 100%;
    max-height: 520px;
    width: 100%;
    max-width: 290px;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.corte-de-unha img {
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border-radius: 20px 20px 0 0 ;
    max-width: 290px;
    width: 100%;
}

.especificacoes4 {
    display: flex;
    flex-direction: column;
    text-align: center;
}


.especificacoes4 h1 {
    padding: 11px;
    padding-top: 10px;
    font-weight: bold;
    padding-bottom: 20px;
}

.especificacoes4 p {
    padding: 11px;
   line-height: 21px;
   font-size: 16px;
}

.btn4 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 31.3px;

}

.btn4 a{

    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    cursor: pointer;
    padding: 15px 25px;
    border: unset;
    border-radius: 15px;
    color: #212121;
    background: #e8e8e8;
    font-weight: 1000;
    font-size: 17px;
    transition: all 250ms;
    overflow: hidden;
    width: 240px;
}

.btn4  a:hover{
    color: gray;
}




/* footer */ 

footer {
    border-top: 2px solid black;
    background-color: #f7d100;
}

.container-footer {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    padding: 0 0.2%;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}



.primeiracoluna {
    color: black;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 400px;
    width: 100%;
    justify-content: center;
    align-items: center;
}


.primeiracoluna p {
    font-family: Arial, Helvetica, sans-serif;
      display: flex;
      flex-wrap: wrap;
}

.ulli-footer {
    width: calc(100%/3);
}

.ulli-footer ul {
    display: flex;
    gap: 30px;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}


.ulli-footer li {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}



.ulli-footer li a {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    font-weight: bold;
 color: black;
}

.ulli-footer li a:hover {
    color: orange;
    transition: 0.3s;
}

.redes-sociais {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
   padding: 10px;
    border-radius: 20px;
    justify-content: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    align-items: center;
}

.redes-sociais h1 {
    font-size: 15px;

}

.icon  {
    font-size: 20px ;
}

.insta a {
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    color: black;
    margin-top: 20px;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.insta a:hover {
    color: orange;
    transition: 0.3s;
}




/* FIM */

 

.direitos {
    display: flex;
    justify-content: center;
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;

}

.direitos a {
    color: blue;
    
}