/* ESTILOS PRINCIPAIS DO SITE */


/* Aplicado a: produtos . html e contato . html */
/* C o n f i g u r a o b s i c a */
body {
font-family : 'Arial', sans - serif ;
line-height : 1.6;
color : #2e8ee7;
}
/* === C A B E A L H O === */
header {
background : linear - gradient (135 deg , #667 eea 0% , #764 ba2 100%) ;
padding : 20 px 0;
position : relative ;
box-shadow : 0 2 px 10 px rgba (0 ,0 ,0 ,0.1) ;
}
.caixa {
position : relative ;
width : 940 px ;
margin : 0 auto ;
display : flex ;
justify-content : space - between ;
align-items : center ;
}

/* Logo */
header h1 img {
max-height : 80 px ;
width : auto ;
}
/* === N A V E G A O === */
nav ul {
display : flex ;
gap : 30 px ;
}

nav li {
list-style : none ;
}
nav a {
text-transform : uppercase ;
color : #ffffff ;
font-weight : bold ;
font-size : 18 px ;
text-decoration : none ;
padding : 10 px 20 px ;
border-radius : 25 px ;
transition : all 0.3 s ease ;




}

nav a:hover {
background : rgba (255 ,255 ,255 ,0.2) ;
transform : translateY ( -2 px );
}

nav a :active {
background : rgba (255 ,255 ,255 ,0.3);
}

/* mpoko konprann  anle a----------------*/

/* === C O N T E D O PRINCIPAL === */
main {
width : 940 px ;
margin : 0 auto ;
padding : 50 px 0;
}

.titulo-principal-produtos {
text-align : center ;
font-size : 2.5 em ;
margin-bottom : 40 px ;
color : #ec3838;
font-weight : bold ;
}

/* === PRODUTOS === */
.produtos {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax (280 px , 1 fr ));
gap : 30 px ;
padding : 0;
margin : 0;
}

.produtos li {
background : #fff ;
border-radius : 15 px ;
padding : 25 px ;
text-align : center ;
box-shadow : 0 5 px 15 px rgba (0 ,0 ,0 ,0.1) ;
transition : all 0.3 s ease ;
border : 3 px solid transparent ;
}

.produtos li  hover {
transform : translateY ( -10 px ) ;
box-shadow : 0 15 px 35 px rgba (0 ,0 ,0 ,0.2) ;
border-color : rgb(127, 127, 230) eea ;
}

.produtos li :active {
transform : translateY ( -5 px );
}

.produtos h3 {
font-size : 1.8 em ;
font-weight : bold ;
margin-bottom : 15 px ;
color : #f02c2c;
}

.produtos img {
width : 100%;
height : 200 px ;
object-fit : cover ;
border-radius : 10 px ;
margin-bottom : 15 px ;
}

.produto-descricao {
font-size : 1 em ;
margin : 15 px 0;
color : #1a4fc0;
line-height : 1.5;
}

.produto-preco {
font-size : 1.4 em ;
font-weight : bold ;
margin-top : 15 px ;
color :#28a745 ;
background : #f8f9fa ;
padding : 10 px ;
border-radius : 8 px ;
}
/* === R O D A P === */
footer {
text-align : center ;
background : linear - gradient (135 deg , rgb(174, 241, 66) eea 0% , rgb(230, 60, 74) ba2 100%) ;
padding : 40 px 0;
margin-top : 50 px ;
}
footer img {
max-height : 60 px ;
width : auto ;
margin-bottom : 20 px ;
}


.copyright {
color :#ffffff ;
font-size : 14 px ;
margin : 0;
}
/* === RESPONSIVIDADE === */
@media ( max-width : 940px ) {
.caixa , main {
width : 90%;
padding : 20 px ;
}
.caixa {
flex-direction : column ;
gap : 20 px ;
}

nav ul {
justify-content : center ;
}
}

@media ( max-width : 768px ) {
.titulo-principal-produtos {
font-size : 2 em ;
}

 nav ul {
flex-wrap : wrap ;
gap : 15 px ;
 }

nav a {
font-size : 16 px ;
padding : 8 px 15 px ;
}
}



