/* General styles */
body {
/*font-family: 'Poppins', sans-serif;*/
margin: 0;
padding: 0;
}

/*header {
background-image: url('../img/bg1.jpg');
background-size: 135%;
background-position: center;
background-repeat: no-repeat;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}*/

/*header h1 {
background-color: #18AEC3;
color: #FFFFFF;
padding: 15px 30px;
font-size: 38px;
font-weight: bold;
/*width: 640px;
width: fit-content;
height: 51px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
border-radius: 15px;
text-align: center;
margin: 4px 0px 4px 0px;
position: absolute;
line-height: 1.4em;
}*/

header {
display: flex;
flex-direction: column;
gap: 10px; /* Espaciado entre los divs */
border-bottom: 0.5px solid #cccc;
}

.child1 {
display: flex;
/*height: 50px;*/
background-color: #191C24;
color: white;
gap: 10px; /* Espaciado entre las partes internas */
margin-bottom: 8px;
}

.child1-part1, .child1-part2-des, .child1-part2-mov, .child1-part3-des, .child1-part3-mov {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
/* background-color: #f9c; */
/* border: 1px solid #ccc;  */
}

.child1-part1 a {
color: white;
text-decoration: none;
}

.child1-part2-des a {
    color: #e03838;
    font-size: 36px;
    text-decoration: none;
}

.row {
display: flex;
justify-content: space-between; /* Espacio igual entre los elementos */
gap: 10px; /* Espaciado entre los divs 2, 3 y 4 */
}

.child2, .child3, .child4 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
/* background-color: #a0f; */
}

.child4 {
font-size: 30px;
font-weight: 500;   
}

.child4 a {
color: black;
text-decoration: none;
}

.child5 {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
/* background-color: #0af; */
color: transparent;
}

.child5 a {
color: transparent;
}

header .background-overlay {
background-color: #2D2D2D;
opacity: 0.1;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 220px;
width: 100%;
top: 0;
left: 0;
position: absolute;
}

main h1 {
background-color: #E54D42;
color: #FFFFFF;
padding: 7px 30px;
font-size: 38px;
font-weight: 500;
/*width: 640px;*/
width: fit-content;
height: 51px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
border-radius: 5px;
margin: 4px 0px 4px 0px;
position: absolute;
line-height: 1.4em;
display: flex;
align-items: center;
}

.cta {
margin: 0 5%;
}

.content {
width: 85%;
margin: 0 auto;
position: relative;
height: 235px;
overflow-y: auto;
padding-right: 20px;
scrollbar-width: thin;
scrollbar-gutter: stable;
}

.content h2 {
font-size: 1.5em;
line-height: 1.5;
margin-bottom: 20px;
font-weight: 600;
}

.content h3 {
font-size: 1.5em;
line-height: 1.5;
margin-bottom: 20px;
font-weight: 600;
}

.content h4 {
font-size: 1.5em;
line-height: 1.5;
margin-bottom: 20px;
font-weight: 600;
}

.content h5 {
font-size: 1.5em;
line-height: 1.5;
margin-bottom: 20px;
font-weight: 600;
}

.content h6 {
font-size: 1.5em;
line-height: 1.5;
margin-bottom: 20px;
font-weight: 600;
}

.content p {
font-size: 18px;
margin-bottom: 20px;
text-align: justify;
}

.content a {
color: #E54D42;
text-decoration: none;
}

.images {
width: 45%;
display: flex;
justify-content: space-evenly;
}

.main-image {
width: 340px;
height: 340px;
border-radius: 10px;
}

.secondary-images {
display: flex;
gap: 10px;
margin-top: 20px;
}

.secondary-images img {
width: 48%;
border-radius: 10px;
}

/*.cta-footer {
background-color: #00bcd4;
text-align: center;
padding: 20px;
color: white;
}*/

.cta-footer {
background-color: #191C24;
display: flex;
margin-left: auto;
margin-right: auto;
position: relative;
height: 67px;
justify-content: center;
}

footer .cta-footer .parra {
/*width: 56.923%;*/
align-content: center;
padding: 10px;
/*text-align: right;*/
color: white;
font-size: 26px;
margin: 0;
font-weight: 500;
}

