* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body {
font-family: "Noto Sans", sans-serif;
}
img {
max-width: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background: url(images/fondo.png) no-repeat;
background-size: cover;
background-color: #fffAf7;
}
.menu{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10 px 0;
}
.logo{
max-width: 100%;
padding: 20px 0;
}
.menu .navbar ul{
display: flex;
list-style-type: none;
}
.menu .navbar ul li a{
font-size: 20px;
padding: 0 10px;
color: #1b1b1D;
display: block;
font-weight: 600;
text-decoration: none;
}
.menu .navbar ul li a:hover {
color: #FF8400;
}
#menu {
display: none;
}
.menu-icono {
width: 25px;
}
.menu label {
cursor: pointer;
display: none;
}
.header-iram {
display: flex;
justify-content: right;
}
.iram img {float: right;
padding: 80 px 0;
}
.header-content {
display: flex;
justify-content: space-between;
padding: 80 px 0;
}
.header-txt {
flex-basis: 50%;
padding-right: 80px;
}
.header-txt h1 {
font-size: 50px;
line-height: 1.2;
text-transform: uppercase;
color: #1B1B1D;
margin-bottom: 8px;
}
p {
font-size: 20px;
color: #515151;
margin-bottom: 20px;
}
.btn-1 {
display: inline-block;
padding: 10px 25px;
color: #FFFFFF;
background-color: #FF8400;
text-decoration: none;
text-transform: uppercase;
border-radius: 25px;
font-size: 14px;
}
.btn-1:hover {
background-color: #F38004;
}
.header-img {
flex-basis: 50%;
}
.services {
padding: 60px 0;
text-align: center;
}
h2 {
color: #1B1B1D;
font-size: 40px;
}
.services-1 h3 {
color: #1B1B1D;
font-size: 20px;
margin-bottom: 10px;
}
.products {
padding: 30px 0 30px 0;
text-align: center;
}
.products-content {
margin-top: 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.products-1 {
background-color: #F7F7F7;
padding: 20px;
border-radius: 20px;
}
.products-1 h4 {
color: #1B1B1D;
font-size: 22px;
margin-bottom: 5px;
}
.products-1 p {
color: #FF8400;
margin-bottom: 10px;
}
.products-1 img {
width: 250px;
}
.testimonio {
text-align: center;
padding-bottom: 80px;
}
.testimonio-content {
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.testimonio-1 {
flex-basis: calc(40% - 20px);
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.testimonio-1 img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 5px;
}
.testimonio-1 h3 {
color: #1B1B1D;
font-size: 18px;
text-transform: uppercase;
margin-bottom: 10px;
}
.testimonio-1 p{
margin-bottom: 0;
}
.footer {
border-top: 1px solid #1B1B1D2B;
padding: 20px 0;
background-color: #1B1B1D;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-content ul {
display: flex;
list-style-type: none;
}
.footer-content ul li a {
display: block;
padding: 20px;
color: #1B1B1D;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.footer-content p {
font-size: 16px;
padding: 20px 0px;
color: #FFFFFF;
}
.footer-content ul li a:hover {
color: #FF8400;
}
.logo-footer{
max-width: 100%;
padding: 5px 10px;
}
@media(max-width:991px) {
.menu {
padding: 20px 10px 0;
position: relative;
}
.menu label {
display: initial;
}
.iram {
flex-direction: column;
text-align: center;
padding: 20 px 0;
}
.menu .navbar {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #C0C0C0;
display: none;
}
.menu .navbar ul {
flex-direction: column;
}
.menu .navbar ul li {
width: 100%;
padding: 20px 0;
}
.menu .navbar ul li a:hover {
color: #FFFFFF;
}
#menu:checked ~ .navbar {
display: initial;
}
.header-content {
padding: 30px;
flex-direction: column;
text-align: center;
}
.header-txt {
padding: 0 0 40px 0;
}
.header-img {
flex-direction: column;
}
.services {
padding: 30px;
}
.services-content {
flex-direction: column;
margin-top: 30px;
}
.products {
padding: 30px;
}
.products-content {
margin-top: 30px;
grid-template-columns: repeat(1, 1fr);
}
.testimonio {
padding: 30px;
}
.testimonio-content {
flex-direction: column;
margin-top: 30px;
}
.testimonio-1 {
margin-bottom: 30px;
}
.footer {
padding: 30px;
text-align: center;
}
.footer-content {
flex-direction: column;
}
.footer-content ul {
flex-direction: column;
}
}