html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Open Sans', sans-serif;
}
header {
  background-color: #f8f9fa;
}
section {
  padding: 80px 20px;
}
#hero {
  background: url('../img/bg-banner2.jpg?text=Bienvenidos+a+Brokeris') no-repeat center center;
  background-size: cover;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}
#hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Oscurece */
  z-index: 0;
}

.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-sub {
  font-size: 0.9rem; /* Más pequeño */
  display: block;
  margin-top: 10px;
  text-align: center;
}	



footer {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.heading {
    width: 80%;
}
.fea i {
    font-size: 39px;
    color: #AAC932;
    margin-top: 7px;
}
.pull-left {
    float: left !important;
}

.fea-img {
    width: 20%;
}

.pull-right {
    float: right !important;
}

/* LIstado */
.custom-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.custom-list li {
  position: relative;
  padding-left: 2em; /* deja espacio para el ícono */
  text-align: justify;
}

.custom-list li::before {
  content: "\f18e"; /* Unicode del ícono fa-arrow-circle-o-right en FA 4.7.0 */
  font-family: FontAwesome;
  font-size: 1em;
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #28a745; /* verde */
}

.service-box {
  border: 1px solid #ccc;        /* Borde visible */
  padding: 20px;                 /* Espacio interno */
  margin-bottom: 20px;           /* Separación entre filas (en responsive) */
  border-radius: 8px;            /* Bordes redondeados opcional */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  background-color: #fff;        /* Fondo blanco para mejor contraste */
  min-height:200px;
}

.imghvr-fold-up figcaption {
	background-color: rgb(170, 201, 50) !important;
	color: white;
}
/* Este corrige el fondo animado que aparece al plegarse */
	.imghvr-fold-up::before {
	background-color: rgb(170, 201, 50) !important;
}

.imghvr-fold-up {
	background-color: rgb(170, 201, 50) !important;
}


.icon-box i {
  font-size: 3rem;               /* Tamaño grande para el ícono */
  color: #AAC932;                /* color-green equivalente en Bootstrap */
  margin-bottom: 10px;
  display: inline-block;
}

.service-box:hover {
  border-color: #28a745;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.CredMenu{
	padding:10px;
	font-size:0.8em;
}

/* botonera */
.nav-link {
  position: relative;
  display: inline-block;
  color: #000; /* color base */
  transition: color 0.3s ease;
  padding: 5px 0;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: #AAC932; /* color del efecto */
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #AAC932; /* color del texto en hover */
}

.nav-link:hover::after {
  width: 100%;
}
/* fin botonera */


.ser-text{
	font-size:17px;
}