html {
    color: #1F1300;
    background-color: #E9E7E6;
    line-height: 1.4;
    letter-spacing: 0.05;
    width: 100%;
}

body {
    margin:  auto;
}

/* --------------- Navbar --------------- */
/* Padding de los icons en nav-link */
.navbar
.icon-padding {
    margin-right: 10px;
}

/* Estilo del texto */
.navbar
h5 {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
}

.navbar
li {
    font-family: "Roboto Slab", sans-serif;
    font-size: 16;
    font-weight: normal;
}

/* Estilo de button */
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.navbar
.buttonPrincipal {
    margin-top: 5%;
}

.navbar
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

/* --------------- Heroarea --------------- */
/* Estilo del contenedor */
.hero-container {
    background-image: url(/images/heroimage.png);
    background-size: cover;
    overflow: hidden;
    background-position: center;
}

@media (max-width: 576px) {
    .hero-container  {
        height: 770px;
    }
}

/* Estilo del texto */
.hero-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #E9E7E6;
}

.hero-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #E9E7E6;
}

/* Estilo del button */
.hero-container
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.hero-container
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

.hero-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.hero-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC ; 
    color: #352B1A;
}

/* --------------- About Us --------------- */
/* Estilo del container */
.aboutus-container {
    background-color: #F8F9FA;
    max-height: auto;
}

/* Estilo del texto */
.aboutus-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    color: #625A4D;
    font-weight: normal;
}

.aboutus-container 
.lema {
    color: #625A4D;
    font-weight: 300;
}

.aboutus-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
}

.aboutus-container
.texto-secundario {
    color: #625A4D;
    font-weight: medium;
}

/* Estilo del icon */
.aboutus-container
.icon-color {
    color: #625A4D;
}

/* Estilo del button */
.aboutus-container
.buttonSecundario-obscuro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    color: #F8F9FA;
    background-color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
}

.aboutus-container
.buttonSecundario-obscuro:hover {
    color: #F8F9FA;
    background-color: #625A4D;
}

.aboutus-container
.img-aboutus {
    background-position: center;
    background-size: cover;
    overflow: hidden;
    max-width: 100%;
    height: 29rem;
    border-radius: 2%;
    object-fit: cover;
}

@media (min-width: 577px) and (max-width: 810px) {
    .aboutus-container
    .img-aboutus {
        height: 30rem;
    }
}

/* --------------- Sistemas --------------- */
/* Estilo del container */
.sistemas-container {
    background-color: #F8F9FA ;
}

/* Estilo del texto */
.sistemas-container
a {
    text-decoration: none;
    height: 250px;
}
.sistemas-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    color: #1F1300;
}

.sistemas-container
a
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

/* Estilo de la imagen */
.sistemas-container
.sistemas-img {
    max-width: 100%;
    height: 150px;
}

/* Estilo del hover en las imagenes */
.sistemas-container
.rotate-hover {
    transition: transform 0.3s ease-in-out;
    transform-style: preserve-3d;
}

.sistemas-container
.rotate-hover:hover {
    transform: rotateY(30deg);
}

/* ----------- Banner Soluciones ----------- */
/* Estilo del container */
.solucion-container {
    background-image: url(/images/banner-herramienta.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Estilo del texto */
.solucion-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    color: #E9E7E6;
}

.solucion-container
p,
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    color: #E9E7E6;
}

.solucion-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.solucion-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC ; 
    color: #352B1A;
}

.solucion-container
.solucioncontainer-button {
    display: flex;
    justify-content: start;
}

@media (max-width: 576px) {
    .solucion-container
    .solucioncontainer-button {
    display: flex;
    justify-content: center;
    }
}

/* -------------- Servicios -------------- */
/* Estilo del container */
.servicios-container {
    background-color: #F8F9FA;
}

/* Estilo del texto */
.servicios-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #1F1300;
}

.servicios-container
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #1F1300;
}

.servicios-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #625A4D;
}

/* Estilo de las tarjetas */
.servicios-container
.servicios-card {
    border-radius: 6px;
    height: 35rem;
    max-width: 400px;
    display: flex;
}

@media (max-width: 576px) {
    .servicios-container
    .servicios-card {
        height: 31rem;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .servicios-container
    .servicios-card {
        height: 34rem;
    }
}

/* Estilo del button */
.servicios-container
.buttonSecundario-obscuro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    color: #F8F9FA;
    background-color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
}

.servicios-container
.buttonSecundario-obscuro:hover {
    color: #F8F9FA;
    background-color: #625A4D;
}

/* ------------ Banner Contacto ------------ */
/* Estilo del container */
.contacto-container {
    background-image: url(/images/banner-contactame.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #D2D0CC;
    height: fit-content;
}

/* Estilo del texto */
.contacto-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

.contacto-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

/* Estilo del button */
.contacto-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.contacto-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC; 
    color: #352B1A;
}

/* -------------- Blog -------------- */
/* Estilo del container */
.blog-container {
    background-color: #F8F9FA;
}