.cta-footer-button {
background-color: #E54D42;
width: 149px;
height: 47px;
color: #ffffff;
border: none;
cursor: pointer;
font-size: 12px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding-top: 17px;
padding-right: 25px;
padding-bottom: 17px;
padding-left: 25px;
margin: auto 5px;
font-weight: 600;
line-height: 1em;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-flex;
align-items: center;
justify-content: space-between;
}

.cta-footer a {
margin: auto 0 auto 0;
}

.brand {
display: flex;
width: 351px;
height: inherit;
align-items: center;
justify-content: center;
padding-bottom: 4%;
}

.bott {
display: flex;
width: 351px;
height: auto;
align-items: center;
justify-content: center;
margin: auto;
}

.brand img {
position: absolute;
}

.foo-men {
background-color: #191C24;
display: flex;
margin-left: auto;
margin-right: auto;
position: relative;
height: auto;
font-size: small;
color: white;
gap: 20px;
justify-content: center;
padding: 5px;
border-bottom: 1px solid #cccc;
}

.foo-men a {
color: white;
text-decoration: none;
}

.zcod {
font-size: xx-small;
text-align: center;
margin-top: 3%;
}

.zcod a {
text-decoration: none;
color: white;
}

.indexados {
margin: auto;
}

.indexados a {
color: white !important;
text-decoration: none;
}

.index {
text-align:center;
background-color:#191C24;
}

.index a {
color:white;
text-decoration:none;
position: relative;
font-size: 10px;
display: block;
}

@media only screen and (min-width: 1024px) {

.child1-part3-mov {
display: none;
}

.child1-part2-mov {
display: none;
}

main {
margin-top: 50px !important;
}

.services {
display: flex;
padding: 50px 60px 40px 60px;
background: white;
color: black;
height: 70vh;
}

.van {
display: flex;
flex-direction: column;
flex: 1;
}

}

@media only screen and (max-width: 980px) {
header {
max-width: 100%;
background-size: 200%;
}

header h1 {
width: auto;
max-width: 100%;
font-size: inherit;
height: auto;
}

main h1 {
background-color: #E54D42;
color: #FFFFFF;
padding: 7px 30px;
font-size: x-large;
font-weight: 500;
/* width: 640px; */
width: fit-content;
/* height: 51px; */
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
border-radius: 5px;
text-align: center;
margin: 4px 0px 4px 0px;
position: relative;
line-height: 1.4em;
}

.cta-footer a {
margin: auto 0 auto 0;
}

main {
margin-top: 40px;
}

.services {
/*display: grid;*/
display: flex;
grid-template-columns: 1fr;
padding: 0;
grid-template-rows: auto;
margin-top: 0;
flex-direction: column;
background: white;
color: black;
}

.flex > * {
order: 0;
}

.van {
order: 1;
}

.content {
height: 300px;
padding: 0;
margin-top: 10%;
}

.content h2,h3,h4,h5,h6 {
text-align: center;
font-size: larger !important;
}

.slider-container {
width: 350px;
height: 350px;
}

.cta {
margin: 5% 5%;
text-align: center;
}

footer .cta-footer .parra {
text-align: center;
font-size: medium;
color: white;
}

.cta-footer-button {
font-size: 12px;
}

.brand {
padding-bottom: 15%;
}

.brand img {
width: 215px;
}

.child1 {
margin-bottom: 0;
padding: 5px;
background-color: #191C24;
color: white;
}

.child2, .child4, .child1-part3-des, .child1-part2-des {
display: none;
}

.child1-part1, .child1-part3-mov {
font-size: x-small;
text-align: center;
}

.child1-part1 a {
color: white;
text-decoration: none;
}

.child1-part2-mov a {
color: #e03838;
font-size: larger;
text-align: center;
text-decoration: none;
}

.child5 a {
color: #e03838;
font-size: xx-large;
margin-bottom: 5%;
text-decoration: none;
}

.cta-footer {
background-color:#191C24;
}

.content p {
font-size: inherit;
margin-bottom: 30px;
}

.foo-men {
background-color: #191C24;
display: flex;
margin-left: auto;
margin-right: auto;
position: relative;
height: auto;
font-size: xx-small;
color: white;
gap: 5px;
justify-content: center;
padding: 5px;
border-bottom: 1px solid #cccc;
}

.foo-men div {
display: flex;
align-items: center;
text-align: center;
}

.zcod {
font-size: xx-small;
text-align: center;
margin-top: 3%;
margin-bottom: 3%;
}

.zcod a {
text-decoration: none;
color: white;
}
}