/* =====================================================
   STYLE.CSS
   Projeto: Pet Shop Cão Feliz

   Responsável por toda a aparência do site.
===================================================== */


/* =====================================================
   CONFIGURAÇÕES GERAIS
===================================================== */

body {

    font-family: 'Poppins', sans-serif;
    background: #fffaf5;
    color: #333;

}


.container {

    width: 90%;
    max-width: 1100px;
    margin: auto;

}


h2 {

    text-align: center;
    color: #4b2e20;
    font-size: 32px;
    margin-bottom: 20px;

}


p {

    line-height: 1.6;

}



/* =====================================================
   CABEÇALHO
===================================================== */


header {

    background: #8bc34a;
    padding: 20px 0;

}



header .container {

    display: flex;
    justify-content: space-between;
    align-items: center;

}



.logo {

    color: white;
    font-size: 28px;
    font-weight: 700;

}



/* MENU */


nav ul {

    display: flex;
    gap: 25px;

}



nav a {

    color: white;
    text-decoration: none;
    font-weight: 600;

}



nav a:hover {

    color: #4b2e20;

}



/* =====================================================
   BANNER
===================================================== */


.banner {

    height: 500px;

    background-image:
    linear-gradient(
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.4)
    ),
    url("https://images.unsplash.com/photo-1558788353-f76d92427f16");


    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: white;

}



.banner-texto {

    width: 80%;

}



.banner h2 {

    color: white;
    font-size: 45px;

}



.botao {

    display: inline-block;

    margin-top: 25px;

    padding: 15px 30px;

    background: #8bc34a;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    font-weight: bold;

}


.botao:hover {

    background: #689f38;

}



/* =====================================================
   SOBRE
===================================================== */


.sobre {

    padding: 60px 0;

    text-align: center;

}



/* =====================================================
   CARDS
===================================================== */


.cards {

    display: flex;

    gap: 25px;

    justify-content: center;

}



.card {


    background: white;

    padding: 25px;

    border-radius: 15px;

    text-align: center;

    box-shadow: 0 5px 15px #ddd;

    flex: 1;

}



.card h3 {

    color: #689f38;

}



/* =====================================================
   IMAGEM DE DESTAQUE
===================================================== */


.imagem-destaque {

    text-align: center;

    margin: 50px 0;

}



.imagem-destaque img {

    width: 80%;

    max-width: 700px;

    border-radius: 20px;

}




/* =====================================================
   SERVIÇOS
===================================================== */


.servicos {

    padding: 60px 0;

}



.subtitulo {

    text-align: center;

    margin-bottom: 40px;

}



.cards-servicos {


    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;


}



.servico-card {


    background: white;

    border-radius: 15px;

    overflow: hidden;

    text-align: center;

    box-shadow: 0 5px 15px #ddd;

    transition: .3s;

}



.servico-card:hover {


    transform: translateY(-8px);

}



.servico-card img {


    width: 100%;

    height: 220px;

    object-fit: cover;

}



.servico-card h3 {

    color: #4b2e20;

    margin: 15px;

}



.servico-card p {

    padding: 0 20px;

}



.servico-card span {


    display: block;

    color: #689f38;

    font-size: 22px;

    font-weight: bold;

    padding: 20px;

}




/* =====================================================
   FORMULÁRIO
===================================================== */


.contato {

    padding: 60px 0;

}



form {


    max-width: 700px;

    margin: auto;


    background: white;

    padding: 30px;

    border-radius: 15px;

    box-shadow: 0 5px 15px #ddd;

}



form label {


    display: block;

    margin-top: 15px;

    font-weight: bold;


}



input,
textarea {


    width: 100%;

    padding: 12px;

    margin-top: 8px;

    border: 1px solid #ccc;

    border-radius: 8px;

}



fieldset {


    margin-top: 20px;

    padding: 15px;

}



button {


    margin-top: 25px;

    width: 100%;

    padding: 15px;

    background: #8bc34a;

    border: none;

    border-radius: 30px;

    color: white;

    font-size: 18px;

    cursor: pointer;


}



button:hover {

    background: #689f38;

}



.check {

    margin-top: 20px;

}



/* =====================================================
   TABELA
===================================================== */


.horarios {

    padding-bottom: 50px;

}



table {


    width: 100%;

    background: white;

    border-collapse: collapse;

}



th {


    background: #8bc34a;

    color:white;

}



th,
td {


    border:1px solid #ddd;

    padding:15px;

    text-align:center;

}




/* =====================================================
   RODAPÉ
===================================================== */


footer {


    background:#4b2e20;

    color:white;

    text-align:center;

    padding:30px;


}



/* =====================================================
   RESPONSIVIDADE
===================================================== */


@media(max-width:768px){


header .container {

    flex-direction: column;

}


nav ul {

    flex-direction: column;

    text-align:center;

}


.cards,
.cards-servicos {

    display:block;

}



.card,
.servico-card {

    margin-bottom:25px;

}



.banner h2 {

    font-size:32px;

}


}