/* Estilo del texto */
.blog-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #1F1300;
}

.blog-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #625A4D;
}

.blog-container 
.articulo-textoImg {
    color: #E9E7E6;
}

.blog-container 
.articulo-textoCard
li
a {
    text-decoration: none;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16;
    font-weight: normal;
    color: #625A4D;
}

.blog-container 
.articulo-textoCard
h2
a {
    text-decoration: none;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 24;
    font-weight: bold;
    color: #1F1300;
}

.blog-container
.articulo-textDate
li
p {
    text-decoration: none;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16;
    font-weight: normal;
    color: #625A4D;
}

/* ------------ Ubicación y Horarios ------------ */
/* Estilo del container */
.ubicacion-container {
    background-color: #1F1300;
}

/* Estilo del iframe */
.ubicacion-container
.mapResponsive {
    width: 550px;
    height: 550px;
    border-radius: 10px;
    overflow: hidden;
}

@media (min-width: 577px) and (max-width: 810px) {
    .ubicacion-container
    .mapResponsive {
        width: 1050px;
    }
}

.ubicacion-container
.mapResponsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ubicacion-container
.mapContent {
    min-height: 100%;
}

/* Estilo del texto */
.ubicacion-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 56;
    font-weight: bold;
    color: #E9E7E6;
}

.ubicacion-container
address,
p {
    text-decoration: none;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16;
    font-weight: normal;
    color: #E9E7E6;
}

.ubicacion-container
a {
    text-decoration: none;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16;
    font-weight: normal;
    color: #E9E7E6;
}

.ubicacion-container
a:hover {
    text-decoration: underline;
    color: #625A4D;
}

.ubicacion-container
.ubicacion-colorIcon {
    color: #E9E7E6;
}

.ubicacion-container
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 28;
    font-weight: bold;
    color: #E9E7E6;
}

/* -------------- Footer -------------- */
/* Estilo del container */
.footer {
    background-color: #F8F9FA;
    min-height: 50px;
}

/* Estilo del texto */
.footer
div {
    text-decoration: none;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16;
    font-weight: normal;
    color: #1F1300;
}

/* ----- Página: Sistemas de detección ----- */
/* Heroarea */
/* Estilo del container */
.sistemasdeteccion-container {
    background-image: url(/images/sistemas-deteccion2.jpg);
    background-size: cover;
    overflow: hidden;
    background-position: center;
    height: 500px;
}

@media (max-width: 576px) {
    .sistemasdeteccion-container {
        height: 430px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .sistemasdeteccion-container {
        height: 370px;
    }
}

.sistemasdeteccion-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

.sistemasdeteccion-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Sistemas de detección ----- */
/* Artículo */
/* Estilo del container */
.textoarticulo-container {
    background-color: #F8F9FA;
    height: fit-content;        
}

/* Explicación de prevención de pérdidas */
/* Estilo del Container */
.textoarticulo-container
.lossprevention {
    background-color: #F8F9FA;
}

/* Estilo Sidecard */
.lossprevention
.sidecard-container {
    border: 1px, solid, #E9E7E6;
    margin: 20%;
    border-radius: 2%;
    background-color: #E9E7E6;
    max-width: 100%;
}

.lossprevention
.sidecard-container:hover {
    border: 1px, solid, #BCB8B3;
    background-color: #BCB8B3;
    filter: drop-shadow(#FCFDEC 0.1rem 0.1rem 10px);
}

.sidecard-container
.textsidecard {
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
}

/* Estilo del Texto Sidecard */
.sidecard-container
.textsidecard
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;                           color: #625A4D;  
}

.sidecard-container
.textsidecard
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #1F1300;
    margin: 5%;
    width: fit-content;
    text-decoration: none;
}

.sidecard-container
.textsidecard
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.sidecard-container
.iconsidecard {
    color: #1F1300;
}

/* Descripción de la prevención de pérdidas */
.lossprevention
.descripcionlossprevencion {
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1080px) {
    .sidecard-1080 {
      display: none;
    }
  }

.descripcionlossprevencion
.imgcenter {
    width: 100%;
    height: 25rem;
    border-radius: 1%;
    object-fit: cover;
}

/* Texto Descripción de la prevención de pérdidas */
.lossprevention
.descripcionlossprevencion
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #1F1300;
}

.lossprevention
.descripcionlossprevencion
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;                            color: #625A4D;  
}

.lossprevention
.descripcionlossprevencion
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.lossprevention
.descripcionlossprevencion
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
    color: #1F1300;
}

/* ----- Página: Sistemas de detección----- */
/* Explicación de los EAS */
/* Estilo del Container */
.textoarticulo-container
.explicacioneas {
    background-color: #F8F9FA;
}

/* Estilo de la imagen */
.explicacioneas
.imgcenter-medio {
    width: 100%;
    height: 25rem;
    border-radius: 1%;
    object-fit: cover;
}

/* Estilo del texto */
.textoarticulo-container
.explicacioneas
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.textoarticulo-container
.explicacioneas
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 600;
    color: #8EB30A;
    font-style: italic;
}

