body{

    background: #d950d0;
    background: linear-gradient(90deg, rgba(217, 80, 208, 1) 0%, rgba(4, 4, 145, 1) 35%, rgba(138, 24, 214, 0.98) 99%);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;  /*remove o espaçamento externo da pagina */
    padding: 0; /*remove o espaçamento interno da pagina */
}

/* === CONNTAINER DE IMAGENS (GALERIA) === */
.modelo{
    display: flex; /* usa flexbox para posicionar itens */
    justify-content: space-around; /* espaça os itens igualmente */
    align-items: flex-start; /* alinha os itens ao topo */
    flex-wrap: wrap; /*permite que as imagens quebrem linha */
    gap: 30px; /*espaço entre os itens */
}

/* === ESTILO DAS IMAGENS === */
.box img{
    width: 100%; /*ocupa 100% da largura do box */
    height: auto; /* mantém a proporção da altura*/
    border: 2px solid rgb(6, 0, 11); /* borda ao redor da imagem */
    border-radius: 40px; /* cantos arredondados da borda */
}
/* === CONTAINTER INDIVIDUAL DA IMAGEM === */
.box {
    text-align: center; /* Centraliza o texto (titulo da imagem) */
    max-width: 900px; /* largura maxima da caixa */
}
/* === ELEMENTOS ESTRUTURAIS GERAIS === */
header, nav, section, footer{
    padding: 20px; /* Espaçamento interno de todos os lados */
    border-bottom: 1px solid rgb(202, 8, 163); /* Linha cinza clara separando seções */
}
/* === CABEÇALHO DO SITE === */
header{
    position: fixed; /*fixa o cabeçalho no topo da pagina*/
    top: 0; /* alinha o cabeçalho ao topo */
    width: 100%; /*ocupa 100% da largura da tela */
    text-align: center; /* Centraliza o texto do cabeçalho */
    background: #d950d0;
    background: linear-gradient(90deg, rgba(217, 80, 208, 1) 0%, rgba(4, 4, 145, 1) 35%, rgba(138, 24, 214, 0.98) 99%);
    padding: 20px; /*Espaçamento interno do cabeçalho */
    color: rgb(241, 247, 245);
    z-index: 999;   /*garante que fique acima dos outros elementos (exceto o nav) */

}
/* === MENU DE NAVEGAÇÃO === */
.navbar{
  
    position: fixed; /* Fixa o menu abaixo do cabeçalho */
    top:80px; /* Posiciona o menu abaixo do header (altura aproximada do header ) */
    width: 100%; /* Ocupa 100 da largura */
    text-align: center; /*Centraliza os links */
    background-color: rgb(72, 135, 50); /* Fundo branco para o menu */
    z-index: 1000; /* Fica acima do cabeçalho */

}
/* === LINKS DO MENU === */
.navbar a {
    font-weight: bold; /*deixa  o texto dos links em negrito */
    margin: 10px; /* Espaçamento entre os links */
    font-size: 23px; /*tamanho da fonte dos links */

}

/* Centraliza os itens do menu dentro da navbar */
.navbar-nav {
    justify-content: center; /*alinha os itens ao centro */
    width: 100%; /* ocupa toda a largura disponivel */

}

/* === SEÇÃO DO BANNER */
.banner{
padding: 0; /* aplica 200px de espaço acima e abaixo e 20px nas laterais */
margin-top: 100px; /* desloca o banner para baixo, compensando o header e o nav fixos */

}

/* AJUSTES DO CARROSSEL (IMAGENS DE BANNER) */
.carousel
.carousel-inner
.carousel-item
.carousel-item img{
width: 100%; /*Ocupa 100% da largura do container */
max-width: 100%; /* Não ultrapass a largura total */

}

.carousel-item img {
    height: auto; /* Altura automatica proporcional */
    max-height: 700px;
    object-fit: cover;
}