/* ESTILO DEL HEAD */

.hero {
    background: linear-gradient(rgba(0, 123, 255, 0.8), rgba(0, 86, 179, 0.9)),
    url("img/encacorp.jpg") center/cover no-repeat;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    }

/* ESTILOS DEL ESPACIO DE INDEX EN BODY */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

div.container.mt-5{
    margin-top: auto;
}

/* QUE ES GRUCOMER */

p.text-center{
    font-style: italic;

}

h2.mt-4{
    text-align: center;
    margin-bottom: 30px;
}

h4{
    text-align: center;
}

p{
    text-align: justify;
}

ul.card1{
    text-align: center;
}

p.co-ub{
    text-align: center;
}
p.co-ub-es{
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

h1.display-3{
    text-align: center;
    margin-top: 60px;
    color: black;
}
p.lead{
    text-align: center;
    font-style: italic;
}

p.text-line{
    text-align: center;
    color: rgba(0, 123, 255, 0.8);
}

h2.nosotros{
    text-align: center;
    margin-top: 30px;
    color:rgba(0, 123, 255, 0.8);
    font-size: 40px;
    font-weight: bold;
}

#nosotros {
  scroll-margin-top: 80px; /* ajusta según la altura de tu header */
}

h2.mt-4 {
  margin-top: 10px; /* antes estaba en 30px */
}
html {
  scroll-behavior: smooth;
}

/* FOOTER */

p.footer{
    text-align: center;
    font-style: italic;
}

img.footer{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 160px;
    height: auto;
}
h5.fw-bold1{
    text-align: center;
}

h4{
    background-color: rgb(235, 237, 243);
}

                    /* ANIMACIONES EN TODO */

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.btn {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

                    /* HERO ANIMACIONES */

.hero h1 {
  animation: fadeInDown 1s ease forwards;
}
.hero p {
  animation: fadeInUp 1.5s ease forwards;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ANIMACIONES PARA TODO EN SERVICIOS */


/* Animación de zoom al pasar el puntero */
.img-fluid {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.img-fluid:hover {
  transform: scale(1.08); /* zoom suave */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* sombra más intensa */
}

html {
  scroll-behavior: smooth;
}

#service {
  scroll-margin-top: 80px; /* ajusta según la altura de tu navbar fija */
}

/* CONTENIDO DE SERVICIOS */

h3{
  text-align: center;
}

p{
  text-align: center;
}

h5{
  text-align: center;
  font-style: italic;
}

ul{
  text-align: center;
  list-style-type: none;
}

/* WORK.HTML CONFIG */

.card h3, .card p {
  margin-bottom: 0.25rem; /* espacio mínimo entre título y texto */
}

/* Clase exclusiva para descripciones de cursos */
.cursos-card {
  text-align: left;
}