.textoarticulo-container
.explicacioneas
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 600;
    color: #1F1300;
}

.textoarticulo-container
.explicacioneas
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

/* ----- Página: Sistemas de detección----- */
/* Tipos de tecnologías */
/* Estilo del Container */
.textoarticulo-container
.tecnologiaseas {
    background-color: #F8F9FA;
}

/* Estilo del texto */
.textoarticulo-container
.tecnologiaseas
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}


/* Estilo de la img */
.tecnologiaseas
.img-tecnologiaseas {
    background-color: #F8F9FA;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    max-width: 100%;
    height: 29rem;
    border-radius: 2%;
    object-fit: cover;
}

@media (max-width: 576px) {
    .tecnologiaseas
    .img-tecnologiaseas {
        height: 15rem;
    }
}

/* Estilo del accordion */
#tecnologiaseas-accordion 
.accordion-body {
    font-family: "Roboto Slab", sans-serif;
    background-color: #F8F9FA;
    padding: 15px;
    font-size: 16px;
    color: #1F1300;
}

#tecnologiaseas-accordion 
.accordion-body
em {
    font-size: 16px;
    color: #1F1300;
    font-style: italic;
    font-weight: 700;
}

#tecnologiaseas-accordion
.accordion-item {
    border: 1px solid #625A4D;
    border-radius: 5px;
    margin-bottom: 10px;
}

#tecnologiaseas-accordion
.accordion-header {
    font-family: "Roboto Condensed", sans-serif;
    padding: 0;
}

#tecnologiaseas-accordion
.accordion-button.collapsed {
    background-color: #BCB8B3;
    color: #1F1300;
    font-size: 24px;
    font-weight: 400;
}

#tecnologiaseas-accordion
.accordion-button:not(.collapsed) {
    background-color: #8EB30A;
    color: #1F1300;
    border-color: #E2E73E;
    font-size: 24px;
    font-weight: 500;
}

/* ---------- Página: Sistemas de Detección ------- */
/* Banner de Contacto */
/* Estilo del Container */
.textoarticulo-container
.sistemas-bannercontacto {
    background-image: url(/images/banner-sistemascontacto.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    object-fit: fill;
    width: 100%;
    height: 550px;
}

/* Estilo del texto */
.sistemas-bannercontacto
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    color: #E9E7E6;
}

.sistemas-bannercontacto
p,
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    color: #E9E7E6;
}

.sistemas-bannercontacto
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.sistemas-bannercontacto
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC ; 
    color: #352B1A;
}

/* ---------- Página: Sistemas de Detección ------- */
/* Beneficios de los Sistemas EAS */
/* Estilo del Container */
.textoarticulo-container
.articulo-beneficioseas {
    display: flex;
    justify-content: center;
    align-items: center;
}

.articulo-beneficioseas 
.icon-beneficios {
    width: 25px;
    height: 25px;
    columns: #625A4D;
}

/* Estilo de la imagen */
.articulo-beneficioseas 
.img-beneficios {
    background-size: cover;
    overflow: hidden;
    margin: 5%;
    background-position: center;
    border-radius: 2%;
    object-fit: cover;
    height: 750px;
}

@media (max-width: 576px) {
    .articulo-beneficioseas 
    .img-beneficios {
        height: 13rem;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .articulo-beneficioseas 
    .img-beneficios {
        height: 26rem;
    }
}

/* Estilo del texto */
.textoarticulo-container
.articulo-beneficioseas
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

.textoarticulo-container
.articulo-beneficioseas
h4 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 24;
    font-weight: 700;
    color: #1F1300;
}

.textoarticulo-container
.articulo-beneficioseas
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #1F1300;
}

.textoarticulo-container
.articulo-beneficioseas
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
}

/* ---------- Página: Sistemas de Detección ------- */
/* Por qué comprar sistemas EAS */
/* Estilo del Container */
.textoarticulo-container
.comprareas {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

.textoarticulo-container
.comprareas
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

.textoarticulo-container
.comprareas
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.textoarticulo-container
.comprareas
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
}

/* ---------- Página: Sistemas de Detección ------- */
/* Paginación para otros sistemas */
/* Estilo del Container */
.textoarticulo-container
.paginacionsistemas {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

.paginacionsistemas
.icons-paginacion {
    color: #1F1300;
}

.paginacionsistemas
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36px;
    font-weight: bold;
    color: #1F1300;
}

.paginacionsistemas
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #625A4D;
}

.paginacionsistemas
.paginacion-contenedorind {
    background-color: #F8F9FA;
    padding: 1%;
}

.paginacionsistemas
.paginacion-contenedorind:hover {
    border: 1px solid #625A4D;
}

/* ----- Página: Protección de mercancías ----- */
/* Heroarea */
/* Estilo del container */
.proteccionmercancias {
    background-image: url(/images/proteccion-mercancias-ha.jpeg);
    background-size: cover;
    overflow: hidden;
    background-position: top;
    height: 500px;
}

