@charset "UTF-8";

@font-face {
  font-family: 'Graziela';
  src: url('fontes/La\ Graziela\ Script\ Demo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Rembullan';
  src: url('fontes/Rembullan-Mallam.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'milven';
  src: url('fontes/Hanged\ Letters.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  height: 100%;
}

body {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0px;
      font-family: 'milven';
      background-color: #b4eef18c;
    }

    header > h1 {
      font-variant: normal;
      font-size: 80px;
      font-weight: normal;
      margin: 10px;
    }

    header > p {
      font-family:'Times New Roman', Times, serif;
      font-size: 10px;
    }

    header {
      flex: 0 0 10%;
      background-color: #22e5f38c;
      color: rgba(22, 21, 21, 0.925);
      padding: 1px;
      text-align: center;
      box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.096);
    }

    nav {
      background-color: #f7d0eaa8;
      padding: 10px;
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.116);
      text-align: center;
    }

    nav > a {
      color: #000;
      padding: 10px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
      transition-duration: 0.5s;
      font-family:Arial, Helvetica, sans-serif;
      font-size: 18px;
    }

    nav a:hover {
     background-color: rgb(240, 167, 216);
     color: aqua;
    }

    .hero {
      flex: 0 0 10%;
      background-image: url('banner.jpg'); /* Substitua por sua imagem */
      background-size:15px;
      background-repeat: no-repeat;
      background-position: center;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(240, 167, 216);
      font-size: 15%;
      font-weight: bold;
      text-shadow: 2px 2px 5px #000;
    }

    .hero img {
      width: 180px;
      height: auto;
    }

    /* --- Seção de Fotos (Slides) --- */
.photo-section {
    padding: 34px 40px;
    background-color:#f7d0eaa8;
    text-align: center;
    font-size: 20px;
}

.photo-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.photo-item {
    width: 155px;     /* Tamanho pequeno conforme solicitado */
    height: 140px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(51, 49, 49, 0.1);
    transition: transform 0.3s ease;
    font-size: 10px;
    padding: 10px;
}

.photo-section {
  padding: 10px 20px; /* reduz espaço interno */
  background-color: #f7d0eaa8;
  text-align: center;
  font-size: 20px;
}


.photo-item:hover {
    transform: scale(1.08);
}

    footer {
      background-color: #22e5f38c;
      color: rgb(22, 21, 21);
      text-align: center;
      padding: 20px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      box-shadow: #000;
    }

    /* ================================================= */
/* === MEDIA QUERY PARA CELULAR (Máx 767px) === */
/* ================================================= */
@media screen and (max-width: 600px)  {

    /* --- Elementos Gerais --- */
    body {
        /* Garante que a rolagem seja da página, se necessário */
        overflow-x: hidden; 
        padding: 0;
        
    }

    /* --- Cabeçalho e Título --- */
    header > h1 {
        font-size: 60px; /* Título menor para caber na tela */
        margin: 20px;
    }

    /* --- Navegação --- */
    nav {
        display: flex;
        flex-flow: row nowrap; /* Links um abaixo do outro */
        padding: 3px;
    }

    nav > a {
        font-size: 16px;
        padding: 10px 0; /* Mais espaço vertical entre links */
        margin: 3px 0; /* Espaçamento entre os botões de navegação */
        border-radius: 5px;
        width: 100%;
    }

    /* --- Seção Hero --- */
    .hero {
        height: 230px; /* Reduz a altura do banner */
    }

    .hero img {
        width: 230px; /* Reduz o tamanho da logo */
    }
    
    /* --- Seção de Fotos (Empilhamento) --- */
    .photo-section {
        padding: 10px 10px; /* Menos padding lateral */
    }
     
    .container-de-fotos {
        display: flex; 
        align-items: center; /* Centraliza as fotos */
        gap: 5px;
        padding-bottom: 20px;
        justify-content: space-evenly;
    }

    .photo-item {
        width: 10%; /* As fotos ocupam grande parte da largura da tela */
        max-width: 180px; /* Limite máximo para não ficarem gigantes */
        height: auto; /* Altura automática para manter proporção */
        flex: auto;
        flex-wrap: nowrap;
    }

    /* --- Rodapé --- */
    footer p {
        font-size: 14px; /* Reduz o texto do rodapé */
        padding: 2px 5px;
        
    }
}