@media (max-width: 576px) {
    .proteccionmercancias {
        height: 430px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .proteccionmercancias {
        height: 350px;
    }
}

.proteccionmercancias
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

.proteccionmercancias
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Protección de mercancías ----- */
/* Artículo */
/* Estilo del container */
.art-proteccionmercancias {
    background-color: #F8F9FA;
    height: fit-content;        
}

/* Descripción de la prevención de pérdidas */
.art-proteccionmercancias
.descripcionproteccion {
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1080px) {
    .sidecard-1080 {
      display: none;
    }
  }

.descripcionproteccion
.imgcenter {
    width: 100%;
    height: 25rem;
    border-radius: 1%;
    object-fit: cover;
}

/* Texto Descripción de la prevención de pérdidas */
.art-proteccionmercancias
.descripcionproteccion
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #1F1300;
}

.art-proteccionmercancias
.descripcionproteccion
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;                            color: #625A4D;  
}

.art-proteccionmercancias
.descripcionproteccion
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.art-proteccionmercancias
.descripcionproteccion
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
    color: #1F1300;
}

/* ----- Página: Protección de mercancías ----- */
/* Tecnologías clave para la protección */
/* Estilo del container */
.art-proteccionmercancias
.tecclaveproteccion {
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
}

.art-proteccionmercancias
.tecclaveproteccion 
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;                          color: #625A4D;  
}

.art-proteccionmercancias
.tecclaveproteccion 
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.art-proteccionmercancias
.tecclaveproteccion 
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
    color: #1F1300;
}

.tecclaveproteccion
.teccard {
    background-color: #F8F9FA;
    border-radius: 5%;
}

.teccard
.teccard-body {
    display: flex;
    justify-content: top;
    flex-direction: column;
    height: 500px;
}

@media (max-width: 576px) {
    .teccard
    .teccard-body {
        height: 450px;
    }

    .teccard-body
    .teccard-icon {
    height: 130px;
    width: 100%;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .teccard
    .teccard-body {
        height: 600px;
    }
}

.teccard-body
.teccard-icon {
    height: 190px;
    width: 100%;
}

.teccard-body
.teccard-titulo {
    font-family: "Roboto Slab", sans-serif;
    font-size: 24px;
    color: #625A4D;
    margin: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.teccard-body
.teccard-text {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    color: #1F1300;
}

/* ----- Página: Protección de mercancías ----- */
/* Banner Contacto */
/* Estilo del container */
.art-proteccionmercancias
.proteccionmerchbanner {
    background-image: url(/images/protecmerch.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    object-fit: fill;
    width: 100%;
    height: 550px;
}

@media (max-width: 576px) {
    .art-proteccionmercancias
    .proteccionmerchbanner {
    height: 620px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .art-proteccionmercancias
    .proteccionmerchbanner {
    height: 600px;
    }
}

/* Estilo del texto */
.proteccionmerchbanner
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    color: #E9E7E6;
}

.proteccionmerchbanner
p,
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    color: #E9E7E6;
}

.proteccionmerchbanner
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.proteccionmerchbanner
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC ; 
    color: #352B1A;
}

/* ----- Página: Protección de mercancías ----- */
/* Ventajas de la protección de merch */
/* Estilo del container */
.art-proteccionmercancias
.ventajasprotmerch-container {
    background-color: #F8F9FA;
}

.art-proteccionmercancias
.icon-protmerch {
    width: 25px;
    height: 25px;
    color: #625A4D;
}

.art-proteccionmercancias
.protecmerch-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
}

.protecmerch-img
.img-protecmerch {
    background-position: center;
    background-size: cover;
    overflow: hidden;
    object-fit: cover;
    height: 600px;
    border-radius: 2%;
}

@media (max-width: 576px) {
    .art-proteccionmercancias
    .img-protecmerch {
        height: 300px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .art-proteccionmercancias
    .img-protecmerch {
        height: 350px;
    }
}

/* Estilo del texto */
.art-proteccionmercancias
.ventajasprotmerch-container
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

.art-proteccionmercancias
.ventajasprotmerch-container
h4 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 24;
    font-weight: 700;
    color: #1F1300;
}

.art-proteccionmercancias
.ventajasprotmerch-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #1F1300;
}

.art-proteccionmercancias
.ventajasprotmerch-container
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
}

/* ----- Página: Protección de mercancías ----- */
/* Ventajas de la protección de merch */
/* Estilo del container */
.art-proteccionmercancias
.protecmerchcomprar {
    background-color: #F8F9FA;
}

.art-proteccionmercancias
.protecmerchcomprar
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #625A4D;
}

.art-proteccionmercancias
.protecmerchcomprar
p,
span {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #1F1300;
}

.art-proteccionmercancias
.protecmerchcomprar
em {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
}

.protecmerchcomprar
.icon-protmerch {
    width: 25px;
    height: 25px;
    color: #625A4D;
}

/* ---------- Página: Protección de mercancías ------- */
/* Paginación para otros sistemas */
/* Estilo del Container */
.art-proteccionmercancias
.paginacionsistemas {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

.paginacionsistemas
.icons-paginacion {
    color: #1F1300;
}

.paginacionsistemas
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36px;
    font-weight: bold;
    color: #1F1300;
}

.paginacionsistemas
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #625A4D;
}

.paginacionsistemas
.paginacion-contenedorind {
    background-color: #F8F9FA;
    padding: 1%;
}

.paginacionsistemas
.paginacion-contenedorind:hover {
    border: 1px solid #625A4D;
}

/* ----- Página: Inventaros inteligentes ----- */
/* Heroarea */
/* Estilo del container */
.inventariosinteligentes {
    background-image: url(/images/inventario-inteligente.jpeg);
    background-size: cover;
    overflow: hidden;
    background-position: top;
    height: 500px;
}

@media (max-width: 576px) {
    .inventariosinteligentes {
        height: 430px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .inventariosinteligentes {
        height: 350px;
    }
}

.inventariosinteligentes
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

.inventariosinteligentes
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Inventaros inteligentes ----- */
/* Artículo */
/* Estilo del container */
.invinteligente-container {
    background-color: #F8F9FA;
    height: fit-content;
}

/* Descripción del inventario inteligente */
.invinteligente-container
.descripcioninventario {
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
}

.descripcioninventario
.imgcenter {
    width: 100%;
    height: 25rem;
    border-radius: 1%;
    object-fit: cover;
}

/* Texto Descripción inventario inteligente */
.invinteligente-container
.descripcioninventario
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.invinteligente-container
.descripcioninventario
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;                            color: #625A4D;  
}

.invinteligente-container
.descripcioninventario
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

.invinteligente-container
.descripcioninventario
em {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
    color: #1F1300;
}

/* ----- Página: Inventaros inteligentes ----- */
/* Tecnología RFID */
/* Estilo del Container */
.invinteligente-container
.tecrfid {
    background-color: #F8F9FA;
}

/* Estilo de la imagen */
.tecrfid
.imgcenter-medio {
    width: 100%;
    height: 25rem;
    border-radius: 1%;
    object-fit: cover;
}

/* Estilo del texto */
.invinteligente-container
.tecrfid
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.invinteligente-container
.tecrfid
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 600;
    color: #8EB30A;
    font-style: italic;
}

.invinteligente-container
.tecrfid
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 600;
    color: #1F1300;
}

.invinteligente-container
.tecrfid
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

/* ----- Página: Inventario Inteligente ----- */
/* Como se compone */
/* Estilo del Container */
.invinteligente-container
.sistemarfid {
    background-color: #F8F9FA;
}

/* Estilo del texto */
.invinteligente-container
.sistemarfid
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}


/* Estilo de la img */
.sistemarfid
.img-tecnologiaseas {
    background-color: #F8F9FA;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    max-width: 100%;
    height: 25rem;
    border-radius: 2%;
}

@media (max-width: 576px) {
    .sistemarfid
    .img-tecnologiaseas {
        height: 15rem;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .sistemarfid
    .img-tecnologiaseas {
        height: 28rem;
    }
}

/* Estilo del accordion */
#inventintel-accordion 
.accordion-body {
    font-family: "Roboto Slab", sans-serif;
    background-color: #F8F9FA;
    padding: 15px;
    font-size: 16px;
    color: #1F1300;
}

#inventintel-accordion 
.accordion-body
em {
    font-size: 16px;
    color: #1F1300;
    font-style: italic;
    font-weight: 700;
}

#inventintel-accordion
.accordion-item {
    border: 1px solid #625A4D;
    border-radius: 5px;
    margin-bottom: 10px;
}

#inventintel-accordion
.accordion-header {
    font-family: "Roboto Condensed", sans-serif;
    padding: 0;
}

#inventintel-accordion
.accordion-button.collapsed {
    background-color: #BCB8B3;
    color: #1F1300;
    font-size: 24px;
    font-weight: 400;
}

#inventintel-accordion
.accordion-button:not(.collapsed) {
    background-color: #8EB30A;
    color: #1F1300;
    border-color: #E2E73E;
    font-size: 24px;
    font-weight: 500;
}

/* ----- Página: Inventario Inteligente ----- */
/* Banner Contacto */
/* Estilo del container */
.invinteligente-container
.inventinelbanner {
    background-image: url(/images/inventintel-banner.jpeg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    object-fit: fill;
    width: 100%;
    height: 550px;
}

@media (max-width: 576px) {
    .invinteligente-container
    .inventinelbanner  {
    height: 600px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .invinteligente-container
    .inventinelbanner  {
    height: 560px;
    }
}

/* Estilo del texto */
.inventinelbanner
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    color: #E9E7E6;
}

.inventinelbanner
p,
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    color: #E9E7E6;
}

.inventinelbanner
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.inventinelbanner
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC ; 
    color: #352B1A;
}

/* ----- Página: Inventario Inteligente ----- */
/* Ventajas del Inventario Inteligente */
/* Estilo del container */
.invinteligente-container
.ventajasinventintel {
    background-color: #F8F9FA;
}

.invinteligente-container
.ventajasinventintel
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #625A4D;
}

.invinteligente-container
.ventajasinventintel
p,
span {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #1F1300;
}

.invinteligente-container
.ventajasinventintel
em {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
}

.ventajasinventintel
.icon-inventintel {
    width: 25px;
    height: 25px;
    color: #625A4D;
}

.ventajasinventintel
.inventintel-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
}

.inventintel-container
.inventintel-img {
    border-radius: 2%;
    height: 600px;
}

@media (max-width: 576px) {
    .inventintel-container
    .inventintel-img  {
    height: 300px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .inventintel-container
    .inventintel-img  {
    height: 400px;
    }
}

/* ---------- Página: Inventario Inteligente ------- */
/* Por qué integrar un inventario inteligente */
/* Estilo del Container */
.invinteligente-container
.intinvenintel {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

.invinteligente-container
.intinvenintel
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

.invinteligente-container
.intinvenintel
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.invinteligente-container
.intinvenintel
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
}

.intinvenintel
.icon-inventintel {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

/* ----- Página: Retail data ----- */
/* Heroarea */
/* Estilo del container */
.retaildata {
    background-image: url(/images/retaildata.jpeg);
    background-size: cover;
    overflow: hidden;
    background-position: center;
    height: 500px;
}

@media (max-width: 576px) {
    .retaildata {
        height: 450px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .retaildata {
        height: 350px;
    }
}

.retaildata
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

.retaildata
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Retail data ----- */
/* Artículo */
/* Estilo del container */
.retaildata-container {
    background-color: #F8F9FA;
    height: fit-content;
}

/* Descripción del inventario inteligente */
.retaildata-container
.descripcionretaildata {
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retaildata-container
.imgcenter {
    width: 100%;
    height: 25rem;
    border-radius: 1%;
    object-fit: cover;
}

/* Texto Descripción retail data */
.retaildata-container
.descripcionretaildata
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.retaildata-container
.descripcionretaildata
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;                            color: #625A4D;  
}

.retaildata-container
.descripcionretaildata
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

.retaildata-container
.descripcionretaildata
em {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
    color: #1F1300;
}

/* ----- Página: Retail data ----- */
/* Incluye */
/* Estilo del Container */
.retaildata-container
.retaildata-soluciones {
    background-color: #F8F9FA;
}

/* Estilo del texto */
.retaildata-container
.retaildata-soluciones
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}


/* Estilo de la img */
.retaildata-soluciones
.img-retaildata {
    background-color: #F8F9FA;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    max-width: 100%;
    height: 32rem;
    border-radius: 2%;
}

@media (max-width: 576px) {
    .retaildata-soluciones
    .img-retaildata {
        height: 15rem;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .retaildata-soluciones
    .img-retaildata {
        height: 36rem;
    }
}

/* Estilo del accordion */
#retaildata-accordion 
.accordion-body {
    font-family: "Roboto Slab", sans-serif;
    background-color: #F8F9FA;
    padding: 15px;
    font-size: 16px;
    color: #1F1300;
}

#retaildata-accordion 
.accordion-body
em {
    font-size: 16px;
    color: #1F1300;
    font-style: italic;
    font-weight: 700;
}

#retaildata-accordion
.accordion-item {
    border: 1px solid #625A4D;
    border-radius: 5px;
    margin-bottom: 10px;
}

#retaildata-accordion
.accordion-header {
    font-family: "Roboto Condensed", sans-serif;
    padding: 0;
}

#retaildata-accordion
.accordion-button.collapsed {
    background-color: #BCB8B3;
    color: #1F1300;
    font-size: 24px;
    font-weight: 400;
}

#retaildata-accordion
.accordion-button:not(.collapsed) {
    background-color: #8EB30A;
    color: #1F1300;
    border-color: #E2E73E;
    font-size: 24px;
    font-weight: 500;
}

#retaildata-accordion 
.accordion-icon {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

/* ----- Página: Retail data ----- */
/* Banner Contacto */
/* Estilo del container */
.retaildata-container
.retaildatabanner {
    background-image: url(/images/banner-retaildata2.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    object-fit: fill;
    width: 100%;
    height: 550px;
}

.retaildatabanner
.retaldatabanner-body {
    display: flex;
    justify-content: start;
}

.retaildatabanner
.retaldatabanner-button {
    display: flex;
    justify-content: start;
}

@media (max-width: 576px) {
    .retaildata-container
    .retaildatabanner  {
    height: 650px;
    }

    .retaildatabanner
    .retaldatabanner-body {
    display: flex;
    justify-content: center;
    }

    .retaildatabanner
    .retaldatabanner-button {
    display: flex;
    justify-content: center;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .retaildata-container
    .retaildatabanner  {
    height: 560px;
    }
    
    .retaildatabanner
    .retaldatabanner-body {
    display: flex;
    justify-content: center;
    }

    .retaildatabanner
    .retaldatabanner-button {
    display: flex;
    justify-content: center;
    }
}

/* Estilo del texto */
.retaildatabanner
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    color: #E9E7E6;
}

.retaildatabanner
p,
a {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    color: #E9E7E6;
}

.retaildatabanner
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.retaildatabanner
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC ; 
    color: #352B1A;
}

/* ----- Página: Retail data ----- */
/* Beneficios retail data */
/* Estilo del container */
.retaildata-container
.beneficiosretaildata {
    background-color: #F8F9FA;
}

.retaildata-container
.beneficiosretaildata
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #625A4D;
}

.retaildata-container
.beneficiosretaildata
p,
span {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #1F1300;
}

.retaildata-container
.beneficiosretaildata
em {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
}

.beneficiosretaildata
.icon-retaildata {
    width: 25px;
    height: 25px;
    color: #625A4D;
}

.beneficiosretaildata
.iconlist-retaildata {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

.beneficiosretaildata
.retaildata-img {
    border-radius: 2%;
    height: 690px;
    object-fit: cover;
}

@media (max-width: 576px) {
    .beneficiosretaildata
    .retaildata-img  {
    height: 300px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .beneficiosretaildata
    .retaildata-img  {
    height: 400px;
    }
}

/* ---------- Página: Retail data ------- */
/* Por qué integrar retail data */
/* Estilo del Container */
.retaildata-container
.inte-retaildata {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

.retaildata-container
.inte-retaildata
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

.retaildata-container
.inte-retaildata
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.retaildata-container
.inte-retaildata
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
}

.inte-retaildata
.icon-intretaildata {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

/* ----- Página: Contacto ----- */
/* Heroarea */
/* Estilo del container */
.pag-contacto {
    background-image: url(/images/pag-contacto.jpg);
    background-size: cover;
    overflow: hidden;
    background-position: center;
    height: 500px;
}

@media (max-width: 576px) {
    .pag-contacto {
        height: 450px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .pag-contacto {
        height: 350px;
    }
}

.pag-contacto
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

.pag-contacto
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Contacto ----- */
/* Forma de contacto */
/* Estilo del container */
.contactform-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

/* Estilo del Estilo General */
.pag-contacto
.contactform-container
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

/* Estilo de la forma de contacto */
#miFormulario
.icon-contacto {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

#miFormulario
.icon-tooltip {
    width: 15px;
    height: 15px;
    color: #625A4D;
}

#miFormulario
label {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

#miFormulario
.input-asunto {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

#miFormulario
.option-dis {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #625A4D;
}

#miFormulario
.form-select {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

#miFormulario
.form-select
option:checked {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 600;
    color: #1F1300;
}

#miFormulario
.contacto-sombra {
    box-shadow: 5px 5px 5px rgba(187, 209, 108, 0.5);
}

.contactform-container
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.contactform-container
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

/* Modal */
.contactform-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.contactform-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC; 
    color: #352B1A;
}

.contactform-container
.modal-title
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.contactform-container
.modal-body
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

.contactform-container
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.contactform-container
.nosotros-container
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

/* ----- Página: Nosotros ----- */
/* Heroarea */
/* Estilo del container */
.pag-nosotros {
    background-image: url(/images/nosotros-banner.jpeg);
    background-size: cover;
    overflow: hidden;
    background-position: center;
    height: 500px;
}

@media (max-width: 576px) {
    .pag-nosotros {
        height: 450px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .pag-nosotros {
        height: 350px;
    }
}

.pag-nosotros
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

.pag-nosotros
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Nosotros ----- */
/* Quién es GCSS */
/* Estilo del container */
.nosotros-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
}

.nosotros-container
.img-nosotrosintro {
    border-radius: 2%;
    height: 580px;
    object-fit: cover;
}

@media (max-width: 576px) {
    .nosotros-container
    .img-nosotrosintro {
        height: 300px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .nosotros-container
    .img-nosotrosintro  {
        width: 100%;
        height: 400px;
    }
}

.nosotros-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #352B1A;
}

.nosotros-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.nosotros-container
.lista-atributos {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #352B1A;
}

.nosotros-container
.icon-nosotros {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

.nosotros-container
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.nosotros-container
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

/* ----- Página: Nosotros ----- */
/* Misión Visión */
/* Estilo del container */
.misionvision-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #352B1A;
}

.misionvision-container 
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #352B1A;
}

.misionvision-container 
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

/* ----- Página: Nosotros ----- */
/* Testimonios */
/* Estilo del container */
.testimonio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #F8F9FA;
}

.testimonio-container 
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #352B1A;
}

.testimonio-container 
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}


.testimonio-container
.testimonio-card {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    background-color:#F5F5F4;
    height: 35rem;
    border-radius: 2%;
    filter: drop-shadow(#BCB8B3 0.5rem 0.5rem 10px);
}

@media (max-width: 576px) {
    .testimonio-container
    .testimonio-card{
        height: 30rem;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .testimonio-container
    .testimonio-card  {
        height: 35rem;
    }
}

.testimonio-card 
blockquote {
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #352B1A;
}

.testimonio-card 
h4 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.testimonio-card 
h5 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #A5A199;
}

.testimonio-card 
.profileavatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
}

/* ----- Página: Nosotros ----- */
/* ------------ Banner Contacto ------------ */
/* Estilo del container */
.nosotroscontacto-container {
    background-image: url(/images/banner-contactame.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #D2D0CC;
    height: fit-content;
}

/* Estilo del texto */
.nosotroscontacto-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

.nosotroscontacto-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

/* Estilo del button */
.nosotroscontacto-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.nosotroscontacto-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC; 
    color: #352B1A;
}

/* ----- Página: Nosotros ----- */
/* Por qué GC Security Solutions */
/* Estilo del container */
.partner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #F8F9FA;
}

.partner-container
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 32.36;
    font-weight: bold;
    color: #625A4D;
}

.partner-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #1F1300;
}

.partner-container
em {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: 700;
}

.partner-container
.icon-partner {
    width: 20px;
    height: 20px;
    color: #625A4D;
}

/* ----- Página: Servicios ----- */
/* Heroarea */
/* Estilo del container */
.pagServicios-container {
    background-image: url(/images/antenas-seguridad.jpeg);
    background-size: cover;
    overflow: hidden;
    background-position: top;
    height: 500px;
}

@media (max-width: 576px) {
    .pagServicios-container {
        height: 450px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .pagServicios-container {
        height: 350px;
    }
}

.pagServicios-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #E9E7E6;
}

.pagServicios-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #E9E7E6;
}

/* ----- Página: Servicios ----- */
/* Servicios */
/* Estilo del container */
.secServicios-container {
    background-color: #F8F9FA;
}

.secServicios-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

.secServicios-container
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.secServicios-container
.titulo-cards {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: normal;
    color: #E9E7E6;
}

.secServicios-container
.texto-cards {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #E9E7E6;
}

.secServicios-container
.icon-sensores {
    width: 25px;
    height: 25px;
}

/* ----- Página: Servicios ----- */
/* Banner evaluación */
/* Estilo del container */
.serviciosEvaluacion-container {
    background-image: url(/images/beneficios-retaildataimg.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #D2D0CC;
    height: fit-content;
}

/* Estilo del texto */
.serviciosEvaluacion-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 52.36;
    font-weight: bold;
    color: #E9E7E6;
}

.serviciosEvaluacion-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20;
    font-weight: normal;
    color: #E9E7E6;
}

/* Estilo del button */
.serviciosEvaluacion-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.serviciosEvaluacion-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC; 
    color: #352B1A;
}

/* ----- Página: Servicios ----- */
/* Contacto */
/* Estilo del container */
.serviciosUbicacion-container {
    display: flex;
    justify-content: center;
    align-items: start;
    background-color: rgba(53, 43, 26, 0.2);
}

/* Estilo del iframe */
.serviciosUbicacion-container
.mapResponsive {
    width: 580px;
    height: 780px;
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 576px) {
    .serviciosUbicacion-container
    .mapResponsive {
        height: 500px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .serviciosUbicacion-container
    .mapResponsive {
        width: 1050px;
        height: 600px;
    }
}

.serviciosUbicacion-container
.mapResponsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.serviciosUbicacion-container
.mapContent {
    min-height: 100%;
}

#miFormulario
.icon-serTooltip {
    width: 15px;
    height: 15px;
    color: #1F1300;
}

.serviciosUbicacion-container
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 20px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.serviciosUbicacion-container
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

/* Modal */
.serviciosUbicacion-container
.buttonSecundario-claro {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px; 
    background-color: none; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: 1px solid #D2D0CC;
}

.serviciosUbicacion-container
.buttonSecundario-claro:hover { 
    background-color: #D2D0CC; 
    color: #352B1A;
}

.serviciosUbicacion-container
.modal-title
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #1F1300;
}

.serviciosUbicacion-container
.modal-body
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #1F1300;
}

.serviciosUbicacion-container
.buttonPrincipal {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px; 
    background-color: #A5C23B ; 
    color: #352B1A;
    padding: 8px 5px;
    border-radius: 6px;
    border: none;
}

.serviciosUbicacion-container
.nosotros-container
.buttonPrincipal:hover { 
    background-color: #8EB30A ; 
    color: #352B1A;
}

/* ----- Página: Evaluación ----- */
/* Heroarea */
/* Estilo del container */
.autoevaluacion-container {
    background-image: url(/images/antenas-seguridad.jpeg);
    background-size: cover;
    overflow: hidden;
    background-position: top;
    height: 500px;
}

@media (max-width: 576px) {
    .autoevaluacion-container {
        height: 450px;
    }
}

@media (min-width: 577px) and (max-width: 810px) {
    .autoevaluacion-container {
        height: 350px;
    }
}

.autoevaluacion-container
p {
    font-family: "Roboto Slab", sans-serif;
    font-weight: normal;
    color: #E9E7E6;
}

.autoevaluacion-container
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #E9E7E6;
}